Background
My roles: UX, Research, UI Design
The team also included: a Developer, an Art Director, a Copywriter, and input from the client.
research
I started by reading through the three major seed guide documents the client had. These laid out every single seed for their three major crop verticals: forage sorghum, grain sorghum, and corn. I reviewed each filter wireframe with an expert on the client side to make sure the terminology and groupings would make sense to a farmer/seed buyer, and got their input on what categories of filters would make the most sense to their users (corn growers might approach this differently than a sorghum grower).
To make sure each product would "rank" for the right features, I build a "long-form baseball card" for each to log all their stats.
The "baseball card stats" were used to figure out the filters for each category.
This exercise was done for each of the three crop types to build out the bones of the filter.
sketches
Since there was so comparable interface on any competitor’s site, I started sketching out the UI based on a standard filter pattern. I figured leaning on a common pattern would help acclimate new users.
Deciding what went on each card and how they fit into the user journey.
I knew I wanted the results to live-filter based on user input, and I knew that I wanted all of the filters to be neat and tidy when not in use since filters like this tend to get unwieldy, especially on mobile (more on that later).
Adapting the early sketches for a mobile layout.
UI design
Once I got the general sketches in a good place, I built out a more detailed mid-fidelity wireframe. This was also used to work out the filter category logic with the client.
A wireframe for the filter UI.
It was important to me that we never served the user a “no results” result. To navigate this, the filter logic was set up to only show options that would return something, any filter that would yield a “no result” was hidden. To help the user have an idea of the impact of a given choice, each filter showed the number of results in parenthesis inside of its button.
The final visual design of the filter.
I knew the majority of site traffic would be mobile, so getting the responsive breakdown of this component just right would be key. For smaller breakpoints, I ended up with a series of nested accordion patterns, that share the core signifiers and functionality with the desktop version, but are much more appropriate for smaller screens. Extra care was taken to make sure the mobile flow would be as uncluttered as possible.
How the filter translates to mobile.
Once the visual design was applied, I added in some subtle shadows and color variation to give a sense of depth.
result
The new site launched in January, 2023, with a slated update for Spring of this year. The plan is to monitor usage data and see if we can identify any areas for improvement before the second launch.
