AutoTrader.ca
User-Centric Revision
I streamline AT's user flow to make it much easier to use.
Role
UX/UI Designer
Duration
6 Months (2018)
Background
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!)
In this project, the team and I (3 UX/UI designers + product manager) is tasked with redesigning the entirety AutoTrader.ca's app so serve our users' needs better.
AutoTrader.ca’s Goal
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.
User Goal
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, we conducted user studies with 14 respondents who are users of either AutoTrader’s app or an equivalent competitor (Kijiji, cargurus, etc). We 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
We turned our 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 Points
- 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.
- Revising the search required the user to completely leave the results page and search again.
- 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.
Solutions
- Simplify the search experience. Replace the scrolling list with a text input that narrows down the list. Inputting ‘V’ would suggest Volvo.
- Allow the user to revise the search without leaving the results page.
- 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 Car Browser User Flow Map
The car 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 Points
- 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.
- 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).
- 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.
- 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.
- 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.
Solutions
- 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.
- 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.
- 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.
- 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.
- 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 Points
- 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.
- 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.
Solutions
- 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.
- 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.
Wireframe
Based on the proposed solutions for the above pain points, I created a low-fidelity wireframe to present it to the team.
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:
Iterations
Landing Screen:
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.
Make Selector:
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.
Notification Setting:
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.
Saved Searches:
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.
Listing Details:
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.
Latest Design
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.
Next Steps
How can we improve the AutoTrader app even more? My first suggestion is to develop new features that will augment the user experience. Conducting more open-ended usability tests can provide valuable insight on features that can make app experience even better. My second suggestion is to cater the app to an even broader audience. For example, a feature that suggests cars to users based on a questionnaire will make AutoTrader a better experience for people who don’t know much about cars.
