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
Heartland Community Network
Heartland Community Network
Role
Role
Senior UX Consultant
Senior UX Consultant
Duration
Duration
08 months
08 months
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
HCN’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
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
Heartland Community Network
Heartland Community Network
Role
Role
Senior UX Consultant
Senior UX Consultant
Duration
Duration
08 months
08 months
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
HCN’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