Background

Common sentiments we’d hear from our in-person, moderated usability testing would be:

• “I’m very overwhelmed by all these filters…”

• “I can’t seem to find the color filter“

• “Ooouu! What does this filter do?“

• “These images are tiny!”

Web analytics showed that for the vast majority of product categories, the top five filters for that category get over 80% of engagement.

This triggered the hypothesis that if we only expose 5 filters on landing, low intent users will be less distracted by the amount of filters they can apply, therefore more apt to browse a larger product set. While also creating a more focused experience for customers who know exactly what they’re looking for.

Hypothesis

We believe that only exposing the top 5 used filters per product category for all users will provide a more focused filtering experience. We’ll know this is true when conversion rate increases.

Results

Users who were shown the new experience, drove an Add to Cart and Conversion rate increase of over 2% and exit rate decrease of over 1%. With tens of millions of users visiting Browse everyday, this resulted in [exact amount pending] estimated annualized incremental revenue.

My coNTRIBUTIONS

• Usability Testing

• Competitive Research

• Wireframes

• Visual Design
  

Platforms

• Web (Responsive)

• iOS

With the general direction agreed upon, my first step was to begin researching websites that utilize a condensed filter menu, often horizontal in layout. I surveyed 14 e-commerce competitors, as well as some in entirely different industry (e.g. clothing). I paid close attention to the trends associated with experiences that utilized horizontal filters in order to gain insight into common trends and patterns.

During literature review, I came across this Baymard Institute article speaking to all the benefits that can come from adopting a horizontal filter menu. One of those benefits we were most interested in was the added horizontal space we’d gain by removing the filters from the left. Space we could use for the products in the grid, specifically the product images. Sufficient product imagery size is crucial at this stage for evaluating products.  

From the competitive analysis, I identified a few implementations that Wayfair could adopt. Feedback from the rest of the UX team steered toward a paradigm that’s seamless across devices. With that in mind, I proposed we move forward with a basic horizontal toolbar with no more than the top 5 filters exposed and the rest dormant behind a link. When pressed, the link would expose all available filters in a drawer. As horizontal space is available on the device viewport would filters show.

On the smallest devices, the toolbar is reduced to a “Filter” button, when pressed launches the drawer. Thus, seamless across devices of all sizes.

As part of the design system team, I utilized our standard UI components for quick implementation during development. Thus the handoff with Engineering was near seamless. Plus, we were able to reduce the amount code needed to build since the mobile experience is near identical to desktop.

Retrospective

Due to lack of resources and time, we weren’t able to garner further insights about what’s important to users at this stage in their purchasing journey. I would have liked to compose a journey map in order to capture users’ feelings, thoughts and frustrations.

The approach at the time was to gain minimal customer data and jump straight to building the solution. However, we could’ve done a better job of framing the problem at hand. With that, I would’ve loved to explore more options outside of the left hand v.s. horizontal filters.