Usability Report
By: Zack Colvett
Lafayette County Fire Dept.-
Focus: Local government service/public safety
Executive Summary:
This usability report evaluated the LCFD’s website and found problems that should be corrected relating to the design, layout, and content on the website. After the analysis using five heuristics, I have found somes changes that I propose are made including reformatting the menu bar, adding new content about the department, changing the heading of the home page to better brand the department, and changing the images on the home screen. These proposed changes will be evaluated using a usability test and a post test evaluation by the participants.
Introduction:
This usability report seeks to inspect and analyze the Lafayette County Fire Depts. website using heuristics related to aesthetics, efficiency, flexibility, consistency, and visibility. After the analysis this report will offer possible changes to offer viewers of the website a more positive experience. It will also put forth a usability test to evaluate the website before and after any changes are made and offer possible changes that the participant feels would be beneficial.
Inspection:
This site is the official website for the Lafayette County Fire Department located in Oxford, Mississippi. I chose this website because I am involved with the department and would like to help to make this website a useful tool for the community that we service and also have a positive look for those evaluating the department for funding and grants. The scope for this usability report encompases the design, layout, and content of the entire site. My ultimate goal for this is to layout different negative aspects of the site and give possible solutions and a possible redesign to make this website accurately portray who the LCFD is and what the department does for the community.
Landing Page-desktop
The focal point of the landing page has a few parts, the largest is a large block taking up half of the shown page with five rolling photos most of which do not have much to do with the department and are mostly blurry/pixelated. Above the photo block is a header bar with links to other parts of the website: resources, donations, how to join, calender, and helpful links. Above that bar, drawing the least amount of focus is the header with the department name and a search bar. The area previously mentioned with the department name is very basic colored black on grey with no image of the department emblem, patch or seal.
On farther down the page below the images is a list of contact numbers for the main station, the fax machine, fire coordinator, and dispatch non emergency number. This is all center aligned on the page in a list format. Below this is a section of upcoming events, linked to the google calendar, and a sliding column showing the department's Facebook feed with a link to the page.
The last section on the landing page includes a mini map showing where the central station is, the address, a “quick contact” box that goes to the department email followed by a second menu bar slightly smaller that the main bar but with the same links.
Landing Page-Mobile
On my Iphone 7, the landing page is fairly similar to that on my computer web browser, it much more compacted, the menu bar is now located within a drop down menu, and the rolling images are not formated to fit the screen. The mobile page is set up is one continuous column, where the facebook page and upcoming events were side by side on the desktop view, they are in a single column on the mobile view. It is obvious to see that this page is not formated to be ideal for a mobile device.
Content
Within the website there is very little content offered about the department leading to possible unanswered question, confusion, and an overall negative experience by viewers. There is, however, a page that offers a brief overview of the history of the department. There is nothing in the way of the services offered or performed by the department or the population that it serves. There are also very few images to capture the viewer's attention and offer a look into the life of a Lafayette County firefighter.
This report will focus on five heuristics to analyze the website and help to give a possible redesign of it. The five heuristics include:
- Aesthetic and minimalist design: How the design looks to the viewer, how it captures attention, and what could be done differently to give a better aesthetic and design.
- Flexibility and efficiency: Focuses on how efficient the website is, any redundancy or unnecessary information or links, and the usefulness of the menu bars.
- Match between system and the real world: How the information and design of the website matches to real world, basic language, and understandable information and links.
- Consistency and standards: showing consistency in the layout and information of the site to create an easily navigated page and understandable experience.
- Visibility of system status: Keeping the user informed and up to date.
Analysis:
Aesthetic and minimalist design:
The design and aesthetic of the department’s website is rather basic and overly minimalist. Although the basic design and layout somewhat mirrors the parent website for Lafayette County, it lacks different design, colors, and a creative look and layout to make the website interesting to the viewer and capture their attention. The slider of images seems to be the focus of the home page, the images are poorly formatted for the screen, some are irrelevant and outdated images, and all of them are blurry or pixilated. There are multiple menu bars containing the same tabs at the top and bottom of the page, the main menu bar stays at the top of that page as the viewer scrolls down. From a design standpoint, the header of the page, including the name, is very bland in color and layout. The black text on grey background with no logo does not capture the attention of the viewer, and it also lacks branding in the form of a logo for example.
Flexibility and efficiency:
From an efficiency standpoint, the website, especially the homepage, tends to load slowly specifically the box that shows the department’s facebook page. There are four links on the homepage that are all designed to take you to the homepage there is a home button that the very top right corner of the page, one on each menu bar, and then a link at the bottom of the page with the copyright, this seems rather inefficient and unnecessary. On the main menu bar, there is a drop down menu on the home button that includes only one tab that does not logically make sense to go there. On the other hand, there are a few tabs that could be grouped together into one information tab.
Match between system and the real world:
The department’s website does a good job matching the websites terminology to the real world, without use jargon and technical language that would not make sense to someone outside of the fire service. There is a lack of information about the department that should be included in an information or about us tab. In addition there is a map at the bottom of the home page as well as the address to Central Station, but there is nothing on the website that includes the locations to the other thirteen stations in the county.
Consistency and standards:
The website creates some confusion in consistency when it comes to the two tabs “resources” and “helpful links.” This could cause confusion because they both contain similar information except that resources are more department documents and helpful links are links to other websites. It seems like these could be combined into a drop down list under a single resources or information tab. In addition, there is a drop down that has a history tab under the home tab that seems that it should not go there, it is less discoverable in this location that it would be in a different place like and information or about us tab. There is also a place for links to social media but it only includes the Facebook page like and does not include the department's twitter account.
Visibility of system status:
The only validity of system status or keeping people informed is the place in the bottom right of the home page that shows upcoming events, and the link to the Google Calendar. On the previous website for the department there was a text box on the homepage in a place that would capture attention that included quick updates of what was going on with the department for example: the purchase of a new truck, department events, and beginning of training classes.
Proposed Redesign:
The focus for the proposed redesign centers around the layout of the menu bar, content included as it relates to information about the department currently and its history, and the images on the homepage.
The website as it is currently only includes the history of department, it does not include a section of who we are now and what we do now, my proposition is to change this to include an “About Us” tab on the menu bar with a drop down list that includes history, who we are, stations and apparatus, and a photo gallery. The menu bar would also be changed to have the tabs resources and helpful links combined together into the same page.
The history section would simply move the history tab from where it is currently located to the new location as mentioned above. For the addition of the who we are section, this would include information about the department currently, what we services we provide, and who we serve. In the stations and apparatus section, this would go back to what was included in a previous edition of the website where there was a picture of each station with a description of where it was located and who the station served. There would also be a picture of the different trucks located at each station with a small description of what they are and their duties performed.
As far as the photo gallery this could include images of different scenes, training, events, and various gatherings of the department. As far as the image slider on the homepage, the current images are mostly outdated, irrelevant, and unclear. My proposition would be to make this a single image and to take new high quality picture that accurately depict the department, this image could be a new photo of the front of central station with the bay doors open showing the current trucks, or this could be a group picture of the firefighters in front of central station.
In addition, an absolute necessary change to the website is the heading to the home page. As it is currently, it is bland and offers no branding to capture the attention of the viewer. At the very least, the department seal should be added to look similar to that of the department letterhead. The font, color and format of the title should also be changed for the same reason.
Usability Test:
A usability test would be performed prior to and after any aforementioned changes to the website are completed. The test would have the participant find different information on the website and the evaluator would evaluate any challenges the participant had and the ease of finding information. The participants would be provided with a survey at the end of the test with questions as to their opinions of the website, andy trouble they had, and any suggestions on possible changes.
Conclusion:
This report inspected and analyzed the website for the Lafayette County Fire Department. It used heuristics relating to aesthetics, efficiency, flexibility, consistency, and visibility to evaluate it and give feedback and ideas for a possible redesign to improve the site. Some of the suggestions included better branding, reformatting the menu bar, adding content about the department, adding a photo gallery, and changing the image on the home screen to something relevant and better quality. It also proposed a usability test to evaluate the website before and after any changes were made and have participants offer other suggestions for any other possible changes to make the website even better.