📚 Introduction

A design system is particularly useful for designers and engineers while creating a product since it allows them to figure out the guidelines for the product's design. Here, I assist with the design of the Klikdokter system so that everything is in sync and uniform.

👨🏻‍💻My Role

I assisted the UI/UX lead (Dimy) and the UI/UX Senior (Allwin) in developing the design system from start to end by separating jobs so that they could be finished fast.

🚨Problem

Duration of work

Because components must be created from the outset of each project, the lack of a project design framework is also a problem.

Out of tune

Due to the lack of a design system, components may have varying px, margins, and other dimensions. The lack of guidelines is unbalanced.

⚽ Goal

More efficient work

Because it only calls components that have already been constructed, work is completed faster than usual.

Guideline

Work is done faster than usual because it only calls components that have already been built.

✅ Final Design

In this manner, the final design system is divided into different components I received the button, input, toast message, and calendar.

Button

Here's the button I developed for the system design; there are six different types and three different sizes. It has been optimized for mobile and the web.

Input

Name of the data, phone number, text area, and so forth. This contribution is created collaboratively. This input component has eight different types.

Toast Message

For prompts, notifications, and mistakes, use this Toast Message. There are four different varieties, each with an auto layout to make scaling easy.

Calendar

The non-click, on-click, and today calendar kinds are the four types of this calendar.

➡️ Future

Complete components

It is vital to finish the remaining components so that everything is in order and that future work will be easier

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