Legion Design System

Telkom Indonesia, a leading telecommunications company, has embarked on a transformative journey to bolster digital businesses, spanning Telco, Agri-tech, Logistics, e-commerce, SaaS, and internal tool enhancements. Recognizing the evolving tech landscape, Telkom Indonesia has harnessed its extensive network infrastructure to empower partners across these sectors with innovative digital solutions. From collaborating with Agri-tech firms to optimize farming with IoT and data analytics, to streamlining e-commerce transactions and refining internal tools for operational efficiency, Telkom Indonesia’s story exemplifies their commitment to digital evolution and cross-industry collaboration.

Design System Name

• Legion Design System

Design System team size

• More than 10

Design System team make-up

• Designers
• Engineers
• Product Owner/Manager
• Content designer
• Document Engineer

Governance model

• Hybrid

Level of documentation

Level of detail 

• UX rules
• UI rules
• Usage guidelines
• Writing guidelines
• Accessibility guidelines
• Props
• Implementation
• Related patterns
• Tech guidelines
• Content guidelines
• States

Brand elements

• Colors
• Fonts
• Icons
• Illustrations
• Spacing
• Layouts & grids
• Radius
• Shadows

Components

• Actions (buttons, links, etc)
• Alerts (pop-up, snackbar, toaster, etc)
• Content and lists (cards, accordion, divider, etc)
• Data (charts, tables, etc)
• Forms (radio, checkbox, dropdown, inputs, etc)
• Navigation (header, footer, tabs, etc)
• Status (progress bar, badges, loader, etc)
• Utilities (to accomplish specific tasks)

Documentation architecture overview

• Our documentation architecture is designed to facilitate the stakeholders with easy access and comprehensive understanding. It primarily utilizes a navigation structure, ensuring users can intuitively navigate different sections. This approach streamlines information retrieval, allowing users to find the specific details they require quickly. Also available across multiple Android and iOS platforms to enhance accessibility and reach. This cross-platform availability ensures that users can access the documentation regardless of their preferred device or operating system. This flexibility highlights our commitment to making the information accessible to all stakeholders. The architecture combines a user-friendly navigation structure with cross-platform compatibility, ensuring that our valuable resources are easily accessible and serve our diverse audience effectively.
  
• Our documentation architecture is thoughtfully structured to cater to diverse needs and ensure a seamless user experience. It encompasses various categories that contain a wide array of information. The categories include foundational elements such as color, typography, and accessibility. These form the basis of our design system, providing users with essential principles for consistent execution. The design guidelines encompass broader design-related insights, while development guidelines offer invaluable technical details. These sections cater to designers and developers, streamlining collaboration and ensuring cohesive execution. Components and patterns sections delve into specific design elements and repeatable solutions, providing a robust resource for creating cohesive interfaces. Copywriting and illustration categories further enrich our documentation, offering tone, voice, and visual storytelling guidance. Our documentation architecture contains well-defined categories spanning foundational aspects, design and development guidelines, specific components and patterns, and vital insights into copywriting and illustration. This comprehensive structure ensures that users can easily access and utilize information for successful project execution.

Who document

• Designers
• Engineers
• Product Owners
• Document Engineer

Documentation process

First, we engage in a monthly documentation cycle that coincides with our production updates. This flow lets us capture changes or refinements in our patterns from ongoing projects and improvements. It ensures that our documentation remains up-to-date and aligned with the latest developments. Additionally, we initiate documentation at the beginning of each sprint. This proactive step ensures that any new patterns emerging from the sprint are documented. By incorporating this practice into our sprint planning, we guarantee that our documentation captures our design system’s latest additions and modifications. Our documentation strategy combines a monthly update cycle, synchronized with production updates, and a sprint-aligned approach for capturing new patterns. This comprehensive approach guarantees that our documentation remains current, relevant, and reflective of the dynamic nature of our design system’s evolution.

We have several steps to define the documentation:

• Prioritize backlogs (Component and Pattern)
  Prioritize backlog based on usage and impacts on each brand.
• Understand each component and pattern
  Include goals, use cases, interactions, and variations possibilities.
• Create document structures
  Each component and pattern might have the same needs, but make it have different structures. Usually, all documents should have Guidelines filled by Anatomy, Usage, Accessibility, and Content. After that, we also explain how to use it in every use case and platform (Website, Android, and iOS) and the dos & don’ts of each component and pattern.
• Research
  We did research before we launched the documentation to make sure users understand the documentation.
• Share and Distribute
  After we launch the latest document on our website, we will share updates through email for all users about the updates.

Maintenance and contribution

Updating and maintaining documentation in a design system is essential to ensure its relevance, accuracy, and usefulness over time. Here are steps on how we maintain it:

• Gather user feedback
  Regularly gather feedback from designers, developers, and other design system stakeholders. Their insights can highlight areas that need improvement or clarification.
• Collaboration
  Make documentation maintenance a collaborative effort involving design and development teams. It ensures that the documentation remains relevant from both design and technical perspectives.
• Versions updates
  Use version control tools to manage documentation updates.
• Clear communications
  Establish clear channels for communication about documentation updates. We have several channels like emails, Microsoft Teams, and Discord.

There are some ways to encourage contribution and collaboration to improve documentation:

• Feedback channels
  We provide some channels to give feedback for our documentation. Feedback feature inside Legion Websites and connect with Legion’s team through Discord, Microsoft Teams and Email.
• Collaborative platforms
  We also provide GitHub and Figma as collaborative platforms, so anyone with access can collaborate with our teams.
• Gamification & recognition
  Legion has a gamification system to define the brand’s level of Legion adoption. Users need to contribute to Legion Design System if they want to level up. We are also working on Legion Design System awards for our top contributors in one period.

On the design part

The content must undergo several tests before we launch the foundation, components, and patterns.

1. First, we will test it through our standardization.
2. Second, we will test directly to Designers inside Telkom Indonesia since we have a program called “Design Open Hours” to facilitate designers to brainstorm about anything related to design and developers.
3. Third, from the test, we will bring the components to relevant stakeholders and our users to ensure they can understand how to use each component and its meaning. So, we attach the test results on each component to ensure designers can make decisions based on our test.

Inside the documentation, we also provide “do & donts” that could help designers how to use each foundation, component and pattern.

On the tech part

Legion design system documentation provides developers with clear guidelines for implementing design elements. It includes component definitions, code snippets, shortcuts to GitHub, usage instructions, use cases, and technical specifications. Engineers can follow these guidelines to translate design concepts into functional code accurately.

Overall

Legion’s documentation outlines our design system’s principles, guidelines for each component and patterns. It ensures that all team members have a shared understanding of how to approach components/patterns. Consistent documentation reduces ambiguity and prevents design decisions based on personal preferences. Since designers can have their preferences and styles, Legion Design System also makes the Designer follow Telkom Indonesia’s style guidelines, so they will only create a design within the design system. Still, we also allow their creativity. Inside our guidelines, we provide them “do and donts” and use cases so they can choose which component is suitable based on their needs.