The $Million Dollar Filter Problem

5.15.19 - 7.15.19

Improved usability and findability for car shoppers.

Quick Summary

Report

Problem

approximately 65% of consumers were not using filters to reduce their results
high bounce rate (45%)

TASK

My Actions

Examined analytics data to mine quantitative insights
Conducted usability tests to fortify/explain quant data
Collaborated with Engineering and Product to finalize interaction and visual design

ANALYTICS

Outcome

Conversion

10%

Engagement

Team

Product Manager
UX Lead
Dev Lead
Data Analytics Lead
Product Owner
SEO Lead

Time to change your filters

Autotrader connects millions of car shoppers with dealers across the continental USA. With over 3 million vehicle listings, helping shoppers find their perfect match efficiently is critical to our success. However, our data revealed a concerning pattern:

65% of our users were scrolling through pages of irrelevant listings without using any filters, leading to frustrated shoppers and missed opportunities for our dealer partners
A 45% bounce rate indicated that nearly half of our shoppers were leaving before finding what they needed

The implications were significant: If even a small percentage of these users could find relevant vehicles faster, it would translate to millions in additional revenue for our partners and better experiences for our shoppers.

The Challenge: transform our filtering system from a barrier into an intuitive tool that helps shoppers quickly narrow down to their perfect vehicle.

Digging into the what and why

With millions of daily visitors and comprehensive analytics tracking, we had a wealth of data to mine for insights. But numbers only tell half the story – we needed to understand the human behavior behind them.

Quantitative Analysis: Working with our Analytics team, I dove deep into user behavior data covering 3 months of traffic (approximately 90 million sessions). Key questions we investigated:

Which filters were being used when shoppers found their desired vehicles?
What were the user paths that led to dealer contacts?

To understand the "why" behind these numbers, I designed and conducted targeted user research:

10 remote moderated sessions with active car shoppers
Participants needed to be actively searching for vehicles with at least two specific criteria in mind
Sessions focused on understanding their filtering strategy and pain points

The paths most taken

Our research efforts revealed the following key insights:

Cognitive overload was the primary barrier: "There are so many filter options, I don't know where to start"
The most commonly used filters were Make, Model, and Body Style (in ranked order). There was a definite gap between the rest.
Users that selected a Make and Model were most likely to generate a lead.

Finding the right direction

Our research revealed a clear challenge: transform our overwhelming filter system into an intuitive tool that guides users to relevant results. But with multiple potential solutions on the table, we needed a systematic approach to determine the best path forward. Three main approaches emerged from our initial ideation: pre-expanded filters, horizontal filters, and suggested filters. To evaluate these options objectively, I created a decision matrix weighing each solution against key criteria:

Usability
Design System compatibility
Scalability across Autotrader product line
Technical feasibility

Suggested filters was the clear winner!

I studied filtering patterns across both automotive and non-automotive marketplaces. The following design principles emerged:

Use suggested filters sparingly. Only use when it would be highly beneficial to the user
Reveal selections in the sidebar filters to promote engagement with sidebar filters
Avoid bold, banner-y graphics

With the objectives coming into focus, it was time to think through functionality. Through collaboration with the rest of the my team, we were able to balance user, technical, and business goals and compose our initial proposal:

The contenders

Through moderated usability sessions on UserTesting.com, we evaluated three distinct approaches:

The Brand-Forward Approach

Hypothesis: Familiar visual anchors (brand logos) would drive engagement
User Feedback: "The logos catch my eye, but I'd like a view of the car"
Key Learning: Brand recognition worked, but the execution needed refinement

The Von Restorff Approach

Hypothesis: Visual contrast would naturally draw attention to filters
User Feedback: "I noticed these right away, but wasn't sure if they were ads"
Key Learning: While visually striking, the design created trust issues

The Winner: Integrated Suggestions [Final Design]

Hypothesis: Combine accolades from other concepts to provide a winning concept
User Feedback: "These feel like helpful shortcuts rather than forced options"
Key Learning: Maintain a clear connection to the full filter panel to provide better UX

Finishing touches

Working closely with our engineering team, I created comprehensive documentation to ensure pixel-perfect implementation while maintaining performance and scalability. These were part of the technical implementation:

A component map referencing (other) components, props, and states
Visual design specs
A functional spec that would articulate behavior
Documented accessibility requirements (ARIA labels, keyboard navigation, screen reader support)
Server-side rendering support for SEO

Measuring Impact

After launching to 50% of traffic for statistical significance, the data told a compelling story:

Filter engagement rate increased by 8%
Bounce rate reduced by 3%
Conversion to Vehicle Details Pages rose by 10%
Dealer lead quality improved: users who used suggested filters were 25% more likely to contact dealers

fast_rewind

In retrospect...

I definitely learned a lot about conducting research in this endeavor. With my Lead UX Researcher in support, I was in charge of creating the test script, launching the test, analyzing videos from usertesting.com, creating any follow up studies, and creating a final report. I found that I very much enjoy being in the learn-build-measure mode as a UX designer.