Back to Case Studies
Seed Filter UI
A word bubble that says seeds
alta seeds
While building a new website for Alta Seeds, we needed an interface for users to quickly filter their product offerings in a way that made the most sense. Filter interfaces weren’t a common feature in the competition space, so we had the chance to bring something new to the conversation.
My roles: UX, Research, UI Design
The team also included: a Developer, an Art Director, a Copywriter, and input from the client.
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).
A collection of product info used to build the filter
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.
A detail of the filter logic flow chart
The "baseball card stats" were used to figure out the filters for each category.
A diagram showing the logic for the filter
This exercise was done for each of the three crop types to build out the bones of the filter.
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.
A sketch thinking through the flow of the filter page
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).
A sketch of the seed filter UI on mobile
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 of the filter UI layout
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.
A screenshot of the seed filter UI
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.
The final filter UI on mobile
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.
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.
back to case studies