Simplifying a Filter Flow

Background

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.

The Challenge

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]

The goal:

• 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.

My Role

Senior Product Designer

Research
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.

Design
Conceptualized a solution and built a prototype to improve the filtering process

User Testing
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.

Pitch
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.

Refinement
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.

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.

Obstacles

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.