Acura and Honda : Designing the Car-Buying Website Experience
ROLE
Product Designer
IMPACT
Achieved 86% faster design updates, lowering time from 42 to 6 mins.
DATE
Oct - Dec 2024
DELIVERABLES
Design system using styles and variables.
1000+ responsive screens.
OVERVIEW
Acura is Honda’s luxury automotive division, known for blending innovation and premium craftsmanship.
Old Acura designs were outdated, inefficient to use, and not scalable. Built without components, variables, or auto layout.
In 12 weeks, I designed the website experience for Acura using a centralised design system (using component libraries, styles and variables).
Rolled out 1000+ scalable and responsive screens, optimised for conversion.
Collaborated with developers & PMs to ship new website and match tokens/variables across the site.
Vehicle Details Page (built using scalable design system)
The Challenges we were Facing
Existing screens used no design system, no components, no variants and no auto-layout properties. Just groups and frames!
When we did few user tests internally, it took 42 minutes on average for a designer to push a new update in the file (across all resolutions)- which was pretty time-consuming.
We were slowed down by inefficient, outdated screens that consumed valuable time and effort.
A lot of new updates were coming in, the team couldn’t focus on creative problem-solving and we were short of resources. We had to make the system more efficient!
Old designs (no styles, no components, scalability issue)
Goals
Significantly reduce the time and effort needed to push an update across the design file.
Ensure all team members maintain consistency when working on different flows of Acura.
Reduce redundancy and reinventing elements for the same purpose.
Collaborate with devs to update design tokens/variables used.
The process
Setting up the foundations (tokens)
Defined styles for color, typography, spacing etc. Represents the design decisions that define the look and feel of Acura.
Core components
Button, input fields, radio buttons and checkboxes. Reusable elements to create more complex components.
Domain components
How many domain components were created in total? More than 100 solid components (excluding variants). To make them scalable and modular, we used styles, auto layout, nested instances and boolean properties in Figma.
Variables
To control multiple resolutions (mobile, tablet & desktop) and spacing between elements. (xs,s,m,l,xl)
Rolling out 1000+ Screens
Took existing screens and recreated them using the design system created (core + domain component library + variables)
Live website (built using design tokens)
Want to See More?
Unfortunately I can’t post all the details online, but I’d be happy to walk you through the work if you drop me a message!
Vehicle Search Results (VSR) Page
Trade-In your vehicle
Custom Order
Explore Chargers
Compare Chargers
Add Accessories
Change Accessories Package
Protection Plans
Individual Protection Plans
Subscriptions