top of page

Labstep Design Kit


A design system that keeps usability and accessibility at the centre 

We wanted to create a design system that improves the usability and accessibility of the Labstep products while reducing the time for design and development through the use of components and established patterns.


Visual Design 

Usability & Accessibility



Science & Technology


My role was to lead the design system project and work with developers to build it for Labstep products. 

Scope of work and timeline

The project aimed at creating a design system that improved usability, accessibility and consistency of the Labstep products


Design Audit

Creating Styleguide


Designing Components



Design Audit
Design Audit

Understanding the current landscape by auditing the existing tool and mapping out the gaps and challenges 



It was essential to understand the current landscape of the product and the components built to understand the scale, gaps and inconsistencies that need to be solved by the design system. 

I started by capturing the current product's existing components using the screenshots and collating them in Figma.


At this stage, the components were organised based on core and compound components. The clustering helped me to create a plan for building new components as the core components served as the building blocks for compound components.


Lastly, I started mapping out the components used in the products with the React components and understanding their nomenclature and working. This helped me to understand the interactions, component properties, etc.

Discovered Challenges


Design inconsistencies

The lack of compound components and guidelines around existing components gave birth to UI inconsistencies. Due to this, the overall product looked clunky and immature.


Design - Dev gaps

There were a lot of gaps between the existing Figma designs and the production version of the product due lack of synergy between Figma components and react components.


Accessibility issues

In several places, the product failed the accessibility standards due to flaws in existing components and improper use of colours.


High investment of time & effort

Due to the lack of components, the time and effort in designing and developing any solution were high. The result was a reduced pace in launching new features.


Usability issues

By watching users use the product, we found many usability issues arising from component design and undefined UX patterns.

Creating Styleguide

Using my knowledge in colour and typography to build a visual language for the design system and Labstep products


Lab focussed

We understood that our target users spent much time in the lab rather than the office. Hence we wanted to create a design system that is usable and accessible to the lab environments.

Laptop & Tablet friendly

In the lab, scientists primarily use tablets and laptops rather than desktops. This made us consider the screen sizes for which the components should be well suited. 

Modular & Reusability

The design system needed to be well suited for various products like lab notebooks, inventory management, etc. Thus we had to keep modularity and reusability at the centre.

Colour Palette

Primary Colours

primary colours.png

Secondary Colours

secondary colouyr.png

Primary Colours


Font sizes & weights

Poppins was the brand's typeface that existed before the design system. I studied the existing type sizes and how developers used them on the product. I found some readability issues with how the current typeface was used. 

Hence when I defined the type sizes and weights, I kept readability and the device sizes at the centre.



Icon sizes

Since replacing old icons were a big hassle and invited burden for both design and dev, I inherited the existing icons and created three-point scaled versions at 8px, 16px and 24px.

Creating Styleguide
Designing Components

Using atomic design I started created the core components and then moved onto creating compound components


Styles & States

During the audit, I discovered that the design system needed five types of buttons with three different states. 


Form Elements

Input box

Group 4107.png


Group 4108.png

Text area

Group 4110.png


Group 4109.png

Checkboxes and Radio buttons


50+ components were designed by the end of this project and stress tested for different situations

Designing Components


The outcome was a robust design system that helped the design and development team to bring speed, consistency, accessibility and better user experience to the product. 

The design system consisted of 50+ unique components which were stress tested for different situations in the product. All the components were responsive and created using the auto layout in Figma.


This marked my inaugural experience constructing a design system from scratch, employing my expertise in atomic design principles.


The process offered valuable lessons, revealing the significant return on investment and downstream benefits for designers and developers alike.


Stress testing provided insights into building scalable components in Figma, underscoring the crucial role of collaboration between design and development teams.

© Shubham Khatkar 2024

bottom of page