back to home

NOAA GLANSIS Website Redesign

client:

National Oceanic and Atmospheric Administration (NOAA)

duration:

August 2023-December 2023

goal:

Redesign the Species List Generator tool on the Great Lakes Aquatic Nonindigenous Species Information System (GLANSIS) website

tool:

Figma

target audiences:

Great Lakes Researchers, Natural Resouce Managers, AIS decision-makers, K-16 Educators

executive summary

The GLANSIS Species List Generator uses filtering to create a list of invasive species within selected categories. My redesign of this tool addresses usability challenges by streamlining filters and navigation for resource managers, researchers, and the public. With simplified filters, clear icons, and more readable species profiles, the tool aims to facilitate users in efficiently managing invasive species in the Great Lakes and transform the user experience so that searching for a new species profile is easy, not frustrating.

design process

1. Empathize
2. Define
3. Ideate
4. Prototype
5. Test
6. Assess

user research (obtained from Dr. Sturtevant at GLANSIS):

Scenario 1: state/federal manager asked to approve permit to import species

Scenario 2: a local resource manager wants to know what invasive species are in their local management area that they should control

Scenario 3: a researcher is planning a project to test a hypothesis about the food web of a particular habitat

Scenario 4: a science teacher needs a lesson for their 8th grade students which is aligned to the next generation science standard on ecosystem -- they would also like an age-appropriate video to accompany their lessons

Scenario 5: 4th grade student has been assigned to write a paper on local invasive species

problem statement

Thirty million people rely on the Great Lakes for water. GLANSIS recorded 180 invasive species that harm biodiversity, water quality, and the economy. North America loses $26 billion per year due to invasive species. They introduce toxins and inhibit nutrient flow in the food chain. Resource managers use the Species List Generator on GLANSIS’s website in search of species to control in their area. However, the species profiles are cluttered, inaccessible text walls of data needed to enact regulations.

design oriented approach

  • The waterfall approach is the best fit for Dr. Rochelle Sturtevant’s team at GLANSIS.
  • Success with the agile approach requires a small team of highly skilled designers and developers.
  • Familiarity with the agile approach is crucial, which is lacking in Dr. Sturtevant's team.
  • The lean UX approach, requiring trial and error, is unsuitable for the team without prior experience.
  • Navigating the website redesign through a scientific methodology is the most practical approach for a scientific team like GLANSIS.
  • The waterfall approach's systematic method aligns closely with the scientific method.
  • Dr. Sturtevant has a detailed understanding of project requirements, reducing the risk of timeline disruptions.
  • Project goals, including the four major tools on the site, are clearly established in advance.
  • Overall, the waterfall approach aligns with Dr. Sturtevant’s prior work environment, providing a clear breakdown of steps, determining the end product, timeline, and budget early on.
  • The waterfall approach aligns strategically with GLANSIS’s management style and organizational culture, ensuring success in the redesign.

brainstorming sketches

Skecthes of five pages of the GLANSIS site on mobile

wireframes

prototype

usability testing

Task 1: You are a fish expert searching for the fish of the Alosa genus, so you come to the GLANSIS site to search for that specific genus.

  • Observations: At first, she wanted to search for the Alosa genus using the species list generator rather than the quick species search icon at the top of the page. She ultimately realized pretty quickly that that was the wrong place to look and that there was a search icon. Also, she was able to figure out how to click on the search bar to type “Alo” and see the results with ease.


Task 2: You are a student studying invasive species, so you want the number of nonindigenous fish that have been recorded.

  • Observations: She was able to find the species list generator quickly and saw that the species category was defaulted to “nonindigenous”, and found the submit button very soon after reading two dropdowns. Once she saw the list of species, she took a couple of seconds before declaring that there were 30 results, which was clear was the number of fish that had been recorded, thus, successfully completing the task.


Task 3: You are using GLANSIS for the first time, so you are exploring the species list generator tool, but want to see the other tools available on the site.

  • Observations: She realized rather quickly when she was on the species list generator tool that she could use the hamburger icon to see other tools to navigate, too. While that was my intended action, I was curious to see if she would go back home to see the other tools. Overall, it seems the hamburger menu conveyed its intended action of its use to navigate back and forth between pages of the site successfully.

updated mobile design

desktop design

three key design decisions

Eliminate Common Pitfalls of the List Generator Page:

  • Navigating the List Generator Page can be confusing, especially when presented with so many options. By prioritizing the two most commonly used filters of “Species Category” and “ Lake (HUC)” and collapsing other filters in the “Advanced Search” drop down, the goal is to minimize confusion. Additionally, removing filters such as “Group” and “Status” aims to eliminate the misuse of unclear and complicated filters. Lastly, including the information icons next to each filter clarifies how the user can get help and doesn’t leave users guessing what terminology means.


Improve Access to Important Information:

  • Many users simply want to write down the number of results generated, while others primarily need the newest additions to the database. Placing the total number of results in the top left corner was a big priority. Removing sort options from the List Generator Page and defaulting the sorting order to newest to oldest on the List Page allows for the greatest number of users to access the information they need quickly. Maintaining additional sort and filtering options on the List Page allows users to narrow down further after using the more general filters on the List Generator Page. This saves space in a user’s memory as they are presented with all of the information they need on the screen in front of them, so they can focus on the important things.


Intuitive Navigation and Searching:

  • The GLANSIS database is vast, so efficient navigation is essential. Including all of the key tools in the header and in the hamburger menu permits users to access the information they need from anywhere on the site. Additionally, now they can search for a species they’re looking for at any time. Dr. Sturtevant emphasized the importance of accessing species search quickly, and Fitt’s Law tells us that the closer elements are to the top, the quicker you can access it. Auto-suggesting recently searched species and filling in the algorithm’s best guess at what species you are about to type expedites the searching process further.