Category /
UX/UI Design
We were engaged to help the National Weather Service identify and address usability and accessibility issues leading to declining site visitors. The brief indicated an awareness of accsesibility issues, with which our team concurred upon performing a heuristic analysis of the site. The desktop homepage alone contained over 140 links, buttons, and fields. Once we had scoped the project and had a broad sense of what we needed to research and test, we commenced our research.
The existing desktop site features a variety of user interface design issues, including poor information hierarchy, unclear calls to action, and a cluttered layout.
Discovery & Research
We hit the ground running with a user survey designed to discover demographic and behavioral information. Our survey was complemented by insights derived from user interviews.
User Insights
Habits
Strong familiarity with Apple weather app
Checks local forecast throughout the day
Almost always uses mobile device to check weather
Spends one minute or less checking the weather
Needs
Quick access to hourly and weekly forecasts
A responsive, mobile-first design
Severe weather information presented in simple, centralized format
Pain Points
Hates when he has to scroll or click through multiple screens to find the information he wants
Becomes frustrated when he can't interpret confusing jargon
Sketching & Ideation
Speed, accessibility, and learnability were top of mind in our design approach. We looked at other sites and apps in the weather space for inspiration, particularly the Apple weather app as most users interviewed were familiar with it. From this we derived a widget-based presentation of weather information which allows for an easily scannable homepage. While we knew we wanted to simplify the site's design, the initial ideation process taught me that achieving a simple design is itself not so simple a process.
Wireframing
One of my biggest takeaways from this project is the value of testing designs early and often. Testing the foundations of a design or user flow early in the design process leads to more and better iterations, ensuring that critical design problems are solved long before a single line of code is written.
Prototyping and Testing
User testing for our grasyscale prototypes revealed several key areas for improvement. On the whole, users were able to complete their given tasks: Finding the current weather for Portland, Oregon (including temperature and precipitation), and any severe weather alerts. But mobile users were confused by the landing page, unsure of what the spinning loading circles within the widgets indicated, while desktops users weren't entirely comfortable navigating the site.
High Fidelity Prototypes
Incorporating feedback received from grayscale testing and research insights, we rebuilt our sites as high fiedlity prototypes in Figma. We updated the look and feel of the sites to align more closely to designs familiar to users, such as the Apple weather app and Weather.com. The background color of the site is envisioned to be dynamic, changing color and texture based on the user's current location. Widgets now include both bite-sized information and clear calls to action for users to expand and view additional information.
The mobile site now features a far more direct and streamlined splash page, with an animated NWS logo redesigned to match its sister organization, the NOAA.
The desktop site's increased real estate is harnessed to display additional information while maintaining scanability.
Accessibility Considerations
Accessibility in accordance with Section 508 best practices was prioritized in our redesign, with new features including:
An accessibility icon allowing users to toggle between Celcius and Fahrenheit, change languages, and increase or decrease font size
Text displayed is 16pt or larger wherever feasible, with clean, legible typography
Text and background contrast is rated at WCAG AA or better, with an average ration of 7.44:1
Mobile buttons sized at a minimum of 40 pixels, with 10 pixels minimum distance in between
Usability Testing of High Fidelity Prototype
Once our prototypes were built we conducted a final round a usability tests, incorporating lessons learned from our earlier round of tests. We asked users to perform the same tasks as during the usability tests on the existing site: Checking their local forecast and finding any local weather alerts. All users tested were able to complete their tasks without issue and in less than one minute, hitting our research benchmark. Users were complimentary on the new design and reported higher levels of satisfaction compared to the existing site.
Next Steps
Conduct further user research to determine usefulness of the radar map
Refine visual design, with increased focus on accessibility
Expand scope to help design other aspects of the site, including educational resources and other weather-related information
Learnings
Awareness of usability testing bias
Be more critical of adapted designs
Seek stakeholder clarity earlier in the process
Don't be afraid to make a dramatic change if data supports it
Save time and enhance visual design with pre-made components
