B2B Design System

Challenge

B2B teams at Swisscom were designing and building digital products in parallel.

Each team maintained its own Figma files, component implementations and interaction patterns. Over time, this created inconsistencies between design and engineering and made reuse difficult.

Components were duplicated, documentation was fragmented and teams often had to rebuild solutions that already existed elsewhere.

The challenge was not only to create a component library, but to establish a shared language between design and engineering.

Design Approach

The library was built as a code-first system within the Swisscom ecosystem — extending SDX, the company's central design system.

On top of SDX we created B2B-specific tokens, components and interaction patterns tailored to enterprise use cases.

The system was designed for both designers and engineers. Each component had a Figma counterpart and a code implementation built on the same principles.

Documentation was not an afterthought. It became the governance layer that allowed teams to understand how and when to use components — enabling the system to scale without becoming chaotic.

My Contribution

• Led the creation of the B2B design and code library
• Built the Figma component library aligned with the code layer
• Defined the system architecture on top of SDX foundations
• Developed and implemented the contribution model with 120 developers
• Created documentation and governance structures for scalable adoption
• Introduced B2B-specific tokens and patterns for enterprise use cases
• Ensured consistent UX patterns across the B2B product suite

Design × Code

With more than 120 developers contributing across B2B teams, a small centralized team alone could not maintain the system.

The contribution model solved this.

Developers were able to propose new components through a structured process: build, document and submit them for review. The core team ensured quality and consistency before components were merged into the system.

This transformed the library from a bottleneck into a platform. Teams contributed what they needed, the ecosystem benefited, and consistency scaled without additional headcount.

UX Collaboration Flow

Working with more than 120 developers across distributed teams required a structured collaboration process.

I developed the UX Collaboration Flow — an end-to-end workflow that defined how design and engineering worked together.

Design artifacts moved from annotated specifications and interaction notes, through frontend implementation, to formal component review and system integration.

Quality checks ensured every component matched the design system before being merged.

The result was a predictable collaboration model that maintained quality at scale while significantly reducing friction between design and engineering.

• Designed and owned the full collaboration process end-to-end
• Structured design handoff: annotated specs, states, interactions, edge cases
• Defined frontend acceptance criteria and review checklist
• Conducted acceptance reviews for all 80+ components before merge
• Reduced rework cycles between design and engineering significantly