Component inconsistencies, almost everywhere
The same UI patterns were rebuilt with different styles — for example, two search bar components with totally different styles in the same product flow.
Streamlining and Establishing Fairatmos Design System
- Duration
- 4 Months
- Skills
- UX Research, Design System
- Collaborators
- Product Designer — Vinsen Product Manager — Gerin Baskara Front-end Developer — Thomas Back-end Developer — Lukman QA — Fawwaz
Overview
Fairatmos is a B2B startup in the Carbon Technology industry in Indonesia. The company had product and developer design systems scattered across files, creating confusion for engineers and designers when building features.
Impact
- +240% increase in cross-functional team efficiency
- Reduce design inconsistencies, further enhancing the UX for both product users, and product/developer teams
- New process framework, as the new guidance in cross-functional team collaboration in design system
Problem Discovery
How it Started
When I started touching the Figma files, I noticed many inconsistencies that made collaboration harder for designers and developers alike.
Unorganized Designs
Files lacked structure, making it difficult to find work and maintain consistency across the team.
Understanding
Gather Perspective and Insights
I gathered insights from both product and tech teams to understand how they experience the design system today.
Product Team
Product designers shared that they often duplicate components or create new ones because existing libraries are hard to navigate and do not match their workflow.
Tech Team
Engineers highlighted confusion between multiple libraries, unclear naming, and difficulty knowing which components are production-ready.
Findings
Insights from Stakeholders
Across interviews and audits, product designers struggled with component discoverability — including term confusion between product and developer design systems, and a legacy library with over 1,000 components.
Fragmented Communication
The lack of shared design values caused teams to have different perspectives when building features.
Design System Discoverability
Product designers are not using design system components because they find it hard to discover the right components.
Term confusion between systems
Product and developer design systems used overlapping terminology, making handoff and implementation slower.
Legacy library bloat
An outdated library with 1,004 components increased maintenance cost and made migration intimidating.
Solution
Implemented Solutions
A single, unified design system
Consists of style guide and components, when and how to use them.
New process framework for cross-functional collaboration
Defined rituals across daily standup, grooming, development, QA & design check, and retrospective so design system work stays visible.
Improve Design System Efficiency
I reduced 100 base button components into a single base component using variants and properties. With fewer components, designers spend less time searching. I created a new library, guided migration, and deprecated the old library once teams moved over.
Impact
Metrics
Increase efficiency by +240%
Cross-functional teams moved faster with a single source of truth, reducing confusion for designers and developers.
Reduce design inconsistencies
Unified components and documentation improved consistency across products and made implementation more predictable.
Increase design consistency across 3 products240% Faster end-to-end developmentDirection ClarityEliminate requirement gap between Design—CodeIncreased Status VisibilityLibrary Discoverability