Role
UX Designer
Team
Individual
Time
12 Weeks
Skills
Figma, User Testing, Responsive Web Design
Overview
The Great Lakes enable 8 billion dollars in wages across fisheries, tourism, and transportation industries. Invasive species damage this infrastructure and environment, costing billions annually (NOAA).
People from state level managers to students rely on public databases, like the GLANSIS website, to recognize, handle, and prevent invasive species from causing further harm.
In this project I redesigned the Map Explorer tool for managers and students to more efficiently locate, learn about, and address nonindigenous species in the Great Lakes.
Featuring a responsive design that is comfortable to utilize on desktop and mobile devices.
The Existing Design
Knowing that I would need to redesign this page for multiple screen sizes, I started mobile-first, then expanded it for desktop screens and affordances after.
I began by reviewing the existing design. Overall, the page was text heavy and required quite a bit of scrolling before users could search for their desired species.
Further scrolling reveals an empty map. There's no way to search for a species yet.
Finally we reach the, "Specific Species Search" form to plot a species with.
A few red flags pop-out: It doesn't indicate which fields are required, nor does it indicate why some fields are disabled.
In the time that it takes to reach the form, users may forget the species they intended to search for. In addition, it takes unnecessary time and effort to scroll between the map and the form to plot several species at once.
North Star
Reduce the time and effort it takes to locate a species.
Simplifying the Form
Let's take a closer look at the Specific Species Search form. This is the current user flow:
The existing search flow, mapped out.
There are two ways this can be simplified.
Combining the option to search by taxonomic group and species name would remove the dead end.
The text fields to enter HUC codes and States are only applicable to some user flows, and can be hidden until then.
The search flow contains inefficiencies that can be simplified.
After iterating on a few different ideas, I prototyped a simplified user flow of the Map Explorer tool.
A mockup of the new search flow.
Testing
I conducted usability testing to observe how effective these changes were.
The results:
✅ Users could quickly plot a specific species on the map
⛔ There was some difficulty interpreting the results as the map image was not detailed enough.
⛔ The map settings icon was too ambiguous to indicate its functionality.
I iterated upon the designs to address these findings and produced high-fidelity prototypes with the redesigned screens.
Outcome
Now, the user can plot a species on the map without the need to scroll. In addition, there are now default values set for the plotted region and time period, simplifying the search flow for users.
Overall, these changes reduced the time it took for users to locate a given species by 60% in a usability test on mobile devices.
Reflections
Throughout this project I benefited from peer feedback, in addition to seeing my prototypes impact the real experience of users during testing. From this, I learned these important ideas:
1. Refocus with usability testing
Some elements that seemed clear to me were not apparent to users, which emphasized the importance of testing designs throughout the project. Several users didn't recognize early iterations of the Map Explorer as a map at all, which led me to choose a different graphic and place higher emphasis on the call to action button upon loading the page.
2. Communication > Aesthetics
When I began to add color later in the design process, I found it detracted from the whitespace that made the page readable in earlier iterations. In my final design, color is used sparingly to highlight specific information rather than as an artistic addition.
Next Up
Launching an application portal trusted by hundreds of visitors and org members.
