NOAA SPECIES LIST Tool
Streamlining an invasive database tool for efficient ecosystem regulation.
why this invasive database?
For scientists, lawmakers, and educators, accessing the latest information on nonindigineous aquatic species (ANS) is critical in preserving the ecosystem of Michigan's Great Lakes. GLANSIS, a branch under the government agency NOAA, provides necessary tools and information on their open-source platform yet the cluttered and complex nature of their website can pose user access challenges, hindering invasive species mitigation efforts.
As a class partnership Fall of 2023, I re-designed GLANSIS's homepage as well as their most visible tool, the Species List Generator, in both web and mobile breakpoints.
The OUTCOME
A New First Impression
Entering the site, users are greeted with a call to action and can learn more about the GLANSIS's purpose and offerings.
Quick & Advanced Search Modes
Selecting the Species List Generator, users can immediate search through a default form containing 3 most used fields in the Quick Search mode. More specialized users can select the Advanced Search mode to reveal all 9 form fields.
Combined Form & Results
All in one screen, users can see their current search criteria and change inputed fields for an immediate generation of results.
Scannable Species Profiles
Results generated by users are shown in compact species cards. When selecting a card and entering into a species profile, users can navigate sections of information through a table of contents.
My Process
How did I approach this client project?
Problem Context
There are over 180 non-native species in the Great Lakes, where 34% are invasive and some with the power to colonize and decimate entire ecosystems (US EPA). As such, rapid response, policy making, and ease of access to information to do so is imperative to the region's ecological and socioeconomic wellbeing. With a 7 billion dollar fishing industry on the line, GLANSIS is an indispensable resource.
At the initial meeting with the lead researcher and manager of GLANSIS, I learned a lot of crucial information from the client's recount of previous UX research efforts that were vital in design direction. This included notes of current designs and an overview of the main platform users.
Existing Design
The existing design has 3 main issues:
These issues impact the experience of the Species List Generator tool, a tool that allows users access to customized lists of invasive species and locate profiles containing comprehensive information on the species' identification, spread, impact, history and more. Who are these users impacted?
Key Users & Use Cases
Notably, this mainly impacts Field Managers, who rely on mobile points of access to quick profiles to directly control these species, and academics, who frequently need to source specialized pieces of information.
With this in mind, there needs to be a balance between:
How might we design the GLANSIS database for experiences friendly across devices and users of various scientific backgrounds?
Competitive Analysis
I took a look at three wildlife databases, specifically at how these platforms structured their database search tools with balance between efficiency and complexity in mind.
In my analysis, I found that using species cards rather than using horizontal rows has the advantage of visual compactness and scannability in mobile view. 2/3 databases did not have category labels within the generated species results, which can be disorienting for audiences not familiar with scientific categories. I also noted that these databases all have results next to search fields.
Design Phase
First Iteration: Mobile Adaptivity
I began designing with a mobile-first approach to ensure design adaptivity across devices. I focused on emphasizing quick search and making information more scannable through species cards and collapsible sections.
Second Iteration: User Flow Re-structuring
I conducted a mid-way usability test with a simple prototype to get feedback before transitioning into desktop. However, the participant had to re-submit the form again after navigating away from results on accident. This led to further inspection into the user flow at hand.
As it is, users would have to repeat the entire process to address any errors in the initial search form submission.
This was the most noticeable pain point that led to my decision to combine the separated forms and results pages into one, aligning with the interfaces of other existing wildlife databases. I took inspiration from ICUN Red List's combined filter and results structure. This led to a new user flow.
With this, form submission errors can be addressed at each step, allowing users to avoid repeatedly backtracking to the previous page to refill a blank search form.
This is reflected in the design below along with other adjustments:
Last Iteration: Visual Identity
I iterated on the homepage design to better emphasize GLANSIS's relevance with a call to action, statistics, and a database breakdown. I also focused on translating mobile layouts into desktop, addressing parts that did not scale well to a bigger screen, and unified my designs with color, typography, icons, and assets.
Style Guide
I drew from the existing site's color-way, reduced fonts variation, and made logo use consistent while signifying GLANSIS's affiliation with NOAA.
Design Decisions Breakdown
Single Form to Two Modes
• Minimizing fields in default Quick Search mode hides what is not applicable to 90% of users
•. All fields, shown in Advanced mode, are categorized for clearer hierarchy
• Tooltip aid users in commonly mis-used fields
Table Rows to Cards
• Cards allow for all information laid out
•. Colored species status tags quickly signify critical categories
• Larger photos maximize card width for easier on-site identification
Form & Results Side-by-Side
• Layout allows users to see applied fields at all times without tags
•. Allows regeneration of search criteria without navigating back and forth between form and results
Pushing Up Key Profile Info
• Sections organized into table of contents for ease of navigation and reducing cognitive overload
•. Overview section at top allows most commonly searched details to be easily located
• Toggle between photo and map pushes up the popular feature without embedding it in a collapsible section
So HOw did I ADAPT GLANSIS Across devices and audiences?
Field Manager Flow: Quick Search on Mobile
This most important user group relies on mobile access and values efficient search & identification of species. I addressed this by minimizing number of fields, increasing compactness and size of touch targets, and reducing text density.
Scenario: Resource manager aiming to identify species that require control measures in their management area.
Academic Flow: Advanced Search on Desktop
This most common user group mainly accesses information on desktop commonly for literature review and results summary. I addressed this by making the record total, CSV download, and literature review links more visible.
Scenario: Researcher planning out an experiment to examine a hypothesis concerning the food web in a specific habitat.
Design validation
Usability Test Design
I conducted a usability test with 6 users total, in which 3 were assigned to mobile and 3 were assigned to desktop breakpoints. Each test lasted two days in which I asked users to evaluate the original site on the first day and my prototype on the second day over Zoom.
Procedure
In each 15 minute session, I first asked the user to complete a 5 second test on the landing page for first impressions. Then I gave a scenario and 3 tasks in which I had them think out loud in the process using the Species List Generator tool. Finally, they were asked to complete a Standard Usability Scale survey.
Findings & Further Improvement
My goal was to measure my design effectiveness relative to the existing design, which I recognize can be a source of bias if users compare back to back. I took this as a learning experience for usability testing methods as I analyzed the results, which are as follows:
Overall, feedback was positive with users' perceive approachability, usability, and efficiency increasing from the resulting design re-structuring. The main suggestion was to add an indicator to scroll down when on the desktop landing page such as a page fold or an arrow.
Final Design & Prototypes
Mobile Breakpoint
Desktop Breakpoint
If I had more time...
Verifying designs with current GLANSIS users.
Those in my usability testing were other college students who hadn't used GLANSIS. With more time, I would get feedback from field managers and researchers already using GLANSIS. This project was challenging as I went largely off of the client's knowledge of past UX research conducted without direct access to impacted user groups.
Design for formatting and data irregularities.
I was re-designing a very small set of data which may not have represented profiles with, for instance, missing data, longer names, no images, and so on. In my first iteration, my instructor had asked me how the horizontal rows within my species cards would look if the species had extremely long family names. How would my final design account for this?
Takeways
A baseline of information complexity can't be sacrificed.
In simplifying an inherently complex product, I had to be careful not to unintentionally remove key pieces of information for the user in exchange for a layout I found to be more visually pleasing. Especially since I did not have access to direct users of the platform, I had to be conscious of what information I removed if I did. How would changes affect function?
Design as a process isn't always linear.
It was only through an assignment at the time that I conducted a mid-point usability test. This provided a needed push for me to analyze the user flow of the current product when I noticed a pain point in the testing session. This made me realized the importance of getting user feedback throughout the process and that going back and forth between defining the problem, designing, and evaluating can happen as needed without being confined to rigid stages.
