Overview
CHALLENGE
The 2020 Covid-19 pandemic caused a huge drop in car sales across Canada. Just like many other retailers, people were not comfortable going into dealerships to shop for cars. Canada Drives had to adapt to the situation to stay in business.
PROJECT GOAL
We shifted our business model to allow customers to buy cars completely online (including financing, insurance and delivery). Our competitors were also moving in this direction, and in order to capture the majority market in Canada, we had to launch as soon as possible.
Note: Final designs have been modified and research findings have been redacted in compliance to my NDA.
Tools I used:
Adobe Suite (Xd, Illustrator, Photoshop)
Lucid Chart
Usertesting.com
Userlytics
Yandex Analytics
Full Story
Project Roadmap & Constraints
We were given approximately six weeks to launch our new product. Our constraints were that we had very little time and reduced resources (I was the only UX designer, and our development team was cut in half). Therefore, we did not have time to explore many ideas and most design decisions were made quickly and based on what would be fastest to develop and deploy.
Version 1 Mockups
We launched our minimum viable product after several weeks of continuous overtime. Launching early allowed us to make car sales sooner and provided the needed cash flow to hire more designers and developers to fix the many bugs and work on features we didn’t have time to implement before. Below is a glimpse of our version 1 website we released in 2020.
UX Research
We were able to perform proper research after our soft launch. We analyzed our user sessions in great detail and conducted user testing with multiple platforms such as Usertesting.com, Userlytics, Trymyui, Yandex and Fullstory.
User Testing & Analytics
Many users pointed out they wanted features like a search option and a live chat; these were things we had already planned to implement but it gave us a clear roadmap of what items to prioritize. Below is a glimpse of user insights from our testing sessions.
Competitor Analysis
We analyzed our competitors as well as popular car-buying websites. Many users had mentioned they go to several other car buying websites to compare their options. We found similarities within these platforms and took influence from them; this led to our website being more familiar and easy to navigate for car-buying users.
Competitor User Testing
We also conducted multiple user testing sessions on our competitors’ websites. Below is an example of when we were trying to determine whether users preferred a multi-step checkout versus having everything on one page. The feedback we received would pave the direction we would go with our version 2 website.
Prototype User Testing
After gathering feedback from our competitor testing, I updated our version 2 mockups and created working prototypes for users to test. Here is a brief example of our findings from one of our prototype tests where we compared our version 2 product page with Carvana’s (US competitor).
User Personas
We had already constructed personas from previous customer data and our assumptions of their purchasing behaviors during the pandemic. After user testing, we polished these personas to match our actual user demographic and continuously referred to these personas when making design decisions.
We hired more UX designers to join our team and I no longer had the burden of being the sole designer for the entire project. I oversaw and mentored the new UX designers and we divided the website into four parts. I am now responsible for the “shopping experience” section where we focus on converting customers from browsing to purchasing. Below are some of the screens I have been working on.
Version 2
Mockups
Inventory / Search Results Page
We spent a significant amount of time improving our search results page. Many users had common questions and concerns which we addressed with informative tiles to educate customers about our services (financing, return policy, CARFAX reports).
Zero Result Scenario
When users find zero results on their search, we provide a variety of close alternatives to choose from. Users also get a chance to sign up for notifications; when the car they are looking for is in stock we send them an email. This information gives us a chance to see what cars are commonly in demand and give this data to our purchasers.
Smart Search
We did not implement a search function in our version one release because of our limited inventory. We didn’t want customers to see few search results and leave our site. We added a search bar after we grew the business and collected several hundred cars (compared to a few dozen).
As the user types their keywords, search suggestions will appear to help users find complicated model names. Previous search queries are also saved (and can be removed) to reduce cognitive load.
Smart Filters
Filter options will hide themselves depending on the users’ inputs. This allows for customers to narrow their searches quicker and reduce UI clutter.
For example, if the user applies a black colour filter, only other filters with black cars in that category will appear (the rest will be hidden). Numbers beside each filter also help customers see how many search results they can expect.
Search Different Makes & Models
Through examining our user recording sessions, we noticed many customers were searching up different makes and models but had to apply a new search every time (eg. looking for BMWs and Hondas at the same time).
We decided to improve the user experience by allowing customers to search multiple makes and models simultaneously, a feature most of our competitors are lacking.
Search by Financing Budget
When buying a car, most of our customers go with the financing option instead of paying the full amount. Our inventory page displays a monthly price for every vehicle, but we decided to add a monthly price filter to improve the shopping experience.
Users can input their estimated interest rate, term length, down payment and maximum monthly payment to find cars within that price range. This allows them to search for cars more accurately within their budget so there are no surprises during approval or checkout.
Product Detail Page
Many of our advertisements drop users on the product page; therefore, we wanted to make sure our product pages were informative and educated customers as much as our landing and home pages. This included adding a frequently asked questions section and explaining delivery services and return policies. Many features were also added to allow customers to know everything about the car without physically seeing or touching it (walk-around video, imperfection images, history reports).
Purchase Pending
Vehicles are reserved for 60 minutes when customers are in the process of purchasing them. Other customers can sign up for email/text notifications in case this car becomes available again (if the previous customer quits the checkout process, which they often do).
Vehicle Purchased
Customers often like to view the car they purchased while it’s being delivered. The vehicle gets taken off the inventory page but we allowed them to visit the product page through their account page so they can admire the photos and view the specs again while they anticipate their delivery.
Financing Flow
Customers can purchase cars through a cash purchase, financing or getting pre-approved. I improved these flows to make them easier to fill and faster to complete. Below is a diagram of the financing flow (our most popular method of payment). We broke the steps into smaller chunks instead of having many forms on a single step/page. We removed all unnecessary UI elements (navigation menu). The chat button is always available for customers to ask questions.
Reflection
Canada Drives is now the largest online car buying service in Canada. We have sold over a thousand cars since launch and continue to expand into other provinces. Our website has been recognized by several news outlets and resulted in many happy customers. Through this project, I have learned that design and research is a continuous process. There is rarely a linear flow, improvisations and compromises are to be expected. My contributions to this project have afforded me the company’s Problem Solver award.