Noaa GLansis REdesign:
Redesigning NOAA's website with navigation, immersion, and accessibility in mind to empower researchers, policymakers, and educators.
Role:
UI/UX Designer
Duration:
3 months
oct - DEC 2023
Tools:
Figma
FigJam
Skills:
ui/ux design
INteraction desgin
Prototyping
Visual Identity
Client Context
GLANSIS is a NOAA-led inter agency program to enhance access to information on non-native species in the Great Lakes region. Their mission is to understand, predict, and share changes in climate, weather, ocean and coasts in addition to protecting coastal and marine resources and ecosystems.
My ROle: Redesign THe MAP Explorer and homepage to be more intuitive and visually appealing for all audiences
Target Audiences
1.
great lakes researchers
2.
Natural resources managers
3.
Aquatic Invasive Species(AIS) Decision makers
4.
K-16 Educators
what do these users look for?
1
Access to summary statistics about invasive species
2
Downloadable infographics and visual assets
3
Writing and revising legislation about invasive species
4
Browse resources that simplify AIS concepts for K-16 in diverse contexts.
THe problem
Current users find navigating, interpreting, and simply using the map interface extremely difficult and burdensome. This is a major problem because it inhibits users from extracting the data they need from such an expansive database, lowering the response rates and overall ability to protect coastal and marine ecosystems.
HOmepage Redesign
Original dEsign
Nav menu is cluttered with unclear hierarchies [primary vs secondary actions]
Search is overly simplified and inconsistent with two unlabeled fields marked “Genus” and “species”
Twitter feed embed is broken
Footer is overwhelming, difficult to scan, and unsure why these links belong in the footer
Partner logos are not uniformly sized
Icons used in the blue boxes don't clearly communicate their functions - search icon for “Species List Generator”
Redesign
The homepage features an overview of all the tools that GLANSIS offers.
The 4 key tools: Species List Generator, Map Explorer, Risk Assessments, and Educator Hub are displayed clearly when the user lands on the homepage with more miscellaneous features like data contributions and resources being shown later.
My main 3 design considerations:
Brand Consistency
Visual Hierarchy and Navigation
Hero Section
The inclusion of personable pictures and a consistent use of brand colors exude a trustworthy yet approachable feeling.
I also simplified top navigation with clear icons making a distinction between primary tools and secondary functions, and are displayed in a logical flow with clear CTAs
Finally, the hero section includes a clear, prominent display of the GLANSIS name immediately informing users of a succinct mission statement.
Mobile Homepage
Map Explorer REdesign
The GLANSIS Map Explorer is an interactive tool designed to help users visualize and analyze the distribution of aquatic nonindigenous species in the Great Lakes region. It accesses the USGS NAS species database and allows users to compare species locations with habitat layers from the Great Lakes Aquatic Habitat Framework (GLAHF).
I'm focusing on three key audiences: policymakers who need clear visuals to understand and act on invasive species threats; researchers who want streamlined access to both species and habitat data in one place; and educators and students who can use this interactive tool to explore real-world invasion patterns in the Great Lakes. Each of these groups has distinct needs - from quick decision-making tools to efficient research workflows to engaging learning experiences."
Original dEsign
Overwhelming UI. A lot of text and options displayed feeling very dense, with too many elements competing for attention
Complex Search. Users have to enter specific species names manually and "one-at-a-time"
No Clear CTA. The map is displayed, but there is a disconnect with how to use it.
Confusing Filter. The filtering options for surface layers, shoreline layers, and basemap settings are not clearly explained.
Map Explorer redEsign
My main design intentions were to maintain the conceptual model for existing users by keeping main functionality the same, but connect features more intuitively and simplify the use process, and prioritize usability and accessiblity over technical specificity thus aligning with GLANSIS’s mission to serve diverse stakeholders prioritizing core features
Pagination of the Map Explorer
My design execution focused on two core principles: simultaneous accessibility and consistent interactions, inspired by Google Earth's. I shifted from horizontal tabs to a vertical layout, ensuring the map stays visible while providing one-click access to all features, while maintaining familiar functionality.
Combine Search Bar w/ Specific Species Search
To support diverse users and minimize backend changes, I simplified the UI with clear hierarchies, optimized touch targets, and streamlined toggles, making spatial analysis more intuitive while reducing tutorial dependency.
Layers Displayed Cohesively
I changed the layer selection from a text dropdown with technical labels to a visual popout page, making it easier for users to see what each basemap, surface, and shoreline layer looks like and helping them find the right option more quickly.
Style Guide
