...

The National Hurricane Center Website

UX RESEARCH TEAM:
Erik Soriano
Baoyi Gan

ROLE:
UX Research
Data Analysis
Heuristics Evaluation

TIMELINE:
5 Weeks Sprint

TOOLS:
Figma
Excel
PowerPoint
Safari Browser

Executive 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. We had two evaluators during the heuristics evaluation, and six participants were recruited for the usability tests. Based on our findings, we discovered that, even though all users were able to complete all the tasks, they were displeased by the visual appearance of the website. After our data analysis, we created a report detailing all the opportunities and keepers, as well as design suggestions to address the issues, and also generated a mockup redesign for the client's consideration.

Objectives:

  • Perform a heuristics evaluation on the entire webpage to encounter any potential usability issues, as well as keepers and other hidden opportunities
  • Develop and complete a series of usability tests to analyse the overall usabilty of the website
  • Based on our findings, make suggestions to the design team to potentially solve the issues
  • Develop and deliver a redesign mockup to the client for their consideration
  • Create a style guide and templates based on our recommendations

Please Note: For the purpose of showcasing this project, only some of the pages from the reports will be included herein, therefore, you will see page numbers not following a direct sequence.

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.

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.


Heuristics Evaluation Report by Erik Soriano

Heuristics Evaluation Report by Erik Soriano

Phase 1:
Heuristics Evaluation

Getting to know the website

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.

Heuristics Evaluation Report by Erik Soriano

The four photos below show some examples of the highest severity problems we encountered amongst the two of us; 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.

UX Research: Card Sort Report by Erik Soriano
UX Research: Card Sort Report by Erik Soriano
UX Research: Card Sort Report by Erik Soriano
UX Research: Card Sort Report by Erik Soriano


Phase 2:
Usability Tests

Revisiting the Objectives

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.


Heuristics Evaluation Report by Erik Soriano

Recruiting the 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. At the end of each task, we also wanted to measure the user's satisfaction with a Single Ease Questions (SEQ), as well as post study questions using the System Usability Scale (SUS).


Task Metrics

Heuristics Evaluation Report by Erik Soriano

Heuristics Evaluation Report by Erik Soriano

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 slideshow below, but we go into more detail in the report.

Click here to access the full report

Phase 3:
Redesign + Style Guidelines

Our Redesign Suggestion

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).


Conclusion

At the end of this project,we were able to uncover and assess a total of 22 unique opportunities to improve the usability of the website for the National Hurricane Center in Miami, Florida. The most frequent themes we encountered were inconsistency in the user interface, text content, navigation, and use of colors.

The current webpage succeds at providing comprehensive information for users. Also, it keeps consistency at using blue as its main color. 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 mostly user interface elements. We learned alot during this research experience, especially that, user experience is 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 still solve their problem on the website. We learned that it is paramount to always understand the users, and pay attention to all their comments and behavior, since the product is about them.

After everything we learned about interacting with users, we would have loved to recruit more user types to get a broader range of behaviors and opinions; due to time contraints, we were not able to recruit more people, but that is something we would consider in a future project. Perhaps, also include more stakeholders such as the programming team, or some of the weather scientists to understand their perspective in a website such as this one. We would also consider doing a summative comparative test, after this website gets redesigned to be able to test whether we were successful or not.