Drought.gov's New Citizen-Centered Website
Designing a welcoming, intuitive platform for disseminating drought information
The Challenge
With the release of new U.S. Web Design Standards along with a major software version upgrade and shift to cloud-based hosting, the Drought.gov website was overdue for a redesign.
Our big-picture goals:
-
Redefine the ways in which content can be discovered and consumed on Drought.gov in order to increase engagement and dwell time
-
Evolve Drought.gov brand elements to create a recognizable and congruent visual language
-
Elevate the overall experience to align with new U.S. Web Design Standards and current practices related to accessibility and usability
My Role
In-house designer and web content manager at NOAA's National Integrated Drought Information System
Our Team
Program Manager
2 Developers
2 GIS Specialists
UX/UI Designer (me)
Software
My Work
User Research: Wrote user research plans; conducted diary studies, surveys, card sorting, and Value Proposition Canvas exercises
Design: Branding, color palette, typography, style guide, user journey map, affinity map, wireframes, mock-ups, digital design system, data visualizations
Collaboration and Project Management: Coordinating the design & development process, facilitating design critique and workshops, and
working as part of an Agile development team
Balsamiq
Adobe XD
Adobe Photoshop
Adobe InDesign
U.S. Web Design Standards
Section 508 Accessibility
Drupal
Google Analytics
Optimal Sort
CrazyEgg
Key Outcomes
A website that takes into account what users need and offers simple, intuitive navigation.
Navigation
We used card sorting and usability testing to streamline Drought.gov's navigation with goals of making it easier for the public to find answers to common drought questions, and, in the process, serve as a community facilitator and an up-to-date, reliable resource that makes monitoring and preparing for drought more manageable.
Storytelling
Understanding why your location is (or is not) in drought also requires understanding the water cycle and climate interactions. To help guide users, the new site tells the story of drought through the lens of time (past, present and future drought) rather than by drought index and translates data products into easy-to-understand maps and data visualizations.
Design System
In order to allow for flexibility and future iterations, our team shifted to component-based design. By organizing the site by topic and using components as the building blocks for the pages, the design is infinitely flexible and scalable so it can easily be iterated on as user needs, content, and styles evolve.
Branding
Based on the U.S. Web Design Standards and customized for NOAA's National Integrated Drought Information System, the site has new typography (clear and clean), better use of space (uncluttered and structured), and a new color scheme (bright and contrasted). This new visual identity makes Drought.gov modern, clear, and a trustworthy source of government information.
Process and Solutions
After redesigning the Drought.gov homepage (see Phase 1: Homepage Refresh), we began a redesign of the entire site based on the U.S. Web Design Standards. Serving again as the lead UX/UI designer for Drought.gov, I facilitated a kick-off meeting with both the development team and our internal program office staff to determine a timeline, development process, and feedback milestones, which I then summarized into a timeline graphic to help us keep on track:
Style Guide + Branding
Starting with the U.S. Web Design Standards, I worked to build a style guide for the new Drought.gov site. Since branding for the website was a key component of our goals, we approached branding not as a separate exercise, but as a component to strengthen and solidify the user experience. Starting the a draft style guide was also helpful for letting our programmers get a jump start on putting design elements together in Pattern Lab, a system for piecing together UI components.
We selected colors that felt clean, vivid, and bright (and that meshed with U.S. Web Design System options for accessibility) and typography that was legible and friendly. The NIDIS logo also needed a refresh - updated colors and "modern" mud crack design allowed the logo to look updated, but still remained recognizable as NIDIS. To assist in building future features, I also provided guidelines for implementation.
User Research
In order to craft and organize effective site content, we needed to understand the breadth of users including the drought-interested public, researchers, drought partners and agencies, and our own internal staff who utilize the site. Interviewing these groups allowed us to understand their needs and goals while using drought.gov. From there we were able to tailor website content that aligned to our user research.
One particular set of users that I wanted to learn more about prior to digging into design were scientists, particularly meteorologists, who use drought data, maps, and tools in their work (professional or student). The development team and I crafted a survey to learn more about the kinds of tasks scientists encounter in their work and the details of good or bad experiences with finding data, maps, and tools. I then traveled to the American Meteorological Society's Annual Conference in Phoenix, AZ, to conduct surveys from the NOAA booth with actual data users.
-
What is your current job? What kinds of tasks does your job typically involve?
-
What do you spend a lot of time doing in your job that you wish could be simpler?
-
Please describe the last time you needed to find dataset, a map or a tool for your research/work and walk me through the process of how you found the information.
- What was frustrating about that experience?
- What did you like about that experience?
-
Have you ever worked with or used drought data in your work? If so, can you describe that experience for me
-
While doing your job do you need to find and use narrative or scientific report based information?
-
Could you describe the process you use to find it and what sorts of information you regularly use?
-
Is there any sort of information which you have difficulty finding or wish it was more digestible?
-
During the conference, I interviewed 19 professional-level scientists and 12 grad students as well as conducted some additional usability testing focused on drought.gov's current Data, Maps and Tools section. I soon discovered some common themes:
-
Inconsistent data formats are a key frustration.
-
Scientists love open-source data!
-
Most data, maps, and tools are scattered between different sources, and scientists spend a lot of time trying to find appropriate resources.
-
Once appropriate resources are located, documentation and instructions for ingesting and combining datasets aren't comprehensive or included at all.
The interviews and surveys provided valuable insights into our scientists' motivations, needs, and behavior when looking for data. These themes then became our main goals for designing our new Data, Maps, and Tools section and the basis for user testing tasks.
Value Proposition + User Insights
While designing large sections of the site, we realized that we need more context for our users than just personas. We turned to the Value Proposition Canvas, developed by Alex Osterwalder at Strategyzer, for help understanding specific user group jobs-to-be-done, pains, and gains, as well as what drought.gov could offer to them.
I brought the team together, and facilitated the creation of value proposition canvases for two of our key audiences:
Referring to these canvasses during the design, internal feedback, and user testing phases has been essential for keeping our team focused on the core messages and potential areas of improvement that are important to our users through the entire design process.
Building a Design System
Redesigning drought.gov from the ground up and struggling with keeping designs consistent between iterations, one of our developers suggested implementing a design system: a collection of reusable and flexible components, guided by clear standards, that can be assembled together to build and fit any number of pages and layouts. It also allows designers and developers to have a common reference while creating new interfaces across all screen sizes. Love it!! Not only has it been helpful for keeping our team internally consistent, but it's also proven to keep the new drought.gov site much more consistent and cohesive for users as well.
While I'm in charge of the initial design of the components and maintaining the system assets in Adobe XD, I work closely with our developers to ensure all the technical pieces fit together.
An ever-evolving system, here are some of our first components:
User Testing
I conducted moderated usability testing on the county-level conditions page to better understand how users navigated complex drought and climate data, interpreted visualizations, and located key information. Sessions included task-based testing with public-facing users, researchers, and stakeholders, helping identify opportunities to improve clarity, usability, and trust in the data experience.
A major focus of testing centered on data visualization comprehension. Users were asked to interpret maps, charts, legends, and drought indicators while completing real-world tasks. Feedback revealed that some visualizations felt overly technical or visually dense, particularly for non-expert audiences. Based on findings, I helped simplify legends and labeling, improve visual hierarchy and spacing between data modules, add supporting explanatory content, and create more consistent interaction patterns across charts and maps. These refinements improved scannability, reduced cognitive load, and helped users interpret drought conditions and trends more confidently.
Additional improvements based on testing included:
-
Reorganizing content into clearer sections to reduce cognitive overload
-
Improving scanability with stronger hierarchy, spacing, and consistent card layouts
-
Adding “On This Page” navigation to support faster browsing
-
Making alerts, actions, and resource links more prominent
-
Increasing transparency through clear source attribution, timestamps, and methodology links
-
Refining responsive behavior and accessibility across devices
Final Designs
The final designs reimagined how users discover and engage with drought information by creating a more intuitive, visually cohesive, and accessible experience across Drought.gov. Through user-centered design, clearer content hierarchy, and modular data storytelling, the redesigned pages made complex environmental information easier to browse, interpret, and explore, encouraging deeper engagement and longer session times.
.jpg)
