Improving efficiency through design system adoption
Improving efficiency through design system adoption
Adoption
Consistency
Efficiency
TL;DR
TL;DR
I led the rebuild of Hungerstation's fragmented, inconsistently used design system into a unified, documented, cross-platform source of truth. The team audited all components, defined principles, aligned naming and tokens, added RTL support and introduced governance and adoption processes.
The result: system adoption grew from under 12% to 52%, documentation reached 94%, and product teams gained a faster, more consistent and scalable workflow.
I led the rebuild of Hungerstation's fragmented, inconsistently used design system into a unified, documented, cross-platform source of truth. The team audited all components, defined principles, aligned naming and tokens, added RTL support and introduced governance and adoption processes.
The result: system adoption grew from under 12% to 52%, documentation reached 94%, and product teams gained a faster, more consistent and scalable workflow.
I led the rebuild of Hungerstation's fragmented, inconsistently used design system into a unified, documented, cross-platform source of truth. The team audited all components, defined principles, aligned naming and tokens, added RTL support and introduced governance and adoption processes.
The result: system adoption grew from under 12% to 52%, documentation reached 94%, and product teams gained a faster, more consistent and scalable workflow.
About Property Finder
About Property Finder
HungerStation is a Delivery Hero* company and one of the biggest food delivery platforms in KSA, connecting hungry people with restaurants, groceries and even pharmacies.
*Delivery Hero is the world’s leading local delivery platform, operating its service in around 70 countries across Asia, Europe, Latin America, the Middle East and Africa.
HungerStation is a Delivery Hero* company and one of the biggest food delivery platforms in KSA, connecting hungry people with restaurants, groceries and even pharmacies.
*Delivery Hero is the world’s leading local delivery platform, operating its service in around 70 countries across Asia, Europe, Latin America, the Middle East and Africa.
Role
Role
I joined Hungerstation as a Senior Product Designer. On day one I sat down with my manager who expressed that due to my experience with design systems, he'd like me to join the newly formed Design Ops squad and push the delivery of the design system.
As a team of 5, I took on a lead role; facilitating alignment sessions, running audits, governance, building components and later overseeing the build of components by other team members, enabling me to focus on writing documentation and populating Zeroheight.
I joined Hungerstation as a Senior Product Designer. On day one I sat down with my manager who expressed that due to my experience with design systems, he'd like me to join the newly formed Design Ops squad and push the delivery of the design system.
As a team of 5, I took on a lead role; facilitating alignment sessions, running audits, governance, building components and later overseeing the build of components by other team members, enabling me to focus on writing documentation and populating Zeroheight.
Challenge
Challenge
As with many design systems that don't have a dedicated team, Hungerstation's design system was more of an unfinished Figma component library that the team struggled to maintain and build on. As the design team grew and the product matured, inconsistencies were holding the team back. Some of the problems I highlighted included:
No clear documentation or naming conventions
Fragmented visual styles across apps
Limited accessibility and language (e.g. Arabic) considerations
Legacy Figma components not using auto layout of new features
Missing alignment across Flutter, iOS and Android
Adoption blockers:
<12% system adoption and no one to push it
Developers using a mix of Flutter and native code
No engineers dedicated to the design system
No roadmap or governance for scaling
As with many design systems that don't have a dedicated team, Hungerstation's design system was more of an unfinished Figma component library that the team struggled to maintain and build on. As the design team grew and the product matured, inconsistencies were holding the team back. Some of the problems I highlighted included:
No clear documentation or naming conventions
Fragmented visual styles across apps
Limited accessibility and language (e.g. Arabic) considerations
Legacy Figma components not using auto layout of new features
Missing alignment across Flutter, iOS and Android
Adoption blockers:
<12% system adoption and no one to push it
Developers using a mix of Flutter and native code
No engineers dedicated to the design system
No roadmap or governance for scaling
Goals
Goals
This project was more than just about tidying up components, it was about building a shared language, processes and trust across teams.
Clarity over complexity: simpler governance wins faster
Progress beats perfection: prioritise adoption over polish
People first: systems succeed when people believe in them
This project was more than just about tidying up components, it was about building a shared language, processes and trust across teams.
Clarity over complexity: simpler governance wins faster
Progress beats perfection: prioritise adoption over polish
People first: systems succeed when people believe in them
Process
Process
Audit and review
Using the Sparkbox Design System Maturity Model, I assessed where we were and aligned with stakeholders around a shared starting point. We sat between Stage 1: Building and Step 2: Growing.
This process included:
Auditing Figma files and code
Mapping all existing components
Tagging duplicates, gaps and blockers
Highlighting issues across 3 libraries
Audit and review
Using the Sparkbox Design System Maturity Model, I assessed where we were and aligned with stakeholders around a shared starting point. We sat between Stage 1: Building and Step 2: Growing.
This process included:
Auditing Figma files and code
Mapping all existing components
Tagging duplicates, gaps and blockers
Highlighting issues across 3 libraries
Defining design principles
To align the team and build with intention, I facilitated an engaging design principles workshop that included; ensuring the team understood the benefits of a design system, reviewing principles from top companies i.e. Salesforce Adobe and more, writing statements that should apply to us and our users.
The outcomes of the workshop allowed me to:
Group ideas into themes reflecting company values
Write 6 core principles to guide system decisions and designs
Work with our Visual Designer to visually represent each principle
Defining design principles
To align the team and build with intention, I facilitated an engaging design principles workshop that included; ensuring the team understood the benefits of a design system, reviewing principles from top companies i.e. Salesforce Adobe and more, writing statements that should apply to us and our users.
The outcomes of the workshop allowed me to:
Group ideas into themes reflecting company values
Write 6 core principles to guide system decisions and designs
Work with our Visual Designer to visually represent each principle
Design and documentation
I led the team in creating and testing components across multiple states and languages, ensuring scalability and accessibility from the start. Each component was built with:
Variants for English and Arabic (RTL)
Shimmer/loading states to handle skeleton UI patterns
Interaction states for consistency across platforms
The process allowed me to align closely with squad designers on usage guidelines before populating Zeroheight to establish a single source of truth for the system.
Design and documentation
I led the team in creating and testing components across multiple states and languages, ensuring scalability and accessibility from the start. Each component was built with:
Variants for English and Arabic (RTL)
Shimmer/loading states to handle skeleton UI patterns
Interaction states for consistency across platforms
The process allowed me to align closely with squad designers on usage guidelines before populating Zeroheight to establish a single source of truth for the system.
Governance & Tracking
To future proof the system, I defined how components should be created, reviewed and maintained.
I implemented:
A process for requesting new components
Governance and ownership documentation
Review and priortisation trackers
Bi-weekly syncs with design and dev teams
System adoption dashboard (e.g. 52% by March 2024)
Governance & Tracking
To future proof the system, I defined how components should be created, reviewed and maintained.
I implemented:
A process for requesting new components
Governance and ownership documentation
Review and priortisation trackers
Bi-weekly syncs with design and dev teams
System adoption dashboard (e.g. 52% by March 2024)
OUTCOME
OUTCOME
We set an ambitious target to achieve 50% adoption by the end of 2024, giving us just 9 months to deliver. By December 2024, we had reached 52% adoption of the design system and 94% of components built and documented in Zeroheight.
We set an ambitious target to achieve 50% adoption by the end of 2024, giving us just 9 months to deliver. By December 2024, we had reached 52% adoption of the design system and 94% of components built and documented in Zeroheight.
Let’s Collaborate
Let’s Collaborate
Get in touch if you have a project, questions or just want to chat.
Get in touch if you have a project, questions or just want to chat.
Copy email
Designed in Figma, built in Framer.
Designed in Figma, built in Framer.
Copyright 2025 Jayde-Olivia. All rights reserved.
Copyright 2025 Jayde-Olivia. All rights reserved.
Let’s Collaborate
Get in touch if you have a project, questions or just want to chat.
Copy email
Designed in Figma, built in Framer.
Copyright 2025 Jayde-Olivia. All rights reserved.