Decluttering Bukalapak’s Style Guide Using the KonMari Method
Keep only designs that spark joy.
Soon after starting on the Bukalapak Design team as a UX Designer, I was assigned my first project and excited to get started! After gathering all the requirements, I started preparing my Sketch file. It was here that I ran into my first obstacle: Our style guide was a mess! Different sections had different styles, there was no consistency across the whole guide, and various elements contradicted other elements. I was confused! Which was the right style? Which guidance do I follow? Most importantly: how did this happen?
I dug a little deeper. It turns out, the style guide developed this way because the company works in different “squads” and each of them developed their own design style. Naturally, since each team thinks its own design style is the best, they incorporated elements of it into the style guide! Somehow, nobody noticed that over time, none of these styles gelled into a cohesive whole. We lacked an overarching style and governance to keep the squads in check and aligned on the company’s style vision.
Our current approach is clearly not sustainable. As our business grows, each squad grows. As each squad grows, its own idea of “the right” style expands and becomes more solidified as it is used across more projects. And while the style guide contains some reusable components, new ones were constantly added when existing ones were deemed not good enough. We are at a point where our team has more than 40 UX Designers working on different projects with various design components, all added slowly and haphazardly over time.
Imagine now what would happen to the engineers who have to implement the products with our style guide! They might be drowning in a million different design variations, each unique and different in its own way.
Looking into the future, we envision a sustainable, clear, and appealing design that results in consistency across all of our products. We realized that in order to get there, we needed to start by tidying up our existing style guide. This is the story of how we got the job done using (our unique brand of) the KonMari magical method of decluttering and organizing.
Step 1: Commit
As we’ve seen, there are only two tasks involved — discarding and deciding where to keep things. — Marie Kondo
Tidying up requires commitment, diligence, and a lot of effort. In order to get the team’s buy-in, we began the process by asking all the designers to commit to a schedule of decluttering the style guide and not being interrupted by other tasks. Of course, at a startup, there are a million other high priority tasks to get done yesterday! So, in order to ensure that the designers could make this task a priority, we got support from upper management on this initiative. The design team was not to be interrupted for five days!
The tidying up process must be done within five days as decluttering must be done completely, all at once, and as quickly as possible to ensure success.
We began by gathering all the designs we have made into a single folder on a shared drive. It is possible to print all of them and attach them to a wall in your project room (if you don’t mind destroying the Earth a little in the process) so that everyone can see everything easily, which sometimes aids in collaboration. If staying digital, using Freehand from Invision is a great way to do this.
Step 2: Keep only those designs that spark joy
“Does this spark joy?” If it does, keep it. If not, dispose of it. — Marie Kondo
Deciding on which designs to keep and which to remove was certainly a difficult and emotional process. Everyone was attached to their own designs, of course, so together we wanted to keep everything! But obviously this approach doesn’t solve anything and we had to make tough decisions. To do so, we used the Marie Kondo question “Does this spark joy?” as our criteria. If the design did, we kept it. If not, we threw it to the trash! This forced us to only keep things that really thrilled us. It was hard at first, but we quickly became better at determining if it was time to let a design go by using this criteria.
We used this definition of “to spark joy”: the design should be easy to use, easy to find (in the style guide), reusable, and consistent. Then, we went ahead with the cutting!
In this phase, we only decluttered. We did not yet organize the design components.
However, we did make design variations of certain components because as we decluttered, we recognized that we were actually missing a lot of pieces that we needed in order to have a robust style guide.
Step 3: Tidy by category, not location
Tidy by category, not by location. Tidying by location is a fatal mistake — Marie Kondo
Organizing is basically the act of putting things into categories. For our design style guide, we made disparate groups based on the design components we use. Take a group of buttons, for example. For these buttons, we decided to stick to just one set of standard button components no matter where they were used. This way, a button always looks the same, whether on the home page, product detail page, or anywhere else! Not only can the user now easily learn what a button looks like, but we can have a clean and consistent look and feel across all our pages. Take this advice, if you happen to have a lot of different button variations (or any other component for that matter), minimize the variations as much as possible (and thank me later)! A button should look and feel like the same button no matter where it is.
We essentially did this for each component, paring down variations until we were left with one style for each component.
If using atomic design methodology, make sure to start with the atoms (the most basic building block), then work up to the molecules (groups of two or more atoms together) and organisms (the functioning of atoms and molecules together as a unit). Design tokens methodology can also be applied here. Start with the colors, followed by the typography, then the icons.
Keep in mind that the goal of organizing is to simplify things so that they are easily findable when you need them. Easily is the key word!
Two Types of Tidying
Marie Kondo defines two types of tidying: daily tidying and special event tidying.
Daily tidying are those tasks that we do every day to ensure things stay in order (easily findable!). This includes tasks as simple as putting something back in its right place after using it.
Special event tidying is a bigger and (hopefully) more occasional event in which we clean up those messes that gradually accumulate over time, as what we did with our style guide.
It is important to note that the better our daily tidying is, the less often (and less daunting) the special event tidying will be. However, despite our best intentions and efforts, and as the second law of thermodynamics states, chaos always increases! So inevitably at least some special event tidying will have to take place.
At Bukalapak Design, we adapted those principles to our use as Squad Tidying and Special Event Tidying. The first one focuses on the dynamic of each squad with regards to their approach to the style guide. For example, sometimes we need to create a new component that hasn’t been covered in the existing guide. This dictates the process by which this would happen in a sustainable way.
The second one tackles larger initiatives which also involve other squads. We do this special event tidying every two months. During this event, we propose new components (or other things that might be important to be added to the style guide), review existing or proposed new additions, and clean up any messes that may have crept in.
The After Party
So, you are probably wondering: is it done? Is the style guide clean, clutter free, and sustainable?
To that I can only say: almost. But we’re getting there!
I have certainly learned a lot from going through this whole process. The biggest lesson was that sometimes it is better to make hard decisions that play it safe. It can be really hard to decide whether to keep or remove a component as we always think that we might have use for it in the future, even if it has not been used often (if at all) in the past. This led us to keep a lot of components that were no longer relevant for our products, users, and brand.
Just save a backup of the old style guide just in case!
Another lesson learned was that these things don’t just fix themselves. They take concentrated and dedicated effort and support from the right teams. This was real work that needed to be done, and real costs that were incurred (every minute we spent on this project, for example, was a minute not spent developing a new product for our users!). We could have pointed fingers all day trying to find out who to blame for letting it get this bad, but that wouldn’t have solved anything. Instead, we took responsibility for improving the current situation, got support from the management, and dug in and did it.
In the end, the experience of tidying up resulted in the feeling of living a new life. When everything is in its right place, I have more space to breathe.
Speaking of more space, it now sometimes feels a little empty!
So, I’m calling for you and any other talented designers out there to join Bukalapak Design!