tl;dr
I did research, design, and testing for the redesign of Shift’s car detail page. In addition to improving hierarchy, clarity, and qualitative feedback, the new page design reduced fee-related complaints and increased clicks into our test drive booking flow.

The Problem
Shift was getting ~10 Yelp reviews per month complaining about hidden fees, which hurt brand perception and strained operational costs. It was increasingly expensive to deliver at-home test drives to shoppers who were unaware of a car’s full price.

Shift’s service fee and full pricing information was available online, but had been unintentionally buried on an excessively long car detail page. Adding more vehicle information to the page had improved transparency, but hurt hierarchy and clarity without a more holistic point of view.

We aimed to decrease fee-related complaints while maintaining test drive booking rate.

Role
I led end-to-end product design (research, UX, UI, user testing) while working with 1 product manager and 1 engineer.

Design challenge
Create clarity and offer transparency for dozens of car details without overwhelming or distracting shoppers.

Balancing business and user needs
First, I examined existing page data and surveyed used car shoppers to prioritize what car details were most important.

I collaborated on a comprehensive information hierarchy outline with my product manager in Google Docs to aligning users needs with business interests. Doing this upfront helped align priorities for future page designs and team discussions.

Design iterations
My first explorations featured a detailed pricing card that followed the shopper down the page.

While this improved the visibility of Shift’s service fee, the design team believed it gave too much prominence to pricing details at the expense of information about the car itself.

Then, I tried adding anchorlinks to a fixed navigation bar that followed users down the page. Shoppers could either read car details as they scrolled or navigate to a specific section by clicking on an anchorlink.

While users understood how to use the links in testing, they still found it a bit overwhelming to understand key points about the car.

Finally, I tried radically simplifying the page by categorizing all car information into 4 tabs that aligned directly with our initial information hierarchy:

• Overview: The key details of a car that were often “make or break” for a shopper’s decision to move forward with a specific used car or move onto others. Factors like mileage, transmission, miles per gallon, number of seats, and vehicle history/inspection notes are core to shoppers’ vetting process.

• Pricing: The total breakdown prioritized by the initial user feedback and all related payment tooling to understand affordability.

• Features & Specifications: A smaller, but significant, group of shoppers wanted to know specific car attributes that could impact the price or ownership experience. For example, a fancy feature package could add thousands of dollars to the sticker price. A car enthusiast might check specifications to see an engine’s horsepower, or a parent-to-be might want to know if the seat dimensions would fit an infant’s car seat.

User testing feedback was overwhelmingly positive for the simplicity, clarity, and transparency.

• The 'widget area' was really easy for me to understand.

• The details' area is very helpful. Standard for what I'd expect to see about a car. I don't understand a lot of the [specifications], but I'm glad it's hidden upfront.

• On [the old page], there's a lot of scrolling. This [new one] keeps all information in one area. I know where to go when I need to look for something. It’s organized in a way that it’s easy to find.

• This is a lot more transparency than I got with the [car dealership].

Outcome
The new page design increased clicks into the test drive booking flow by 25% and decreased reviews complaining about “hidden fees” by ~50%.