Date: 2/21/2023
Role: Product Design, UX Research
Collaborators: Stephanie Rogner, Chris Seaman
Background
This is carmax.com, the largest used car retailer in the US. They're known for convenience, reliability, and no-haggle pricing.
Important terms:
Vehicle Ads - Ads you might see at the top of Google for single car listings.
Car Detail Page - The primary page for viewing cars sold on CarMax.
Progression - When people continue to shop with CarMax.
Bounce - When people navigate away from a site after viewing it once.
These visitors were bouncing at a high rate, leading to reduced ROI.
This was due to "similar cars" recommendation being placed too far down the Car Detail Page.
Bounce rate - The percentage of visitors who navigate away from a site after viewing only one page.
The hypothesis was, because our recommendations were displayed far down the car detail page, below where most users would typically scroll, we were not effectively exposing users to our inventory.
That's why the vehicle ad landing page was created: to offered a simpler version of the car details page, with less information and inventory displaying just below the fold to immediately catch the user's attention.
Problem
The vehicle ad landing page was not increasing paid ad traffic progression to CarMax's inventory.
Opportunity
-
Uncover the reasons users weren't progressing via user research.
-
Test and iterate various solutions.
-
Improve the user experience of the landing page.
Discovery
During my first week, I joined a user testing session. We couldn't find anyone to join, so I stood in as a user and we proceeded with our test. I gained a lot of insight during this session and provided much-needed fresh perspective.
I then learned a lot from an ethnographic study of our target market presented by a recruited third party. There, I was introduced to our three personas: Savvy Seeker, Purposeful Explorer, and Budget Bound Believer.
I also led moderated interviews with customers in a broad, generative way. This led the foundation for familiarity with who was encountering our product and their broader attitudes about and experiences of CarMax. This helped me learn what users value about Carmax, and some of the difficulties inherent in the shopping process.
Then, we honed in on behavioral research, this time recruiting users who were actively shopping on our page and asked them continue to walk me through their shopping process. This helped me learn about the funnel.
Last, we followed along with users as they navigated the landing page using a tool called FullStory. Here we learned how people used our product outside of interviews.
In the end, after spending a couple of months in research mode we emerged with a deep understanding of our users needs.
Here's some of what we learned:
Insights
-
Shopping for cars is complex, long, and fraught with problems with trust and consistency.
-
For users arrived on our landing page, they were missing most crucial information, especially photos, that they needed to make a decision.
-
As a result, users spent about 2 seconds on our landing page before clicking through to the next page to see car details. They really weren't engaging much with our page.
-
Once there on the details page, they interacted deeply with the details of the car, then turned back to search engines like Google to discover other cars or other browser tabs to compare.
-
Any chance we had of enticing users with our inventory on the landing page was undercut by the fact that users inevitably wound up on the car details page, where inventory was all but hidden.
-
Until this point, they team was applying small iterative changes to CTA or secondary buttons and running AB tests, without success.
Roadmap
During an on-site visit, I worked with my product manager to craft a strategy for how we would approach the coming quarter and year. I led us through feature prioritization exercises.
Here's the plan we came up with:
-
Improve usability and trust: Improve the design (feel, hierarchy, readability) of the landing page to improve engagement. Remove low-impact features and focus on what users really needed.
-
Improved Photos Experience: Provide a lightweight photo experience that allows users to experience the car without driving them too far from our inventory.
-
Enhance Inventory Visibility: Make the inventory more prominent and accessible on both the landing and details pages. Since users are accustomed to using browser tabs for comparison, test comparison tools or features within the site to retain users.
Visual Design Refresh
Starting with a visual design refresh enabled us to start making progress without slowing us down with things that needed user testing.
Here's a breakdown of the updates:
-
I borrowed the header design from the car details page to enhance design consistency and visual hierarchy.
-
Improved responsiveness and layout consistency.
-
Left-aligned text for better readability.
-
New like and share buttons to save room on mobile screens.
Handoff
I made extremely detailed design specs in Figma to compensate for limited developer resources and front-end experience.
VQA
Prioritized list of comments and made detailed cards as follow up.
Improving the photo carousel
While the layout redesign was being developed, I started working on the photo experience. This was less straightforward, and required a bit more thought. I needed something that was both compact and engaging, but didn't take users too far away from the landing page and undermine how they would
The first couple of problems were 1) nothing happened when you tapped on a photo 2 you had to click to the details page to see all the photos. We didn't see why we couldn't give users a full 360 view of the car inside and out without requiring them to move on to the next page.
The first idea was to make sure that tapping the images opened up a larger photo. We saw users trying and failing at this over and over again. But we needed to make sure the full screen image was modal, so when they closed it they would return to the landing page.
The second was to enhance the carousel experience. Instead of thumbnails, we could save vertical space and make it easy to swipe through all photos horizontally or tap to view a gallery.
This led to the first user tests, where users could simply swipe through the carousel, tap to open a gallery of all images with exterior and interior separated, and tap on an image again to see it in full view. Users could close this modal experience, and easily return to the landing page.
360 Carousel Prototype
We take a 360º photo of every car, and I thought we had an opportunity to use this to create a really engaging experience without a modal. I wanted to test what would happen if we let users swipe to spin the car on the page (instead of swiping through a carousel).
In this design, the user would swipe to spin the car, or tap to open up the gallery. There, they could navigate through all photos in the modal, and tap to open up fulls screen.
User Tests
-
Swiping through a carousel without thumbnails was no problem at all. It was perfectly natural, meaning we had an opportunity to save some vertical space and move the recommendations higher up on the page.
-
Tapping to open a photo gallery was a unanimous delighter, despite users expecting a fullscreen image. This was primarily because it separated exterior form interior, and gave them an organized way to quickly move through photos.
-
The 360 carousel was engaging, but not as much of a surprise or delight in testing as I'd expected. Still, it worked.
Final Design
This work resulted in a X% increase in progression, and a x% increase in progression to sales leads.