True CarBuying Service
Role: Design lead
Team: Design manager, Project owner, Autos business team
Redesign the car buying service experience with our partners from True Car to improve conversion and traction.
.png)
The Challenge
The Trucar buying service experience has not be update for over 5 years. The user experience has suffered and traction has declined that it has become one of the least clicked on pages on the entire site.
Problems with the page:
Outdated components
non-cohesive style and experience
cumbersome customer experience
Only 1.5% of site visitors used the TruCar buying service
.png)
of users from past year from July 2023-24
Outcome
Our partners at True Car reached out and requested an overhaul of the car buying service experience. The current design is outdated with poor content hierarchy and outdated UI elements that don’t adhere to True cars most recent style guidelines.
Before
- Clunky UI components that do not adhere to grid rules
- Poor Hierarchy and IA
- Too much copy
After
- Clear IA and section breaks
- Cohesive color palette
- New components with proper grid usage
Before
After
Live site launching soon!
Research
During the kick off meeting of the project, the user research team from Tru Car shared with us their customer research findings through journey mapping, personas and an UI architecture framework. This research ultimately informs the design, leveraging from the PF design system to create the user experience.
Customer Journey Map
Synthesis and Summary:
- The car buying process is a cyclical and non linear process
- Problems can happen at all stages during the purchase process which causes the back and forth between the first 6 steps of the 7 step purchase process.
Consumer Personas
Synthesis and Summary:
- There are 2 main groups of car buyers:
- Single and kid free
- Have a family and responsible - Buyers who are single can take their time and enjoy the process
Buyers who have a family want the process to be as pain free as possible
UI Architecture framework
Synthesis and Summary:
- Findings from the journey map and buyer personas has informed what each section of the UI experience should contain.
- The end goal of the new experience is to provide an upgraded experience for both types of car buyer personas.
Design system drives design
- I took TruCar auto team's wireframe and recomposed it with components from our design system. This keeps the new page consistent with our site while incorporating TruCar's unique features.
- Development for new/used car search and rates cards were needed. I Collaborated with frontend engineers to build a reusable card for our design system.
- Successfully pitched the new design to Tru Car team. The design was well received with an anticipated late summer launch.
Wireframe/Component breakdown
.png)
New design
.png)
Key Takeaways
- Lead, designed and iterated with business constraints on new design
- Worked with engineers on developing new components with future usage applications in mind.
- Guided, rationalized design decisions with technical implementation considerations when presenting design to stakeholders.
