Contact me

Portfolio

Blog

Contact me

Evolving a Scalable Design System for Multi-Platform Consistency

Introduction

When I began working with ZOLEO, the existing design system had a solid base — but it was built with narrow assumptions. It was engineered for a single web product (MyZOLEO), lacked hierarchical structure, and wasn’t prepared for adoption across mobile, integrations, or future domains.

As product scope shifted, the system began to fragment. Tokens grew stale, components diverged, and documentation lagged behind. Rather than let this drift continue, I took a proactive role: modernizing the token architecture and laying the foundation for a design system that could scale with ZOLEO’s evolving ecosystem.

My role: Product Designer (Design Systems & Tokens)
Duration: 2 years (contract / freelance)
Focus: Token architecture, component modernization, design → code integration

Context & Problem

Components and styles were scattered across multiple Figma files, with no clear inheritance or modular structure.
Tokens were firmly tied to MyZOLEO; any extension to new products or platforms required manual, error-prone duplication.
System improvements were deprioritized in favor of product feature work; this led to misalignment and technical debt.

As ZOLEO’s roadmap expanded toward mobile, third-party integrations, and new experiences, the legacy token structure would become a bottleneck rather than an enabler.

My focus

The original system had tunnel vision: token decisions were strictly about MyZOLEO’s web interface. But leadership’s ambition expanded its usage: mobile apps, partner integrations, future domains not yet conceived.

My goal: rebuild token and component foundations so that visual language could adapt across platforms seamlessly, with consistent behavior, lower maintenance cost, and fewer manual patches.

Rebuilding the System Foundations

Token Architecture Redesign

Defined a clear token hierarchy: Foundational → Theme → Component
Expanded and refined token categories: color, typography, spacing, sizing, states
Introduced a dimension token concept to consolidate sizing, spacing, border radii, etc., reducing redundancy
Built fallback and aliasing logic so updates cascade cleanly
Created handoff-safe workflows so that even without Tokens Studio, editing tokens remained safe and controlled

Component Rebuild & Integration

Restructured key UI components (buttons, forms, tooltips, feedback modules) to fully consume tokens
Mapped token-based props into Prismic CMS components, reducing translation work between design and dev
As a result, devs reported being able to convert designs into working code ~80% faster
Replaced multiple icon wrappers with a unified tokenized system, reducing component complexity

dimension.token.name.here

dimension.token.name

1rem

{global.token.1}

Token implementation example

xx.fixed.size.icon.contained.md

1rem

{xx-dimensions.5}

Label

xx = brand
fixed = fixed width or height
size = icon size
contained = location of the icon. Contained inside a component or standalone outside a component.
md = component size (xs, sm, md, etc.)

xx = brand
fixed = fixed width or height
size = icon size
contained = location of the icon. Contained inside a component or standalone outside a component.
md = component size (xs, sm, md, etc.)

Icon & Flexibility Improvements

Original system relied on many icon wrappers and fixed sizes; this created coupling and rigidity
I introduced wrapping logic via tokens (e.g., `xx.fixed.size.icon.contained.md`) to unify handling across contexts
Simplified wrapper layers: fewer wrappers, more flexible sizing, and context-aware behaviors

iconwrapper.sm

16px

{size.4}

iconwrapper.md

20px

{size.5}

iconwrapper.lg

24px

{size.6}

iconwrapper.xl

32px

{size.8}

iconwrapper.2xl

48px

{size.12}

Forms, Feedback & Edge Components

The existing forms components were brittle and prone to breakage after Figma updates
I proposed rebuilding them using token-driven white-label structures, allowing for easy swaps and adaptability
Similarly, tooltips and feedback elements were refactored to allow flexible spacing, states, and theming

Impact

✅ 80% faster design-to-dev handoff after CMS integration
✅ 30+ components rebuilt to modern Figma standards
✅ Reduced manual token edits through structured linking
✅ Eliminated redundant icon wrappers, improving performance
✅ Unified documentation across design, dev, and business teams

Challenges & Constraints

Budget constraints forced the cancellation of Tokens Studio, I had to architect fallback workflows
Product deadlines often overtook system priorities, making synchronization and buy-in essential
Legacy performance issues (large Figma files, slow token propagation) required careful trade-offs
Stakeholder education: many team members weren’t deeply familiar with token-based systems, so communication mattered

Reflection & Next Steps

This work deepened my belief: a design system is a "living product", not a one-time deliverable. Without continuous maintenance, even robust architecture drifts.

If I were to take this further, I’d:

Automate token sync between design and code (CI/CD style)
Expand theme logic (dark mode, regional themes, accessibility adjustments)
Transition to living documentation, where system docs update from token / component changes
Build governance workflows (reviews, token proposals, contributions)

Before & After snapshot

Old State
Fragmented token files
Redundant icon wrappers
Manual CMS handoff
Siloed documentation

New State

Unified token hierarchy
Single scalable icon system
Token-mapped CMS components
Cross-functional system guides

Old button structure

New button structure

Button/small

Standalone

Label

Contained

Label

iconButton/small

Standalone

Contained

Final Outcome

Though the ZOLEO system is currently on pause, the token architecture I rebuilt now stands as a scalable blueprint. The work demonstrates how a design system can outlast a project, so long as it’s built for flexibility, modularity, and governed evolution.

Connect with me on LinkedIn or Bluesky