Apart from designing some of my interests include doodling, illustration, sketching random ideas, and cooking something interesting.🎨 I believe these activities are not only a stress reliever but also part of my Ikigai. I also enjoy reading interesting things in design, psychology, and non-fiction.📗 Click on the images below.
Design system of Clinikk Healthcare
In this case study, I am going to share the process that went about for revamping the design system for the platforms of Clinikk Healthcare. My contribution involved from understanding the needs, goals to the revamp and handoff.
Overview
This project was to establish a comprehensive design system for Clinikk healthcare maintaining the focus on creating a unified and consistent user interface that not only met the specific needs of Clinikk's healthcare different platform but also to facilitate a more efficient collaboration between designers and developers.
Type
Industry Project
(Shipped),
Clinikk Healthcare, Bengaluru, India
My contribution
UX/UI designer leading this project, responsible for research, aligning needs with stakeholders, redefining components, design and handoff
Collaboration
Timeline
Head of design,
UX designer (My role),
2 UX design interns,
Developers
3 months
CONTEXT
Need for redefining the design system
The current design system was not in a position that could be 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 across different platforms of Clinikk.
Platforms of Clinikk Healthcare are-
1. Customer app
2. Sales app
3. Doctor's and Operations dashboard
4. Website
-
For new designers that 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.
GOALS
Key Objectives
Unify the experience across the platforms
Enable a systematic collaboration between designers
Simplify the collaboration between designers and developers
Have a well documented design system and UI guidelines
What was the process like?
BEHIND THE SCENES
the process
-
We divided the process into 3 phases the first being to conduct a competitive analysis to gathering all the UI elements across the 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.
PHASE 1
Audit current design
To start with we audited the current design system and design across the different platforms of Clinikk Healthcare and collected all UI elements together and analysed areas of inconsistencies. We also grouped typical UI patterns together to form categories.
Brainstorm behind the scenes
Key findings
UI Inconsistencies for buttons, colors, text etc. across the different platform of Clinikk
No form of documentation of common UI patterns and spacing constraints
Scattered design elements with new elements added but not updated.
Competitive Analysis and secondary research
Post the UI audit we decided to go into the depths of understanding what all aspects exactly a design system constitute, what are the different types of design systems, How do some top companies create design systems?
We conducted a competitive analysis of design systems of applications having similar user profiles in the healthcare domain. For this, we went through the design systems on the following criteria—
-
Process they followed
-
Text hierarchy ( text style)/ Color combinations/ Button styles/ Chips/ any other UI elements
-
Pros / Cons in UI design, design language used in product
-
Aspects from the design of the product that Clinikk design system can use
Post this we had discussions with developers and the head of design to discuss possible updates in the current design across the platforms. Understanding from the developer's perspective how design is implemented along with a possible strategy in the implementation of the design system was discussed at this stage.
EXECUTION
Building and refining
I came up with a checklist of all the aspects that needed to be updated. I began building components for the design system. I started with some foundational building blocks, such as spacing, typography, and color.
In order to maintain the font versatile for for both web and native mobile applications. We chose Inter because its variations in weight make it look great as both heading font and as body text. Inter is also is convenient in terms of readability as well on multiple platforms.
For a few UI elements we created example screens to showcase, how the particular UI element can be used. This can make it clear for designer joining the team easier to understand the use of the font.
Color helps communicate hierarchy of information, interactive states, and the difference between distinct elements. In this design system, every color has an assigned role based on how its element functions within the interface.
For each of the color we gave it color based on hover or clicked states as well.
For the icons we grouped the icons based on use and apart from that we categorized them based on the size as well. The categories are 18X18, 24X24, 36X36 and 40X40. Any kind of discrepancies in the icon style, were corrected to make it uniform across the categories.
We designed the buttons based on the requirements of different use cases. For each of the buttons 3 states were maintained, default, pressed or hover and the disabled state. Buttons were also divided for Mobile and Web button styles.
The spacing constraints for the buttons were clearly specified along with typical placement within a mobile screen. along with other UI elements like illustrations and text around the buttons.
In order to keep the card layouts easily accessible for the designers and developers in the team. The typical cards for mobile and web were grouped based on its use/type. Specifications for each type of card such as spacing constraints, illustrations, gradients etc.
The entire design system for the different platforms of Clinikk involved more parameter such as grids, modals, sidebars, text input fields, shadows. This is shared in the full case study below.
AFTER SHIPPING
Impact of the design system
🙌
Better team collaboration for designers and developers to communicate about design specifications.
📱
Apart from bringing in awareness, about design standards within the team the design system also ensured the design across the platforms can be uniform.
LEARNINGS
Reflection
🙌
While working on this project one of the key reflection was to use simplify design terms and using simple language when communicating while communicating with developers.
✨
Another learning was to discuss the thoughts, requirements and the updates that one is working on before hand with other senior designers in the team so that we are on the same page before hand.
You made it till the end of the case-study! 🎉