Labstep Design Kit
2022
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.
Skills
Visual Design
Usability & Accessibility
Industry
Science & Technology
Team
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
Testing
Design Audit
Understanding the current landscape by auditing the existing tool and mapping out the gaps and challenges
Auditing
Capturing
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.
Organising
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.
Mapping
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
01
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.
02
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.
03
Accessibility issues
In several places, the product failed the accessibility standards due to flaws in existing components and improper use of colours.
04
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.
05
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
Principles
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
Secondary Colours
Primary Colours
Typography
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.
Icons
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.
Designing Components
Using atomic design I started created the core components and then moved onto creating compound components
Buttons
Styles & States
During the audit, I discovered that the design system needed five types of buttons with three different states.
Form Elements
Input box
Dropdown
Text area
Search
Checkboxes and Radio buttons
50+ components were designed by the end of this project and stress tested for different situations
Outcomes
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.
Learnings
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