National Weather Service: Website Redesign for a US Government Agency
0 0
PROJECT OVERVIEW
DURATION
4 Weeks, March 2020
ROLE
UX Researcher, UI Designer, Interaction Designer
TEAM
Stirling Grodner (UX Researcher)
TOOLS
Adobe XD, Miro, InVision, Google Slides, Paper & Pencil
WEBSITE
SUMMARY
For a project to improve a government agency's digital presence, I chose the National Weather Service (NWS) due to its vital role in providing weather forecasts and safety measures. Noticing several UI challenges, I saw an opportunity to enhance its design to better serve its mission and users.
THE CHALLENGE
The National Weather Service (NWS) plays a critical role in delivering accurate weather forecasts and safety alerts. Yet, its website was a hurdle for users:
Overwhelming, text-heavy pages
Cluttered navigation
Accessibility issues
Jargon-heavy language
Pain Point: Users were unable to quickly access life-saving weather updates or navigate efficiently, resulting in frustration and disengagement.
01
EMPATHIZE
THE OPPORTUNITY
I saw a chance to create a more intuitive, user-friendly experience for NWS’s millions of users. By addressing accessibility, navigation, and content clarity, the redesign would not only improve usability but also foster trust and loyalty among users who rely on NWS during critical situations.
THE SOLUTION
I conducted in-depth research, usability testing, and competitor analysis to deliver:
A reorganized, approachable site map
Modernized branding with a calm, trustworthy tone
Accessible, responsive UI components for all devices
Clear and concise content aligned with users’ needs
Goal: Build a user-centric design that feels welcoming, intuitive, and informative.
DISCOVER & RESEARCH
For brevity, our heuristic evaluation, guerilla tests, empathy map, redline annotations, and competitor analysis are available upon request.
Understanding Users
I started by creating a proto-persona:
Michelle: A truck driver needing quick, accurate forecasts for cross-country routes.
From Michelle’s perspective, I mapped her user flow, highlighting key goals like checking local weather or flood advisories. This insight set the foundation for usability testing and heuristic evaluation.
Research Findings
Navigation Pain: Users were confused by duplicate menu items and cluttered links.
Accessibility Gaps: The site failed color contrast standards and was not screen-reader friendly.
Content Overload: Text-heavy pages and technical jargon overwhelmed users.
0 2
DISCOVERING
IDEATION & DESIGN PROCESS
Streamlining Navigation
Through card sorting, I reduced 120+ navigation links to a structured, intuitive system. A reorganized site map now features clear primary, secondary, and tertiary menus, making information easier to locate.
0 3
IDEATING
WIREFRAMES & USER FLOWS
I iterated on lo-fi wireframes to refine the layout and navigation flow. Starting from Michelle’s user scenario, I designed screens for desktop, tablet, and mobile, ensuring responsive designs met user needs across all devices.
Example Flow: From homepage → Flood Safety → Safety Tips for Drivers.
User Testing
Using prototypes, I tested navigation with six participants on key tasks, such as finding local forecasts and accessing flood safety info. Results revealed areas for improvement, such as clearer button labels and more prominent navigation cues.
USER INTERFACE REDESIGN
Modernizing the Brand
The redesign embraced a tone that felt calm, trustworthy, and approachable.
Typography: Roboto family for clarity and readability.
Color Palette: Cool blues and calming greens for a sense of safety and reliability.
Logo Update: A refined, modern wordmark paired with the existing pictorial mark.
Components That Work for Users
I redesigned buttons, cards, and interactive map keys for accessibility and clarity. Each element was tested to ensure it passed ADA standards, improving usability for all audiences.
0 3
DESIGNING
HI-FIDELITY PROTOTYPES
Challenges Overcome
Improved Navigation: Active states and redesigned dropdowns increased visibility.
Content Accessibility: Simplified meteorology jargon to engage mass audiences.
Responsive Design: Developed prototypes for desktop, tablet, and mobile to meet diverse user needs.
NWS’ current homepage
A series of design iterations
FINAL ITEARATIONS
Through multiple rounds of testing and refinement, I delivered a polished design that tackled major frustrations while aligning with NWS’s mission.
0 4
DELIVERY
Consistency Matters
A unified brand identity fosters trust and recognition.
LEARNINGS
05
KEY TAKEAWAYS
Clarity is Key
Simplifying navigation and content can transform user experiences.
The Power of Testing
Iterative feedback is essential to uncover usability pain points and refine solutions.
Accessibility First
Inclusive design ensures no one is left behind, especially for a public service.