KSL Cars Search Results Case Study

UX Research and Design

The most important step in the car searching process, this interface helps people searching for a car to narrow visible listings to only the most relevant vehicles. 

Jun 2021 - Sep 2021

SRP.jpg
Empathizing With the User

Quantitative Data

Competetive Audit

Personas

User Interviews

Starting With Quantitative Data

I first looked into improving the experience on this page when looking at click data. Clicks on left-rail search filters were very low and limited to keyword, price, mileage, make, and model. Clicks on the large featured ad  were almost non-existent. I made a research plan to find out why.

old_2x.png
User Personas

Understanding who is using the search results page was key for understanding how to meet user needs. Based on previous customer interviews and data collected from around our organization, I was able to define 4 distinct user personas.

personas.png
Competetive Audit

I learned through a competitive audit that though the page's feature set was consistent with experiences on competitor sites, some aspects of the page layout broke convention. The most obvious of these aspects being the large featured ad pushing listings below the fold, and grouping of links occupying the same level of hierarchy.

audit-report.png
User Interviews

Moderated usability sessions were conducted with 8 users that represented the 2 buying/browsing personas. Data from these interviews was analyzed and these seven insights were identified.

1.  The large featured ad is not helpful or relevant

2. Search filters are confusing and hard to use

3. Users are unable to complete the sort listings task

4. Users prefer larger photos

5. Keyword search is the most used search method

6. Many filters have low engagement as users don't need them

7. Users prefer infinite scroll and ignore pagination

Starting the Design

Ideation

Wireframing

Low-fidelity Prototype

Usability Study

Ideation
A team ideation session was held during which several ideas were quickly wireframed. The team chose the best direction to design and test. According to principles of agile development and design thinking, ideation is most successful when everyone on the team is involved. 
Wireframing
wireframe.png

Featured ads now occupy 1st position and are relevant to search

Prominent keyword searh field

Infinite scroll

Larger photos

Closable filters

Low-fidelity Prototype
I created a low-fidelity prototype using Adobe XD. The prototype was created quickly and included limited representations of product features. This allowed me to gather initial feedback to our idea before committing a lot of resources to building the page. 

Round 1 Findings

1. Users want more listings per page

2. The "sort" menu is difficult to find

Round 2 Findings

1. Fixed to filters cover too much space on smaller screen sizes

2. Fav heart grouped with contact is confusing

Refining the Design

Mockups

High-fidelity Prototype

Accessibility Audit

Build, Test, Iterate

Mockups
Search filters in the left rail were simplified to the 5 used most frequently and put in a fixed pinned filter bar on the top of the search results page. Other less frequently used filters are hidden in a filters drawer.
SRP Desktop 1920px Collapsed Facets_2x.png
Screen Shot 2021-11-12 at 9.27.32 AM.png
High-fidelity Prototype
Accessibility Audit

1. All text meets WCAG contrast standards and size standards (4.5:1 text to background value ratio, sized at least 14pt for bold and 16pt for non bold text)

2. Tabbable focus states on all clickable page components including chips and contact buttons.

3. Facets with sliding selector bars also have corresponding input fields since sliders aren't usable through screen readers.

Impact

The new search results page was rolled out incrementally, starting at visibility for 1% of our users and slowly increasing visibility over a 2 month period. This gave me an opportunity to talk to users and customer service representatives about how successful the changes we made were. 

I also sent surveys to our users to gauge sentiment about the significant changes we had made to this page. Comments were 75% positive. 

Impressions for search results increased by 45%, most likely due to the infinite scroll feature that was introduced in the release.