Novartis · USPharma Division
USPharma Drupal Design System
In early 2022, Novartis was developing a new Drupal Design System for its US Pharma websites. As the UX Design Lead for this initiative, I oversaw a team of UI/UX Designers, Researchers, and Content Designers. Together, we designed, built, and tested all components to ensure they adhered to brand guidelines and created a scalable design system that could be applied across all Novartis Pharma websites.
The design system was launched on the Cosentyx website in late 2022, resulting in a 40% increase in average session duration, a 1% drop in bounce rate, and a 3% increase in pages per session.
Overview
What is the US Pharma Design System?
The US Pharma Drupal Design System is a set of pre-built, reusable components, patterns, principles, best practices, and guidelines that allows its users to build consistent web experiences across the entire Novartis pharmaceutical brand portfolio.
By using the pre-built components, teams spend less time designing and building — and more time customizing their web sites to address specific end user needs. The system serves patients, healthcare professionals, and internal brand teams simultaneously.
Cosentyx.com — first brand site launched on the US Pharma Drupal Design System
Why USPH Drupal DS?
4 Objectives That Shaped Every Decision
The design system was built to solve systemic problems across Novartis's digital portfolio — fragmented brand executions, inconsistent accessibility, slow time-to-market, and a cumbersome MLR review process. Four clear objectives anchored the work.
4 strategic objectives that anchored every design and development decision across the US Pharma DS
Business Impact
Targeted Business Benefits
The design system delivered measurable value beyond individual brand launches — transforming the economics and speed of digital production across the entire US Pharma portfolio.
- A reusable web platform that enhances customer experience and omnichannel capability
- Reduce costs on website design and builds
- Reduce time to deliver and update websites
- Improve time to market
- More autonomy for brands
- Increased high-value conversions
- Achieve more reliable web performance benchmarks for SEO
- Better digital experiences for HCPs & Patients
Research Foundation
A System Built on Evidence
Every component and pattern in the design system was informed by structured research — usability testing with patients and HCPs, moderated sessions with CMS administrators, and continuous feedback loops embedded throughout the product lifecycle.
The 2022 Research Roadmap mapped user goals, key questions, and research stimuli across four quarters — covering navigation, findability, conversions, and future scalability.
Business case for the US Pharma DS — reusability, cost reduction, speed, and better HCP/patient experiences
Built for All
A System for Every Member of the Cross-Functional Team
The US Pharma DS serves designers, developers, marketers, and brand managers. Each audience gets the tools they need to contribute — without creating redundant work or inconsistent outputs.
The design system helps jumpstart designers on day one of any brand engagement. They have access to accessible, fully tested assets and guidance they can rely on to create cohesive experiences in line with Novartis standards.
Designers can quickly create tailored solutions for their brands using the atomic library design kit — saving time and money that could be spent on innovating new products or solutions.
The Drupal CMS design system provides reusable basic UI components in React and React Native so Front-End Developers can easily and rapidly implement user interfaces for desktop, tablet, and mobile devices.
Developers get the tools they need to build more sites in less time — saving them from creating the same base components repeatedly across engagements.
Figma Playbook — designers browse, consult guidelines, and insert ready-made UI components
Drupal CMS admin — site administrators configure components without writing code
Research & Feature Roadmap
2022 Roadmap: Research-Driven Delivery
The 2022 roadmap organized work into three strategic themes — each with paired Research + Design and Development phases across Q1–Q4. Every feature shipped was grounded in validated user research before a single line of code was written.
2022 Research Roadmap — 12 research initiatives mapped across Q1–Q4 with user goals and key questions
2022 Feature Roadmap — paired Research+Design and Development phases tracked across all three strategic themes
Enablement
Agency Onboarding Guide
An interactive guide to help agencies and brands design and launch a US Pharma website. Designed to onboard external partners quickly and ensure every new brand engagement starts from a consistent, compliant foundation.
- High-level resource for agencies and brands
- Document for key contacts
- Reference for design and development processes
- Stepping stone with links to the Playbook and Design Toolkit (Figma files)
- Guide on how to use the Drupal CMS
- Design resource
Agency Onboarding Guide — the interactive entry point for all agency partners and brand teams launching a US Pharma site
MVP at a Glance
Our MVP Design System
- Accordion
- Footnote
- Banners
- Hero
- Buttons
- Informational Elements
- Cards
- ISI
- Carousel (Photo Gallery)
- List
- Featured Content Cards
- Modals
- Free Form Content
- Sticky CTA
- Footer
- Google Font support
- Custom color palette
- Dynamic vertical spacing
- Icon libraries
- Plug and play modular content blocks
- Google Tag Manager
- Tealium
- Kalturra Video Streaming
- IRMA-C (later 2022)
Measurement
UX Success Metrics — 4 Phases
Success was measured across four distinct phases — from initial usability testing of the MVP design system through long-term business impact assessment. Each phase targeted a different audience with purpose-built research stimuli and metrics.
Outcomes
Success — Cosentyx (Rheum)
The first major brand launch on the US Pharma Drupal Design System — Cosentyx (Rheumatology) — delivered measurable improvements across all key performance metrics. The results validated the design system approach and set the benchmark for future brand deployments.
Cosentyx (Rheum) — measurable performance results post design system launch
Cosentyx.com — design system components live in production across the HCP experience