autoTRADER.ca
As the UX Designer for the Transparency team, I led the research and redesign over four months with product and marketing in Burnaby and Toronto. I also worked closely with the developers, QA and analytic team pre and post-release.
autoTRADER.ca iQ calculates values of used vehicles based on over 3 million points of data from the autoTRADER.ca marketplace.
The iQ price badges appear on the vehicle listings in the search results and on the vehicle details page. The badge provides price guidance by helping consumers find the best deal in their area and understand the price.
Background
Buying a used car is stressful. There are so many factors to consider with safety, trust and value as the key motivators to completing the purchase. Whether they are buying from the dealership or a private seller, the experience is the same.
autoTRADER.ca wanted to deliver the most complete, transparent, and trusted car shopping experience for Canadians. Great and good price badges were already in production, and this was an opportunity to introduce Fair and Above Average and become fully transparent.
Original price badges and listing design, 2017
Research
Over two days, I collected 131 responses through Usertesting.com, sampling Canadians, who were in the market to buy a used car.
The objectives of the study were to understand:
How consumers would feel about seeing listings with Fair Price and Above Average badges
What consumers thought about the current Great and Good Price badges
What they need for us to gain their trust in price guidance
Based on the qualitative and quantitative results,
Participants would trust aT.ca price ratings, mainly because of their national reputation but also felt our price ratings lack supporting information, such as, where the data comes from and how was it calculated.
They felt they could trust the price guidance even more by including Fair and Above Average ratings.
The current listing design was too cluttered, making it difficult for the participants to see the price badges easily.
Badge and listing redesign
Users found the original badges boring and nothing out of the ordinary. As I began redesigning, the icons weren’t scalable and didn’t add much value or context to the badges. I needed to tie in the iQ brand which was missing and included iQ bubble so that users would see this as a autoTRADER.ca play and not something slapped on by a dealership.
Using usabilityhub.com, I went back and forth with different designs, iterating based on the feedback. The participants found the colours too bright and alarming. A couple of users said that the orange badges looked like bad deals, which wasn’t necessarily the case. If a vehicle in our inventory had lower than average mileage or was rare to find, we tagged it as “Above Average”.
The hypothesis was that if people were scanning listings based on the colours, they would avoid clicking on Above Average vehicles, thinking that was overpriced or bad deals. I tested the hypothesis and by replacing the orange with a neutral yellow and saw a change in the users' perception in their feedback.
Listings
The listings were a Christmas tree of badges, icons and buttons. The challenge to them all work together since I couldn’t remove anything because they were dealer paid products. So the next best thing was to increase the height of the listings to create white space deliberately. It allowed for the price badges to stand out, making it easier to scan and understand. The price delta showing the amount below market is a concept, similar to what Amazon.com does on their deal page by calculating the savings for the user.
Tooltips and landing page
Without any information into the ratings, the badges were meaningless to the users, so I added hoverable tooltips over the badges with a “Learn more” redirecting to an autoTRADER iQ landing page.
The goal of the landing page was to build more trust and transparency with the consumer. Consumers wanted an education page where they could learn how the ratings work and how it can empower them to make the right decision and get the best price.
