Being the largest doesn’t mean being perfect. I streamline Canada’s largest auto classifieds app to create a more modern, consistent, and seamless buying and selling experience.
I’m a huge car guy. I’ve been a long time fan of AutoTrader’s app, mostly using it browse different cars that I’m interested in. In the past year I recommended the AutoTrader app to several friends who are looking to purchase their first car. When I asked how the app is working out for them, the responses were similar: “The app is great, but…” This perfectly encapsulates my experience with the AutoTrader app. Don’t get me wrong – I think AutoTrader is an amazing app with powerful and useful features, but some parts of the app just falls short in delivering an optimal user experience.
AutoTrader.ca is Canada’s go-to auto classifieds app for buying and selling cars. The app features 400,000+ vehicle listings, 1 million+ users and 2 million+ downloads across Android and iOS platforms. (Keep in mind Canada only has 37 million people!)
To create an experience that aligns with both the user and AutoTrader, we have to understand how their business model works. It’s completely free for regular users to browse, buy, and sell cars on AutoTrader. AutoTrader’s revenue stream comes from two offerings:
- Dealer services: Powerful paid tools for car dealers to maximize ROI and manage inventory
- Premium listings: Paid upgrade for private sellers and dealers to increase ad visibility
AutoTrader’s VP of marketing Roger Dunbar has made it exceedingly clear that the company’s number one priority is to increase the “quality of the traffic and the quality of the conversion.” Meeting user needs is the best way to achieve this.
We understand that buying, selling, and browsing are the 3 primary factors why users use AutoTrader, but what are the specific in-app goals?
To better understand what exactly users wish to achieve with AutoTrader, I created a short online survey and posted it on multiple social media websites. I got 14 responses, 11 of which the respondent has used AutoTrader’s app or an equivalent competitor (Kijiji, cargurus, etc). I asked why each respondent uses car buy/sell apps and these were the most common responses:
- I like to keep up with the prices of cars I may buy in the future (Search, browse, save)
- I use the app to get a general idea of the used car market (Search, browse)
- I have a specific car that I’m looking to purchase (Search, browse)
- I have a few different cars that I am considering (Search, browse, save)
- I’m looking to list my car on the app (Sell)
- I use the app to discover new cars (Search, browse)
The responses reveal that the 3 main functions AutoTrader must provide is a good searching, browsing, and saving experience.
Identifying Pain Points
I turned my survey findings into 3 demographic-free personas and created user flow maps for their AutoTrader experience.
The Car Buyer User Flow Map
The Car Buyer uses AutoTrader for a simple purpose – finding and buying the car they want. Their user flow revolves around searching for their ideal car and taking action.
Pain point 1: The search function is too hard to use. It takes too many steps to input even the make and model. For example, the ‘make’ input is a scrolling list of over 50+ brands. Inputting Volvo requires the user to scroll all the way to the bottom of the list.
Pain point 2: Revising the search required the user to completely leave the results page and search again.
Pain point 3: The listing details page only displays the first image for each listing. Enlarging the image or viewing more photos opens an obstructive full screen gallery element. Call-to-action (call/email) is distracting as it vanishes and reappears as the user scrolls.
Solution 1: Simplify the search experience. Replace the scrolling list with a text input that narrows down the list. Inputting ‘V’ would suggest Volvo.
Solution 2: Allow the user to revise the search without leaving the results page.
Solution 3: Introduce a scrolling carousel that allows the user to view more photos without leaving the page. Full screen gallery is now activated by a clear button. Relocate floating call-to-action so it’s less distracting.
The Browser User Flow Map
The browser uses AutoTrader as a tool to keep up with the car market and bookmark vehicles for future reference. Their user flow revolves around searching, saving, and revisiting results of interest.
Pain point 1: The landing page’s main element spans the height of the entire screen, leaving no indication at all that the user can scroll down. This hides useful sections including ‘Last Searched’, ‘Recently Added’, and more.
Pain point 2: First time users don’t know what ‘My Garage’ is for. The ‘My Garage’ page requires too many clicks to navigate as saved items are not accessible on the main page. There are duplicate versions of the same page depending on where you access it from (inconsistent).
Pain point 3: No way to delete cars from the ‘Saved Cars’ page. Entries in ‘Saved Cars’ contains less information than in ‘Search Results’. Description for saved searches have no structure and gets cut off. No way to edit saved searches; the user must start from scratch.
Pain point 4: Entries in the “Search Results” page display images and text in an inconsistent manner depending on listing. Users can’t double check what’s being searched without leaving the page (common when using multiple filters). Revising the search requires the user to leave the page.
Pain point 5: The “Advanced Search” feature is too hard to use. Most dropdown menus can be replaced with a more intuitive input. Some commonly used filters (Kilometers) are placed near the bottom. Dark colour scheme not consistent with the rest of the app.
Solution 1: Rearrange the landing page elements so users know they can scroll down for additional features. Move the useful elements towards the top of the page for easy access.
Solution 2: Change ‘My Garage’ to ‘Saved’ to be more recognizable. Display ‘Saved Cars’ and ‘Saved Searches’ on the main page as tabs, eliminating subpages. Fix duplicate page issue for consistency.
Solution 3: Change the saved cars listings to be consistent with the search results. Add option to easily delete saved cars. Structure ‘Saved Searches’ into individual cards that display more information and in a consistent manner. Add option to delete and edit saved searches.
Solution 4: Introduce new format for listings so information is more consistent and easier to digest. Add search summary to the top of the page so users always know what’s being searched. Add option to revise the search without leaving the page.
Solution 5: Replace dropdown menus with sliders and checkboxes where applicable. Move commonly used filters to the top of the page. Change colour scheme to be consistent with AutoTrader’s branding.
The Car Seller User Flow Map
The Car Seller uses AutoTrader to sell their car by creating a private listing or selling directly to a dealer. The seller also uses the app to manage their listings.
Pain point 1: The landing page has several elements that appeals to the potential seller (‘Get Instant Cash Offer’, ‘What’s My Car Worth?’, etc.) placed near the bottom of the page. The main search element spans the entire height of the screen and users have no indication that they can scroll down.
Pain point 2: Putting a seller’s private listings in a subpage in ‘My Garage’ is too hard to find. Some users are uncertain of what ‘My Garage’ is.
Solution 1: Make the main search element more compact so users know they can scroll down. Move some ‘selling information’ towards the top of the screen for easier access.
Solution 2: Streamline user flow by moving ‘My Listings’ to the ‘Sell’ page. Private listings are now easier to access. It’s more logical for a user to find their listings in the same page they created it.
I recruited 4 people for a usability study on my AutoTrader redesign. All participants are current users of the live app. In my study group, 2 participants fit into the criteria as the ‘The Browser’, 1 as the ‘The Car Buyer’, and 1 as the ‘The Car Seller’. I worked closely with my study group to construct a low-fidelity wireframe.
After getting positive feedback regarding the new and improved user flow, I was confident to move onto the next step. I converted my low-fidelity wireframe to a high-fidelity wireframe to iron out the finer details. Survey results revealed that users enjoyed the design language of the current AutoTrader app, so I kept it the same. Here is the first iteration of my high-fidelity wireframe.
Usability Test Methodology
I conducted live moderated studies for each participant focusing on 3 main questions:
- What do you hope to accomplish when you launch the AutoTrader app?
- Perform the indicated task (based on persona the participant identified with) and acknowledge any unexpected behavior.
- Were you able to accomplish what you initially hoped to do?
Feedback from my study group lead to several iterations of improvements. Here are the main changes I made:
I attempted to address the pain point of users not knowing the landing page was scrollable by shrinking the search element and shifting the ‘Get Your Quote’ ad up. However, 2 of my study group participants indicated that it was still unclear whether they could scroll down. This is important because both of the ‘Browser’ testers considered the ‘Recently Viewed’ and ‘Recommended Deals’ sections to be a relevant part of their user flow. I revised my strategy by further reducing the search element and setting it to expand back to full size upon interaction.
The result is a partially covered ‘Recommended Deals’ element that is revealed enough to display all relevant information, but covered enough that the user knows to scroll down. This was achieved without significantly harming the usability of the search feature.
My decision to change the make selector from a large scrolling list to a search was well-received by all 4 testers. However, an oversight I made was not putting a list of all vehicles. This became frustrating for users because if they did not know exactly which make they wanted to search (or perhaps forgot the name), there was no way look through a list. I reimplemented the list and added 2 quality of life features. The first was a ‘Popular Makes’ section which contains the most selected makes. Next was adding a small logo for each make for easier recognition.
The result is a more intuitive make selector that makes it faster and easier for users to find and select their desired brands.
Saving a Vehicle:
One of my ‘The Browser’ testers pointed out that when saving a vehicle for the first time, they expected a prompt or button that would take them to the ‘Saved Vehicles’ page. I decided to add a small pop-up message to instruct first time users how they can access their saved vehicles.
The current AutoTrader app has a feature that will notify the user if any of their saved cars gets a price drop. This feature can be enabled in a dedicated notification settings page. I initially followed this design but quickly realized it was unintuitive to have an entire page dedicated to a single setting. I changed this setting into a toggle and moved it to the main ‘Saved’ page for easier access.
Current AutoTrader.ca notification settings
Latest iteration of notification settings
I discovered during the usability tests that users did not consider the ability to edit searches a crucial feature. I took a step back to reconsider why users use the ‘Saved Searches’ function. Feedback from the testers revealed that a substantial reason to go in this section is to see the new listings. I moved the edit feature to the menu and added a new feature that aggregates all new listings for each saved search (since the user’s last search). This ‘New Vehicles’ feature streamlines the browsing and buying user flow by allowing users to effortlessly keep up to date with vehicles they are interested in.
The final revision was a small one. My testers pointed out that the buttons on the listing page was too small and hard to interact with. I made each button and contained text 50% larger for improved usability.
The latest revision of the AutoTrader app is displayed below. The redesign eliminates the existing pain points listed above and augments the flow of the users. All in all, candid feedback from the users helped create a truly user-centric experience.
What I Learned
- Never remove any existing features without a strong justification. Removing the ‘All Vehicles’ section from the make selection process left some users in my study group frustrated because they expected it to be there. UX is about upgrading, not downgrading.
- Open-ended study group questions leads to the most candid feedback. Instead of asking users to rate an experience from 1-10 or to say true or false regarding whether something worked as expected, ask them what they expect to happen and whether the outcome matched their expectations.
- Deviate from the structure. Instead of strictly asking the user predetermined questions in order, be flexible and ask questions to expand on previous answers. Exploring their mind is a great way to get a candid insight on what the user is experiencing.
- Focus beyond the pain points. Give more thought on how a user experience can be taken to the next level. Assume the current user-flow is perfect and think about how it can be even better. For example, I initially tunnel-visioned on several pain points (users can’t edit, bad format, etc.) regarding the “Saved Searches” page. After I understood that this feature was commonly used as a keep-up tool, I introduced the “New Vehicles” feature which the users loved.
Case Study: League of Legends
What Can I do for You?
Are you providing products or services with suboptimal user experience? I will use my valuable experience to pinpoint the frustrations of your users and expertly craft the optimal solution. My objective is to elevate your user experience to the next level.
Let’s Get Rich Together. 🤝