Autotrader
Car buying on a budget
ROLE
E2E Lead UX Interactive Designer and Lead UX Researcher
TEAM
Lead Product Manager, Lead Engineer, Lead Analyst, Lead Advertisement Sales Manager
TOOLS & SKILLS USED
Moderated & Unmoderated Usability Tests, Usertesting.com, Secondary Research, Mural, Figma, Gantt Chart, Jira roadmap
TIMELINE
Expedited timeline for research & design
(~5 weeks)
LIMITATIONS
Rapid deployment and integrating the branded "4-square grid"
Background
Autotrader.com an online marketplace for car buyers and sellers. It lists new, used, and certified second-hand cars from dealers and private sellers.
Problem
"My Wallet" is a branded car budget calculator and finance tool integrated into the desktop Autotrader car-buying experience. It was designed to help buyers easily find vehicles within their budget and drive more rich leads to dealer listings.
I have uncovered through prior research and analytics that the antiquated, desktop design of My Wallet...
-
Doesn't easily lead shoppers to affordable car searches,
-
Doesn't clearly guide shoppers through the process of inputting key fields to calculate vehicles within shoppers' budgets, and
-
Isn't the first feature that resonates with shoppers when they search for cars within their budget.
This is causing shoppers to disengage from the My Wallet 4-square grid, abort the My Wallet process, and search for cars by budget through the price filter feature.
Project Goal
Our user-centric goal was to add value to the car shopping experience by empowering shoppers with an easy and intuitive way to find cars within their budget on the Autotrader app.
I led our product team through a series of Design Thinking workshops that unearthed these complementary user, business, and technical goals due to technical & delivery limitations and branding stipulations:
Leverage existing My Wallet APIs, datasets, and UI components to redesign a user-centric finance tool for a native app.
Empowering shoppers with an easy and intuitive way to find cars within their budget on the Autotrader app.
Define MVP My Wallet scope with the intent to create more valuable leads to listings.
3% of visits to engage with My Wallet and
increase Vehicle Dealer Page visits after My Wallet usage by 50%.
Discovery
Usability Tests & Rose, Buds, Thorns Analysis
I kicked off the discovery for this mobile app financial tool integration with a usability test over the desktop My Wallet application. Less that 3% of Autotrader visits engaged in the desktop journey, and I wanted to uncover why this was so.
Throughout this exploration, I drafted a user task flow of the car shopper's journey and analyzed the prior recordings of usability tests, testing the production application, to identify "rose" (positives), "thorns" (pain points), and buds (future potentials) of the antiquated process of financing and budgeting for a vehicle.
In tandem, I partnered with the Research & Market Intelligence team to host stakeholder interviews and integrate secondary research insights on the consumer buying journey into my design decisions.
Legacy My Wallet User Flow
The insights from initial usability testing and stakeholder interviews:
-
Insights from the live site's usability tests:
-
Shoppers deferred to price filters instead of the desktop finance tool to shop by budget because it appeared easier to use. This is highlighted in the first red bubble pictured in the user flow.
-
The legacy My Wallet placement or iconography was not intuitive for shoppers to find.
-
Shoppers were unsure of how to navigate to the other input fields after flipping over the square cards within the legacy My Wallet.
-
The tips and helpful articles were very useful to shoppers.
-
Shoppers are reluctant to use My Wallet because they were intimidated by the complexity of its appearance.
-
The CTA to retrieve budget results was not easy to find.
-
-
Insights from the secondary Market Intelligence generative research:
-
Car shoppers preferred the final cost and/or monthly payment after taxes, tags, fees, incentives, etc.
-
Getting prices from dealerships without revealing identity/providing personal information was important to shoppers.
-
Obtaining the current trade-in value of their car could sway a shopper to take action
-
Rose, Thorns, Buds Analysis Applied to User Flow
My Preliminary Design Recommendations based on Research Insights:
-
Add MyWallet to the app's bottom nav bar with intuitive iconography association.
-
Add a toggle on/off button to default to an activate budget calculator within the price filters section of the application.
-
Utilize input fields available in existing APIs that lend the most accurate budget calculation throughout the entire app (including fees and incentives).
-
Only ask for shopper's personal information when deemed necessary (i.e. hard credit checks).
-
Prioritize the trade-in and interest rate components for My Wallet MVP.
-
Redesign inputs of critical budget calculation components such as credit ranges, car trade-in values, down payments, etc with native Material Design components for Android users.
Ideation
Direct & Indirect Competitor Moodboard
For mobile app budget calculator/financing inspiration, I explored a couple of direct and indirect competitors, including CarGurus, Team Toyota, AAA, Cars.com and Bank of America.
The CarGurus design had more of a mobile-app competitive edge because it leveraged more of the native app components and best design practices with components, such as sliders, a bottom nav bar, toggle buttons, and visual contrast.
AAA also utilized mobile components, such chips and steppers, but their visual hierarchy and application of these components were not optimized to the fullest potential. For example, the most important information (based upon my consumer research), the estimated payment, was appended to the bottom of the calculator and therefore, outside of the device fold.
Inspiration: Direct Competitors
Inspiration: Indirect Competitors
Cars.com was the next best competitive example of a mobile loan calculator because they correctly leveraged input fields, toggle buttons, and a mobile, line-listed spreadsheet view.
All-in-all, I adopted and adapted the visual hierarchy of CarGurus' final estimated payment, AAA's chips, Google's Material Design components of chips, button groups, and switches, and integrated the marketing team's branded "4-square card grid" with intuitive, functional accordions.
Pictured, is one of my initial iterations of one section of the car shopper's financing flow based upon the aforementioned consumer research and the competitive mood board.
My Initial Design
Ideation
Direct & Indirect Competitor Moodboard
Prototype & Test
Unmoderated Usability Tests
After designing the several iterations of mid-fi wireframes and prototype, I issued an unmoderated usability test through Usertesting.com. Within this test, I tested 11 tasks throughout the calculator and finance flows. I also set clear success criteria to evaluate each task on a usability severity scale.
Usability Test Results
For the most part, all 5 testers believed the overall design to be "straightforward" and helpful.
-
Testers found tips very helpful & easy to find.
-
All participants expressed the accordion and form fields used for the Wallet very easy to use and self explanatory.
-
For the monthly payment Details Page, testers were prone to "continue deal" if given the option here.
-
All participants navigated to My Wallet through the "Shop by Budget" widget.
-
From the Search Results Page, most shoppers initially went to the "Price filters" section to shop by budget. Then, their second option would be to use the bottom navigation bar. Testers' last resort was the 4-square grid.
-
Most preferred to finalize the deal via email or call, but one preferred to finalize the deal online.
Designs
Phase 1: Design Recommendations
My Top Recommendations for the Two Car Comparison Articles:
-
Add an article directory/outline with anchor links
-
Add a media gallery of photos & videos
-
Add a link to consumer ratings
-
Add side-by-side car photos
-
Move Comparison Table Up
-
Format lists into bullet style columns
-
Pin the primary, funnel driver buttons to the far right panel.
My Top Recommendations for the Single Car Articles:
-
Add an article directory/outline with anchor links
-
Add a media gallery of photos & videos
-
Add a link to consumer ratings
-
Move Comparison Table Up
-
Pin the primary, funnel driver buttons to the far right panel.
-
Showcase the vehicle accessory paragraph
Decreased Bounce Rates & Phase 2
The Phase 1 of redesigns lowered the bounce rate and increased reader engagement substantially, but ultimately the organization accepted my phase 2 design, which applied the dynamic components. You may preview the Phase 2 enhancements I designed through a mobile prototype linked below.
Iterate & Scope Project
Iterations
After usability testing and alignment meetings with our marketing and branding teams, the omission of the 4-square grid was non-negotiable. As a result, I reincorporated the 4-square grid and made it interact with the expandable accordions. With this modification, if a car shopper tapped on any of the 4 squares, the corresponding accordion would expand.
As pictured, I iterated through 3 to 4 versions of designs for any given frame. Throughout collaborative sessions with our engineering leads, we uncovered that the release date was pushed up due to the NADA show. This caused a design change request in scope where I rapidly modified the designs and scoped out fewer features for the MVP.
Final Designs
My Wallet Designs
Overall, I led and designed ~18 feature releases for the My Wallet initiative within 5-6 weeks. The 18 feature sets included designs for the following native app screens:
-
Homepage Shop by Budget Widget
-
Bottom Nav Bar
-
Price filter widget
-
Search results page payments on/off switch & monthly payment vehicle cards
-
Estimated monthly payments overlay
-
Search results page's My Wallet Widget
-
My Wallet Credit & Terms native form, budget form, down payment form, and trade-in form
-
Vehicle Dealer page/My Wallet opt-in
-
Kelley Blue Book Trade-In Value screen
-
Previous Trade-In Value screen
-
Native Deal Structure (NDS) Finance Tab
-
Native Deal Structure (NDS) Cash Payment Tab
-
Explore Lending Options screen
These interaction notes represent a subset of My Wallet features I designed for the Autotrader home and My Wallet landing screens:
