Team:
Erik Soriano
Baoyi G.
Role:
UX Design
Research
Tools:
Figma
Excel
Timeline:
5 Week Sprint
Spring 2022
Summary
Our team performed a series of heuristics evaluations, as well as usability tests on the website of the National Hurricane center (NCH) based in Miami, Florida. Over the course of one month, we evaluated the overall usability of this site, and focused on uncovering any unmet needs, and issues that could hinder the user experience. Six participants were recruited for the study. Based on the findings, we discovered that, even though all users were able to complete all the tasks, there were evident opportunities to improve the appearance of the website. After the data synthesis, a report was generated detailing all the opportunities and keepers, as well as design suggestions.
Objectives
• Perform a heuristics evaluation on the entire webpage to encounter any hidden opportunities
• Perform usability tests to analyze the overall usability of the website
• Make design suggestions, including a style guide and templates based on the findings
Product Description
The NHC website provides information about weather disturbances such as tropical storms, tropical cyclones, hurricanes, as well as other useful information such as graphs, reports and archives for users who are interested in research. The website consists of a navigation bar that helps users access all the other components of the site, this is followed by the news section which provides daily updates on any storm currently occurring, or with chances of forming.
The main feature of the page is a large map that shows the location of many hurricanes, and disturbances, and allows users to see different ocean views and also links to other important data such as graphs and reports. The rest of the website consists of detailed info on advisories, and archives for people who wantmore in depth information. The date of the website we focused on is Aug. 29th, 2021.
Click here to view the website of the National Hurricane Center, that our team evaluated.
Introduction
Our research team was tasked with conducting a study of the current website for the National Hurricane Center (NHC) in Miami, Florida. Over the course of 5 weeks, we conducted a complete study of the NHC website, in three phases: phase one, Heuristics Evaluation; phase two, Usability Testing; and phase three, a website redesign with guidelines. We got familiar with the website and its navigation and components through the initial heuristic evaluation, while the usability tests allowed us to confirm some of the problems we had found, and helped us understand who the users's behaviors ad motivations.
Heuristics Evaluation
We utilized the 10 heuristics created by Jakob Nielsen to better understand any potential issues that were hindering the usability of the site. During the briefing sessions with the client, they mentioned that their website had a low engagement rate amongst average users, who normally visit during hurricane seasons, or to get quick updates. They wanted to understand if there is anything that could be improved, to make the website more user-friendly and modern-looking.
These photos show some examples of the highest severity problems we encountered amongst the team; we merged any duplicate problems, and focused on the highest level issues. This would be pivotal when we moved on the next phase to determine whether the issues we encountered were in fact hindering usability.
Usability Testing
We spent the next two weeks, creating all the test materials and coming up with test objectives, and recruiting participants for the usability studies. We already had an idea of what type of problems the website was having, but nothing can replace actual users navigating the site, and telling us their voices and pain points as they performed the tasks.
Methods: participants
We recruited a total of six participants, all who were Florida locals, and have experienced hurricane seasons. This helped us create tasks/scenarios that would resonate with users, and would help uncover any unmet needs and opportunities. We based the four main tasks on actions an average user would do while visiting the NHC website. Since we mainly had to focus on the homepage, we created tasks that would have different paths for users to take; some longer than others, this way we would be able to measure the efficiency, and effectiveness of the site.
Opportunities Found
We found a total of 22 unique problems that needed to be addressed, in order to increase the usability, and potentially increase user engagement. We included some examples in the section below, but we go into more detail in the report.
Redesigned Suggestions
We came to the conclusion that, while all users were able to complete all tasks using the existing version of the website, we could improve the usability with more consistency in the user interface. Things such as button placement, increasing line-height between paragraphs, creating specific color states for hyperlinked texts, etc. could create a more user-friendly experience for people, and thus, increase usee engagement.
Below you will find some examples comparing the previous version (left) with our redesign suggestions (right).
Design Guidelines
Our final deliverables to the National Hurricane Center also included design guidelines, so their in-house design team can easily replicate this redesign suggestions. We instructed them on exact, actionable guidelines including button sizing, typography, color palette, and of course, how to improve the map.
Final Redesign
These are the high-fidelity wireframes of our redesigned suggestions. We focused on the home page since that was what our stakeholders wanted. The primary changes were on the navigation bar, the news and announcements section and the interactive map. We wanted the website to look and feel more contemporary, and to utilize more of their signature blue color palette. We understand that this is a research/scientic-driven website, therefore there is a lot of content to display, but by reorganizing how content is displayed, users do not get distracted by appearance, and focus more on the tasks they need to complete.
Conclusion
The current webpage succeds at providing comprehensive information for users. The map has an easy-to-understand hurricane icons, and detailed key to explain it, the problem is that they are all the same color. In the case of the website for the National Hurricane Center, their main problems could easily be fixed with improved brandind guidelines, and consistent user interface elements. We learned a lot during this research experience, especially that user experience and behavior are affected by visual appearance, even if all the information needed is available from the start.
Reflection
One of the most important things we learned by utilizing the usability testing method is that sometimes, even if the original design intended for there to be an “optimal path”, some users have a totally different mental model, and thus, will attempt different paths to find the same solution. While this behavior is hard to predict even after a product is launched, the designer/development team should always safely assume that if something can go wrong with the ideal path, it will go wrong, and should consider alternative paths a user can take to solve their problem on the website.