Case Study

Enterprise
Design System
for Healthcare

A scalable design system built to support a global pharmaceutical platform — ensuring consistency, accessibility, and clarity across regions, products, and audiences.

Role Design System Lead
Timeline 6 months initial · ongoing
Scope System architecture · Accessibility · Documentation · AI Integration · Conversational UI Patterns
100+
Countries
30+
Products
80+
Components
100%
Team Adoption
Scroll
The Challenge

Designing for Global Scale

The platform supports a broad portfolio of 30+ pharmaceutical products across global markets. Content complexity, regulatory constraints, and multilingual requirements demanded a unified and scalable system — one that could flex across regions without fragmenting experience.

Multi-region WCAG Compliance Multilingual Regulatory Scalable AI Integration
Currently Evolving
The system is actively evolving to support AI-powered features — including conversational UI components, generative content patterns, and intelligent feedback loops designed for global pharmaceutical audiences.
01 / Problem
Fragmented experiences
Each product team was building independently, creating inconsistent UX patterns across 30+ product lines.
02 / Problem
Regulatory complexity
Pharmaceutical content requires precise, accessible presentation — with zero room for ambiguity across regions.
03 / Problem
Slow design-to-dev handoffs
Without a shared language between design and engineering, handoffs were lengthy and error-prone.
My Role

Leading System Architecture from the Ground Up

As Design System Lead, I owned every layer of the system — from defining the visual language to ensuring every component met accessibility standards before it shipped.

Research & Discovery
Market & user needs
Led discovery research to understand market landscape, competitor systems, and user pain points across regions. Synthesised insights into clear design system requirements — ensuring every foundation decision was grounded in real product and user needs, not assumptions.
Business Alignment
Stakeholder requirements
Worked closely with business stakeholders to capture requirements from a web solution perspective — translating regulatory, regional, and product portfolio constraints into system-level design decisions that balanced business goals with user experience quality.
System Architecture
Token-based design language
Architected the entire foundation layer — defining color tokens, typography scales, spacing systems, and elevation principles. Structured the system to support multi-product theming across 100+ country markets without requiring bespoke solutions per region.
Component Strategy
80+ documented components
Defined component anatomy, interaction states, variants, and usage guidelines across the full library. Every component was designed with regulatory clarity in mind — ensuring content-heavy pharmaceutical pages remained accessible and unambiguous.
Accessibility Standards
WCAG AA compliance
Embedded accessibility at the foundation level — contrast ratios, keyboard navigation, and focus states were defined as system tokens, not retrofitted. Ensured inclusive experiences were a baseline requirement, not an optional enhancement.
Documentation & Adoption
100% team adoption
Drove full adoption across all product squads by creating clear, actionable documentation — covering component usage, do's and don'ts, handoff specs, and onboarding guides. Acted as the primary point of contact between design and engineering throughout the rollout.
Core Foundation

The Building Blocks

Color, typography, spacing, and layout were established to ensure consistency, accessibility, and theming across regions. Every decision was made with scale in mind.

Color Palette
A purposeful color system built for accessibility — primary, semantic, and neutral scales with defined contrast ratios.
Typography Scale
A modular type scale with defined weights and line heights. Tested for readability across all supported languages.
Display Heading
Section Title
Body text / 14px Regular
Spacing System
A 4px base grid that creates rhythm and consistency across all layouts, from dense data tables to open marketing pages.
Elevation & Depth
Layering system using subtle shadows and borders to communicate hierarchy without visual noise.
Iconography
A consistent icon set aligned to a 24px grid, with 16px and 20px variants for dense interfaces.
Component Library

Modular, Flexible, Documented

A library of reusable components designed for flexibility and regulatory clarity across content-heavy pages. Every component ships with anatomy, variants, states, and accessibility guidance.

Button Interaction
Content Block — Component
Component Anatomy & Guidelines
Layout Grid
Primary · Secondary · Secondary Contrast — Normal, Hover, Pressed, Focused, Disabled
Button Interaction sheet
No-Background · Light-Background · Contrast-Background · Border — across Mobile, Tablet & Desktop
Content Block component variants
Anatomy · Spacing · Layout & Grid · Supported Background Colours
Component Anatomy and Guidelines
XL (1366px) · XL (1280px) · L (992px) · M (768px) · S-Horizontal (480px) · S (320px)
Responsive layout grid across all breakpoints
Accessibility

Inclusion at the Foundation

Accessibility wasn't a final checklist — it was embedded from the very first token. Every decision in the system reflects a commitment to inclusive experiences.

WCAG 2.1 AA
✓Color Contrast
All text and interactive elements are designed to meet minimum 4.5:1 contrast ratios — ensuring readability for users with low vision across all backgrounds and states.
ARIA Standard
✓Keyboard Navigation
Interactive components are designed for full keyboard operability, with visible focus indicators defined for every state — ensuring navigability without a mouse.
Multilingual
✓Multilingual Support
Components are structured to handle multiple languages — accounting for text expansion, varied character sets, and locale-specific formatting across all regions.
Forms
✓Error Communication
Error and validation states use a combination of color, iconography, and descriptive text — never relying on color alone to communicate meaning.
Outcomes & Impact

What the System Delivered

Six months of focused architecture work — followed by continuous evolution — resulted in measurable improvements across every team that adopted the system.

100%
Team adoption across all product squads
Every product team moved to the unified system within the initial rollout period.
40%
Reduction in design-to-dev handoff time
Shared tokens and documented components eliminated ambiguity in handoffs.
80+
Components shipped and documented
A full library covering every surface, with anatomy, variants, and usage guidance.
System metrics
Team adoption100%
Handoff time reduction40%
WCAG compliance100%
Components shipped80+
Scalability
Foundation ready for future growth — the system is architected to support new regions, products, and platforms without fragmentation.