How I'm Building a Multi-brand Design System in Banking Industry

Start

End

Top

Back

Hear my story as a Design System Lead from building the team, creating the workflow, and arranging the development strategy for BRI Multi-brand Design System.

My Role

Design System Lead

Team

6 UI Designers, UX Designer, UI Developers

Company

BRI Bank

Project Date

2021 - 2023

Libraries Covered

App & Web UI

Libraries

App & Web UI

Libraries

Reading Time

8 minutes

Overview

Project background

BRI Bank or also known as Indonesian People's Bank is one of the largest banks in Indonesia and Southeast Asia that focuses on Micro, Small and Medium Enterprises (MSME) and a pioneer of microfinance in Indonesia.

As the largest bank, we have more than 30+ products (multi-brand) that are still in active development with different style guides and components based on each segmentation business. Sometimes unexpected requests come from stakeholders with such a fast timeline and must be finished as soon as possible.

Therefore, we need to keep on a good track not only focusing on research but also increasing efficiency and consistency in delivering high-fidelity design to achieve business goals and user needs.

Problem

What was the problem?

When I first joined, we already have local design system on some products with different style guides. But we don’t have a centralized design library. We truly understand the growth of the product team and the obligation to be always on top of delivering solutions to users makes it difficult for us to maintain product consistency, quality and user experience.

These are the problem that we found:

😢

Repetitive work when design a component

For example when there is a new request from stakeholders to design a financial dashboard. Designers wasted time repeating the same work to create a button, text field, modals, etc

🥺

Duplication of common components

Then we realize that we already have a button in other products, why don’t we use that? Why do designers always make the same button? This caused duplication of common components.

🥴

Inconsistencies across brand websites and mobile app

Next, this is the most common problem. Because we don’t have a centralized design library, it caused inconsistencies across brand websites or mobile apps.

😮‍💨

Overwhelmed with high demand and fast timeline

We are overwhelmed by a lot of requests from stakeholders with such a fast timeline because they want to be on top of delivering solutions to users.

Objective

What is design system for?

We built the design system as a source of truth that is used in the product development phase to be more productive and collaborative in creating our best products. The objective that we defined was:

We aim to work faster and make the design process better with design system
Empower designers and developers to iterate together using the same components or patterns in the same medium

We built the design system as a source of truth that is used in the product development phase to be more productive and collaborative in creating our best products. The objective that we defined was:

We aim to work faster and make the design process better with design system
Empower designers and developers to iterate together using the same components or patterns in the same medium

This is our expectation, when building product using design system we can more focus on the user experience aspect, reduce effort in user interface and development because we already have a standard guideline & library.

Now, let me show you my strategy. First of all, I started by forming a team, then I broke down design process into 4 key phases:

Forming a Team

What is the best team model for us?

At the beginning of this project, we organized our team with Blended Team Model adapted from Lightning Salesforce that was a combination between Centralized which is a dedicated single team and Federated which is member from across brands. We think combined them might be a good choice for us to gather all perspectives and create a unified language.

Our Bended Team Model consists of more than 12 designers from across different brands, we are trying to gather all perspectives from them to create a unified language.

But, as time goes by we struggled on contribution because we didn’t have a dedicated team, each designer still have responsibilities in another project.

Therefore, we are switched from the Blended Team Model to Centralized Team Model which from 12 designers, we trim into 6 designers who consistently dedicated time to crafting the design system.

After we choose the team model, here is our design system team structure:

👷🏻‍♂️

Maintainer Team

Responsible in development strategy, maintaining the design system website, make sure everything keep on a good track.

🕵🏻

User Experience Team

It’s more focuses on the UX aspect, audit current components, checking accessibility, and benchmarking externally on other companies.

🧑🏻‍🎨

Crafter Team

Most likely from the UI Design team, they craft the component, and also make a documentation.

Now we have built a team. So, what's next?

Okay, let me tell you how the team works together...

Phase 1

Discovery

Well, in the very first stage which is Discovery. We defined into 3 steps:

Research

First thing to do if there is a new component needed we looked externally to the market what were other companies doing with their design systems that we can learn from? We looked at Shopify’s Polaris, Google’s Material Design, IBM’s Carbon Made, etc

Audit

Then we check does the component already exist in the design system each brand? If the component exist, we conduct an audit of all variants that currently use to find a pattern that we can adapt into a set of standards.

Define Pattern

After going through research & audit, we finally found the pattern of style guide and variants that are mostly used in every brands. Now, it’s time to move into next stage which is Design

Phase 2

Designing

After gaining insight from the discovery phase, we started building a library and tracking our team progress into Notion Kanban Board. This diagram below describes the process of how the team works together:

General Workflow

Then to keep our team keeps consistently running the backlog/task, I took the initiative to create a weekly crafting slot, it’s like a space for us to crafting, brainstorm, share blockers if any, and discuss anything regarding the task.

🎨 Foundation Library

🧩 Components Library

Each component in the BRI Design System has its own behavior and guidelines to assist users in understanding when and where to use them. Additionally, the component includes a breakdown of anatomy, specifications, and styles that align with our Design Tokens and Asset Library.

We understand every component might be modified or changed in the future to support another use case in crafting the user interface, this is something that we cannot avoid. So, to keep aligned with the design system we created the workflow for those who need to propose a new pattern that we don’t provide yet in the library.

Purpose a new pattern workflow

How do we collaborate with Engineers?

We create design tokens to empower better collaboration between designers and developers. Design tokens are here to save us all perfectionist developers and designers alike, allowing us to manage all properties, colors, and components from a single source of truth.

A major component of a design tokens practice is the family tree of design decisions which will influence the naming of the design tokens. Most design systems will have their hierarchy set-up, as an example, for Google’s Material Design its system, type, and name. That’s why it’s important to keep them all updated in a single source of truth, referenced both by designers and developers.

#1078CA

blue-80

brand/primary/300

background/primary/normal

Button

Phase 3

Testing

Imagine if you spend much time investing in this design system project, provide new components as many as possible. Then when it goes to public, there are unexpected comments that overwhelmed your Slack channel...

#design-system

No worries, I would not let it happens. Therefore, we conduct several testing to ensure every component has a good quality, responsive, and fulfills requirements before it goes to public. These are 2 types of test that we used:

First, we conduct QA for components. There are 5 aspects to check including:

First, we conduct QA for components. There are 5 aspects to check including:

Visual Quality

Check does the component apply visual styles such as color, typography, icons, etc based on the library

States & Variations

Check does it cover all the necessary variations (e.g.: primary, secondary, etc)

Responsiveness

Check does it already apply the auto-layout and incorporates responsive display?

Content Resilience

Check does the component resilient to too much, too little, and no content at all, respectively?

Color Contrast

Check the color contrast of each component against accessibility standards

Here is the examples of our QA Documentation...

Second, we conduct a usability test by asking designers to perform a simple task for example creating a login screen but using our design system library for the first time.

Second, we conduct a usability test by asking designers to perform a simple task for example creating a login screen but using our design system library for the first time.

After that, we interview them to ask their feedback about the components they have used before, to gain insight what can we improve in the future.

We keep doing iterations based on feedback and issues that we found...

Phase 4

Documentation

We know every component will eventually changes or improve, so having a well-documented design system will make everyone’s job easy because it will provide when to use specific components, how to use them, or explain the accessibility considerations.

Therefore, we have documented the entire of our design system and published on internal website.

You know what? Building a design system is a learning journey and never stops. We don’t know what might happen in the future, but I would like to share our biggest challenges in building a design system and how we handle it.

😢

Challenges

💪🏻

How we handle it

Low Adoption Rate

I think this mostly happens, especially when the company just starting to build the design system from scratch. We struggle to involve and remind them to use the design system and increase adoption rate.

Create an Adoption Checklist

We made an adoption checklist and held a regular session with designers in each brand to checking have you use the design system? How far they had implemented our components?

Struggle to get buy-in from management

We were working in the banking industry, not a startup. It’s difficult for us to get buy-in from management because some of them don’t understand the values of design system.

Sharing Session about Design System

We create a special event to share about the values and impact of design system. We are inviting management, developers, product team, etc. Hopefully, it will help them to understand more about design system and they can fully support us.

Lack of Developer Resources

This is the saddest part, we are still struggle to have a dedicated developer. So our design system is not fully developed yet.

Targeting on OKR

We were targeting development in our roadmap to motivate the team achieve our goals.

Outcomes

Finally, in early 2023 we successfully released our design system called BRIDex. After a few months here is our achievement and impacts:

🧩️

A library of 100+ foundations and components to share across product

We successfully has a library of more than 100 foundations and components to share across product.

⚡️

Increase adoption rate to 100% for new product

We ensure that every new request from stakeholders for a new product must follows the design system because it's more easy to implement rather than the existing product that already goes to market.

🎨

Detailed usage guidance and specifications for each component

We already publish our documentation on internal website include guideline, how to use it, etc and trying to keep up to date when there was a changes or improvement.

Takeaway Learning

Lesson Learned

This is the most challenging project in my career because it was my first time leading and building a multi-brand design system from scratch. There is a lot of learning in this project, for me constantly test, iterate, and updating the design system can help us find other use cases and potential errors before release. Try to keep open-minded and learn new things is the key of maintaining a design system.

Thanks for scrolling all the way down!

I truly appreciate your time. If you’re excited about product thinking, design system, or just want to chat and collaborate on something cool, let’s make it happen! 🚀