Project Overview

• Company: Gojek
• My Role: Design Systems Lead
• Timeline: Oct 2022 - Nov 2023
• Stakeholders: Cross-functional teams including Creative Branding, Product Designers, UX Writers and Platform Engineering

The Challenge

• A restricted color system limited design flexibility and product theming, resulting in inefficiencies for designers.
• The requirement for manual theme/mode changes resulted in an annual cost of $200k for the company.

My Approach

• Conducted a comparative analysis of leading design systems such as Atlassian and Shopify, and thoroughly audited Gojek's existing system to identify limitations and potential efficiencies.

• Developed a restructuring plan that separated color tokens into individual functional and brand libraries. This approach not only maintained brand consistency but also provided product teams with increased thematic flexibility.

  

  • The illustration demonstrates how the original structure mixed functional and brand tokens within a single library. The revised structure separates functional tokens from brand tokens. This improvement provides designers with more control over color usage and simplifies the creation of new themes compliant with brand guidelines.

• To streamline theming processes, I capitalized on the release of Figma Variables. This significantly reduced the amount of manual design work and facilitated seamless testing of light/dark modes.

Results

• Tangible Impact:

  • $143k+ total cost savings across design and development

  • 75% reduction in time to add new brand colors

  • 23x faster design and 6x faster development for theming

    <aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> Cost savings were calculated by analyzing the time required to add new color tokens before and after the restructuring. Time saved was converted into cost savings using estimated hourly rates for mid-career designers and engineers. Efficiency gains were determined by comparing time on similar tasks before and after implementation.

    </aside>

• Strategic Benefits:

  • Future-proofed product design scalability
  • Increased agility for teams needing new brand colors
  • Elevated brand consistency across Gojek experiences

Takeaways

• Early and continuous collaboration with engineering partners is essential for successful design system changes. This method ensures everyone understands the plan from the beginning, lowering the chance of miscommunication and expensive errors later on.
• Detailed and comprehensive roadmapping is crucial for large-scale design system projects. It presents a clear vision of the project's direction, aids in resource allocation, and helps foresee potential challenges. It's a strategic tool for ensuring the project's success.
• When faced with difficulties, don't hesitate to ask for help. Complex projects require teamwork. Leveraging the team's collective knowledge and experience not only assists in overcoming obstacles but also promotes a culture of shared responsibility and cooperation.