NOAA Website Design
context
role
UX Designer
timeline
August-December 2023
client
National Oceanic and Atomspheric Administration (NOAA)
Tools
Figma
Summary
NOAA is a Government Agency in charge of tracking and retaining information on Aquatic Species in North America. NOAA supports an open-source platform tracking invasive species in the Great Lakes.
In the Fall of 2023, I worked with NOAA to redesign this platform to update its design system and tailor the structure of the site to appeal to its key users.
Specifically, I considered how we might...
🧑💻 Optimize for web & mobile experiences for each user archetypes?
🔬 Make website accessible to all user groups with varying scientific backgrounds?
context
Key users
Based on conversations with the client, we narrowed the audience to 3 key user groups:
Academics 🥼
Field Managers 🎣
Teachers & Students 📚
Use: Access profiles of specific species, including data & academic archives for the species
Use: Access profiles of specific species, including data & academic archives for the species
Use: Generate lists of species based on self-selected criteria, able to be shared & exported via CSV file
Access Point: Web 🖥
Access Point: Mobile 📲
Access Point: Web 🖥
Existing Design
As the site curretly exists, the users and client are having these key issues...
- Differentiating Mobile and Web Experiences: The existing website does not follow a mobile-first approach, and many experiences are inaccessible in the mobile view.
- Varying Scientific Understandings: The users of this system have varying understandings of scientific terminology, but the current site has a high barrier to entry, as it overloads the user with dense scientific data.
- Outdated Design Systems: The site has not been updated visually since the early 2000s, with no existing design system to establish consistency throughout the site.
Existing Site, 2023
I was tasked with redesigning the site in an effort to mitigate these issues.
Solutions
Design systems
Before restructuring the key user flows, I updated the design system to reflect a 2023 Government Agency Website. I drew inspiration from Google Material Design and other government sites, such as the White House and the Department of Homeland Security, to determine how to construct a visual identity that is modern, entrusting, and officially recognized.
Colors
Text
Buttons
Icons
Input Fields
Academics User FLow
Currently, to search for a species on the platform, there are the following issues...
❌ Lack of hierarchy - what is the most important information to input?
❌ Unclear what inputs are optional versus required
❌ Common user input errors
To solve these issues, I...
✅ Created a visual hierarchy to represent which information is required and most important to include
✅ Added sample text in input fields to give context as to what to write in their, limiting user input errors and misconceptions.
Once submitting their inputs, the system generates a table of all invasive species that match the criteria.
I redesigned this screen to prioritize key call to actions:
✅ Exporting to CSV file
✅ Clicking into specific profile views
✅ Sorting by column
Field manager user Flow
I designed the mobile experience for finding specific species to prioritize 3 key actions:
🔎 Easy access to quickly searching for specific species
I implemented a "Quick Species Search" card on the home screen, for field managers to quickly access and reference while in the field. I included solely the "Species" input from the full list generator, as it is the highest importance and only required input.
📲 Browsable table view to find correct species
Rather than displaying the full table in the mobile view, I decided to visualize each species in a card view. This makes it easier for field managers to quickly scan and find the species they are tracking.
🎣 Digestible information on specific species
Rather than displaying the full table in the mobile view, I decided to visualize each species in a card view. This makes it easier for field managers to quickly scan and find the species they are tracking.
Slide deck
if i had more time...
Verify client insights with ux research 🔍
If I had time, I would run my designs through our key user groups to understand if my designs made their experiences more effective.
Consider all edge cases 💭
Thinking back on this project, I realized that there are tens of thousands of species included in this database. Because of this, I would have liked to further consider edge cases for each species: what do my components look like for species with large names or without high quality images? Species that have missing data?
Takeaways
designing for a client and a user 🎨
This was my first experience designing without direct access to the users I am designing for. This was a new challenge for me, having to balance the needs of the client and the user, while being one degree of separation away from communicating with the user.
Meet the user where they’re at 📍
The users I was designing for in this project had varied scientific backgrounds. Because of this, I learned to "meet the user where they are at," and design experiences to be approachable with users of no scientific background, while still giving value to those with a rigorous background in the field.
View more work
Let's Work together
