LEGION design system
Legion as Multi-Brand Design System helps Telkom Indonesia degital products team work together to create a more delightful and consistent experience across the product. Through an atomic design, approach to methodically craft a single source of truth from all UI components and patterns, paired with documentation to help clarify and focus our efforts on building the best user experience.
My Role
As a UI Designer, I was responsible for building the Legion Design System from the ground up—establishing its foundations, tokens, and reusable components. My work focused on creating a consistent visual language that could scale across products, while ensuring accessibility and flexibility for future iterations. I collaborated closely with product designers and engineers to define structure, document usage guidelines, and deliver a system that not only speeds up design and development but also strengthens brand coherence.
Problem Statement
Design inconsistencies across Telkom Indonesia digital services created a fragmented user experience, making it difficult for developers and designers to maintain a cohesive interface. Telkom Indonesia apps often suffer from inconsistent UI elements, accessibility issues, and inefficient development workflows. Before Legion Design System, the Telkom Design faced:
Lack of UI Consistency Each product had different design guidelines, creating a disjointed experience.
Development Inefficiency Without a standardized system, UI components had to be rebuilt repeatedly, increasing development time.
Poor Accessibility With an average user age of 40+, many UI elements were not optimized for readability and accessibility standards.
Challenges
To address inconsistencies across Telkom Indonesia digital services, we established key objectives for the Legion. Our goal was to create a unified, scalable, and accessible design system that enhances usability while streamlining development workflows. Key focus area:
Create a unified design system to standardize components across all Telkom Indonesia apps.
Enhance accessibility to ensure compliance with WCAG and usability for older users.
Improve development efficiency and provide ready-to-use components for faster implementation.
Approach
To ensure Legion Design System was both scalable and user-friendly, we analyzed existing design systems, studied industry best practices, and gathered insights through stakeholder research to create a solution that meets both user and scalable for government applications.
Competitive Benchmarking
To build a design system that ensures consistency and streamlines development, we analyzed how industry leaders like Google, Apple, and Atlassian provide comprehensive ecosystems, not just visual guidelines. We benchmarked their strategy of integrating reusable components and robust tooling to create a cohesive user experience and accelerate product delivery across their entire suite.
Material Design
material.io
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
Human Interface Guidelines
developer.apple.com/design/
Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.
Atlassian Design Language
atlassian.design
Use Atlassian's end-to-end design language to create straightforward and beautiful experiences.
GOV.UK
gov.uk
Use this design system to make your service consistent with GOV.UK. Learn from the research and experience.
Australian Government
designsystem.gov.au
The Australian Government Design System provides a framework and a set of tools to help designers and developers.
Stakeholder Collaboration
We worked closely with key stakeholders throughout the development process to align design, technical feasibility, and regulatory requirements, ensuring the system was both practical and scalable for Telkom Indonesia.
Key Finding
Through stakeholder discussions and competitive analysis, we identified key areas that needed improvement to make Legion Design System more effective and widely adopted.
Developers wanted reusable, flexible components to speed up production.
Accessibility standards needed improvement for readability.
Design teams needed clear documentation to maintain consistency.
Design Implementation
To create a scalable and efficient design system, we followed a structured approach that involved defining foundatiion, components, improving accessibility, and ensuring seamless integration with development workflows.
Building Foundation
The foundation layer of the Legion Design System defines the core visual language that ensures consistency and scalability across products. It covers essential elements such as:
Brand Logo
Color System
Icon System
Typography
Breakpoints & Grids
Spacing
Radius
Elevation
Building Components
In building the Legion Design System, our team applied the Atomic Design methodology to ensure scalability and reusability. We structured components into: Atoms -> Molecules -> Organisms -> Templates & Pages
The library includes essential UI elements such as:
Inputs & Controls: Button, Checkbox, Radio Button, Select Field, Switch, Slider, Stepper, Spinner, Pin Field.
Navigation: Navbar, Sidebar, Pagination, Breadcrumb.
Feedback & Status: Alert, Snackbar, Badge, Progress Bar, Progress Circle, Rating.
Containers & Layouts: Card, Table, Modal, Divider, Accordion.
Others: Avatar, Chips, Anchor Text, Image.
Guideline Documentation
Legion team built a web-based design guideline as a single source of truth for everyone involved in the product development process. It documents foundations, tokens, and components with clear usage rules, do’s and don’ts, and implementation notes. By making the guideline accessible to designers, developers, and product managers, the team ensured smoother collaboration, reduced ambiguity, and a faster design-to-development workflow.
Results & Impact
Implementation of Legion Design System resulted in significant improvements in design consistency, development efficiency and accessibility across Telkom Indonesia applications. By standardizing UI components and enhancing usability, teams could create more cohesive and user-friendly experiences while reducing the time needed for design and development.
Reduced design inconsistencies by 60%, ensuring a uniform experience across Telkom Indonesia.
Development time reduced by 40% due to reusable components and predefined styles.
