National Weather Service
Redesigning a mobile and desktop platform for users to intuitively access weather information
Overview
Objective: Research behaviors on how users navigate weather platforms and design Iterations on how users navigated our updated site, considering their behaviors and pain points
Emphasized Skills: Heuristic Evaluation, User Interviews, Usability Testing, Competitive Analysis, Persona, Problem Statement, How might we statements, Low Fidelity and High Fidelity Wireframing (Desktop/Mobile), Sketching (Desktop/Mobile)
Role: UX Designer (Generalist)
Timeline: 3 weeks
Team: 1 Lead UX Researcher; 2 UX Designers
What is the National Weather Service?
It is an agency of the US federal government that provides extensive information about the weather (forecasts, safety, education, radar map images) They also provide further research about oceanic and atmospheric weather by joining with the National Oceanic and Atmospheric Administration (NOAA)
Problem
The National Weather Service was losing users to its’ site because there were usability problems and accessibility issues. There was poor information hierarchy, a lack of consistency throughout the site, and confusing weather jargon.
Solution
We created a minimal, aesthetic design for mobile and desktop where users instantly found information with clear, visual elements, read weather alerts on the map, and interpreted the language that was on our site
Phases of Our Redesign
Discovering the National Weather Service
Talking with our users
Figuring our users pain points and needs
Crafting Ideas for the NWS
Updating the NWS Site
Discovering the National Weather Service
We used different research methods to get to know our site and there were moments when I became frustrated with the NWS site’s visual layout and I wondered what some of the weather terms meant
Methods used: Heuristic Analysis
My teammate was searching for severe weather forecasts for Portland, OR. As he looked for severe weather alerts, the site directed him to the severe weather forecast page for Portland, which I thought the main page focused on coastal waters forecast.
There was a lack of consistency and standards on the map legend. There were many indications that would lead to what severe weather alerts meant
Confusing site direction
2. Bright Colors mixed with illegible text
All of us searched for different kinds of maps that depicted certain conditions. when I saw this map that my teammate shared, I wondered what all these colors and numbers meant. There was an overwhelming amount of information because of the bright colors and no indication of what the colors represented
3. Unfamiliar weather jargon
I looked over the severe weather page with my team and we agreed that the language that was used on that page was not only inconsistent, but some terms were confusing. I couldn’t tell where to focus my attention and thought “Is this page about severe weather or coastal waters?
Talking with our Users
My team and I discovered who our target audience was by using surveys and they were users that used their mobile device to check the weather, spent no more than five minutes on the weather app, and checked severe weather alerts.
Based on the survey data that we gathered, each of us interviewed 2 participants (8 in total) and found that fit our criteria
Methods used: User Interview, Usability Test of Existing Site
What did all of our users have in common?
We conducted our user interview and our usability tests at the same time, and these were common behaviors that our users reported while they used weather apps
What did our users think of the NWS Site?
We had our users complete multiple tasks on the existing site and one of our tasks was to find severe weather alerts for their local area by using the map.
After I synthesized my findings with my team some common thoughts were:
Since our users lived in different areas throughout the US, out users found multiple indications of where severe weather alerts were. Therefore, it took an average of 4.4 minutes to find severe weather alerts
Figuring our Users pain points and needs
After talking with your users, my team and I created our Persona, Matthew Hawk, (Matt for short), to list his pain points and needs. I was able to understand how our users felt after they navigated through an overwhelming amount of content on the home page and I gathered some ideas after I synthesized our data with our team on what Matt needed
Methods used: Persona, Problem Statement, How Might We Statements
Who is our Persona?
What was Matt’s core emotion while he used the NWS site?
We kept in mind how Matt felt while he was testing the NWS site and he mostly felt frustrated 😤
Matt quickly becomes frustrated when using the National Weather Service’s desktop and mobile site because he cannot quickly and easily access the weather information he’s looking for due to
poor information hierarchy
lack of consistency throughout the site
excess confusing jargon.
How were we going to help Matt?
We were able to help Matt’s users experience with the NWS site by:
Providing a streamlined flow for mobile and desktop users to access local weather forecasts
Presenting severe weather alerts in a visible and concise manner
Offering a minimal, clean interface with reduced visual distractions
Crafting Ideas for the NWS
Our team gathered together to sketch out some ideas for our platforms and researched features that our competitors had on their sites. I was excited to lay out some features for the desktop platform and also made sure to have some consistency with our mobile platform
Methods used: Competitive Analysis, Design Studio, Low Fidelity Wireframing
What did our features competitors have?
Our team gathered to do a competitive analysis and we were inspired by some of the features that other weather platforms had and how they laid out their information. Our competitors were The Weather Channel, Weather Underground, and the Apple weather platform.
The Weather Channel had clear, consistent categories when they reported their local weather forecasts.
Weather Underground provided radar maps with multiple feature layouts and users can have the freedom to choose their filters
The Apple weather platform has a clean layout categorized with widgets
Design Studio
We all did an hour long design studio session where we ideated on how to layout our weather information for our mobile and desktop platform.
As I sketched, I kept in mind what Matts' needs were and how I was going to lay out the information he was going to see on his platforms. I exchanged ideas with my team in order to maintain consistency with our desktop and mobile. We also kept in mind what Matt was familiar with, which was the iOS weather platform.
How did our users react to our low fidelity wireframes?
We designed our wireframes and conducted usability tests with 10 users (I conducted 3 tests). Our layout was consistent for both devices
Since I helped design the flood/severe warning alerts, here are some of the behaviors/thoughts that users had when they had to
Find severe weather alerts for their local area
How did we plan to improve our site?
We all noted all of the issues that users had while interacting with our site, and our key takeaways were to provide clear indications for Matt so he can better understand how to interact with the widgets, include a digestible map with distinguishable filters, and rearrange information to prioritize hourly and weekly forecasts
I became mindful of these takeaways and sketched a layout to reiterate our desktop designs
Updating the NWS Site
We revamped some features that we did from our sketches. We conducted our third round of usability tests with 8 users
I updated the severe flood warning widget for desktop by adding the more option so users can further click to read more flood warning info
Here is an example of a task where our users had to
find severe weather alerts and flood warnings.
All 8 of our users were successfully able to find severe weather alerts in less than a minute 🎯
Desktop
Mobile
We reflected on how to ideate and improve our prototype based on the takeaways from our final usability testing. We realized that we needed to conduct user research to provide educational resources, learn about other weather-related information, and decide if the radar map is a core need that needs to be prioritized. If it was a core need, we’d wanted to dedicate a separate study to figure out how to best optimize its functionality
Reflection
This was the first team-based project that I did, and I learned how to organize my thought process in a unique way.
Our process was nonlinear: I imagined that our process was linear where we would research and then finish with testing our high-fidelity wireframes, but I noticed that we constantly went back and forth to research our findings from our past work to reiterate our design
Slowly gained confidence over time: It was challenging to share my ideas because I felt insecure if my ideas were good or bad, but I realized that we constantly had to communicate our designs and research to find intuitive ways to better understand our users. I learned that my ideas were constantly changing over time and referred back to what our users needed
Asked mentors about how to combat imposter syndrome: There were moments when I doubted my abilities and questioned the work that I did with my team. I mustered up the courage to be vulnerable with my mentors and they shared how I can rethink my thought process when it came to my doubts. In order to take note of how I felt, I journaled my thought process.
Feel free to try out our prototype!
For both mobile and desktop platforms, your task is to find information about flood warnings in Portland, OR