• 2018–2021
  • XING
  • 20M+ members
  • Design system
  • REACT
  • Web + Mobile
  • 300+ internal users

Scaling a design language into a system

My role

I co-created XING’s design system from its new design language — turning visual principles into reusable components, documented patterns and shared product standards across web and mobile.

Business / User need

The redesign created a new visual direction, but the business challenge was scale. To keep quality consistent across a large product organisation, teams needed reusable components, shared standards and clear implementation rules — reducing friction between design and engineering while speeding up delivery.

Outcome and Impact

The design system became shared product infrastructure for XING, used by 300+ internal users across design, product and engineering. It unified web, iOS and Android through Figma libraries, React, Swift and Jetpack Compose components, supported by a Frontify guidance platform and platform-specific developer documentation. As a living system, it has continued to scale since 2018 — now also evolving for AI use cases."

Button states, specs, appearance/style docs, Figma libraries, component sheets, web/mobile examples.
From language to infrastructure

A design language only creates impact when teams can apply it consistently. We translated the new visual direction into reusable components, states, patterns and implementation rules — turning brand and interface principles into daily product infrastructure.

Button component specification sheet showing appearance, border details, icon placement, size variants and usage rules.
Anatomy before component

Before components became library assets, we defined their structure. For buttons, that meant anatomy, hierarchy, states, optional features and behavioural rules — making clear which decisions belonged inside the component and which should stay flexible for product teams.

Guidance, not just components

We did not only provide components — we provided direction. I initiated a dedicated Frontify guidance platform that explained how designers should use components in ways that supported the design language, while developers received platform-specific documentation for implementation.

Three platforms, one system

The design system unified XING’s product language across web, iOS and Android. Components were translated into React, Swift and Jetpack Compose implementations, supported by platform-specific documentation and exploratory tools for designers and developers. This approach helped the product feel consistent across touchpoints while respecting the realities of each platform — and saved designers significant time by allowing one mobile design to translate across web mobile, iOS and Android.

Interactive CodePen prototype
Code is my sketch

I can’t visualise every interaction perfectly in my head, so I use quick prototypes to think, test and make ideas tangible. Each CodePen helped me understand the component better — and gave designers and developers something concrete to discuss, align on and move into implementation faster.