The new design (with new design system components and styling applied as well)
Simplifying a Filter Flow
Improving the method of filtering results on Wine-Searcher
Wine-Searcher is a search engine that helps users find the prices and availability of different types of wine, as well as whiskey, other spirits, and beer. Recently, the site underwent an update to clean up its code and modernize its appearance. However, some aspects of the user experience were overlooked during this process. Our Feedback Team received complaints from loyal users who found it difficult to filter through search results due to the condensing of the filters. As a result, what used to be a one-click solution now required a multi-step process, hindering the speed and ease of use for our users.
While there were definitely advantages to the old version, there were also a lot of other problems that the update had fixed. At the same time, we were working on a new brand identity and establishing a design system that would need to be taken into account.
[See design system case study]
Streamline the filtering process on both desktop and mobile platforms to improve the user experience
Preserve the improvements made to the user interface
Update the user interface to align with the new brand identity and design system guidelines, ensuring consistency and cohesiveness.
Above: Old version (left) vs. post-update (right)
Senior Product Designer
Conducted user surveys to gather feedback on the ease and intuition of filtering results using the current method and analyzed websites with similar filtering complexity to identify potential areas for improvement and gain inspiration.
Conceptualized a solution and built a prototype to improve the filtering process
Conducted user testing to evaluate the effectiveness of the prototype against the current filtering method. This helped to identify any issues and gather feedback from actual users.
Presented the concept and prototype to stakeholders, including product managers, designers and developers. Discussed the findings from user testing, and gathered feedback and suggestions for further improvements.
Incorporated feedback from stakeholders to refine the design, ensuring it met the needs of the users and aligned with the overall project goals. Iterated on the design to optimize the user experience and satisfaction.
Research & Data Validation
First I had to validate whether the comments we were receiving were legitimate – was there really an issue/room for improvement, of were these user complaints outliers? While all feedback is valuable, it's important to corroborate concerns that stem from unprompted feedback as often users only provide feedback when they are dissatisfied. Therefore, it was essential to determine if there were truly pain points in the filtering process.
To gather data, I conducted two first-click tests on UsabilityHub using mockups of the current live site. In these tests, users were shown a mockup of a page, given a specific prompt, and asked to click on a specific location to complete the test. The results were analyzed based on accuracy and speed-to-click.
Test 1A prompted users to use the filters to remove auctions from their search results, while test 2A prompted users to use the filters to show shops that ship to a different location (Michigan) than the current setting (Colorado). This helped to gather valuable insights into the usability and effectiveness of the current filtering process.
I followed up the tests with a survey question to gather feedback from users on the ease of completing the task.
A total of 40 users participated in the tests – 20 users assigned to each of the 2 tests. The results from test 1A showed that 80% of users clicked the correct location in an average of 46 seconds. While the accuracy rate of 80% may be considered acceptable for this type of test, the 46 seconds it took for users to complete the task is quite slow. The follow-up survey results also revealed that more than 50% of users found the filter somewhat difficult to locate or did not find it at all.
In test 2A, 85% of users clicked the correct location in an average of 29 seconds. While the accuracy rate of 85% could be considered acceptable, the time it took to complete the task, 29 seconds, is still relatively slow for what should be the most prominent filter on the page (swapping the shipping state). The follow-up survey indicated that 60% of users easily found the filter, but 40% of users still had some level of difficulty.
Based on these results, it validated that there was, indeed, room for improvement. I presented these results to our stakeholders, who were then convinced this was a project worth pursuing.
Common Denominators & Inspiration
I revisited the customer feedback that was received post-update and found that the common issues seemed to be surrounding how filters are were more separate, not as visible, and the process of filtering was seemingly slower.
Pre-update, the filters had fewer options and they were using UI components that were immediately visible and could trigger in a single click (mostly toggles and tabs). Wine-Searcher now had more filtering complexity, so these components would no longer suffice. The solution during the update was seemingly to condense the filters into categories, and then collapse those larger categories into dropdown menus. But now the problem was that filters were difficult to find and there wasn’t an intuitive way to apply them quickly.
I searched for functional examples of complex filtering, I found that travel booking websites such as Booking.com, Kayak, and TripAdvisor had similar filtering complexity so I used them as inspiration. A common theme – as I already sort-of knew – was the filter panel: all filters were visible in a panel on desktop, and they were condensed to a single overlay screen on mobile.
Initial Design Concept
I got to work putting together some high fidelity wireframes using a left-aligned filter panel and arranged the filters by category. Since many of Wine-Searcher’s filters are single-select with lots of values (country, state, currency), it made sense to keep the dropdown menus for most of the filters, with the exception being ‘Offer Type’, which lent itself to the use of checkboxes to keep them all visible and at the surface. The filters were meant to auto-load once selected, so there was no need for the additional step of ‘applying’ them (an outdated functionality anyway).
I put together a roadmap examining the current filter flow alongside the new concept to compare how many steps in took for the user to get to their final destination. The new proposed concept proved to be a significant reduction in steps. If a user adjusted each possible filter, the clicks would be reduced from 10 to 4 on the free version of the product, and from 15 to 8 on the PRO version.
"If a user adjusted each possible filter, the clicks would be reduced from 10 to 4 on the free version of the product, and from 15 to 8 on the PRO version."
Of course, no change comes without consequences. The addition of the filter panel meant that the Offer Cards (the cards containing the wine seller’s information, the price, description, etc.) would need to be condensed on desktop. This meant that if we were to keep all the same information in the cards, they would take up more vertical space, meaning a longer scroll to compare offers – a point of contention with stakeholders.
This led to another design solution – what if we added the option to condense the offer cards? That way, the highly-educated wine collectors (who’s main objective is to compare prices as quickly as possible) could see what they need quickly, without the additional information that the newer wine buyers do need.
This led to the ‘Compact’ toggle:
I got swift stakeholder buy-in for the toggle, but the information contained in both the default and condensed offer cards took some trial-and-error. The CEO had a lot of input in this and ultimately he made the call in terms of what information each variation of the card would show.
Design Refinement & User Testing
Since we had recently created a collection of design system style guidelines and components, I went ahead and applied them to the mockups. I also wanted the mockups used for testing to be real-life examples, just as the initial mockups I used for testing the current page were.
I conducted two more first-click tests, identical to the initial ones, using the new design concept. The same prompts and number of users were used to compare accuracy and speed-to-click.
In test 1B, 80% of users clicked the correct location in an average of 26 seconds. The accuracy rate was the same as the live design, but the click speed was reduced by 20 seconds, which is a significant improvement for a filter placed below the fold and at the bottom of the panel. The survey results indicated that 70% of users found the filter easy to locate, 30% said it was "somewhat" easy, and 10% said it was difficult or did not find it.
In test 2B, 95% of users clicked the correct location in an average of 15 seconds, a 14-second speed reduction and 10% higher click accuracy. The survey results indicated that 90% of users found the filter easy to locate, 10% said "somewhat," and none claimed it was difficult.
Both tests showed significant improvements in the new designs, with test 2B showing the most obvious difference. Test 1B had results similar to the original test 2A, but context is important here: this filter is specific to Wine-Searcher (show/hide wine auctions) and not something that the average test panelist would be familiar with, so it would always take longer to find than a common filter such as filtering for shipping state. Despite this, the fact that the auctions filter was moved further down the page yet still became easier and quicker to find could be considered a big win.
I presented these results in a stakeholder meeting and was given the green light to proceed with the design change.
When the project moved to dev, it became apparent that the initial time estimates for completion were underestimated. As Wine-Searcher is a small company with limited resources and a consistent flow of tasks, we had to make some compromises. The larger design changes were implemented, but some of the new design system components had to be adjusted later, mainly affecting the functionality of the dropdown menus in the filter panel.
This turned out to be a positive outcome as it gave my colleague and I more time to think about how to improve the dropdown component in a way that would not only be useful in this context but also in other areas of the web ecosystem.
Creating & Systematizing the Dropdown Filters
Study to be continued...