Building New BRIMO Design System

Designing BRIMO’s operational design system from scratch, I led component creation, tokenization, documentation, and cross-team coordination to ensure consistency across design and development.

OVERVIEW

Role & Responsibility
Design System Lead - Identify, prioritize, and monitor tasks, progress of design, development, documentation across team members & conduct end-to-end audits of visual style
Timeline
May 2025 - August 2025
Platform
Mobile, iOS
This project was a revamp of BRIMO, the mobile banking application of Bank Rakyat Indonesia (BRI), one of the largest banks in Indonesia with millions of active users. The design system was created to support a large-scale mobile app redesign involving multiple modules and cross-functional teams.

ABOUT COMPANY

Bank Rakyat Indonesia (BRI) is one of the biggest state-owned banks in Indonesia, serving millions of retail and MSME customers nationwide. BRIMO is BRI’s flagship mobile banking application, used daily for transactions, payments, and financial management.

CHALENGGES

Building a Design System from Zero Under an Extremely Tight Timeline

The main problems that become a reference in making this system design are as follows:
No Mature Mobile Design System

BRI lacked a mature mobile design system, and Aleph had no ready-to-use foundation, forcing the team to coordinate 20 designers and 15 developers, maintain consistency across multiple modules, and deliver within an extremely short timeline.

Coordination Challenges Across Teams

Management : Design inconsistencies and inefficient collaboration between multiple squads created a high risk of delayed delivery

Company : Frequent UI revisions and unclear design standards led to higher development costs and slower feature delivery.

Short Timeline Load and Inconsistent Design
  • Designer: Without a centralized design system, designers faced repetitive work and inconsistencies across modules.

  • Developer: Developers struggled with ambiguous component behavior and states, requiring frequent clarification due to insufficient documentation.

CHALENGGES

Building a Design System from Zero Under an Extremely Tight Timeline

The main problems that become a reference in making this system design are as follows:
No Mature Mobile Design System

BRI lacked a mature mobile design system, and Aleph had no ready-to-use foundation, forcing the team to coordinate 20 designers and 15 developers, maintain consistency across multiple modules, and deliver within an extremely short timeline.

Coordination Challenges Across Teams

Management : Design inconsistencies and inefficient collaboration between multiple squads created a high risk of delayed delivery

Company : Frequent UI revisions and unclear design standards led to higher development costs and slower feature delivery.

Short Timeline Load and Inconsistent Design
  • Designer: Without a centralized design system, designers faced repetitive work and inconsistencies across modules.

  • Developer: Developers struggled with ambiguous component behavior and states, requiring frequent clarification due to insufficient documentation.

PROJECT GOALS

To build a scalable, consistent, and easy-to-maintain mobile design system that could be adopted quickly by designers and developers under tight deadlines.

How might we build a scalable and consistent mobile design system that can be adopted quickly by multiple teams working under tight deadlines?

IDEATION

Improving Design and Development Team Efficiency and Collaboration through Design System Implementation

Instead of attempting to build a perfect design system upfront, I adopted a progressive approach by prioritizing core components first, releasing them early for immediate use, and continuously improving and expanding the system based on real feature requirements and feedback from ongoing implementation.
01
Atomic & Token-Based System

The design system was built using a token-based foundation covering colors, spacing, and typography, supported by variables to enable fast and scalable global updates. A JSON-friendly structure was applied to ensure smooth and consistent handoff between design and development.

02
Component-First Priority

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

03
Documentation as a Product

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

01
Atomic & Token-Based System

The design system was built using a token-based foundation covering colors, spacing, and typography, supported by variables to enable fast and scalable global updates. A JSON-friendly structure was applied to ensure smooth and consistent handoff between design and development.

02
Component-First Priority

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

03
Documentation as a Product

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

01
Atomic & Token-Based System

The design system was built using a token-based foundation covering colors, spacing, and typography, supported by variables to enable fast and scalable global updates. A JSON-friendly structure was applied to ensure smooth and consistent handoff between design and development.

02
Component-First Priority

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

03
Documentation as a Product

We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights

PROJECT STATUS

Design System Implementation Workflow

Together with one supporting designer, we successfully delivered a complete and usable design system within less than 3 months, despite the initial two-week setup deadline.
Coordinating Design and Development Daily

Because design system creation and implementation happened in parallel, I established a clear daily workflow:

  • Morning: Daily sync with ~20 designers to communicate updates

  • Daytime: Build and update components based on module needs

  • Afternoon/Evening: Sync with developers to explain changes and ensure correct implementation

This workflow ran continuously for almost 3 months.

Continuous Launch and Iteration

The design system was rolled out gradually to design teams and tested in real modules, allowing immediate iteration based on developer feedback and continuous refinement rather than relying on a single final release

RESULT

Design System Completion

By August, the design system reached 100% completion and was fully handed over to BRI’s internal design team for long-term maintenance and scaling.

Design and development workflows became more efficient, with fewer revisions and faster handoff compared to the initial phase before the design system was established.
Adoption Rate

The system was actively used by more than 20 designers and 15 developers across 20 different modules, demonstrating strong adoption and trust in the system.

Consistency Improvement

UI inconsistencies across modules were significantly reduced, resulting in a more cohesive user experience for the BRIMO application.

Faster Design & Development Flow

Design handoff became clearer, revisions decreased, and implementation speed improved compared to the early phase before the system existed.

LEASON LEARNED

Reflection & Takeaways

Scaling Systems Under Pressure

Evolving a design system at speed required sharp prioritization, constant communication, and strong coordination across 30+ collaborators, making the challenge demanding yet highly rewarding.

Leadership Beyond Visual Design

Building a design system at scale requires ownership, prioritization, and cross-team coordination, not just UI expertise.

Future Improvements
  • Expanding System Governance and Ownership

  • Deeper Validation Through Usability and Performance Testing

  • Stronger Design–Development Automation

  • Enhanced Documentation and Learning Resources

LEASON LEARNED

Reflection & Takeaways

Scaling Systems Under Pressure

Evolving a design system at speed required sharp prioritization, constant communication, and strong coordination across 30+ collaborators, making the challenge demanding yet highly rewarding.

Leadership Beyond Visual Design

Building a design system at scale requires ownership, prioritization, and cross-team coordination, not just UI expertise.

Future Improvements
  • Expanding System Governance and Ownership

  • Deeper Validation Through Usability and Performance Testing

  • Stronger Design–Development Automation

  • Enhanced Documentation and Learning Resources

Let’s Discuss

Planning a project?

Let’s Discuss

Planning a project?

Let’s Discuss

Planning a project?

Create a free website with Framer, the website builder loved by startups, designers and agencies.