TomTom

Project Overview

Product: TomTom Mobile Navigation App

Scope: iOS & Android design systems

Focus: Tokens, theming, and design–engineering collaboration

In parallel to feature delivery, the app required a scalable design system that could support fast iteration, cross-platform consistency, and future visual evolution.

My Role & Ownership

Role: Product Designer — Design Systems & Tokens

I owned the Design system, theming strategy, and design-to-engineering handoff, working closely with the central design system team and mobile engineers.

I personally owned:

• Token creation and naming conventions

• Token Studio setup and exports

• JSON handoff pipeline with engineering

• Ongoing system evolution and maintenance

• QA of system implementation across platforms

Goals

• Enable fast UI delivery without locking the product into visual decisions

• Create a system that scales across iOS and Android

• Reduce dependency on developers for routine theming updates

System Architecture

Three-Layer Token Abstraction

We implemented a global → system → component token structure:

• Global tokens: raw primitives (color, spacing, typography)

• System tokens: semantic intent (e.g. warnings, guidance, states)

• Component tokens: localized overrides for specific UI elements

This separation allowed visual changes without breaking component logic or engineering contracts.

Tooling & Engineering Pipeline

Design → JSON → GitHub

• Managed token exports via Token Studio

• Produced JSON files consumed directly by engineering

• Established a feedback loop where token changes could be reviewed, versioned, and merged with minimal friction

This pipeline allowed design to move quickly without requiring constant developer intervention.

Theming & System Evolution

As the visual direction evolved, I translated approved design decisions into updated token sets and theme definitions.

Even where full themes were not shipped immediately, the system:

• Influenced subsequent UI decisions

• Helped align mobile and automotive designs

• Reduced future refactor costs

AI-Assisted System Maintenance

To manage scale and speed, I used AI tools to:

• Perform bulk edits across token libraries

• Compare JSON files between versions

• Reduce manual errors when evolving the system

Impact

• Supported rapid delivery to alpha while keeping the system flexible

• Enabled hi-fi-first workflows that reduced design–engineering back-and-forth

• Delivered production-ready token updates that scaled across platforms

• Provided specs for over 60 components

Key Takeaway

More than contributing to a design system, I owned a production-grade token pipeline, enabling speed, consistency, and long-term scalability across mobile platforms.