Project Overview

Legion, a multi-brand design system, empowers Telkom Indonesia's digital product teams to collaborate more effectively in delivering cohesive and enjoyable user experiences across all platforms. Leveraging the principles of atomic design, Legion systematically constructs a unified library of UI components and design patterns. This centralized resource is supported by comprehensive documentation, ensuring clarity and alignment as teams focus on creating exceptional user experiences.

In addition, we actively promote awareness and facilitate knowledge sharing about the Legion Design System among designers, engineers, product managers, and stakeholders across all Business Units (BUs) and projects within Telkom Indonesia.

Background

Through user analytics and funnel flow analysis, we discovered that the most frequently visited pages were About, Component Overview, and Pattern Overview. This insight suggests that users were primarily seeking to understand what Legion is, rather than actively engaging with or utilizing its design assets. Critical content—such as design and development guidelines tied to specific components and patterns—was being overlooked. This revamp initiative was aimed at improving content discoverability and guiding users more effectively toward actionable resources within the system.

Problem Statment

1. Does Not Convey the Strategic Value of the Design System

The current homepage only presents a list of links to documentation pages, without any narrative, structural visualization, or use cases. This makes it difficult for new users—especially PMs and engineers—to understand how the design system can help them work more efficiently.

2. Navigation is Not Contextual

All users are treated the same. There's no differentiation between designers, engineers, or product managers, even though their needs are very different. An engineer might want to go straight to libraries and code, while a designer would look for design principles and visual components.

3. Does Not Communicate Recent Updates

The homepage does not display the latest updates to components, guidelines, or tokens. As a result, teams looking for quick references often remain unaware of major changes that could impact their product.

Project Objective

Based on the problem statement above, we can conclude to fulfill the following project objectives to achieve and solve this problem with the design process:

• The addition of a Success Story section and a dedicated page is designed to showcase case studies and success stories from previous users, in order to strengthen the product team's confidence in the real value and benefits of implementing Legion.

• Adding a Call to Action (CTA) on the homepage that directs users to explore and try out new features directly, providing an interactive experience that encourages deeper engagement with the product.

• Streamline content-heavy pages by reducing lengthy text and incorporating visuals or images to better convey the intended message.

• Refreshment and modernized visual design for the Legion Landing Page.

• Providing role-based user navigation

  
  

Success Metric

Goals : Increase the adoption of the Legion design system among designers by improving the content and guidelines on the current Legion website

Metricts :

1. Increased adoption rate of legion design assets in Q3 2025

2. Increasing the average session duration on the home landing page.

   
   

Internal User Targets

• Designers (Product Designers, Visual Designers)
  They need quick access to components, guidelines, and design principles. They often visit the homepage to ensure they are using the correct elements according to the standards.

• Engineers (Frontend Developers)
  They are more focused on the library, tokens, and technical implementation. They require fast navigation to component documentation based on frameworks (React, Vue, etc.).

• Stakeholders
  Stakeholders seek insights into consistency, efficiency, and implementation examples. They want to understand why the design system is important and how far its adoption has progressed.

  
  

How Might We

How might we provide to the users/visitors of legion design system to find the information about and how to use it with seamless interaction.

Design Process 🚀

Discover & Bencmarking

To support the redesign of the Legion Design System website, I carried out strategic benchmarking across various industry-leading design systems. This process provided valuable perspectives that shaped the design direction and strengthened the overall impact of the update

Problem identification (UX Audit)

Competitive analysis/ Bencmarking

High-Fidelity, Prototype, and Solutions

This stage will involve crafting the design in high detail. I will produce mockups and prototypes that closely resemble the final product, including graphic elements, animations, and interface interactions. This allows me to better test the design and provide a better idea of the experience users.

Improvement Hero Section

We restructured the top section (hero) to be more narrative-driven: explaining what Legion Design System is, who is involved, and its strategic benefits. This is aimed at reinforcing the design system’s role as a collaborative asset, not just a component documentation.

Improvement Services Section

In this section, we introduce the key features of the Legion Design System, highlighting its value proposition how fast, flexible, and efficient it is for various design and coding needs, while inviting users to explore each feature in more detail.

Improvement Succes Stories Section

We added a dedicated section to display real examples of Legion being used across various internal products. This builds credibility while also inspiring new users.

Improvement Starting for any Role

We implemented role-based access segmentation. Upon landing on the homepage, users can select their persona (Designer / Engineer / Stakeholder), and the page will adjust the navigation and highlights based on their specific needs.