A design system as a system of systems

The challenge was not just to support a single product team, but to build a system that could scale across multiple teams and use cases.

This required a strong governance model, clear onboarding processes, and a structured communication approach to ensure adoption.

Assembling the right team with strong professionals and the right mindset for such complex systems was key.

The system was designed as a system of systems, combining a shared foundation with the flexibility needed to support different teams and product contexts.

The system needed to support a wide range of products, from internal tools to customer facing platforms.

We structured it using atomic design principles, ensuring modularity and clear relationships between components. This allowed us to maintain a strong shared core while enabling flexibility for more specific product needs.

Interoperability was a key focus, ensuring that components and patterns could work consistently across different products without creating fragmentation.

Accessibility and branding were built into the system from the start, making them part of the foundation rather than an afterthought.

For each of the different kind of professionals that had to use the system we defined clear onboarding paths, learning materials, and communication channels for audiences, including designers, developers, and stakeholders.

Access to the system was structured through tools like Figma, Storybook and GitHub, ensuring that components were easy to use, inspect, and integrate into products.

Governance ensured that changes were controlled, feedback was captured, and the system evolved in a structured way based on needs from the organization.

From the beginning, we made sure that the final outcome of the system was ready to use components adapted to the different tech environments of the organization.

We ensured that components were production ready, well documented, and accessible through tools like Storybook, with clear links to development workflows in GitHub.

Clear processes were defined for feedback, updates, and troubleshooting, ensuring that the system remained reliable and aligned with product needs over time.

The design system included a dedicated illustration library aligned with the brand and tailored to the organization's needs.

Illustrations were designed as reusable and adaptable assets, allowing teams to apply them across different products without losing consistency or relevance. This ensured that visual communication was coherent across the organization while remaining flexible enough to support different contexts.

Content was embedded into the design system as a core layer, not an afterthought.

We defined reusable microcopy patterns and structures that supported localization from the start, allowing teams to deliver products globally without reworking content for each market.

This reduced friction in the design and development process, while improving consistency and quality across languages.

To ensure long term adoption, we made the impact of the design system visible to the whole organization.

We defined ways to track its return on investment, documented improvements over time, and shared how it supported key projects across the organization. This helped stakeholders understand its value and reinforced its role as a core asset for digital product development.