Ops Orchestration
Transforming DS bottlenecks into scalable, consistent patterns for PMs and non-Figma users
DESIGN OPS
DESIGN OPS
WORKFLOW OPTIMIZATION
WORKFLOW OPTIMIZATION
SAAS
SAAS
DESIGN OPS
WORKFLOW OPTIMIZATION
SAAS
[01]
INTRODUCTION
[01]
INTRODUCTION
[01]
INTRODUCTION
Overview
Overview
Overview
CLIENT
Moon Active - Global mobile gaming company & developer of top-grossing mobile games
CLIENT
Moon Active - Global mobile gaming company & developer of top-grossing mobile games
CLIENT
Moon Active - Global mobile gaming company & developer of top-grossing mobile games
PLATFORM
Moon Active Admin platform
PLATFORM
Moon Active Admin platform
PLATFORM
Moon Active Admin platform
MY ROLE
Lead System Designer on behalf of Kido
MY ROLE
Lead System Designer on behalf of Kido
MY ROLE
Lead System Designer on behalf of Kido
TIMELINE
Q3 2025
TIMELINE
Q3 2025
TIMELINE
Q3 2025
The Problem
The Problem
The Problem
Design System Bottlenecks Slowing Delivery
Design System Bottlenecks Slowing Delivery
Design System Bottlenecks Slowing Delivery
The design system had become more of a barrier than a tool. PMs, creating basic workflows themselves, lacked the Figma skills to modify core components safely. The system was unreliable: missing components, misalignment with Storybook, and an outdated, unsemantic foundation forced manual tweaks and made recurring patterns limited.
The design system had become more of a barrier than a tool. PMs, creating basic workflows themselves, lacked the Figma skills to modify core components safely. The system was unreliable: missing components, misalignment with Storybook, and an outdated, unsemantic foundation forced manual tweaks and made recurring patterns limited.
The design system had become more of a barrier than a tool. PMs, creating basic workflows themselves, lacked the Figma skills to modify core components safely. The system was unreliable: missing components, misalignment with Storybook, and an outdated, unsemantic foundation forced manual tweaks and made recurring patterns limited.
Teams had to rebuild flows from scratch, causing delays and inconsistencies, and the scattered system prevented any AI tool from understanding or using it effectively.
Teams had to rebuild flows from scratch, causing delays and inconsistencies, and the scattered system prevented any AI tool from understanding or using it effectively.
Teams had to rebuild flows from scratch, causing delays and inconsistencies, and the scattered system prevented any AI tool from understanding or using it effectively.
The Mission
The Mission
The Mission
Orchestrating the Right Ops Solution
Orchestrating the Right Ops Solution
Orchestrating the Right Ops Solution
The goal was a compact, scalable, development-aligned system with unified tokens and solid foundations, enabling teams to ship flows faster with less rework, regardless of Figma experience. We approached this in two steps:
The goal was a compact, scalable, development-aligned system with unified tokens and solid foundations, enabling teams to ship flows faster with less rework, regardless of Figma experience. We approached this in two steps:
The goal was a compact, scalable, development-aligned system with unified tokens and solid foundations, enabling teams to ship flows faster with less rework, regardless of Figma experience. We approached this in two steps:
1
Build a solid infrastructure
Map, consolidate, and refine foundational elements and components to create a clear, reliable base for both non-Figma users and AI tools.
2
Deliver an intuitive Design Ops solution
Provide complete, content-ready recurring patterns that minimize manual work and inconsistencies, while keeping the system lightweight and easy to use.
1
Build a solid infrastructure
Map, consolidate, and refine foundational elements and components to create a clear, reliable base for both non-Figma users and AI tools.
2
Deliver an intuitive Design Ops solution
Provide complete, content-ready recurring patterns that minimize manual work and inconsistencies, while keeping the system lightweight and easy to use.
1
Build a solid infrastructure
Map, consolidate, and refine foundational elements and components to create a clear, reliable base for both non-Figma users and AI tools.
2
Deliver an intuitive Design Ops solution
Provide complete, content-ready recurring patterns that minimize manual work and inconsistencies, while keeping the system lightweight and easy to use.
[02]
THE PROCESS
[02]
THE PROCESS
[02]
THE PROCESS
From Diagnostics to Remediation
From Diagnostics to Remediation
From Diagnostics to Remediation
1
Kick-off session with the Moon Active team
Understanding capabilities, pain points and goals through sessions with the team.
2
Mapping & Discovery
Auditing Figma files and development components, identifying gaps and reusable patterns.
3
Roadmap planning
Translating discovery insights into a clear roadmap with prioritized milestones.
4
Building Foundations & Semantics
Migrating existing scattered and primitive foundation into compact semantic collections.
5
Building DS base components
Migrating components while documenting changes from Storybook to ensure a smooth handoff.
6
Creating Robust Templated Components
Identifying recurring patterns and designing reusable templates for key organisms and scenarios.
7
Guidlelines & education
Delivering clear guidelines, recipes and workshops.
*
Holding weekly alignment calls to gather feedback and prioritize improvements.
[03]
CHALLENGES & SOLUTIONS
[03]
CHALLENGES & SOLUTIONS
[03]
CHALLENGES & SOLUTIONS
Balancing Flexibility and Constraints
Balancing Flexibility and Constraints
Balancing Flexibility and Constraints
The system needed to remain compact and maintainable while supporting diverse internal use cases. Through iterative mapping and refinement, we merged overlapping patterns into scalable solutions and removed rarely used variations, keeping the system lightweight yet capable of serving complex usecases.
The system needed to remain compact and maintainable while supporting diverse internal use cases. Through iterative mapping and refinement, we merged overlapping patterns into scalable solutions and removed rarely used variations, keeping the system lightweight yet capable of serving complex usecases.
The system needed to remain compact and maintainable while supporting diverse internal use cases. Through iterative mapping and refinement, we merged overlapping patterns into scalable solutions and removed rarely used variations, keeping the system lightweight yet capable of serving complex usecases.
Building for Non-Figma Users
Building for Non-Figma Users
Building for Non-Figma Users
The design system had to be simple, as many users had limited Figma experience, and complex structures like slots or deep nesting would slow them down. We built intuitive components with swappable content kits and clear properties, making it easy to build correctly.
The design system had to be simple, as many users had limited Figma experience, and complex structures like slots or deep nesting would slow them down. We built intuitive components with swappable content kits and clear properties, making it easy to build correctly.
The design system had to be simple, as many users had limited Figma experience, and complex structures like slots or deep nesting would slow them down. We built intuitive components with swappable content kits and clear properties, making it easy to build correctly.
Ensuring Adoption and Long-Term Use
Ensuring Adoption and Long-Term Use
Ensuring Adoption and Long-Term Use
Guidelines, Recepis & Education
Guidelines, Recepis & Education
Guidelines, Recepis & Education
To ensure correct usage and consistent long-term outcomes, we ran explanatory workshops and created detailed “how-to-use” guidelines covering design system usage and error-handling methides. Each template included clear instructions and practical recipes, enabling teams to copy, paste, and adapt content while understanding how and why each structure works.
To ensure correct usage and consistent long-term outcomes, we ran explanatory workshops and created detailed “how-to-use” guidelines covering design system usage and error-handling methides. Each template included clear instructions and practical recipes, enabling teams to copy, paste, and adapt content while understanding how and why each structure works.
To ensure correct usage and consistent long-term outcomes, we ran explanatory workshops and created detailed “how-to-use” guidelines covering design system usage and error-handling methides. Each template included clear instructions and practical recipes, enabling teams to copy, paste, and adapt content while understanding how and why each structure works.
[04]
OUTCOME & IMPACT
[04]
OUTCOME & IMPACT
[04]
OUTCOME & IMPACT
What We Achieved
What We Achieved
What We Achieved
We delivered a fully development-ready design system that enables teams to work faster, reduce repetitive work, and maintain consistent visual and structural patterns across the product. By consolidating components, unifying tokens, and creating robust, templated organisms, we made the system scalable, easy to use for both PMs and designers, and compatible with AI tools.
We delivered a fully development-ready design system that enables teams to work faster, reduce repetitive work, and maintain consistent visual and structural patterns across the product. By consolidating components, unifying tokens, and creating robust, templated organisms, we made the system scalable, easy to use for both PMs and designers, and compatible with AI tools.
We delivered a fully development-ready design system that enables teams to work faster, reduce repetitive work, and maintain consistent visual and structural patterns across the product. By consolidating components, unifying tokens, and creating robust, templated organisms, we made the system scalable, easy to use for both PMs and designers, and compatible with AI tools.
3X
PMs can build flows three times faster, with fewer errors.
3X
PMs can build flows three times faster, with fewer errors.
3X
PMs can build flows three times faster, with fewer errors.
146
Unified variables for design-development alignment and AI readability.
146
Unified variables for design-development alignment and AI readability.
146
Unified variables for design-development alignment and AI readability.
44
Consolidated components, streamlined for consistency and reuse.
44
Consolidated components, streamlined for consistency and reuse.
44
Consolidated components, streamlined for consistency and reuse.
5
Ready-to-use templates for quick, consistent implementation.
5
Ready-to-use templates for quick, consistent implementation.
5
Ready-to-use templates for quick, consistent implementation.
Reflection
Reflection
Reflection
Building Around Real Organizational Needs
Building Around Real Organizational Needs
Building Around Real Organizational Needs
This project reinforced why design systems should be treated as more than mere collections of components or visual libraries - they are operational tools that streamline workflows, boost team velocity, and ensure product consistency. Moving forward, the system must continue evolving by tracking usage and measuring performance through metrics and user feedback, ensuring it grows alongside the teams it supports.
This project reinforced why design systems should be treated as more than mere collections of components or visual libraries - they are operational tools that streamline workflows, boost team velocity, and ensure product consistency. Moving forward, the system must continue evolving by tracking usage and measuring performance through metrics and user feedback, ensuring it grows alongside the teams it supports.
This project reinforced why design systems should be treated as more than mere collections of components or visual libraries - they are operational tools that streamline workflows, boost team velocity, and ensure product consistency. Moving forward, the system must continue evolving by tracking usage and measuring performance through metrics and user feedback, ensuring it grows alongside the teams it supports.
[05]
MORE PROJECTS
[05]
MORE PROJECTS
[05]
MORE PROJECTS