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.
Usability & Accessibility
Science & Technology
Scope of work and timeline
The project aimed at creating a design system that improved usability, accessibility and consistency of the Labstep products
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.
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.
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.
By watching users use the product, we found many usability issues arising from component design and undefined UX patterns.
Using my knowledge in colour and typography to build a visual language for the design system and Labstep products
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.
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.
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.
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.
Checkboxes and Radio buttons
50+ components were designed by the end of this project and stress tested for different situations
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 was the first time I got an opportunity to build a design system using my knowledge of atomic design from the ground up. I enjoyed the overall process, which gave me many lessons.
I understood the ROI of a design system and the downstream impact it brings for both designers and developers. The stress testing gave me insights into how components are built for scale in Figma. I also learnt that the success of any design system lies behind the collaboration between design and developers.
© Shubham Khatkar 2023