Good, Great, Fair, Above & Beyond. UX/UI Product Design Case Study.
autoTRADER.ca Responsive Web & App.
April 2018 - July 2020
All trademarks and imagery are the property of their respective owners.
A Quick Backstory
As a young boy waiting for my folks to finish up at the grocery store, I’d be nose-deep in the autoTRADER magazines dreaming of what it would be like to own one of those pretty classic cars.
Coming from a gearhead family, cars have always been a part of my interests. So when I received an opportunity to design for the household name, it was a no-brainer. autoTRADER.ca is one of Canada's largest IPs and helps millions of Canadians search for, sell, and buy all kinds of autos online.
You could call this my big break into the full-time design world. I had a year a half of freelancing contracts and instructing under my belt before landing this job, but that was all part-time.
This role was so important to me and I took it with the utmost importance and effort I could manage. It was the role that took me from Jr. to intermediate-level design. I stumbled here and there, made mistakes but learned just as much as I failed. The projects I was a part of are the proudest and most humbling work I have ever completed. As well, the people I met along the way are by far the kindest and most influential I have met so far in my career. My lessons, gratitude, and respect for autoTRADER.ca, will stay with me for a long time
Transparency and the VDP
The Transparency Project to autoTRADER.ca is all about the consumer. Its MO was to empower the user with tools and information to make the best buying and selling decisions in our marketplace. Features like the iQ price badges indicate if the vehicle is a Great, Good, Fair, or Above average price in comparison to other vehicles in the same area and with a similar history. Or the condition analysis feature which takes into account the vehicle's mileage in comparison to similar listings on our marketplace and another point of interest such as how many owners it had or if it had been in an accident or not.
My assignment to the Transparency project was to optimize all the different features associated with it for customer and business success. The place to find the majority of Transparency features is the VDP. The VDP (Vehicle Display Page) was the crown jewel of my time at autoTRADER.ca.
Here is a comparison of what The VDP looked like when I started VS the time I left:
Sometimes an experience speaks better for itself. Do not feel shy about going to either www.autoTRADER.ca or using the native apps to see my work on the VDP in action!
It was my duty to make sure anything new or old happening on this page was considered and implemented in the best way for our users and business. Later on, I will talk about how my time on the VDP led to helping redesign the entire user experience for our users.
Together, our team AB tested countless designs live with our users to gain direct data that informed our products. Transparency was a lot about giving the user the power to understand the history of the vehicle before they bought it. We had different widgets on our VDP that helped the users such as the Price analysis and Condition analysis widgets and the listings badge that declared if the listing was a great, good, fair, or above-average deal based on a high-tech algorithm.
Pricing Badges
One of the best examples of my work I can share is the creation of two additional listing badges to balance users' understanding of our inventory and help them find their desired vehicle.
Up until this point we had only four badges for our listings, and when testing a new version of listings on our search results page we found that listings that did not have one of these four badges had a decrease in click-through rate. My hypothesis was the addition of four new badges left the other two to the wayside and made them seem less valuable or interesting to the users.
Rather than remove all badges on the listings and start over, I suggested we create two new badges that followed a similar design language to the transparency badges. The team liked the idea, so I ran a quick sprint and came up with two new badges for the private and new car listings. This test aimed to see if the badges could also reflect the type of listing, not just its deal and to see if we could make a new unified way users can search and understand our listings.
The test was successful as we saw the private and new car listings return to their normal click-through rate with the addition of their own listings badges.
The CUT redesign
The most difficult and most rewarding project I had the privilege of working on was nicknamed CUT, the Consumer UX Transformation. It first started with a concept full redesign of the app made by a fellow designer. Once the project got legs I was asked to join in because of my work on the “Vehicle Details Page”.
We were to start on a new VDP and rework all styles, buttons, logic, and anything else the user/consumer would interact with. When we had made the design fully and user-tested an MVP on the app, we would then translate the designs to a responsive web then continue to MVT the design and optimize.
With the success of the redesign, our new CUT style was the newly adopted design system for the entire company. Together we created this system owes credit to our handoff procedure and expressive allowance to try new ideas.
There are a lot of secret NDA secure differences that I cannot discuss here. However, these are some of the key differences we created from the original VDP to the CUT VDP re-design:
Our main goal of this re-design was to reduce the number of different styles and CTA’s on the page to drive click-through rates and understanding of the page. Our running hypothesis was that if the user has less varied text styles, button styles, and a reimagined page architecture, our users would be able to find what they are looking for and use the products and lead-generating CTA’s.
There were 8 different CTA’s a user could interact with on the original design. Our re-design aimed to limit that down to 3, A lead generating CTA, a CTA to interact with a card, and a CTA to save the listing for later.
The hypothesis was that making fewer choices and differences for the users would lead to a simpler experience and better KPI metrics for our business needs. A win-win situation.
We found this system to work because of the testing we did. It confirmed that users could navigate the page and interact with the things that matter to them because they weren't confused or trying to understand why the interactions were different from one content block to the next content block.
One pain point we saw users held up on was large description sections entered in from either a dealer or private seller listing the vehicle for sale. In the original design the different content blocks of the VDP were in accordions and they were all closed except the description. In the re-design, we tested the idea that users could have a preview of what's in the card and they could expand the information if they want.
This allows a better quick read of the page but still allows the user to find more information easier because they can see a hint of information is cut off from progressive disclosure.
To execute this redesign, we had to redesign the way we presented our work to the developers and QA specialists.
We created a “CUT style guide” in InVision that served as our online handoff system. It was an online handbook the team could navigate around, like a website! After a section of the re-design had been designed, vetted, and tested it would enter the style guide. Our goal with one of our pages was to make sure that the team would have all the information that they would need to complete their work and execute the design in the best way possible.
The example below is from the Condition Analysis widget I made. I wanted to create a micro-interaction where the indicator would animate to its final location while given the user.
After the success of adding in the Condition Analysis animation and other micro-interactions. I was asked to create concept animations that would help illustrate how a page should animate.
Below are examples of how I imagined the desktop VDP would interact when a user scrolled down the page. Without concepts like this, a developer has to assume how the page feels, and makes it a lot more difficult for them. So animations like this made a big difference in the speed at which the project can be completed and the final feeling of the experience.
There are multiple moving parts here. The sticky top bar, the sticky lead form on the right, and the main body of the page. The idea of this concept was to have the ads on the page receive their initial loading metrics and then move out of the way. This is because after a certain amount of time, we wouldn't need to have them displayed anymore to have them as a successful ad, and the user sentiment towards ads was poor. This idea was meant to be a win-win situation.
This idea was to bring a bit of life and presence to one of our most lucrative features on Autotrader, the price analysis. The concept is that this animation would trigger once the page was loaded and would not loop. It brings something I refer to as “signs of life” to the page and gives it a polish a static page cannot achieve.
Another micro-interaction that I was asked to explore was the home screen on the Native apps. We had an opportunity to bring character and context to the experience by changing hero images based on the users' searching criteria.
The default experience is the passenger vehicles homepage with a red Honda Civic, if the users wish to change their search to Motorcycles or boats, etc. they select the category with the drop-down on the top right.
The problem is that the home page would still show that Honda Civic as the hero image and that is no longer relevant to the type of content the user is searching for.
We saw an opportunity here to both give a contextual experience to the users and sell the “Hero slot” on the homepage to different manufacturers. It was my job to present ideas on how the experience could take advantage of this opportunity.
Projects like this made it truly a blast to work at autoTRADER.ca!
Conclusion and departure
Over the years I'm happy to have been able to be a part of a design team and weigh in on almost every page on the site and app. Additionally, all the amazing colleagues I had who were outside of the design realm taught me so much about what it means to be a great coworker. From optimizing single features to creating a new UX system and UI identity, it has been a joy to design within such an insightful and welcoming team.
With the COVID-19 pandemic, the company had to limit the amount of staff it could house. I was a part of the layoff and therefore my departure from autoTRADER.ca was because of the global crisis.
