Case Study: Reducing Friction in Vehicle Previews for a Seamless Auction Dealer Experience

Project overview

Role: Sr. Product Designer, UX Researcher

Team: 1 PM, 2 Engineers

Timeline: 3 months

Tools: Figma, Ethnio, Optimal Workshop, FullStory, Miro, Microsoft Teams

Summary

The CarMax Auctions site average time on page per car increased from 3 to 5 minutes for users previewing vehicles. My goal was to optimize the preview experience to lower the average time spent per car, enabling users to explore more vehicles efficiently.


Problem Statement & Context

The Problem

Users were spending more time previewing a single vehicle. Our analytics showed that power users and non-power users both increased their relative previewing average by 1-2 minutes.

Why It Mattered

  • Wholesale vehicle inventory is released a few days before the auction. The more time a user spends previewing a single vehicle, the fewer total vehicles they can preview.

  • The increase in time reflected the lack of confidence users (dealers) had in the vehicle photos and information being displayed.

Constraints

  • Timeline: Needed to test & release within 4 months.

  • Technical constraints: Backend infrastructure had limited flexibility due to legacy code.

Research & Insights

User Research

  • Conducted 4 usability tests, interviewed 10 dealers, and surveyed 100+ users

  • Heatmaps showed users clicking arrows buttons multiple times to preview vehicle photos

  • Users would click and enlarge vehicle photos to preview and assess exterior damage

Key takeaways

Rage clicking

Heat maps showed 15-20 consecutive clicks on the navigation arrows.

Expanding to fullscreen

Users enlarged vehicle images to closely inspect exterior damage.

Rage clicking

Power users averaged 1-2 minutes, non-power users
3-5 minutes per vehicle.

Photo order matters

Users navigate to specific photos to assess damage.


Ideation & Exploration

Brainstorming & Solutions

  1. Reduce rage clicks: Minimize obstacles and friction in the vehicle preview experience.

  2. Enhance photo functionality: Optimize vehicle photo zoom experience.

Wireframes & Testing

  • Created high fidelity wireframes & prototypes, and conducted usability tests with 10+ users.

  • Utilized first-click tests, and user surveys for feedback on site navigation.

Solution & Final Design

Wireframes & Testing

  • Zoom hover: Enlarge a specific portion of the vehicle photo when user’s cursor is over it

  • Photo categories: Organize vehicle photos for quick navigation

  • Update photo carousel arrow location & functionality: Left arrow and Right arrow are closer together.

  • Vehicle thumbnails: Increase the number of vehicle photo thumbnails

Reflection & Learnings

What worked well

  • User outreach and iterative testing enabled us to validate our assumptions quickly.

  • Using tools such as FullStory, Ethnio, and Optimal Workshop ensured solutions centered on user feedback.

What could be improved

  • Hover zoom solution focused primarily on desktop users, mobile-users may experience friction when switching between devices.

  • Improving the vehicle photo experience is just the first step in the overall preview and assessment process.

Conclusion and next steps

  • Survey & track users for feedback on new changes

  • Iterate and scale to 100%

Previous
Previous

Case Study - Surveys On The Go Onboarding

Next
Next

Case Study - Google Support Annotations