GLANSIS Redesign

UX Design

Background

Context

GLANSIS (Great Lakes Aquatic Nonindigenous Species Information system) is a branch of the National Oceanic and Atmospheric association that helps manage invasive species in the great lakes region. As part of a partnership between the University of Michigan's School of Information and GLANSIS I was tasked with redesigning their species search page as a project within the class.

Client: Dr. Rochelle Sturtevant
Duration: Sept-Dec 2023
Software used: Figma, Adobe Illustrator, Adobe Photoshop

The Problem

The Great Lakes, a vital source of drinking water, recreation, and industry for millions, face a serious problem. Invasive species are causing significant damage, costing anywhere from $138 million to over $1 billion each year. It's crucial to act swiftly to prevent new species from entering and to manage the impact of invasive species on the Great Lakes. Having a functional website that can support this fight against invasive species is paramount.

Solution

The GLANSIS website, particularly the species search page, serves as a valuable resource for field researchers, teachers, and students. The website must be redesigned to meet the diverse needs of users through the implementation of a bright, friendly, and user-friendly interface that accommodates varying levels of complexity.

01. Research

Understanding The User

To better understand the needs of the user and the shortcomings of the current GLANSIS website I asked 8 friends and family members to navigate the website based on navigational prompts. Using this information as well as the information provided by Dr. Rochelle Sturtevant I mapped out the motivations, pains, and goals of the user.

Motivation

Why use the GLANSIS Website?

- To find a specific piece of information on a species

- To explore the multitude of species included in the database

- To identify a species based on it's characteristics

User Pains

Why not?

- Ecological jargon is confusing and complicated

- Information overload on every page, lack of structure

- Too many fields and sections to fill out for a search

Goals

What should be done?

1: No fields or forms for the user to fill out

2: No ecological or technical jargon

3: Avoiding information overload by using images and collapsable fields

02. Synthesis

Turning research into insights

Here I establish the main features and key design goals for the website redesign based on the information collected from research. These will become points of focus when designing the website later.

Key Features:

E-commerce style listing

A grid of images with crayfish instead of clothing, species instead of prices, and country of origin instead of model.

Benefits:

Almost all users are familiar with the the standard and widely used e-commerce format of websites like NIke and Amazon. Opting for this style is in line with Jakob's Law.

Filters over Forms

Replace the 9 forms that currently exist on the species search page with a series of filters at the top of the page.

Benefits:

The use of filters allows the user to examine the changes made to the database in real time while avoiding form resubmission. Additionally, filters help avoid the information overload that currently plagues the website.

Accordian-style menus

Turn key species information such as identification, size, range, and ecology into scannable sections of an accordion menu.

Benefits:

Any user familiar with wikipedia will be comfortable with this kind of layout. Additionally, an accordion style menu will allows the user to find the information they desire without scanning entire paragraphs.

03. Making A Rough Draft

Making a draft in Figma

Once I had my major design features selected, I went over to Figma and created my initial draft for the mobile version of the GLANSIS species search page.

My initial design for the GLANSIS mobile page. It includes a very basic homepage, the image-focused list of species, as well as the accordion style menu for a given species.

04. Revising

Getting Feedback from my peers

I had a basic wireframe of the website, but it was in desperate need of revision. Without explaining my ideas beforehand, I sent my wireframes to some friends of mine, as well as my graduate student instructor in order to get a better idea of what I needed to improve. Once I had some feedback I created a new draft.

My revision of my initial draft. This version had a friendlier home page, an expanded species page with a page selection feature, and a footer.

05. Creating The Desktop Version

Bigger and Better

I had a mobile version of the website I was proud of, but no desktop version. I expanded on the mobile design I created by implementing a comprehensive style guide for the desktop version. Using feedback I received from doing user interviews over zoom I took this design as an opportunity to improve the website even further.

The design guide for the desktop version of the website.

The desktop version. Users can easily access the species search page, filter species by category, and quickly access the information they require from the species page.

06. Perspective and Final Thoughts

Where it started

To put the entirety of the redesign into perspective, I have included images of the current glansis website with corresponding pictures of the website redesign.

Final Thoughts

The process of overhauling the GLANSIS website has proven to be a rich learning experience, emphasizing the pivotal role of user-centric design. The knowledge I gained from extensive user testing has been crucial in molding a digital experience that prioritizes user preferences above everything else. Placing user opinions and experiences at the forefront of the redesign process has deepened my understanding of the considerable influence user feedback has on enhancing the accessibility of the website.

GLANSIS Redesign

Before

After

Before

After

Before

After