Created centralised design system with component library for Acura (using styles and variables).

Rolled out multiple scalable and responsive flows.

Vehicle Search Results Page

2. Vehicle Detailed Page

3. Trade-In your vehicle

4. Custom Order

PROBLEMS WITH EXISTING SCREENS

Old 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!

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.

HOW DID WE DO IT?

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)

I’d really like to, but I’m not allowed to showcase the components and the structure built publicly.🙊 To understand more about the project, book a call with me!