A Breaking Change

In late 2018, Edmunds.com made a significant change to how vehicle prices were displayed on their vehicle detail pages. Previously, visitors could only see the actual price of a vehicle after providing their contact information, but as user satisfaction and conversion metrics declined, it became clear that a more transparent approach was needed. The new system displayed actual prices directly on all vehicle pages whenever possible.

Transitioning to this new model took nearly a year, involving detailed adjustments across the business. One major challenge emerged: how do we help users understand if a vehicle’s price is a "good" deal? There were many possible ways a price could be interpreted, depending on geography, desired options, personal preference, and more. To make matters more complicated, different teams within the company had different ideas about how to tackle this problem.

A First Attempt

REimagining the bell curve

When I joined the project, the vehicle detail pages used a bell curve graphic to illustrate what people nearby had paid for a given vehicle, highlighting a so-called "You Should Pay" price. While functional, the graphic had issues: it was bulky, off-brand, and users struggled to understand the supporting data points. The main price appropriately anchored price expectations, but the Product team believed we could do a better job with a more clearly branded label.

Simultaneously, the marketing team was working on their own branded graphics for use in non-web contexts. I reached out to them to join forces, and together we created several new design concepts, which we narrowed down to four. Next, we gathered feedback using a nationwide survey. Participants evaluated the original bell curve and each new design within the context of a vehicle detail page, identifying which prices seemed like good deals and ranking the graphics on readability and appeal.

REsult: A new pricing graphic

While the original bell curve performed surprisingly well, a new design (Challenger 2) outperformed it in almost every category. Taking input from Product and other desisgners, I refined the details for a new graphic. This clarified two key pieces of information: the “Don’t Pay More Than” threshold and “Estimated Savings”, emphasizing Edmunds’ value in the car-buying process. We rolled it out immediately for all new cars on the site.

Two steps forward, one step back

The new graphic performed well for new cars, but it didn’t account for several scenarios. For used vehicles, there’s no official price, making savings calculations less reliable. Additionally, some new car listings had unexpected data that caused the graphic to break. These edge cases led to confusing displays and undermined user trust.

Short-term Fix: I worked with engineering team to exclude the graphic for used cars while I continued working on a comprehensive solution.

Long-term Goal: Create a single, adaptable graphic that could serve both new and used car shoppers. I took on this challenge personally, exploring new ideas, gathering feedback from the team, and conducting informal tests with coworkers, friends, and family.

Feedback revealed that simplicity was key. From a user perspective, many of these designs were too cluttered with numbers. Even when they could understand the data, it took them longer than they’d spend in a real-world situation. From an engineering perspective, we didn't necessarily have the data to fill all the fields I proposed. Even with fallbacks, the designs were still too complex to work in all scenarios across new and used vehicles.

The problem remained: reduce the number of data points, make the layout appropriate for both new and used vehicles, and feature the branded recommendation.  I decided to focus on the branded recommendation. If we were going to feature a single data point to anchor users' expectations, what should it reference, and was it different from new and used vehicles?

Gaining Perspective with User Research

Realizing I needed more insight, I partnered with our UX Research team to run a series of moderated remote interviews. We spoke with both new and used car shoppers, asking them to describe their strategies for finding a good deal and guiding them through a participatory design exercise where they created their own pricing visual using clip art.

We gave them elements like dials, bell curves, callouts, etc., and asked them to choose what seemed best, and to choose colors if needed. Finally, we asked them to explain their graphics and how they made their choices.

Key insights

• Shoppers consistently said a good deal meant paying “less than what other people paid” for a similar car.
• They viewed a “Good Deal” label as a reasonable starting point for negotiation.
• More than two or three deal rating levels was too much.

With this feedback, I further iterated the design, reducing the number of data points to focus on the most important metrics. This improved usability, but also simplified the logic for rendering the graphic algorithmically across both new and used vehicles. The only piece left to fill in was the final branded pricing label.

The Final Approach

Around this time, the product team was A/B testing additional pricing labels to measure user engagement. We also received feedback from major auto manufacturers about how we should display prices. Since they were advertisers on our site, we needed to take their guidelines into account.

I took the best performing label and the list of manufacturer guidelines, and integrated them into my graphic. The final design featured the Edmunds Suggested Price, as well as two other supporting data points, such as high and low price ranges, for better comparison. These data points could change depending on the context while maintaining the same mobile-friendly layout. This flexible design met both user needs and automaker guidelines while reinforcing Edmunds’ brand as a trusted advisor.