Acura and Honda : Designing the Car-Buying Website Experience
If you’re short on time, just skim through the details below…they’ll give you a quick sense of the problem and the solution I designed.
ROLE
Product Designer
IMPACT
Achieved 86% faster design updates, lowering time from 42 to 6 mins.
DATE
Oct - Dec 2024
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 redesigned the website experience for Acura using a unified design system (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.
Reading time: 5 mins
Vehicle Details Page (built using scalable design system)
Live website (built using design tokens)
The Challenges we were Facing
Existing screens used no design system, components, variants and 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)
The goal was to significantly reduce the time and effort needed to push an update across the design file.
Reduce redundancy and reinventing elements for the same purpose.
Ensure all team members maintain consistency when working on different flows of Acura (using same components).
Collaborate with devs to update design tokens/variables used across the live website.
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
More than 100 solid components (excluding variants). To make them scalable, we used styles, nested instances and boolean properties in Figma.
Variables
Controlled 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 + tokens/variables)
Key Screens (built using design system and components)
Setting up the foundations
The brand already had its visual language figured out — colors, typography, spacing.
But someone had to bring it all to life in Figma. That’s where I came in. I translated Acura’s design principles into a token-based foundation, creating a system flexible enough to scale across multiple products.
Designing Core components
Once the base was solid, I moved on to the core building blocks - buttons, inputs, checkboxes, radios.
Simple stuff, but the kind that makes or breaks consistency.
Each was designed to be reusable and easy to maintain so designers could focus less on fixing spacing/colors and more on solving problems.
In total, we designed 20+ components as part of the library.
Here’s a glimpse of the core components like buttons and checkboxes!
Designing Domain Components
Now these were the bigger, more complex components- built for specific flows and use cases across the car-buying journey.
Each one was made using the core components and foundational styles we had already set up, ensuring everything stayed consistent.
How many domain components were created in total? More than 300 solid components. Using which rolled out all the 1000+ responsive screens for Acura user flows.
Components were created according to user flows they were used in…
This is a list of all the current flows in the file:
Login/Sign-up
VSR
VDP
Trade-In
Email Templates
Graceful Degradation
Custom Order
My Orders
My Appointments
Lets take an example here- VDP
Instead of going through all the flows I created, I’ll keep it simple & focus on the Vehicle Detailed Page (VDP) flows.
Let me show you how I built it one by one!
All user flows in VDP
Breaking down each screen individually into components
After analysis, I found 5 key screens that were unique.
We had to make sure that no domain component is created twice. If 2 sections look similar, then create 1 master component with nested instances to cover for all use-cases.
Our goal was to create the minimium number of components that could roll out the required screens.
9 "VDP" Components
5 "Price Breakdown" Components
3 "Appointments" Components
3 "Protection Plans" Components
Designing Side Sheet Component for Protection Plans
For simplicity, this is how the side sheet component were created for protection plans.
Defining Modes
To control the behaviour of the side-sheet component, we needed 4 modes:
XL (1920px)
L (1366px)
M (768px)
S (375px)
the component will automatically switch to the value based on the mode it’s in. We named the modes to correlate with the breakpoint sizes.
2 critical set of variable groups were created-
Device Sizes, number variable): to control width, height, spacing & margin
Visibility, boolean variable: to control what component variants(desktop/tablet/mobile) are visible in what modes (resolution)
Applying width & height variables
In this step, we apply visibility variables to the component’s variants- desktop, tablet and mobile.
Apply width and height variable to the instance. This will make sure that the component’s width and height changes according to the mode it is in.
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!
Key Screens (built using design system and components)