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
Reduce rage clicks: Minimize obstacles and friction in the vehicle preview experience.
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%