A Scalable Design System for Minderoo Foundation
UX/UI
Engineering
Strategy
System Thinking
Planning
Stakeholder Management
The Problem
Minderoo Foundation operates across four focus areas each with distinct needs but shared design challenges. As the organisation's advocacy and impact effort grows and projects accelerate, inconsistencies in UI, and component reuse became evident.
Without a unified design system, teams spent excessive time recreating or designing components, and the lack of consistency made it difficult to outsource work effectively.
Recognising these challenges, I proactively initiated the development of a Design System to create a scalable, efficient, and cohesive approach to design and development.
The goal was to enhance consistency, streamline workflows, and improve collaboration between internal teams and external agencies.
My Role
As the only UX designer in the space, I led the end-to-end process of designing the system. I worked closely with a team of four developers, which was later reduced to two mid-project due to business strategic decisions. This shift made the need for a design system even more critical, ensuring that external agencies, which now have entered how production and support cycle, could seamlessly contribute to projects without disrupting visual and functional consistency. Beyond the design work, I also played a key role in stakeholder education, advocating for the adoption of the system and demonstrating its business impact.
Designing the System
The first step was conducting a design audit to identify inconsistencies across different Minderoo initiatives and digital products. Using insights from this audit, I structured the system using a modular, atomic design approach to ensure scalability. The system was built in Figma, making it easily accessible for designers and developers alike.
To encourage adoption, I strategically selected the Minderoo website as the first implementation project. This high-visibility platform provided a strong use case and set the foundation for broader system adoption across the organisation.
Designing Tokens for Branding and Scalability
One of the most challenging aspects of the process was defining and structuring design tokens. The naming conventions needed to be intuitive and scalable while accommodating the diverse branding needs of different initiatives under Minderoo.
After multiple iterations and discussions with developers, we arrived at a structured approach that balanced technical constraints with design flexibility. This enabled seamless updates and ensured brand consistency across all platforms, whether maintained in-house or outsourced to agencies.
Components Design Specification
To ensure consistency, I documented each component with detailed design specifications. These specifications covered:
Usage guidelines
Variations and states
Accessibility considerations (WCAG compliance)
Responsive behaviour
By maintaining these specifications, the system allowed developers—both internal and external—to build and implement components correctly without ambiguity.
Navigation
Tabs
Menu
Pagination
Breadcrumbs
Avatar
Status
Progress Bar
Tag
Badge
Feedback
Loading Spinner
Tooltip
In-line Alert
Dialog
Icons
Icon
Text
Font
Media
Image
Video
Container
Divider
Drawer
Actions
Button
Link
Inputs
Radio
Search
Slider
Field
Switch
Stepper
Checkbox
Date Picker
Dropdown
Rating
UI Colour Rule
Documentation & Guidelines
To facilitate adoption, I created comprehensive documentation within Figma. This included:
Design principles and rationale
Token definitions and usage
Component library with clear implementation guidelines
Best practices for contributing to the system
This documentation served as a central knowledge base, reducing reliance on verbal communication and making it easier for new designers, developers, and external teams to onboard quickly.
Onboarding & Governance
A critical component of this initiative was educating stakeholders on the value of a design system. I led multiple presentations and workshops to help teams understand:
The benefits of a design system in terms of efficiency and consistency
How to use and contribute to the system
The governance model for maintaining and evolving the system over time
To ensure long-term sustainability, I proposed a governance framework where updates and new components would be reviewed collaboratively. This helped maintain quality control and alignment with evolving business needs.
Lessons learned
This project reinforced the importance of:
Advocacy & Education: Stakeholder buy-in is essential. Demonstrating tangible benefits early on was key to adoption.
Scalability from Day One: The design system had to accommodate both internal teams and external agencies, which influenced decisions around documentation and tokenisation.
Collaboration Across Teams: The success of a design system depends on tight collaboration between design, development, and business teams.
Iterative Approach: Token naming proved to be one of the most complex aspects, requiring multiple refinements before settling on a scalable structure.
Strategic Implementation: Choosing the Minderoo website as the first project helped validate the system and drive further adoption.
Conclusion
By proactively identifying the need for a Design System and leading its implementation, I was able to establish a scalable, efficient, and consistent approach to design at Minderoo Foundation.
While the journey came with challenges, the result was a system that not only improved internal workflows but also enabled faster, more consistent work when outsourcing to agencies. With a strong foundation in place, the design system is well-positioned to evolve scale and support Minderoo’s ongoing digital initiatives in their respective Focus Areas.
Feel free to hit me up. I'm looking
forward to hearing from you.