Creating a scalable design system to support a global organisation.
The brief · Yara International
Define and build a global design system that brings together multiple existing systems into a unified, scalable foundation.
Enable teams to design and build products using shared components, guidelines and practices, while supporting different product needs across the organisation.
- Started
- 2018
- Status
- Still running
- Used by
- More than20products
- Savings
- An estimatedUS$6Mto date, in hours saved
My roleLed its creation
As Global Director of UX, I helped establish the design system as a key structural investment for the organisation, building support for its value in improving consistency, efficiency and scale across teams and products.
I ensured we had the right team and supported stakeholder adoption, communication and ROI tracking, so the system could grow with changing organisational needs and stay aligned with where it delivered the most value.
What the team did7 people
4 UX designers, 1 PM and 2 front-end developers built and ran the system.
- 4 UX designers
- 1 PM
- 2 front-end developers
Outcome
Used by more than 20 products, with an estimated US$6M to date in design and development savings.
The ambition of a global system
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.
Supporting diverse product needs
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.
Clear ways for adoption
For each kind of professional who 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 organisation.
- 01 · UseFigmaDesigners work from the shared libraries
- 02 · InspectStorybookDevelopers see each component, documented
- 03 · IntegrateGitHubComponents go into the product code
Components ready to use
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 organisation.
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.
A full illustration library
The design system included a dedicated illustration library, aligned with the brand and tailored to the organisation’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 organisation, while remaining flexible enough to support different contexts.
Characters, icons and components from the system, and scenes from the illustration library.
UX content as a key to faster delivery
Content was embedded into the design system as a core layer, not an afterthought.
We defined reusable microcopy patterns and structures that supported localisation 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.
Measuring impact and communicating value
To ensure long-term adoption, we made the impact of the design system visible to the whole organisation.
We defined ways to track its return on investment, documented improvements over time and shared how it supported key projects across the organisation. This helped stakeholders understand its value and reinforced its role as a core asset for digital product development.
The outcome
A global design system used by more than 20 products, with production-ready components, shared guidelines and clear governance.
The system enabled teams to design and build faster on a consistent, scalable foundation, with an estimated US$6M to date in savings on design and development work.
The system’s layers. Select a layer.
Delivered in FigmaStorybookGitHub
Illustrative. Product dots are not real products.
The decisions
Four decisions, across four chapters.
Select a decision to read what I chose and why.
Chapter 01A global system
Chapter 02Diverse products
Chapter 04Components
Chapter 07Measuring impact
Decision 1 of 4 · Chapter 01 · A global system
A system of systems
Instead of one monolith
HowA shared core with the flexibility different products need.
A system to enable product teams to deliver faster work consistently.
Contact
Open to design leadership roles.
I’m based in Singapore and can work in Singapore and the EU without sponsorship. Available now.