Project summary

<aside> 🎯 Project goal- 👉 To define the design system along with UI components, UI guidelines, and do's & don'ts. 👉 The key objective was to define the design system in a manner to fasten the work process of designers in the team and the design to the development process.

</aside>

<aside> 🏢 Organization - Clinikk Healthcare, Bengaluru, India

</aside>

<aside> 💫 Role- UX/UI designer leading this project

</aside>

<aside> ⏰ Timeline- 2 months

</aside>

<aside> 😎 In collaboration with- 2 design interns, head of design, and developers

</aside>

So, what was the need to redefine the design system for Clinikk?

The current design system was not in a position that was actively used by the team as there were new updates being done in the text styles, button components, icons, etc. which were not reflected in the previous design system for the 5 platforms of Clinikk—

1. Customer app
2. Sales app
3. Doctor's app
4. Operations app for Health assistant's
5. Website

• Due to this as new designers joined the team there was no set of rules defining the components to refer to.
• Developers on the team had to be separately explained the components and design updates for each project that was shipped, this lead to confusion among the team for the new updates in the components.
• Owing to these reasons it was decided to redefine the design system and also specify UI guidelines.

👆Previous design system

Process followed for the revamp

We divided the process into 3 phases the first being to conduct a competitive analysis to gathering all the UI elements of the 5 platforms and conducts a thorough UI audit.

At this point, we also discussed with the head of design, developers regarding any changes, insights, or updates from their end. Post that we came up with key insights from the secondary research and analysis. We translated these insights from secondary sources and the UI audit into framing our own design system for Clinikk. The flow chart of our entire process is given below which I have explained in further detail.