Crafting DEPATU's First Design System

Tata Feraro Mukarram

UX Designer
Design Systems
UI Designer
Figma

Overview

Back in the day, I was a UI/UX Designer in this company, DEPATU e-commerce from Medan Indonesia, which runs in hype fashion and luxury goods. At that time, DEPATU was preparing for our big event with only 3 months left before the national scale event started in the biggest mall on Medan, Sun Plaza.

Early day

I was introduced to and got involved with the Product Team, with another designer as the design lead, we were the only designer at DEPATU, and our CEO directed us with the PRD. Since I was new, our lead gave me a tour of our design files which are on Adobe XD, I got pretty overwhelmed with the files, and the files itself was around 200MB each file.
After the introduction, we had several meetings and set our principle with the products that should be finished in 3 months. The products itself was 2 Giveaways, 2 Raffles, and 2 bidding systems, with credits from transactions several days before the grand day, and direct transactions on the grand day.

The Challenge

I had the responsibility for the mobile app, and my lead with the desktop version, Every time we started each product, we only used our communication and made a deal for how things should look on our App, like the spacing, margin, padding, and absolutely colors, a.k.a consistency.

The Work

So while we did the design, I took the responsibility as the non-primary priority to gather the benefits of having a design system and propose it to my leader, using several components that I made on an existing product. Then the benefits are:
Maintain consistency.
Cut the time of the development cycle from design.
Reuseable component for future change.
Change the whole design with shorter steps.
Designers can be more focused on the products' business, solutions, and problems.

The Progress

After the proposal was accepted, I started to create the Design System starting with naming and tokenization, creating each state of the components, setting the colors, and documenting it on the files.
After a few weeks, a new UI/UX Designer came and I asked him to help me with the design system, yes we finished and documented it with our knowledge back then, and we learned how to document it properly, so here are our works.
Color Scheme
Color Scheme
Atomic Components
Atomic Components
Typography
Typography
Components
Components
Documentation
Documentation

Summary

The components above were made during the sprint for the event product, and after creating the Design System, the workflow is going faster, the target deadline for the event's products is only in 3 months with the testing to the finalization, by having this we did it only 2 months with a lot of improvements and made Depatu more consistent with this Design System, we also understand that this Design System is not good enough and a lot of room of improvements there, like better documentation and also provide tokenizing to help our developer and absolutely, Depatu's future UI/UX Designer.
Partner With Tata Feraro
View Services

More Projects by Tata Feraro