Building a scalable design system
Building a scalable design system
Building a scalable design system
for operations management
for operations management
for operations management
Company
Company
Mandviwala Qutub and Associates
Role
Role
Design Architect
Design Architect
Existing system
Existing system
Existing system
Fragmented designs, UI and gaps in accessibility and compliance
Goal
Goal
Goal
A unified visual framework to reuse and scale across services ensuring WCAG 2.2 AA compliance
Base
Base
Base
Three Tiered Approach
Brand
Alias
Mapped
Token architecture
MQA’s design tokens include color, spacing, typography, border radius, border width, and theming.
Defined in Figma as the single source of truth, the system was structured for consistency and shared with engineering to implement through utility-based styling.
Styles
Typography was chosen to improve legibility in complex interfaces, making dense information easier to scan and navigate.
Soft elevation was used to add depth without pulling focus from critical data.
Styles
Typography was chosen to improve legibility in complex interfaces, making dense information easier to scan and navigate.
Soft elevation was used to add depth without pulling focus from critical data.
Component library
Consisting of icon, button, label, field, input, menu, dropdown, table, radio button, switch, tab bar, pill, link, breadcrumb, avatar, tag, loader, badge, progress, snack bar and carousel components.
Platform re-design
Platform re-design
Platform re-design
A structured internal tool for managing client billing, support cases and project technicalities.
Impact
Impact
Impact
↑ requirement accuracy across key workflows
↑ satisfaction metrics through standardized UI patterns
↓ approval cycles with clearer governance
↑ requirement accuracy across key workflows
↑ satisfaction metrics through standardized UI patterns
↓ approval cycles with clearer governance
Building a scalable design system
Building a scalable design system
Building a scalable design system
for operations management
for operations management
for operations management
Company
Company
Mandviwala Qutub and Associates
Role
Role
Design Architect
Design Architect
Existing system
Existing system
Existing system
Fragmented designs, UI and gaps in accessibility and compliance
Goal
Goal
Goal
A unified visual framework to reuse and scale across services ensuring WCAG 2.2 AA compliance
Base
Base
Base
Three Tiered Approach
Brand
Alias
Mapped
Token architecture
MQA’s design tokens include color, spacing, typography, border radius, border width, and theming.
Defined in Figma as the single source of truth, the system was structured for consistency and shared with engineering to implement through utility-based styling.
Styles
Typography was chosen to improve legibility in complex interfaces, making dense information easier to scan and navigate.
Soft elevation was used to add depth without pulling focus from critical data.
Styles
Typography was chosen to improve legibility in complex interfaces, making dense information easier to scan and navigate.
Soft elevation was used to add depth without pulling focus from critical data.
Component library
Consisting of icon, button, label, field, input, menu, dropdown, table, radio button, switch, tab bar, pill, link, breadcrumb, avatar, tag, loader, badge, progress, snack bar and carousel components.
Platform re-design
Platform re-design
Platform re-design
A structured internal tool for managing client billing, support cases and project technicalities.
Impact
Impact
Impact
↑ requirement accuracy across key workflows
↑ satisfaction metrics through standardized UI patterns
↓ approval cycles with clearer governance
↑ requirement accuracy across key workflows
↑ satisfaction metrics through standardized UI patterns
↓ approval cycles with clearer governance