📚 Introduction

The design system for Unbox already existed, and by mutual agreement, I took over its management with the assistance of Rizqi, a Product Designer and my current teammate. Over time, the responsibility for overseeing the design system was handed to me due to my experience in managing design systems.

👨🏻‍💻 My Role

I became responsible for the design system that was created and managed.

🚨Problem

The old design system is disorganized, so I am the one handling the design system. When I received the design system files, the first thing I noticed was that the grouping was very disorganized, making it difficult for me to find the components I needed. Additionally, there were many unused components that were actually unnecessary.

⚽ Goal

Grouping the components more neatly, removing unsuitable components, and changing the branding of the design system from being colorful to a more professional look.

📋 Process

Evaluation

I conducted a review and evaluation of each component that had been created to determine whether they met the requirements or not.

After conducting the review, I noticed there were some unused components, so I needed to remove them from the design system.

Grouping

Next, I grouped each component that was related to one another by creating a list page, with the goal of making it easier to find those components. Looking at the previous design system file, the grouping was not very effective and it was difficult to search for components.

By grouping the components into a list page, the design system became more organized and easier to search.

Modification of components

The design system previously used Unbox’s primary purple color. After I took over the design system, I wanted to make it look more professional. So, I decided to use black as the primary color and white to gray as the secondary color. This way, the designs created would look more professional, with fewer bright colors that are typically associated with a fun vibe.

Guidelines

In the new design system, I added guidelines for each component, with the goal of ensuring that everyone who views the design system knows when each component can be used, under the specified conditions.

✅ Final Design

Here is the design when the old design system and the new design system are used.

Next Step

The design system that has been created now covers all the necessary requirements and is easy to navigate. Currently, my team and I only need to manage it when new components are added and document what has been done so that, in the future, new employees can easily read and understand it.

Thank you for reading through! Hope you enjoyed learning about my design and thought process. :)