Project Overview
The starting point was a collection of designs across different cars and brands. My role was to audit that work, identify common patterns and build components that teams could reuse without starting over for each display. This wasn’t a blank slate. I worked within a mature design system, with a complex token architecture and strict guidelines for in-vehicle UX and accessibility.
From One-Off Designs to Reusable Components
I reviewed existing designs to understand what could be standardized and where differences were necessary. That distinction mattered: a variation driven by a display’s shape needed a different response than two teams solving the same problem differently. I used the audit to build reusable components and responsive templates, giving designers a consistent starting point while preserving room for brand and vehicle-specific needs.
Responsive Design Beyond the Rectangle
A portrait display and a wide, freeform screen aren’t interchangeable canvases. The challenge was making components adapt to different formats without treating every screen as a separate design system.
I applied responsive principles to the Figma components and templates, working through how layouts should adapt across sizes and shapes. The goal was to reuse the underlying patterns, not force the same composition onto every display. More screen space doesn’t mean more driver attention, so larger displays still call for clear priorities rather than simply more information.
Working Within the Token System
Much of the work was in the details: understanding the existing token structure, applying it correctly and building components that held together across brands and display configurations. Rather than creating a parallel library, I built within the established system.
Designing for the Driving Context
An in-vehicle interface competes with something far more important than another app: the road. Reducing taps is only part of the challenge. Even a short interaction can demand too much attention if a driver has to search for a control or spend time interpreting what’s on screen. Glanceability, clear hierarchy and recognizable controls are essential.
Accessibility is situational, too. Bright sunlight, changing light and divided attention can make an otherwise readable interface difficult to use. These conditions make legibility and clarity central to the experience, not just finishing touches.
I worked to stringent in-vehicle UX and accessibility guidelines, applying them throughout component and template development rather than treating them as a final visual check.
