NOAA GLANSIS Redesign

INTRODUCTION

NOAA GLANSIS is a one-stop shop for information about aquatic nonindigenous species in the Laurentian Great Lakes region of North America

MY ROLE

Throughout the class, I learned how to understand problems, design for diversity and inclusion, and the laws of UX. I applied these skills to create wireframes and conduct usability testing to gain valuable feedback when making changes to my design.

View my full Figma file

PROJECT SCOPE

12 week class project (Aug - Dec 2023)

TOOLS

Figma, Noun Project

PROBLEM DISCOVERY

The NOAA GLANSIS website lacks clear visual hierarchy and intuitive information flow, causing frustration among its diverse users due to scattered content and multi-step processes that hinder efficient task completion.

Dr. Rochelle Sturtevant, who serves as program manager for NOAA's GLANSIS, was able to provide insightful feedback from clients who have used the website.

Many of the pages on the NOAA website lack hierarchy in terms of font sizes, relevant information, and intuitive flow. Since there are multiple users across the platform including managers, scientists, and educators, the NOAA website requires a large amount of information to be presented.

Users expressed frustration with readability in the species list generator, specifically with having information scattered across multiple pages. This forces users to take multiple steps in order to achieve their goals.

KEY DESIGN DECISIONS

The redesign aims to create an intuitive, user-friendly NOAA platform that caters to the diverse needs of stakeholders by using consistent branding, enhanced search functionalities, improved aesthetics, and a more intuitive layout

  1. Quick Species Search Feature

    • Providing more information for the user to understand what it’s used for

  2. Species List Generator

    • A more intuitive filter with different rounded corners for varying input types

  3. Search Results Page

    • Adding in more elements to aid the user’s flow of the website

    • Chunked items together and reduced cognitive overload

  4. Species Profile Page

    • Accordion style layout for the information about the species

After (Desktop View)

In my redesign, I moved the Quick Species Search below the introduction, which ensures that users are first introduced to the purpose and background of NOAA GLANSIS, creating a more informed and engaging experience before delving into specific species inquiries.

Using the feedback Rochelle mentioned, I provided context to what the Quick Species Search feature does, so the user does not have to go through multiple steps to get to their end goal. Users like managers or researchers can differentiate between “species” and “genus,” but people who are unfamiliar with the terms might not know what to input. I added examples to help combat this uncertainty.

#1: Quick Species Search Feature

Users who have used the Quick Search feature don’t like it, primarily because they’re not sure what it’s used for. Additionally, users don’t like having to click through 3-4 links to get to a species profile. The current design places the Quick Species Search in a small corner of the website, leaving an awkward space above the introduction.

Before

#2: Species List Generator

The Species List Generator contains many filtering options, which tend to confuse users who are unfamiliar with the tool. Rochelle mentioned that ~90% of users just want to get to the species profile. Additionally, many of the users who use this feature only want to know the number of species after filtering.

Before

After (Desktop View)

In the original design, the user can input a genus, species, and a common name. Having too many choices can increase the time it takes to make a decision (Hick’s Law). My design includes a search bar for the user to input a species they want to search. I also included a “recently viewed” section so the user does not have to do the same search to find the species they want. It makes for fewer steps to get to their end goal. The advanced search section is for further filtering and is condensed using dropdown menus. After filtering, the user is able to see the number of results under the “Submit” button.

#3: Search Results Page

On the original website, some of the search results were too long, causing the user to have to scroll for a long time in order to find the species that they were looking for. Rochelle mentioned that the “sort” button was not useful, which is a feature that the user can use to sort when they get to the selections. Additionally, the website breaks the User Control and Freedom usability heuristic with this page. There is no way for the user to go back to the search results page upon clicking a species’ profile.

Before

After (Desktop View)

The redesign allows the user to see multiple search results at a time, with only the relevant information provided, allowing for a more cohesive and aesthetic feel for the user. The species profile page also has a back button, which allows the user to go back to view the search results page. Additionally, on the desktop version, I added a filtering system on the left side so the user does not have to go back to edit their search.

#4: Species Profile Page

Users expressed frustration with the species profile page . Since all of the information is presented on the page, there is an overload of information causing the users to be overwhelmed. Additionally, the placement of the information is not intuitive, as the client mentioned how some users only come for certain information of the species.

Before

After (Mobile View)

LEARNINGS

Throughout this course, I was able to learn about user needs, usability testing, and design laws in UX Design such as Hick's Law and Jakob's Law. While prototyping, I learned about how to create interactive elements such as a hamburger menu and a drop-down menu.