Transforming DS bottlenecks into scalable, consistent patterns for PMs and non-Figma users
[01]
INTRODUCTION
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.
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.
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:
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
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
Guidelines & education
Delivering clear guidelines, recipes and workshops.
*
Holding weekly alignment calls to gather feedback and prioritize improvements.
[03]
CHALLENGES & SOLUTIONS
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 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.
Guidelines, Recipes & 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 methods. 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
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.
146
Unified variables for design-development alignment and AI readability.
44
Consolidated components, streamlined for consistency and reuse.
5
Ready-to-use templates for quick, consistent implementation.
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.
[05]
MORE PROJECTS
