Scaling a design system across healthcare platforms.
A fragmented Drupal experience became a shared React component system built for speed, consistency, accessibility, and multi-brand content delivery.
The teams were moving fast. The frontend foundation was slowing them down.
The the platform ecosystem had multiple patient and HCP experiences across several brand variants, each with strict healthcare, accessibility, and regulatory expectations.
But the frontend workflow was tied to legacy Drupal templates, duplicated UI work, inconsistent patterns, and slow iteration cycles. At that scale, small inconsistencies became expensive.
UI updates required working through Drupal/PHP templates, which made fast frontend iteration harder than it needed to be.
Teams were solving similar interface problems repeatedly instead of pulling from one shared component foundation.
Six brand variants needed consistency at the system level while still supporting different visual rules and content needs.
Healthcare requirements meant accessibility, QA, and content governance had to be part of the system — not cleanup at the end.
A decoupled frontend system built for reuse, theming, and CMS-driven content.
Design Tokens
Shared semantic values for colors, spacing, typography, and brand theming.
React Components
Reusable primitives, layouts, and patterns with clear APIs and accessibility rules.
Storybook
A visible source of truth for engineering, design review, QA, and adoption.
Headless CMS
Content editors could build and manage pages without every update becoming a frontend ticket.
Next.js Delivery
A modern rendering layer to support faster iteration, routing, performance, and migration from legacy Drupal.
The goal was not just reusable components. It was operational leverage.
Start with structure
We prioritized layout and structural components first so teams and content editors could build real pages while smaller primitives continued to mature.
Design for multi-brand theming
Semantic tokens separated brand decisions from component logic, allowing the same UI foundation to support different visual systems.
Make the system visible
Storybook helped turn the system into a shared reference point for engineering, design, QA, and stakeholder review.
Migrate without stopping delivery
The migration moved incrementally from Drupal templates into a React/Next.js foundation so product work could continue during modernization.
Build accessibility into patterns
Common elements like navigation, accordions, cards, and CTAs were built with accessibility expectations baked into the reusable layer.
Support adoption, not just code
The system needed documentation, review workflows, and component usage guidance so teams could trust it and reuse it correctly.
A shared frontend foundation that made scale feel manageable.
The value of the system was not just visual consistency. It changed how teams shipped, reviewed, reused, and governed UI across multiple healthcare experiences.
One component foundation supported multiple patient and HCP experiences with brand-specific theming.
Storybook and shared components reduced duplicated decisions across design, frontend, and QA.
Common UI patterns moved out of one-off templates and into reusable, governed components.
Frontend changes became easier to preview, review, test, and apply across related experiences.
At a certain scale, a design system is not a nice-to-have. It becomes the only way to keep speed, quality, and consistency from fighting each other.