top of page
Clinikk Design System
ABOUT
Clinikk, a fast-growing healthcare startup in Bangalore, recognized the necessity to establish a cohesive design language across its mobile application and partner app. This initiative aimed to enhance user experience and expedite production processes amidst the company's rapid growth. In collaboration with a fellow intern, I undertook the responsibility of conducting research and developing a standardized collection of components along with usage guidelines for this purpose.
MY ROLE
Shared research responsibilities and led visual design framework for the design system across all Clinikk applications. The applications include the doctor's app, operations, Android Customer and Sales PWA applications. I worked on setting up a comprehensive UI kit alongside usability guidelines.
Introduction
During my stay at Clinikk for two months as a UI/UX design intern, my team and I, which included one co-intern and one full-time product designer, were tasked with creating the Clinikk Design System, which consisted the following Clinikk software ecosystem:
1. Customer app
2. Sales app
3. Website
4. Doctor's app
5. Operations app.
Why Design System?
Because Clinikk is expanding faster than ever, it requires a lot of new features to be produced as soon as possible in order to stay ahead of the competition. Because health tech is advancing at a breakneck pace, features must move quickly from concept to development and launch. It also had a lot of inconsistencies and design debt, which hurt the user experience. As a result, creating a design system was unavoidable.
The design system enables designers to quickly go from wireframes to high-fidelity mockups. It also aids developers in developing such components quickly because they must produce the identical component with few changes. It makes certain that there are no discrepancies.
The Process
We developed and followed a lean design process for the task which involved the following milestones:
Audit Current Design
Collect UI Styles and Components
Invoke Stakeholders
Create Typographic scale for DS
Build the colour Palette
Establish Rules and Foundations
Implement Atomic Design Concept
Create Shared Library
Standardize Properties
Testing & Iteration
Auditing the Current Design System
01
During this process, it was understood that Clinikk already had a very small design system in place that had buttons and some special components and it was not enough since files of different apps were having their own design system created by the designer working on it.
Once collated, we presented our findings to our head of design and took approvals on what are things that can be tweaked and what cannot.
Before making the design system we analyzed the design of the whole ecosystem of clinikk and tried to find out the inconsistencies, wrong patterns and sizes used, and other improvements that can be done.
During which all 3 of us picked up different apps to find out the above-mentioned points.
Collecting UI Styles & Components
02
Next we looked into similar apps e.g. Practo, Medibuddy,1mg,Pharmeazy etc. or apps having good designs e.g. Dunzo,Phonepe etc. to take inspiration of good design patterns and practices being followed by them for which we tried to broke the analysis into some categories which were:
1. Target User
2. Color and Text styles used
3. Pros and Cons of the design
We also deep dived into similar apps e.g. Practo, Medibuddy,1mg,Pharmeazy etc. or apps having good designs e.g. Dunzo,Phonepe etc. to take inspiration of good design patterns and practices being followed by them for which we tried to broke the analysis into some categories which were:
1. Target User
2. Color and Text styles used
3. Pros and Cons of the design
Involving the stakeholders
03
We planned a meeting with all of the company's developers once we finished the approvals to present them to the purpose of the design system and how it can make the creation of new items a lot easier, smoother, and faster.
We showcased some good design systems already available in the Figma community and asked some questions that we prepared ahead of time, as well as their thoughts on what they think of it and if there are any changes they think should be made in the design system's organisation that would be beneficial to them.
They provided us with some insights like:
1. Icons exported as fonts would be much easier for them to work on
2. Line height in dp instead of px
3. The nomencalture of colors styles in a format like Red/200 etc. so that it is developer friendly.
Establishing Rules & Foundation
04
After we were done with all the preparation for the design system it was time for us to start making it, before which we deep-dived into existing design systems.
Some of the design systems which are worth reading and inspired us are:
1. Google's Material Guidelines
2. Uber Design System
3. IBM Carbon Design System
4. Microsoft Teams Design System
We looked onto these parts of the design systems we studied:
1. Guidelines and UI Library
2. Documentation of Systems
3. Types of components
4. Best practices of components e.g. input fields
5. Building components on Figma
Buidling the System Base
05
After all the findings, approvals and inspirations it was time for us to finally start making the design system.
We had a couple of constraints for making the design system that were:
1. We can't change the present brand guidelines
2. We can't drastically change any component which is widely used
3. The guidelines to use design system should not be too stiff
Also, we followed three principles while making the design system:
1. Consistency
2. Accessibility
3. Empathy towards users of App
We decided to start making a design system on the principles of atomic design.
i.e. we first started with our atoms that were color, typography, icons then buttons, chips etc that were our molecules then forms, cards etc that were organisms then bottom modals which were templates.
Creating shared UI Libraries
06
Following the atomic design principle, we further developed UI guidelines and best practices based on case studies. These UI components were categorized on various design system sheets based on their priority and usage frequency.
Colour System
The colours selected are designed to be harmonious, ensure accessible text, and distinguish interface elements and components from one another. Colour is also used to add meaning and support design communication.
Primaries
Clinikk Blue and Clinikk Green are the main colours of the Clinikk Brand family. These colours are to be used in the percentage prescribed.
Extended Primaries
These are the colours that are to be used as shades in UI elements and other use cases where the primaries cannot be used.
Neutrals
These colours are black colour opacities mixed with blue to be used as Neutral shades in UI elements such as backgrounds.
We faced multiple challenges while working with the constraints as one would often conflict with another and we had to prioritize one thing over another after much discussion with each other after considering multiple factors like where will that particular element will be used and what will be a mental model of the user at that point of time.
Once the first draft of the design system was ready we worked on iterations, documentations and took the opinions of different designers and developers on it.
Semantics
These colours are used to convey different states such as success, warnings, and errors.
Colours can also carry other meanings defined by apps or users of those apps (for example, colours assigned by a user to categorize or tag content). Carrying these colours forward can help users navigate the interface in a way they’re familiar with.
Icon Colours
Icons are coloured black or white depending on the background used. They can have colours only if they are to communicate certain states ie; active and inactive.
Typography
Typographic scale determines which typefaces will become a standard, but also how we organise a consistent hierarchy, which is going to build a predictable information architecture across the product. We've used the versatile and scalable 'Manrope' font family.
Iconography
Creating a icon family requires a thoughtful approach and a bit of iteration for the set to be organized, well-documented, and tested in context. To achieve harmony for an icon family, we need to maintain the same stylistic rules throughout: 1.5 px centered stroke and grid for 24x24px icon size.
UI Components
Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need and has been specifically created to work together to create patterns and intuitive user experiences.
.png)
.png)
.png)
.png)
Top Bars & Nav Bars
The Topbar and Navbars are designed to reflect different selected states and can be stretched to fit varying widths without losing their built format. Always use the same component instance and do not try to edit.
Cards and Banners
Cards and banners are made to fit various use-cases ranging from mobile to desktop.
Check out the complete design system file at the Figma link below:
bottom of page