Automotive SaaS
A unified platform for a global automotive group to configure and order vehicles across multiple brands.
Role
UX/UI DESIGN, PROTOTYPING : Maintaining, updating and (where gaps appeared) creating components library, while designing new flows every week and attending client meetings.
Context
CHALLENGE : Multiple brand-specific UI kits had drifted apart, creating a fragmented web experience.
OBJECTIVE : Keep one design system that auto-re-skins for every brand while delivering new flows weekly.
Process
STAKEHOLDER
ALIGNMENT
AUDIT &
PATTERN MAPPING
COMPONENT SHAPIING
(TWEAK > INVENT)
PROTOTYPE &
HAND-OFF LOOP
Sample file:
Desktop Version flows
Every major journey was kept in its own Figma “master” file, one for desktop flows, one for mobile.
The adding to basket and checkout process file is a representative sample of a desktop file and shows the handled scope.
Typical workflow inside the file
-
BRIEF ARRIVES :
Check whether an existing flow can be updated.
-
AUDIT AND DECIDE :
If the pattern exists, duplicate and tweak. If not, create a new row and link it in the menu.
-
PROTOTYPE AND REVIEW :
Twice-weekly stakeholder calls are run directly in this file. Feedback is captured in context.
-
FRIDAY HAND-OFF :
Share Figma file and prototype link with client. No extra decks or exports needed.
Why the system worked
Single source of truth
Design and dev, all opened the same file.
Less duplication
Audit-first habit kept screens lean and consistent.
(Identical desktop/mobile pairs existed for other journeys as well, such as dealership journeys, cart, car selection, etc. All following the same structure and process.)
Design System
Abridged VERSION due to NDA
Design System Snapshot
A single, hierarchical library built on Atomic Design principles.
Tokens
Master palette and type scales that drive every component.
Atoms & Molecules
Icons, inputs, and combo-boxes wired with Figma variants for quick reuse.
Organisms & Templates
Ready-made cards and layout boards that slot straight into live flows.
Tokens
A single token sheet drives every type size, colour and spacing across break-points.
Typography
PRICE
BODY
HEADING
INTERACTIVE ITEM
Colors
CALL TO ACTION
BACKGROUND
TEXT
FILL
GRADIENT
Atoms
Base UI primitives built with Figma variants.
Icons
Buttons
Text Field
Molecules
Atoms assembled into repeatable patterns. Each molecule documented with states.
Form
DROPDOWN
STATUS - DESKTOP
STATUS - MOBILE
CHECKBOX
RADIO BUTTON
Accordion
DESKTOP
MOBILE
Cards
CUSTOMER - DESKTOP
CUSTOMER - MOBILE
Organisms
Higher-order components that carried real data and scale across devices.
Engine Card
DESKTOP
MOBILE
Car Card
DESKTOP
MOBILE
Summary Card
DESKTOP
MOBILE
Side Basket
DESKTOP
MOBILE
Key Takeaways
Atomic design at scale :
Organising screens into atoms, molecules, and organisms showed how theory holds up in a 500+ screens project effortlessly.
Audit-first workflow :
Starting with the audit, only true gaps triggered fresh design. That “audit-then-extend” habit enabled me to release new flows quickly per sprint without adding debt or breaking the library.
Zero rework :
Twice-weekly client demos and daily team huddles surfaced issues early and kept every hand-off accepted on the first pass, turning collaboration into a project risk-mitigation tool.
NDA Note
Proprietary details are masked in this public version including screens and flows.