autoTRADER.ca
How do you brand for idea creation and brainstorming? Enter Quartz, a online community drive mindmapping web app.
The Opportunity & Challenge:
Responsive Web & Native Apps Product Design
April 2018 - July 2020
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 gear head 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 IP’s and helps millions of Canadians search for, sell, and buy all kinds of autos online.
During my 2+ years working full time here I had the pleasure to research, plan, test and launch 100+ successful features and re-design on both responsive web and on iOS & Android form factors. As well as a new style guide system that changed how ideas become designs and the process of handing off to the development teams.
This is just a taste, so I recommend you read the full Case Study!
Highlights
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 on 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:
The CUT re-design
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 owe 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 more simple 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 a content block to the next content block.
Animation Protoyping
I was asked to create concept animations that would help illustrate how a page should animate.
This is 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 really made a big difference for the speed of 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.
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 with changing hero images based on the users searching criteria.
The default experience is 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!
This is just a taste, so I recommend you read the full Case Study!
