UX/UI Design | August, 2020

National Weather Service

Government Agency Redesign

Concept Project | Case Study

Desktop Prototype
Mobile Prototype
My Role
User Research, Definition & Ideation, Wireframing, Prototyping, Usability Testing
Partner
Danielle Bridgewater: User Research, Definition & Ideation
Tools
Figma, Miro, Google Docs
Timeframe
4 Weeks

Problem

The National Weather Service website was created to provide weather, water, climate data, forecasts and warnings for the protection of life and property and enhancement of the national economy. The website appears to be difficult to navigate and is in need of a redesign.

Solution

Redesign the National Weather Service website to help users easily find information related to severe weather and wildfires in their area.

User Research

This project was especially timely as the Silverado fire was burning about 3 miles away from my house at the time, which was part of the reason why we focused on evaluating how easy it was to find wildfire information on the NWS website. It was on everyone's mind.

We planned and conducted 6 interviews with users who were also in the area of the actively burning fires. Users were asked their first impressions of the website as well as to find information related to wildfires in their area.

All users expressed problems navigating through the current website in general, as well the issues outlined below:
Homepage
  • Current wildfire info is not obvious
  • Evacuation orders are not easy to find
Navigation
  • Couldn’t find link to active wildfires
  • Order of links is confusing (IA)
Search
  • Should auto-detect user location
Homepage Map
  • Users were unsure what to do on the map
  • Add zoom controls to map
  • Map legend is too small
Fire Map
  • Fire map is hard to find
  • Add zoom controls to map
  • Map legend is too small

User Path

Currently, the user needs to select the 'Wildfire' link from 20 others in the 'Safety' section of the main menu, then navigate through three screens before they get to detailed fire information like the actual fire location on a map, evacuation orders, and containment:

Desktop User Path

The current website is not responsive and does not have a mobile menu. Therefore the user path to find wildfire information is more challenging. On mobile, the user must blind select the 'Safety' link from the main menu, then navigate through four screens before getting to detailed fire information:

Mobile User Path

Heuristic Analysis

Primary Navigation

Primary navigation is bloated with some dropdowns containing up to 20 links with some very similar, almost duplicate entries

Secondary Navigation

The location of the secondary nav looks like it should be related to the map just below it, but it’s not

Search

Clicking on the link in the primary navigation takes the user to a separate page where the only thing on it is a search box

Footer

The footer navigation is overwhelming and hard to traverse

Ideation

After empathizing with our users and defining the problem, we set about coming up with solutions to help users find accurate severe weather and wildfire information from the National Weather Service website.
User Insight Statement:
Samantha is a busy real estate agent from Santa Clarita, CA. She visits the National Weather Service website frequently to stay informed about severe weather and wildfires for her job, her family, and her health. She needs to find accurate severe weather and wildfire information quickly and easily while on the go.
Feature Prioritization
Interview data was compiled into an Affinity Diagram and Empathy map. From these we created a feature prioritization matrix where we identified the major pain points users had when completing the research tasks of finding accurate severe weather and wildfire information on www.weather.gov.
Most important to Users:
  • Site is outdated and hard to navigate
  • Evacuation/Urgent info not prominent
  • Add zoom controls to homepage map
  • Website should auto update user’s location
  • Fire map is hard to find
Most important to Gov't Agency:
  • Homepage is outdated/confusing
  • No specific wildfire info on homepage
  • Website should auto update user’s location
Card Sorting
The existing / original sitemap had eight primary categories with up to as many as twenty secondary links. This created more work for the user to try to sort through each category hunting for the topic they were looking for.
Original Sitemap
After performing card sorting, we simplified the navigation by creating four primary categories that grouped similar pages along with sub-groups to further organize content. This made it much easier for users to find what they are looking for.
Updated Sitemap

Prototype / Wireframes

I'm working solo from this point on in the project.
Style Guide
The current National Weather service website is sorely outdated. The brand is indistinguishable, the graphics are inconsistent, there are no icons and the color palette overuses white and light blue.
‍
The goal with the redesign was to keep the vibrant colors and weather “feel” while condensing the spread out content into a quickly digestible dashboard that users could look at quickly and get useful information - in some cases emergency alerts.
Wireframe Sketches / Desktop
Working from the user path, I sketched wireframes to reflect the user's flow of searching for find accurate severe weather and wildfire information. I then turned those sketches into lo-fidelity wireframes using Figma.
Homepage Sketch
Wildfire Page Sketch
Homepage Lo-Fi
Wildfire Page Lo-Fi
Final Desktop Prototype
Wireframe Sketches / Mobile
The current website is not responsive and does not have a mobile menu. So I made sure to include a mobile menu overlay in the wireframe sketches and prototype.
Homepage Mobile Sketch
Mobile Menu Sketch
Final Mobile Prototype

Usability Testing

5 Usability tests were conducted using a combination of the Concurrent Think Aloud (CTA) method and the Concurrent Prodding (CP) moderation method.
Goal
Learn how users stay informed about severe weather and current wildfire events in California.
Assumptions:
  • Has access to reliable WiFi or cell data and no connection problems
  • Needs access to updated, accurate weather information
  • Lives in California or has friends or family there
  • Is potentially impacted by severe weather events
Constraints:
  • All data is placeholder and not accurate
  • Wildfire map is the only map built out
  • City search is not built out, ideally the map would auto update based on user's location
Changes Based on Testing Feedback:
Testers stated the highlight color behind the map warning labels was distracting.
I replaced the hover color with a white background highlight on-hover.
In an earlier version, testers stated that the side rail navigation was cumbersome and created work for the user.
I replaced the side rail accordion navigation with a mega-menu navigation to display all of the site navigation options at once.
Testers stated the temperature pills were not necessary on the Wildfire page and the breadcrumb was redundant.
I removed temperature pills from subpages, and separated / shortened the breadcrumbs to be the page title and just the word ‘Back’.

Key Takeaways

  • Users liked the dark mode theme
  • Users wanted to interact with the ‘Emergency Alerts’ and ‘Weather News’ and information card sections.
  • Map filters and dropdowns need to be more obvious. Navigation menu is a little overwhelming, could use more contrast between categories and links
Next Steps:
  • Add categories, links and separations to navigation mega-menu
  • Build out more map features
- Previous Project -
Music Festival
Mobile App
- Next Project -
COVID-19 Response

Steve Dillon

Creative, problem-solving, Product Designer with 8+ years experience working with industry leaders, agencies, and start-ups.