Quantium design system
Role:
UX & UI designer
Year:
Jan 2022 - Sep 2023
Successfully implemented design system across multiple products, organized & conducted training sessions & workshops to educate teams, developed documentation & guidelines for using design components, patterns & best practices, worked closely with UX/UI designers, front-end developers, and product managers to ensure the consistent application of design principles.
Quantium design system
Role:
UX & UI designer
Year:
Jan 2022 - Sep 2023
Successfully implemented design system across multiple products, organized & conducted training sessions & workshops to educate teams, developed documentation & guidelines for using design components, patterns & best practices, worked closely with UX/UI designers, front-end developers, and product managers to ensure the consistent application of design principles.
My design process
My design process
Building & Maintaining Components
Cross check patterns and designs across multiple design systems
Creating UI components (buttons, inputs, dropdowns, swatches, icons, etc.)
Ensuring auto-layout, responsive behaviors, and variants so developers don’t need to adjust manually
Standardizing naming conventions (layers, components, styles, pages) for clarity.
Accessibility & WCAG Compliance
Running accessibility checks (contrast, screen-reader compatibility, plugin audits).
Ensuring inclusive design (color contrast, text legibility, interaction states).
Aim for AA & AAA standards
Documentation & Guidelines
Creating component usage guidelines (when to use, do’s/don’ts, examples).
Writing documentation in Confluence / Storybook / Figma.
Preparing training material & checklists for new joiners.
Auditing & Governance
Auditing inconsistencies between toolkit vs Qbit
Identifying gaps in toolkit process & improving workflows.
Running bug hunts to raise implementation issues.
Reviewing files tagged by other designers for correct component usage.
Collaboration with Developers
Handing off components in a developer-friendly structure.
Coordinating with devs on responsive behavior & padding issues.
Conducting sessions to explain new toolkit updates.
Coordinating with devs to understand the developing constraints.
Scaling
Leveraging new Figma features (variants, properties, auto-layout enhancements) to improve flexibility and scalability.
Managing platform-specific variations without breaking consistency.
Keeping the Library Clean & Updated
Old/unwanted components left in the system.
Unpublished updates causing designers to use outdated versions.
Comments piling up and causing confusion.
Adoption & Training
Onboarding new designers/developers into the system.
Challenge: Ensuring everyone understood auto-layout, variants, and new Figma features.
Building & Maintaining Components
Cross check patterns and designs across multiple design systems
Creating UI components (buttons, inputs, dropdowns, swatches, icons, etc.)
Ensuring auto-layout, responsive behaviors, and variants so developers don’t need to adjust manually
Standardizing naming conventions (layers, components, styles, pages) for clarity.
Accessibility & WCAG Compliance
Running accessibility checks (contrast, screen-reader compatibility, plugin audits).
Ensuring inclusive design (color contrast, text legibility, interaction states).
Aim for AA & AAA standards
Documentation & Guidelines
Creating component usage guidelines (when to use, do’s/don’ts, examples).
Writing documentation in Confluence / Storybook / Figma.
Preparing training material & checklists for new joiners.
Auditing & Governance
Auditing inconsistencies between toolkit vs Qbit
Identifying gaps in toolkit process & improving workflows.
Running bug hunts to raise implementation issues.
Reviewing files tagged by other designers for correct component usage.
Collaboration with Developers
Handing off components in a developer-friendly structure.
Coordinating with devs on responsive behavior & padding issues.
Conducting sessions to explain new toolkit updates.
Coordinating with devs to understand the developing constraints.
Scaling
Leveraging new Figma features (variants, properties, auto-layout enhancements) to improve flexibility and scalability.
Managing platform-specific variations without breaking consistency.
Keeping the Library Clean & Updated
Old/unwanted components left in the system.
Unpublished updates causing designers to use outdated versions.
Comments piling up and causing confusion.
Adoption & Training
Onboarding new designers/developers into the system.
Challenge: Ensuring everyone understood auto-layout, variants, and new Figma features.
My design Principles
Be meaningful
Everything we develop should focus on simplifying the complex by removing what isn’t necessary.
Our UI components, design and motion communicates the story of an object, how to use it, whether it’s active or not, when it’s been used to take an action, where it’s gone when it’s no longer visible.
Establish familiarity
Our products are individually tailored to best meet our users needs and at the same time remain visually and behaviourally harmonious.
Our patterns are consistent. Same functions look and behave the same way.
Familiarity across our products reduces cognitive load for our users and ensures our design system is as efficient as possible, reducing repetitive work.
Collaborate often
Our design system is a living breathing ecosystem developed in collaboration between our designers, engineers, researchers and project stakeholders.
We encourage contribution, accessibility and share ideas regularly.
Our design system is approachable and learnable and also powerful and efficient for those who are more experienced.
My design process
Problem
There was no existing design system in Figma—only Qbit in Storybook for code. Designers had to recreate components from scratch for each project, which caused inconsistencies, duplicated effort, and slowed down delivery. The lack of a centralized system also made collaboration across teams difficult.
Solution
We created a complete design system in Figma from scratch, using Qbit as a reference for consistency with development. The system included reusable components, patterns, and guidelines, ensuring alignment with code and scalability across projects. This new system was widely adopted by teams, improving efficiency, reducing redundancy, and creating a unified design language.
My design process
Research
Understanding user needs, auditing existing patterns, and identifying gaps.
Build
Designing and structuring scalable, reusable components.
Q/A & Iterations
Testing components, refining details, and ensuring consistency.
Documentation
Centralizing components with clear usage guidelines and publishing
Publishing
Making finalized components available in the shared library for designers.
Maintenance
Continuously cleaning, updating, and evolving the system for long-term health.
Research
Understanding user needs, auditing existing patterns, and identifying gaps.
Research other design systems
Cross-check with Q-Bit components
Reference relevant use cases
Carbon design system
Build
Designing and structuring scalable, reusable components.
Master component & variant creation
Use defined styles (colors, text, etc.)
Auto layout
Constraints
Spacing system between elements
Follow 8-point grid
Q/A & iterations
Focused on validating components for usability, consistency, and efficiency before publishing.
Test all the variants are switching correctly across the component
Ensure naming of variants is easily understood and visible in the panel
Test responsiveness across breakpoints
Verify all styles (colors, text, effects) are linked correctly
Check padding follows the 8-point grid system
Documentation
Centralizing components with clear usage guidelines and publishing
Publishing
Making finalized components available in the shared library for designers.
Double-check components are finalized and approved
Clean up file structure and remove unused elements
Publish components to the team library with version notes
Add to toolkit
Ensured newly created components were systematically added to the shared UI library for consistent adoption across projects.
Maintenance
Continuously cleaning, updating, and evolving the system for long-term health.
Regularly audit components for consistency.
Update styles (colors, text, effects) when brand or guidelines evolve
Detach outdated components and provide alternatives
Ensure documentation reflects the latest changes
Gather feedback from designers and developers for improvements
Monitor adoption and usage across teams
Version control updates to track changes clearly
Fix bugs or inconsistencies reported by the team
Design to development lifecycle
Confidential – Can walk through live
My design Principles
Be meaningful
Everything we develop should focus on simplifying the complex by removing what isn’t necessary.
Our UI components, design and motion communicates the story of an object, how to use it, whether it’s active or not, when it’s been used to take an action, where it’s gone when it’s no longer visible.
Establish familiarity
Our products are individually tailored to best meet our users needs and at the same time remain visually and behaviourally harmonious.
Our patterns are consistent. Same functions look and behave the same way.
Familiarity across our products reduces cognitive load for our users and ensures our design system is as efficient as possible, reducing repetitive work.
Collaborate often
Our design system is a living breathing ecosystem developed in collaboration between our designers, engineers, researchers and project stakeholders.
We encourage contribution, accessibility and share ideas regularly.
Our design system is approachable and learnable and also powerful and efficient for those who are more experienced.
The challenge & solutions
Problem
There was no existing design system in Figma—only Qbit in Storybook for code. Designers had to recreate components from scratch for each project, which caused inconsistencies, duplicated effort, and slowed down delivery. The lack of a centralized system also made collaboration across teams difficult.
Solution
We created a complete design system in Figma from scratch, using Qbit as a reference for consistency with development. The system included reusable components, patterns, and guidelines, ensuring alignment with code and scalability across projects. This new system was widely adopted by teams, improving efficiency, reducing redundancy, and creating a unified design language.