Building the First Design System for the National Weather Service (NWS)

Overview

As one of the first UX designers at the National Weather Service (NWS), I played a key role in establishing its first-ever Design System. This initiative aimed to standardize and enhance the user experience across a diverse range of NWS digital products. Additionally, I contributed to a major refactor of the Partner Management System, which helps meteorologists efficiently manage and communicate with their partners, including emergency management professionals (EMs).

Company: Cooperative Institute for Research in the Atmosphere

Platform: Web application

Industry: Gorvernment

Timeline: May 2024 - Present

My Contribution: UX Researcher and Design

Other Contributors: UX Research, Designer, Social Scientist, Engineers

Yuxui-video.mp4

Challenges

Lack of a Unified Design System:

NWS had a collection of separate applications with inconsistent UI/UX and little to no communication between applications
The lack of design standards made development inefficient and usability inconsistent.

Transition from Java to JavaScript:

Developers were shifting from Java to a JavaScript-based tech stack, including React Aria headless components and Tailwind CSS for styling.

Improving Partner Communication Tools:

Meteorologists relied on outdated tools for managing and communicating with partners.
The refactor aimed to improve usability, efficiency, and accessibility.

The Design System: A Unified Approach

To address these challenges, We created the first NWS Design System from scratch, ensuring that it was:

Tailwind CSS & React Aria Friendly:

We leveraged Tailwind for scalable, utility-based styling. The Design System incorporated Tailwind primitive tokens, enabling developers to embrace Tailwind's utility-first methodology while allowing UX designers to reuse tokens for responsive designs across various light and dark themes.
React Aria provided accessible, performant UI components.

Modular & Scalable:

Built with reusability in mind to support various NWS applications.

Consistent Across Products:

Inspired by Google Suite, ensuring a seamless experience across all NWS tools.

The Partner Management System Refactor

Parallel to the Design System, I worked on refining the Partner Management System to:

Enhance Usability: Introduced an intuitive interface to streamline workflows.
Improve Accessibility: Ensured 508 compliance.
Optimize Performance: Leveraged modern UI patterns for efficiency.

Results & Impact

Parallel to the Design System, I worked on refining the Partner Management System to:

Cohesive User Experience: NWS products now share a unified look and feel, improving usability for meteorologists and their partners.
Developer Efficiency: The Design System significantly reduced design and development time for new and existing applications.
Improved Communication for Meteorologists: The Partner Management System refactor streamlined collaboration with EMs, enhancing emergency response capabilities.

Conclusion

Being at the forefront of UX design for NWS, I played a pivotal role in transforming its digital ecosystem. The Design System laid the foundation for a more cohesive and scalable product suite, while the Partner Management System refactor improved vital communication workflows. This project not only set new UX standards for NWS but also empowered developers with a robust design framework, ensuring long-term success.

Next project

Google Sites

Report abuse