The Problem

When I joined Liputan6 as a dedicated mobile designer and there was no documentation or guidelines regarding app design. When I accepted the first task, I needed to take a few first days to study the app and existing design mockups, and did a quick audit and found the problem:

1. Too many typefonts are used and there is no clear hierarchy about them, size, and spacing are inconsistent
2. Ineffective. we were designing the same components over and over again with the style changing each time to suit functionality.
3. There are no guidelines at all for the use of colors, images, etc.
4. app too heavy
5. inconsistent icon, some icons bold, some more thin

Challenge

<aside> 🤔 How can I create a design system that is simple and understandable?

</aside>

Research:

I wish I was born with the ability to create design systems. When I started, I had no idea how to organize all my components. Luckily, many great companies like Shopify, Gojek, and Bukalapak shared publicly their design system so I could learn from them.

Define & Ideation: How can I make this documented and consistent?

Started with creating a style guide for the system, collecting the available components, make variable and variant. collected into 1 Figma design system file which then for every new feature design, and make it as design library. collecting master components into the library file and regularly updating each component into the library.

Result

What I did

So, starting to gather components, and update icons, in parallel with multiple revamps and launching dark mode, I update one by one from typography, color, icons, illustration kit, empty state, and other components