2019 - 2020 | Bukalapak

Evolving and scaling Bazaar design system

The hesitation to contribute

Designers at Bukalapak were hesitant to contribute to the Bazaar design system; thus, the system didn't evolve as it supported 40+ products across the company. Some designers would only use components from our library even when it's not optimal. Others would create their custom components but didn't share it with the design system team. We wanted to find out why.

user and shop My role

I led a design system team, which consist of 3 designers and 8 engineers. I empowered the designer through the discovery process, helped them navigate the ambiguous problems, and involved in the strategy discussion of the overall concept to improve the contribution experience.

The challenge

Our design system lacked contributions and our design language were at risk for not evolving.

The outcome

A new and enjoyable contribution experience called Collaboration Ground that had increased the contributions by 6x within its first 9 months.

Big question #1

How might we encourage people to contribute to the system?

The discovery

Early insights of why people were hesitant to contribute

We conducted an interview with 3 engineers and 3 designers to understand how they interacted with our design system. Here are the findings:

1

Unaware if they can contribute

Many designers and engineers expressed they are more than willing to contribute but didn’t realize it was possible.

2

Tight deadline

Designers were pressured with tight deadlines. Most of them were hesitant to engage with us because they were afraid it would slow them down.

3

Public forum discussion is too confronting

Designers hesitate to ask a question in Slack because they were uncomfortable to discuss their design challenges in a public channel.

4

Narrow design exploration

Designers often committed to a solution before exploring other options, which resulted in unoptimized design solutions.

Analyzing and framing

Dismantling the problems

These insights made us aware that the users of our design system were very busy and we needed to make it easier for them to engage with our team.

We used the problem-tree framework to map the root causes and the consequences of each problem. Through this process, we discovered that we needed to provide designers and system designers a safe environment to exchange perspectives, discussing rationale, and explore solutions together.

research

Exploring the concept

There was one particular idea our team was excited during the brainstorm activity. Our team love to have a discussion in front of the whiteboard, what if we use that to our advantage?

What if...
system users can be in front of the whiteboard with us?
So...
they can explain their goal and the context we need
Yes, and...
they can book it whenever they need it
Also
let’s keep the group small so they’re comfortable.
people collaborate in front of whiteboard Our team make a preliminary to-be-scenario with the system users.

Validate cheaply

Testing the concept

We tested the concept by announcing this to a few small groups. Three designers who were starting their projects signed up. We partnered a design system designer with a product designer to solve their specific challenge and need.

The reactions were positive. These whiteboard sessions were effective. One product designer realized they didn’t need to change a component to solve the design problem. Instead, she makes small tweaks to the layout and the flow. Having a sparring partner was proving its worth.

"I love the fact I can sit and discuss this right away. I started to understand the importance to keep the component scalable. Love the session!" — Designer
"This session is super fun! It brings us closer together, now I feel like we’re all Bazaar designers." — Designer

Rollout and Impact

Introducing Collaboration Ground

The validation gave us the confidence to roll it out to the rest of the company. We named this session “Collaboration Ground” to help us rally this easier. We created a simple storyboard to align our team of how the overall experience would look like.

Storyboard

Aligning our team of how the experience would look like with storyboard.

storyboard

Automation

Minimize operation effort by integrating tools we use.

storyboard

Figma template

Streamlined the way designers propose with self-serve template.

Figma Template

Contributed UI

We have been evolving the design language as more contribution come to the system.

Figma Template

Positive impact

Collaboration ground increases the number of contributions. We recorded 24 components being contributed in the last 9 months, we also see a healthier relationship with system users. One of the memorable moment was when the engineer was involved during the session; which we rarely see it in the past.

28 signups in the last 9 months

6x increases in contribution within 9 months

16 contributions to improve existing patterns or components

8 contributions to add new patterns or components

Data collected in 2020

To be continued: After we launched the Collaboration Ground and get continuous contributions. We needed to organize and scale the system for 8 different business units.

Big question #2

How might we scale the design systems for each unique business units?