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.
See the filter in action on the new Alta Seeds site that launched in January, 2023.
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).
IMG: big gross filter matrix sketch
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.
[IMG: good notes sketch of filter]
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).
Once I got the general sketches in a good place, I built out a more detailed mid-fidelity wireframe.
[IMG: Desktop wireframe]