DriveWell Design system

Building a scalable design system to support a multi-brand mobile platform and accelerate product development

Role: Lead Product Designer

Focus: Design systems, design tokens, multi-brand theming, tooling

  • Enabled scalable theming across 40+ branded apps

  • Reduced design and development overhead through reusable patterns

  • Established a shared system used across multiple product teams

Problem

DriveWell Advance is a shared mobile platform used by insurers to deliver usage-based insurance apps across multiple brands.

Before the design system, branding and UI implementation were heavily manual, with no shared structure between design and development.

Visual decisions such as colors and typography were often hardcoded directly into code, making updates slow, inconsistent, and difficult to scale.

Where it broke

  • No shared source of truth between design and engineering

  • UI values were hardcoded, making updates time-consuming and error-prone

  • Each new brand required significant manual UI customization

  • Design and shipped product frequently diverged

Why it mattered

  • Feature delivery was slow and difficult to scale

  • Inconsistencies increased as more teams contributed to the product

  • Branding flexibility for customers was limited

  • Supporting multiple brands became inefficient and error-prone

Approach

The problem wasn’t just inconsistency. It was the absence of a scalable system.

I introduced a token-based design system as a foundational layer of the DriveWell Advance platform, creating a shared, structured approach across design and engineering.

This included:

  • defining a token architecture for visual decisions

  • integrating tooling to connect design directly to code

  • establishing workflows to support multi-brand theming

Key Decisions

To enable scalability across teams and products, I focused on a few key decisions that established a structured and repeatable system.

Using design tokens as the foundation

Rather than defining visual values directly in components, I abstracted all visual decisions into tokens.

Tokens allow color, typography, spacing, and other values to be defined once and reused consistently across the system.

Result: A single source of truth that ensures consistency across design and engineering.

Designing for multi-brand theming

The system needed to support many branded apps, each with unique visual requirements.

I structured tokens to support brand-level overrides and flexible theming.

Result: New brands can be implemented without reworking UI, and visual customization scales efficiently.

Connecting design directly to code

To reduce gaps between design and development, I implemented a workflow that syncs tokens from Figma to GitHub.

Using Tokens Studio and Style Dictionary, tokens are transformed into platform-specific code for iOS and Android.

Result: What is designed in Figma is reflected more accurately in the shipped product.

Standardizing workflows across teams

Multiple product teams were contributing to the same platform, leading to inconsistencies.

I documented workflows and created a structured system that teams could follow when designing and implementing features.

Result: Improved consistency and a shared foundation across teams.

What I built

A system that connects design, tokens, and code into a single scalable workflow:

Design → Tokens → Code → Product

Token-Based System

  • ~75 color tokens per brand with structured taxonomy

  • JSON-based token architecture

  • Multi-brand token files supporting scalable theming

Tooling & integration

  • Tokens Studio integration in Figma

  • Automated sync from Figma to GitHub

  • Style Dictionary pipeline for iOS and Android

Component library

  • Designed and maintained reusable UI components

  • Built flexible components that support multiple product use cases

  • Enabled teams to design and build faster using shared patterns

Components are paired with documentation and usage guidelines, enabling teams to consistently design and implement features using shared patterns.

Documentation & adoption

  • Created onboarding and workflow documentation

  • Defined processes for setting up new branded apps

  • Supported adoption across 4+ product teams

Impact

Scaled product development across brands
Enabled a single system to support 40+ branded apps, allowing features to be reused instead of rebuilt.

Significant reduction in development effort
Internal estimates suggest a ~50–60% reduction in development effort for white-label app setup through the use of tokens.

Reduced delivery overhead (structural)
Shifted from manual, per-brand customization to a shared system, lowering the cost and effort required to deliver new branded apps.

Adopted across teams
Established a shared system used by 4+ product teams, improving consistency across the product

Unlocked new capabilities
Enabled features like dark mode and localization that were previously not feasible within the old framework.

Next

DriveWell Advance