Driving Leads: Optimizing UI for Selling Cars at Canada Drives
In 2023, Canada Drives was known for simplifying the process of buying and selling used cars online, becoming a major player in Canada's market. Teaming up with the vehicle acquisition team, I aimed to improve the car selling process to boost the company's stock of used cars.
UX/UI Designer
Design Lead, FE Dev
Web
Figma
3 weeks
Role
Team
Platform
Tools
Duration
The Problem
When a user completed the 'sell car' form on the Canada Drives website, they were brought to the 'offer page' where a quote was generated for the assessed value of the car.
As revealed by data, the problem was that users who wanted to sell their car to Canada Drives were not progressing past the point of reviewing their vehicle’s assessed value, therefore reducing opportunities for Canada Drives to acquire new vehicle stock.
Upon examining the page, it was clear that the hierarchy and layout of the page could be improved to make it easier for users to discover the 'sell your car' lead generation form.
Goals / Requirements
The goal for this update was to increase the number of completed lead forms by users wishing to sell their car to Canada Drives. As the primary designer, it was my responsibility to propose a design solution to accomplish the defined goal while adhering to the following requirements:
All design changes need to align with brand guidelines
Make use of design elements pulled from the established design library
Propose solutions that required minimal dev resources
Process / Research
I entered the research phase of the project with a few thoughts on how the layout could be improved to increase engagement with the 'sell your vehicle' CTA. The most important information on the offer page is the assessed value of the user’s car. My hypothesis was that the 'sell vehicle' CTA would be more noticeable when grouped directly with the vehicle assessment information, which would lead to more engagement.
As a quick way to validate my assumption, I conducted a competitive analysis to understand how other used car retail sites were addressing this issue. I examined 5 competitors and logged the following observations:
4 out of 5 companies grouped the call to action with the offer
3 out of 5 companies prioritized 'selling the car', with trade-ins being a secondary action
2 out of 5 companies asked whether the car would be a trade-in or a straight sale during the assessment flow
It was clear that the majority of Canada Drive’s competitors were grouping their main CTA on the page with the assessed offer value of the car. Relying on this confirmation, I proceeded to sketch out possible solutions that would rely on this same layout.
Solution
Knowing that I now wanted to group the 'Sell your car' CTA and the vehicle assessment details into one clear section at the top of the page, I began to wireframe solutions that built on this idea.
Canada Drives had a robust design component library created in Figma, which I relied on to create my wireframes. This allowed me to work quickly while also ensuring my layouts could be built using existing elements in an effort to keep the development costs low.
Knowing our dev resources were limited at the time, I mocked up 3 possible solutions which I present to rest of the team in terms of effort required, ranging from lowest to highest:
Low effort - Group sell CTA with offer card
Medium effort - Sell or Trade question asked in assement survey, so only one CTA appears on offer page.
High effort - Add sell/trade decision to assessment form
The lowest effort approach required a simple layout change on a single web page. While the higher effort options required updates to forms and multiple pages.
Upon reviewing the options with the developers and product manager, I recommended proceeding with the lowest effort solution to start with. This would allow us to quickly implement the change on the live site, where we could measure the impact of the change.
After getting final approval on the design solution, I packaged up finalized mockups in Figma and delivered them to the developers. These included a range of screens showing all relevant screen states and responsive breakpoints.
Impact / Reflections
Collaborating closely with developers, we ensured the visual and functional design changes were accurately implemented. The coded version aligned with the mockups and was deployed successfully within a single sprint cycle. While I transitioned to a new role before seeing the update's performance, the intention was to monitor the conversion rate of the 'sell your car' button and subsequent lead form. Overall, the solution delivered met the goal of increasing actionable leads while adhering to brand guidelines and minimizing developer resources.