One System with Many Brand, Platform and Teams
Design System Lead
Lead a cross-functional design system team of 20 designers and 20 engineers, facilitating innovation, shaping the vision and roadmap, managing workflows, and ensuring impactful production quality. Reported to cross-chapter management while enhancing product quality, performance, user experience.
The Multi-Brand Design System of Telkom Indonesia helps collaborative teams create a delightful and consistent experience across products.
Enhance the productivity of product teams by enabling them to build products faster, with greater consistency and quality, through the effective utilization of reusability.
Discovery activities included workshops, stakeholders include teams interviews, comparative analysis and define success metrics.
The discovery revealed several key challenges
Inconsistent UI across screens and brands, duplicated work between designers and developers, and slow delivery since every feature starts from scratch. As the product scales, inconsistencies increase, onboarding new members becomes more difficult, accessibility standards are often overlooked, multiple brands, multiple product teams, multiple platforms, and multiple frameworks add to the complexity, and the quality of development often differs from the original design.
Success metrics
Achieving up to 2× faster delivery and higher team productivity, reaching 60% accuracy between design and development output, and enabling minimum 3× asset reusability to ensure consistency across multi-brand platforms.
Start design with mapping the user and focussing create solustion base on challenge to achive success metric
The design revealed several steps
Guided by insights from the discovery phase, start with created a comprehensive journey map, established clear evaluation benchmarks, and defined the roadmap and timeline while mapping the brand and product. We also outlined the team structure and small production unit, defined release plans, and set adoption and measurement strategies to meet the success metrics. In addition, we established the design principle, foundation for UI Kit, specified the technical architecture including framework support for cross-platform development and documented all design and development standards within the website guidelines.
Solution
Building an multi-brand design system as a single source of truth for all products, providing flexible and integrated design assets and code with comprehensive guidelines and standards for cross-platform use, and create an internal open-source community channel for all product teams.
Integrated, reusable cross platform and brand UI Kit and UI Library, Standardized Templates/Patterns, Pluggin, Website and App Documentation
Developing a multibrand design system called Legion, which provides a cross-platform UI kit and UI library integrated in real time across brands and platforms, helps reduce inconsistencies between design outputs and development results, while significantly minimizing developers’ effort in customizing components. Furthermore, the provision of tested and standardized templates or patterns facilitates the reusability of recurring use cases, thereby accelerating product delivery timelines. Several plugins, extensions, Instant handover, AI & MCP Integration are also made available to ease adoption and serve as one of Legion’s unique value propositions. In addition, Legion provides a documentation website and application covering asset repositories, usage guidelines, best practices, and standards to ensure the quality of developed products is consistently maintained. Equally important, strong buy-in from multiple stakeholders and business units culminated in Legion’s official launch at the DTP Expo #2.
4× faster delivery & teams productivity, 80% design to dev accuracy, and 10× asset reuse for consistent cross-brand platforms.
Through adoption measurement using an internal dashboard, along with research, audits, surveys, and product performance assessments after implementing Legion, it was found that all aspects showed significant improvements including team productivity, product delivery, knowledge standardization, asset reusability, cross roles, teams communication, and alignment between design and development outcomes. On the other hand, Legion has also contributed to reducing product development costs until 100 million, while raising awareness of the importance of standardization and reusability within product teams. Finally, Legion was recognized with the “Best Documentation” category at the Design System Award 2023.
