CASE STUDY
The RINVOQ healthcare professional website was a large, complex ecosystem of content owned by multiple brand teams and agencies. Pages were traditionally designed and reviewed individually, resulting in long timelines, inconsistent design patterns, and high production costs due to the rigorous legal review process required for pharmaceutical content.To improve efficiency, consistency, and scalability, I led the design effort to transition the site from a page-based design approach to a modular design system built on Atomic Design principles. This shifted the team from designing pages to designing components — allowing content to be built faster, reviewed faster, and maintained more consistently across the site.
Overview
Led the design of a modular design system for a large healthcare professional website, enabling faster content creation, improved consistency, and reduced review cycles across multiple teams and agencies.
The Problem
Traditional page-based design created long timelines and inefficiencies. Each page required individual design, review, and development, which was particularly challenging in a regulated pharmaceutical environment where content must pass multiple legal review cycles.
Additionally, the brand guidelines were developed for print and did not address the needs of responsive web design, accessibility requirements, and complex UI states. Multiple teams and agencies were contributing to the site, resulting in inconsistent design patterns and duplicated effort.
The Stakes
Without a more scalable system:
- Timelines would continue to increase
- Costs would continue to rise
- Design consistency would degrade across the site
- The client would struggle to keep content updated
This was not just a design problem — it was a workflow and scalability problem.
My Role
Design Lead responsible for:
- Leading the design approach for the website migration
- Developing the component-based design system
- Creating the Figma component library
- Establishing design standards for responsive behavior and accessibility
- Collaborating with development to align Figma components with CMS components
- Working across multiple teams to align on a shared system
The Strategy
We shifted from a layout-as-deliverable model to a component-as-deliverable model.
Instead of designing individual pages, we designed a system of reusable components that could be assembled into pages directly within the CMS.
We also prioritized the manuscript as the source of truth rather than the layout, which allowed content to be more flexible and responsive.
The System
We created:
- A modular component library in Figma
- A matching set of components in the CMS (AEM)
- A limited style system tied to brand guidelines
- Responsive rules and accessibility-compliant color combinations
- Templates for common content types
This allowed teams to build new pages quickly using pre-approved components that already met brand and legal requirements.
The Outcome
The design system resulted in:
- Reduced design and review cycles
- Faster page creation
- Improved consistency across the site
- Lower production costs
- Increased agility for the client team
Key Takeaway
This project shifted the team from designing pages to designing a system — improving efficiency, consistency, and scalability across a large, regulated content ecosystem.