Building the first design system a 1M-user product ever had

THE CHALLENGE

During a major product redesign it became clear we had no unified visual language, no reusable components and no shared standards. Every team was designing in isolation, which meant inconsistent interfaces, duplicated work and delivery that got slower with each feature instead of faster.

I led the creation of the product's first comprehensive design system, built from the ground up as the foundation for a cohesive, scalable experience across the mobile app and the web - not a one-off deliverable for a single redesign.

Role

Leading product designer, System owner

Worked with

PM, PO, marketing, product & engineering

Outcome

Long-term standart

Two themes, multiple teams, and a deadline that would not move.

Without an existing system, the redesign risked becoming as fragmented as the product it was meant to fix: inconsistent UI patterns across teams and platforms, high design and development overhead from repeated work and no accessibility guidelines or semantic structure to build on.

The system also had to adapt the brand across two distinct app themes and meet accessibility requirements in both, while multiple teams kept shipping in parallel. And it had to be validated through testing, not just delivered and assumed correct.

PROCESS

Before defining anything new I catalogued what already existed across the product, to separate genuine reuse opportunities from inconsistency that had crept in unnoticed.

Audit the existing product and identify gaps

Define design foundations and standards

Color tokens and semantic palettes, a responsive type scale, spacing, grid and layout principles, iconography and illustration guidelines and interaction and motion principles - the vocabulary every component would be built from.

Build reusable components and tokens

I built and scaled a library of roughly 100 components covering 100% of the mobile app, each with developer-ready specification so engineering could implement without guesswork.

Document usage, accessibility and guidelines

Every component shipped with usage documentation and accessibility requirements built in, making accessibility a property of the system rather than a per-feature checklist. I also led a dedicated accessibility audit and folded WCAG considerations back into the library.

Establish governance and cross-team alignment

I partnered closely with engineering, marketing and product to keep the system aligned with both the redesign vision and technical constraints. I took ownership of the parallel web component library built by an external agency, so one product stayed coherent across two build teams.

Once the component architecture existed it became a template for larger features rather than a static asset. When I designed and shipped the SFD feature — Schutz der Fahrzeugdiagnose, the Volkswagen Group security gateway — unlocking diagnostics on protected Volkswagen, Audi, Seat and Škoda vehicles, it was built inside the system, turning a major market expansion into a repeatable pattern for the next protected-vehicle integration.

WHAT THE SYSTEM UNLOCKED NEXT

MENTORING INSIDE THE SYSTEM

I mentored a UX designer joining the team: onboarding him to the product and the system, leading his design reviews, and keeping his website work consistent with the mobile product. I also introduced structured design-to-dev handoff documentation and a clearer intake process for roadmap briefs, so the system stayed something the whole team could extend rather than something only I could maintain.

SPEED

Accelerated the redesign by removing repetitive design and development work.

CONSISTENCY

Improved UI consistency across every redesigned screen, in both themes.

ACCESSIBILITY

Raised accessibility compliance through standardised, documented rules.

Reusable components plus clear guidelines.

REFLECTION

The system became a living product rather than a one-off project, and the most valuable outcome was not the component count — it was the shared alignment it created across teams. A design system earns its keep when someone other than its author can extend it correctly without asking. Governing a library built by an external agency, then handing parts of it to a mentee, was the real test of that.

1