Telkom Indonesia
Legion Design System
Design System Award 2023
Revitalizing a legacy system into a multi-brand design system for Telkom's 100+ digital products.
- Company
- Telkom Indonesia
- Role
- Lead UI Designer
- Timeline
- 3 years
- Platform
- Responsive, Android & iOS
- Skills
- Design System, Design Tokens, Documentation, Team Leadership
- Tools
- Figma
Telkom operates more than 35 squads and 20 tribes, each developing products with different needs, platforms, and brand identities. The previous design system could no longer scale: components were not modular, lacked multi-brand support, had no UX patterns, documentation was limited, and large gaps existed between design and development.
Challenge
How might we transform Telkom’s legacy design system into a scalable, research-driven multi-brand ecosystem that reduces redundancy, aligns workflows, and delivers consistent, accessible experiences across 100+ products?
My role
As Lead UI Designer, I led a team of six designers and front-end developers across the life of the revitalization, owning the components, the tokens underneath them, and the documentation that went on to win Best Documentation at the Design System Award 2023.
- 5x
- Faster high fidelity designDesigners build screens from ready components instead of from scratch.
- 4x
- Faster deliveryFaster delivery and higher team productivity across tribes.
- 80%
- Design to development accuracyWhat ships matches what was designed.
- 10x
- Asset reuseAssets reused across cross-brand platforms.
Discover
We audited the entire legacy system to understand its limitations. Components were rigid, duplicated, and inconsistent; documentation was minimal; and developers struggled with mismatched handoffs. Through workshops with tribes and ecosystems, we identified six core problems affecting processes, patterns, consistency, and scalability. These insights shaped the foundation for the revitalization.
Audit Design System
Identified major gaps in component structure, documentation, consistency, and design and development alignment.
Audit UX Pattern
Found no centralized UX pattern library, causing inconsistent experiences.
Team Workshop
Validated shared pain points across tribes and gathered needs for scalable multi-brand support.
Define
We defined a multi-brand architecture separating core patterns from brand styling, enabling consistent interactions while allowing visual identity flexibility. Collaboration was restructured using a cyclical model, and the system was rebranded into Legion to unify purpose, identity, and scalability.
Build Multi-Brand System Architecture
Created a structure where patterns stay consistent while visual identity adapts per brand.
Rebranding to Legion
Established a stronger, scalable identity for Telkom’s multi-brand design system.
Team & Collaboration Challenges
Introduced a cyclical contribution model to distribute workload and maintain quality.
Design
We built atomic, modular components powered by tokens and a locked and open structure for consistency and customization. Foundations and UX patterns were developed alongside guidelines and templates. Co-creation with tribes validated usability, and close collaboration with developers ensured design and code parity.
Co-Creation Component Request
Gathered real product needs across tribes to shape accurate multi-brand components.
Foundation & Tokens
Built scalable foundations (color, typography, spacing, elevation) for multi-brand use.
Modular & Atomic Components
Created components with locked patterns and open customization via tokens.
UX Pattern Library Support
Helped establish consistent interaction patterns across platforms.
Guidelines & Templates
Provided clear rules, usage guides, and templates for consistent adoption.
Implementation & Testing Support
Ensured final output matched design through validation and collaboration.
Deliver
We launched Legion, a fully revitalized multi-brand design system with synchronized Figma libraries, coded components, patterns, documentation, and a unified request, feedback and issue platform. Adoption was strengthened through dashboards, gamification, and onboarding.
Introducing Legion Design System
A multi-brand, multi-platform system providing unified design and code components.
Measurement, Gamification & Adoption
Dashboards and gamified tracking helped drive adoption across tribes.
Request / Feedback / Issue Portal
Centralized governance for assets, contributions, and communication.
Impact
Legion improved delivery efficiency, design and development accuracy, UX consistency, and team scalability. It unified patterns across 100+ products, saved development costs, strengthened collaboration, and earned Best Documentation at the Design System Award 2023.
Big Impact Summary
Improved delivery speed, consistency, scalability, and cost efficiency across Telkom.
Consistency Across 100+ Products
Unified interaction and visual patterns across platforms and brands.
Team Scalability
Achieved a 60:40 development to maintenance ratio, classified as good scalability.
