WSAudiology

Migration of Design Library + Multibrand Design System

Company: WSAudiology 

My Role: UX / UI

When I joined WS Audiology, design was distributed across three major brands - Widex, Signia, and Rexton - each with its own Sketch library, component structure, and visual logic. While this worked locally, it didn’t scale.

The company’s ambition was clear:

Goal: Create a unified, token-driven design system that would support all three brands - without compromising brand identity.

This case covers the migration from Sketch to Figma, the creation of a shared source of truth, and the transformation from three independent libraries to one multi-brand system.

Design system migration & restructuring
Multi-brand architecture
Cross-functional alignment with Design, Dev, Product & Brand
Governance

Focus: Design system migration, multi-brand scaling

Team: Design System Team, developers, product owners, brand teams.

UX Team Tools: Figma + token studio, Sketch, Frontify, Miro, Storybook

“Design System is not a library of components - it is a shared language that turns creativity into consistent, scalable impact”

1. From Isolated Sketch Libraries → Structured Figma Foundation

Before

Three separate Sketch libraries (Widex, Signia, Rexton)
No unified naming conventions
Duplicate and near-duplicate components
Brand styling hardcoded inside components
Limited documentation
Design and development drifting apart

Each brand evolved independently, which led to inconsistencies and high maintenance overhead.

Process

Audit and mapping.

We began with a structured audit:

Inventory of all components across brands
Identification of duplicates and inconsistencies
Categorization into global, brand-specific, and obsolete elements
Mapping of visual differences and structural overlaps
Documented inconsistencies in spacing, colors, naming

The audit revealed significant redundancy and a lack of separation between design primitives and components.

30–40% overlapping components
No clear hierarchy of primitives vs components
Brand styling hardcoded inside components

The audit became the foundation for migration priorities.

Migration - Sketch to Figma

Instead of directly importing Sketch files, we rebuilt the system intentionally:

Introduced Figma variants for scalable component logic
Applied atomic structure (primitives → components → patterns)
Established consistent naming conventions
Cleaned up variant complexity
Improved component flexibility

This allowed us to rethink component architecture rather than preserve legacy inconsistencies.

At the same time:

Developers aligned implementation in Storybook
Documentation began taking shape in Frontify
Ownership boundaries between design, brand, and code were clarified

For the first time, we were moving toward a shared ecosystem rather than isolated assets.

After

Structured Figma component architecture
Clear naming conventions
Defined primitive layer
Centralized documentation
Early alignment with Storybook

This was the technical foundation needed before scaling further.

Establishing Source of Truth

We clarified ownership:

Figma → Design structure & visual logic (documantation for designers)
Storybook → Implementation & code reality
Frontify → Documentation & brand guidelines

For the first time, there was clarity around:

Where design decisions live
Where implementation lives
Where brand rules are documented

Ekosystem projektowania i rozwoju cyfrowego (1).png

2. From Parallel Systems → Strategic Unification

After phase 1 we had:

Structured Figma library
Defined primitives
Shared documentation platform
Clear ownership model
Foundation ready for scaling

Only then did the bigger question emerge.

Once the migration stabilized the system, Product Owners proposed a bold idea:

Instead of maintaining three separate design libraries —
could we create one shared system adaptable to all brands?

The motivation was clear:

Reduce duplication
Improve scalability
Accelerate feature rollout
Ensure consistency across products

But this required more than shared components.

It required tokenization.

.

3. From Brand-Specific Styling → Token-Based Architecture

Token Strategy

We introduced Token Studio to abstract visual decisions.

The goal: Separate what a component does, from how a brand expresses it.

Using the Token Studio plugin, we:

Abstracted visual values into semantic tokens
Separated brand tokens from system tokens
Introduced alias tokens for scalable mapping

Instead of designing components with hardcoded brand colors, spacing and typography we moved to intent-driven tokens such as:

color.background.primary
color.text.secondary
color.surface.critical

Each brand mapped its values to the same semantic layer.

This allowed one shared component structure, while brand identity could be swapped dynamically.

One component.
Three brand expressions.

4. The Complexity of Designing for Three Brands

This is where theory met reality.

Not all brands wanted identical behaviors.

Some expected:

Different button prominence
Slightly different interaction logic
Distinct layout nuances

We had to define:

What is global infrastructure
What is brand extension
What cannot be unified

We ran workshops to:

Define naming conventions
Agree on token hierarchy
Clarify which components are shared vs isolated

This required negotiation and iteration.

5. From Visual Identity to Intent-Driven system

One of the biggest challenges was color semantics.

Primary color did not always behave as a primary action color across brands.

We discovered:

In one brand, primary signaled urgency
In another, it was softer and informational
Accessibility contrast differed

We shifted from brand-driven naming to intent-driven tokens.

Instead of:
“Widex Blue”

We defined:
“Color / Success / default”

This required:

Brand workshops
Accessibility checks
Iteration cycles
Close collaboration with branding teams

6. From Ad-Hoc Contributions to Structured Governance

Scaling the system introduced new questions:

How do we introduce new components?
How do we prevent duplication?
How do we deprecate outdated elements?

We introduced a structured contribution model.

New component workflow

Alignment Workshop (Design + PM + Dev)
Define scope across brands
Build initial version in Figma
Cross-functional review
Iterate
Storybook implementation
Documentation update
Publish

We also redefined the Definition of Done to include:

Token compliance
Accessibility validation
Documentation update
Storybook alignment

7. Organizaltional Challanges

This was not only a technical redesign.

It required cultural change.

Onboarding Designers to Token Studio

Steep learning curve
Workshops and documentation required

Deprecating Components

Resistance from teams
Phased rollout required

Aligning Design & Code

Continuous back-and-forth between Figma and Storybook

Balancing Brand Identity with System Integrity

Constant negotiation

Impact

One unified multi-brand foundation
Reduced duplication across three libraries
Token-driven scalability
Clearer collaboration between design & development
Improved onboarding clarity
Stronger governance model

The organization moved from maintaining parallel ecosystems to building shared infrastructure.

Reflections

This project taught me that:

Design systems are governance systems.

They require:

Negotiation
Long-term thinking
Clear ownership
Continuous education

The biggest challenge was not building components - it was aligning people around a shared framework.

While the system was still evolving when I left, the groundwork for a scalable, token-based multi-brand architecture was firmly established.