Final design

Suggested Filters

Contextual filters for car shoppers
6.1.18 - 7.15.18

Problem

Autotrader offers filters to reduce your results set. However, through usability testing, we learned people had trouble with discoverability of those filters and felt overwhelmed.

Team

  • Product Lead
  • UX Lead
  • Dev Lead
  • Analytics Lead
  • UX Architecture
  • Content Strategy
  • SEO

Outcome

  • 10% engagement rate.
  • 8% lift on conversion rate to “Vehicle Details” pages.

My Process

case study highlights are bolded

Discover

  • Analytics Review
  • User Interviews
  • Contextual Inquiries

Define

  • Decision Matrix
  • User Stories

Design

  • Competitive Analysis
  • Function Flow Chart
  • Wireframing
  • Usability Testing

Deliver

  • Visual Specs
  • Functional Spec
  • Component Map

Determine

  • A/B Testing
  • Analytics Review

Background

Autotrader allows car shoppers to search and peruse car classifieds from anywhere in the continental USA. As a part of that search process, there are a diverse set of filters that allow people to get to the car they would like to purchase. However, through usability testing, we learned there were a few pain points...

Discover

To start things off, I worked with the Analytics Lead and UX Research Manager to uncover the following insights:

  • Approximately 35% of users got stuck on our Search Results Page filters.
  • The most commonly used filters were Make, Model, and Body Style (in ranked order)
  • Users that selected a Make/Model were most likely to generate a lead.

Define

Coming out of the research phase we had identified the problem to solve - sidebar filter discoverability. There were several ideas to solve this problem, such as opening certain filters, creating a horizontal filter pattern, and reordering our current set. I used a decision matrix to determine the best choice moving forward- suggested filters.

Design

I conducted a competitive analysis to see how others were offering filtering solutions, how they worked, and what the surrounding context was.

From the analysis we were able to derive some UX goals:

  • 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

After the problem was well defined, it was time to think through functionality. Through collaboration with the rest of the my team and the UX group as a whole, this was my final proposal:

Through usertesting.com, I set up usability tests for three concepts. Here two alternative concepts that did not end up winning. One employed simple brand logos and the other leveraged a cognitive bias where shapes that differ from others get noticed (Von Restorff effect).

I built prototypes in Sketch/Invision and tested the final design at mobile and desktop break points. The test script had people search for a specific vehicle from the home page and see if they engaged naturally with the suggested filters. Much to our surprise, 8/10 people used the filters without provocation! Moreover, all of them naturally understood the prototype functionality on both mobile and desktop break points. Here is an example test :

Deliver

Leading up to the end of the design phase, I started involving our UX Architecture team (who owned our design system) to insure our solution had a clear plan regarding the design system.

Working with the development team and UX Architecture I owned the creation of the following:

Determine

The business saw a strong 10% engagement rate and an 8% lift on conversion rate to “Vehicle Details” pages. This was certainly a success story for our business and the UX group as well.

Final Design default desktop screen

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

That's it!

I hope you enjoyed this quick tour. Please let me know if you would like to discuss my skills and experience a bit more.

Back to Case Studies