top of page

Throughout this sprint...

I led a team of 4 UX Researchers and Designers to conduct user research, synthesize data, and implement design decisions to redesign The National Weather Service website. 
 

The Team

personal.avatar.png

My Role:

Project Manager and UX Designer

 

  • Managed sprint schedule

  • Delegated tasks 

  • Co-conducted User Interviews

  • Created a style guide and components library 

  • Facilitated Usability Testing and analyzed that data to inform Final Iteration 

  • Created and led a slidedeck presentation

Cindy C (UXD)


Karishma S (UXDR)


Juliette M (UXR)

​

What is The National Weather Service?

The National Weather Service is an agency of the United States federal government that is tasked with providing weather forecasts, warnings of hazardous weather, and other weather-related products to organizations and the public for the purposes of protection, safety, and general information.

​

The National Weather Service offers the most accurate weather information, but it's website is not being widely used. We wanted to know why and fix it.

What's the problem?

Users need to be able to quickly access both local and non-local weather information so that they can be best prepared to plan their day in advance.

Currently...

the problem.png

We began to formulate a research plan to solve these challenges

Research Methods

research methods.png

We started with a site map of the current NWS website, then compared the NWS to other commonly used weather websites.  We conducted user interviews and secondary research to learn even more about how the NWS is used, and how it could improve.  With that information we made an affinity map of all our data. ​

Compared to other sites

It was clear NWS wasn't measuring up to it's competitors, even though the site map showed it had the most accurate and extensive information of all the weather websites we researched. ​

We conducted 5 user interviews

With the goal of understanding who uses The NWS website, what they're looking for, and how they navigate other weather websites.

​

​

We asked questions like

Through affinity mapping we found...

That the typical users of the NWS website were Baby Boomers who needed information about daily forecast as well as information about weather emergencies, such as when would a weather system be moving through, how dangerous will it be, and how they should prepare for it.

Those insights led us to create a Proto Persona that could help guide our redesign.  Someone we could refer back to, to make sure we were empathetically designing for our user.

Meet Steve 👋 

With Steve in mind, our team asked

  • How might we give Steve local, accurate information of the weather?

  • How might we make evacuation plans easily accessible for Steve?

  • How might we make alerts obvious to Steve?

  • How might we give Steve the ability to have an emergency checklist at his fingertips.

Our solution?

To create an interface that lets Steve navigate emergency information and evacuation plans via a mobile website.

How Steve would use the NWS Site

Based on the user interviews, competitive analysis, the current site map and our secondary research, we knew Steve would probably navigate our site something like this:

We began sketching

With Steve's task flow in mind, our team began by sketching some iterations of how the NWS could better solve his problem and give him what he needed: simple location searching, a map within his zip code range, emergency warnings, and an emergency checklist.

Frame 47 (1).png

After sketching and discussing our sketches, we took the best elements from our sketches and began wireframing.

Then moved to wireframing

Homepage
Home.png

On the Homepage, we wanted to make searching location easier, as well as an obvious daily forecast.  If there's an emergency in a certain area, we designed a clickable emergency bar to appear toward the top of the screen. 

Emergency Alert Page
Emergency Information.png

On the Emergency Alert Page we gave users the ability to sign up for alerts via text, and/or download an emergency plan PDF. When users clicked the map on the homepage they were brought to the radar which included a Danger-Meter so users could visually gauge how dangerous a weather occurrence is.

We needed to test it

Our Objectives:

​

  • To test the accessibility of new features

​

  • To test the accessibility of upgraded features

​

  • Make it easier for users to complete tasks in less time

Our Methodology:

​

  • Quantitative & Qualitative data collected

​

  • Moderated

​

  • Remote & In person

The Task: 

​

  • Look at the hurricane alert

​

  • Sign up for emergency alerts

​

  • Look at the emergency preparedness kit

The Goals

Through testing we noticed...

Quantitative Data
Frame 93.png
Qualitative Data
Usability Testing Findings.png

So we went back to the drawing board to iterate our designs again.

Hi Fidelity Iteration

Home.png
Emergency Information.png
Colors and Assets.png

Hi-Fid Mockup Prototype

Looking Ahead

It would be interesting to retest our hi-fid prototype, as well as design for desktop, in addition to the mobile design.

What I learned

This redesign was a wild ride and I learned so much.  The research that we put into this sprint taught me a lot about how secondary research can inform designs in addition to user interviews.   It would be interesting to get even more perspectives about different parts of the NWS website, because it's so extensive and we barely scratched the surface.

bottom of page