Design Document for NHC Website Redesign

Team: Laura Kurtzberg, Chanelle Ma, Armando Rubi
Date Created: Oct 3rd 2016
Date Last Updated: Oct 3rd 2016

Project Overview

Objective

A new design of the National Hurricane Center website will have the objective of presenting forecasts, data, and information generated by the NHC to both experts and the general public in a clear, efficient, and appealing way.

Link to Website documenting the design process of our whole class

It will be different from the current design of the NHC website in that there won’t be redundant links, and navigation options will be stripped to a few simplified options. This will create the make it easier for users to find exactly the forecast, document, or dataset they are looking for. While commercial weather websites focus on the local weather forecast, the new NHC website will have the advantage of maintaining focus on the specialized, scientific knowledge that the NHC website is frequently a reference for.

The main goals for this project are:

  • Move to a clear and appealing visual layout for all NHC pages
  • Reorganize navigation to optimize site for new and experienced users
  • Reorganize maps so that all layers/ mapped information are accessible in one place
  • Add additional navigation (footer nav) and links as needed

Rationale

An effective design of the National Hurricane Center website is crucial for people to prepare for hurricanes and better understand tropical storms. Additionally, a better design would allow specialists and people who need the technical advisory reports to reach the data they need more quickly, and even to discover more features that could be useful for them.

UX Evaluation

Heuristic Review

Visibility of system status It is clear when the site has loaded, but the map which is the main focus of the homepage could benefit from a timestamp and clear distinction between current information and future forecasts.
Match between system and real world The match between the website features and the real world is there – the map is easily translated to real world information. For the NHC site this is fairly straightforward.
User Control and Freedom The user doesn’t have much control over how they receive and process information on the site beyond clicking through to downloadable images and pdfs. Greater control could imply more formats for download, advanced search of available data, and greater accessibility to the experimental online tools.
Consistency and Standards Consistency needs to be improved, especially in style and layout. All pages should share an overarching style, and layouts should be constrained to a few templates, but currently many pages are set up in different layouts and styles. Little details, like color coding of storms on the map, aren’t always consistent but should be.
Error Prevention Error prevention isn’t as relevant for this site, since there aren’t many errors that users can fall into. However, a better organization would allow users to find the correct information and not get lost in the site.
Recognition rather than recall Most of the tasks on the website require recall, because the combination of jargon and volume of information makes it difficult to navigate.
Flexibility and efficiency of use This heuristic represents one of the main areas of improvement for the NHC site. For a new user, efficiency is difficult because of the vague navigation options and lack of clear pathways towards common goals. For the experienced user, shortcuts aren’t present but should be.
Aesthetic and minimalist design The current design is not at all minimalist, and the aesthetic looks like the ‘default’ options for everything. Some meaningful aesthetic choices are present, such as blue links and red alerts.
Help users recognize, diagnose, and recover from errors There isn’t any way for a new user to recognize that their successive clicks may actually be taking them farther away from the information they actually want. The only ‘exit’ option is to return to the homepage. Breadcrumbs may help alleviate this.
Help and Documentation The site could benefit from including some kind of help or documentation, for example ‘how to use this tool’, since at the moment it has none

Competitive Audit

The evaluations, or competitive audits, helped us understand what strengths and weaknesses exist in websites that serve a similar purpose to our end goal, as well as websites that are strong and can serve as examples of best practice as we seek to optimize our own design. I chose to audit Forcast.io, Poncho and Open Street Map.
Read my evaluations here.

User Research

I interviewed two potential users of the NHC website. First, I interviewed a woman, Barbara, with two school age children, because I reasoned that her use of the website would be geared towards getting information that would best protect herself and her family. She was most concerned with two main pieces of information: hurricane category and wind speed. She said that with these two facts, she could decide whether or not she would stay or evacuate, as well as whether or not she needed to go through the preparedness checklist of buying nonperishable food, water, gas, etc. It is interesting to note that Barbara gets all her hurricane information from the TV news, and is not aware of the NHC website.

Next, I interviewed a homeowner and landlord, Najeeb, to gain the additional perspective of someone who needs to protect property as well as themselves. Najeeb had already experienced various hurricanes throughout his life, and he noted that his historic property had also withstood many hurricanes. Interestingly, he was interested in the same two information points as Barbara was – wind speed and hurricane category. He said that he got his information from the TV and radio, and occasionally he would use websites as well. He did mention that he could visit the NHC website on occasion, but only rarely would he use it to inform his decision making.

User Audience

The audience of the National Hurricane Center website is a broad one, and this is one of the main challenges that we face with the redesign project. The main question here is, ‘how can we efficiently serve specialists and expert users without losing the beginners who might come to the site for basic information?’ Some users in this broad audience might include climate researchers, K-12 teachers, news reporters, sailing enthusiasts, weather website content administrators, and more.

User Persona

Hypothetical user Mari is a reporter and creator of online content for Telemundo. She uses the NHC website to communicate important hurricane updates to the public, especially through social media. She wants to understand some of the more advanced information but has trouble finding documentation that explains the reports and experimental tools.

The full screen version of the persona document for Mari is visible online here.

User Scenarios

Scenario 1

Mari checks the NHC homepage on her desktop computer at work to find out the current location of Hurricane Matthew, then posts a facebook update (and tweet) to her many followers.

Scenario 2

Mari want to write an article in Spanish which explains the percent chance of Hurricane Matthew passing through Miami, so she looks at the NHC forecasts page and clicks on 2-day forecast and 5-day forecast. She wants to know more about the cone of uncertainty so that she can communicate a percentage to her audience, but she can’t find documentation about the maps she is looking at. She ends up searching for more information on other websites before returning to the NHC site.

Scenario 3

Mari decides to put together an online guide for her employer that will cover all aspects of hurricane preparedness and evacuation titled “A Hurricane is Coming – What Should I do?”. She wants to include links to the most relevant parts of the NHC website, so that users can check the current hurricane conditions, but she is worried that her audience won’t understand the site. She ends up writing the conditions in her guide herself and thinking to herself that she will have to update the guide every time a hurricane approaches.

Design Considerations

Concept Map

After brainstorming possible areas of improvement using affinity mapping, many ideas for the redesign of the NHC website emerged. In this concept map, these ideas are tied together and organized into four main improvement areas: Data, Navigation, Accessibility, and Style. The map shows connections between the various improvement ideas.

Design Outline

Sitemap

The following chart is a sitemap of the most important pages of the original NHC website and the organization layout of the site itself.
sitemap chart

User Flows

The user flows shown in this chart represent various scenarios that our hypothetical user, Mari, would go through as she navigates the site. Each step that Mari needs to go through is a circle or square on the chart.

user flows chart

The complete design document for this project can be viewed in document format at this link.

Leave a Reply

Your email address will not be published. Required fields are marked *