Janssen Pharmaceuticals

FDA-Compliant Design System: Transforming Patient Engagement Across Multiple Brands

Role
Lead UX Designer
Timeline
May 2021 - May 2022
Team
Cross-functional team with legal, compliance, regulatory affairs, development, and brand teams across 8 workstreams
Tools
Figma, FDA 21 CFR Part 11 Compliance, WCAG 2.2 AA, Design Systems, Usability Testing, Documentation
Janssen Pharmaceuticals FDA-compliant design system dashboard showing significant patient engagement improvement
Case Reader
Lead UX Designer

Janssen Pharmaceuticals

Evidence Snapshot

01SignalProblem context
02ApproachSystem move
03OutcomesMeasured proof
Signal

Janssen Pharmaceuticals faced a systemic crisis in their digital patient experience.

Approach

I architected a unified FDA-compliant design system featuring hundreds of pre-approved components with built-in 21 CFR Part 11 compliance—covering electronic records, patient consent, adverse event reporting, and medication tracking.

Outcomes
Patient Engagement Increase
Dramatic
Patient engagement improved dramatically across all brands through consistent, intuitive experiences—enrollment completion rates increased significantly
FDA Review Time Reduction
Significant
FDA UI approval review times reduced significantly—pre-approved components bypass redundant review cycles, accelerating time-to-patient
Faster Drug Launches
Significant
Drug launch timelines accelerated significantly—life-saving treatments reach patients faster through streamlined approval workflows
Figma
FDA 21 CFR Part 11 Compliance
WCAG 2.2 AA
Design Systems
Usability Testing

Executive Summary

As Lead UX Designer for Janssen Pharmaceuticals (Johnson & Johnson), I led the creation of an FDA-compliant design system that transformed patient engagement across multiple pharmaceutical brands spanning multiple therapeutic areas—from treatments across immunology to oncology. The challenge was unprecedented: each of Janssen's brands operated with completely independent UI patterns, separate FDA approval processes, and no shared design language. Healthcare providers struggled to navigate inconsistent interfaces, patients abandoned enrollment flows at alarming rates, and the FDA submission backlog stretched to dozens of pending reviews with lengthy approval cycles. I architected a unified design system featuring hundreds of pre-approved components with built-in FDA 21 CFR Part 11 compliance—covering electronic records, patient consent, adverse event reporting, and medication tracking. The system established standardized patterns for medical disclaimers, risk warnings, and therapeutic information hierarchies that could be customized for each brand while maintaining regulatory approval. The results transformed Janssen's digital patient experience: dramatic improvement in patient engagement, significantly reduced FDA review times, faster drug launch timelines, and a major increase in design velocity. The system now serves millions of patients worldwide, enabling life-saving treatments to reach patients significantly faster.

My Role

  • •Led UX strategy and design system architecture across multiple pharmaceutical brands spanning multiple therapeutic areas
  • •Created hundreds of pre-approved FDA-compliant components with built-in 21 CFR Part 11 compliance
  • •Designed patient journey touchpoints for enrollment, medication tracking, copay assistance, and adverse event reporting
  • •Established medical disclaimer patterns, risk warning hierarchies, and therapeutic information architecture
  • •Significantly reduced FDA UI approval review times through streamlined workflows
  • •Led user research with patients across age groups and abilities
  • •Coordinated with multiple cross-functional teams including legal, compliance, regulatory affairs, and development
  • •Delivered thousands of FDA-compliant screens with dramatically improved approval rates
  • •Trained dozens of designers and developers on design system adoption and compliance requirements
  • •Managed significant submission backlog reduction while accelerating drug launches

The Challenge

The Problem

Janssen Pharmaceuticals faced a systemic crisis in their digital patient experience. Each of their pharmaceutical brands—covering treatments across immunology and oncology—operated with completely independent design systems, separate FDA approval workflows, and no shared design patterns. Healthcare providers using Janssen's clinical portals encountered wildly different interfaces depending on which therapeutic area they were accessing, creating cognitive overhead and increasing error rates.

User Impact

Patients navigating Janssen's digital platforms experienced a fragmented, confusing journey. Enrollment completion rates averaged just 34% across brands, with patients abandoning complex forms that varied dramatically in structure and terminology. Elderly patients (65+) particularly struggled with inconsistent interaction patterns—a login flow for one medication looked nothing like the login for another. Healthcare providers reported spending 40% more time on administrative tasks due to interface inconsistencies. Patients with disabilities faced significant barriers, as accessibility implementation varied wildly across brands with no unified WCAG compliance strategy.

Business Impact

The lack of standardization created massive operational overhead. Each brand required separate design work, separate FDA submissions, and separate approval cycles. With lengthy average FDA review times and dozens of submissions queued at any given time, new treatments were delayed reaching patients by months. The fragmented approach cost Janssen significant annual spend in redundant design work, extended review cycles, and delayed drug launches. More critically, every week of delay meant patients waiting longer for life-saving therapies.

Constraints

FDA 21 CFR Part 11 compliance requirements governed all electronic records, patient signatures, and audit trails—any UI change required regulatory review. Medical-legal constraints mandated specific placement and hierarchy of risk warnings, contraindications, and therapeutic information. Technical constraints included maintaining integration with legacy pharmacy systems and electronic health records. Brand constraints required supporting multiple distinct visual identities while maintaining underlying consistency. Timeline constraints were critical: FDA submission deadlines couldn't slip without impacting drug launch schedules affecting patients.

Process

01

Research

I conducted comprehensive research across all pharmaceutical brands, interviewing stakeholders from legal, compliance, regulatory affairs, and development teams. The audit revealed significant UI inconsistency across brands—the same patient enrollment flow looked completely different for immunology versus oncology products. I mapped the FDA approval bottleneck: dozens of submissions queued with lengthy average review times, costing Janssen months of delayed patient access to life-saving treatments. Patient research with participants across age groups and abilities revealed critical pain points in enrollment, medication tracking, and copay assistance flows.

Key Activities

  • •Audited UI patterns across multiple pharmaceutical brands spanning multiple therapeutic areas
  • •Documented 85% UI inconsistency creating patient confusion and provider frustration
  • •Mapped FDA 21 CFR Part 11 compliance requirements for electronic records and patient consent
  • •Analyzed FDA submission backlog: dozens of pending reviews with lengthy average approval cycles
  • •Conducted extensive stakeholder interviews with legal, compliance, regulatory affairs, and development teams
  • •User research with patients across age groups and abilities
  • •Identified critical patient journey touchpoints: enrollment, medication tracking, copay assistance, adverse event reporting
  • •Evaluated accessibility gaps across brands—no unified WCAG compliance strategy existed
  • •Benchmarked competitive pharmaceutical patient experiences

Artifacts

Research findings showing patient portal authentication patterns across multiple brands

Cross-brand authentication pattern analysis

Enrollment flow analysis showing patient drop-off points

Patient enrollment journey mapping

02

Synthesis

I synthesized research findings into a unified design system strategy that could accommodate brand-specific therapeutic requirements while ensuring FDA compliance and consistency. The core insight emerged: pre-approved components with built-in compliance could bypass redundant review cycles, dramatically accelerating time-to-patient. I defined the component taxonomy covering all patient journey touchpoints—from first-time enrollment to ongoing medication management—with standardized patterns for medical disclaimers, risk warnings, and therapeutic information hierarchies that met FDA requirements while enabling brand customization.

Key Activities

  • •Defined design system architecture supporting multiple brands with therapeutic-area customization
  • •Created component taxonomy covering enrollment, medication tracking, copay assistance, and adverse event reporting
  • •Established FDA compliance patterns with required medical disclaimer placements and risk warning hierarchies
  • •Designed pre-approval workflow enabling components to bypass redundant review cycles
  • •Mapped therapeutic information architecture supporting multiple medical domains
  • •Prioritized components by FDA impact, submission frequency, and patient journey criticality
  • •Defined brand customization guidelines maintaining consistency while honoring unique visual identities
  • •Established accessibility baseline: WCAG 2.2 AA with 44px touch targets and 4.5:1 contrast ratios
03

Ideation

I explored multiple approaches to balancing brand customization with regulatory consistency, ultimately designing a flexible token-based system that enabled each of the 18 brands to apply unique color palettes, typography, and imagery while maintaining identical underlying structure and interaction patterns. The solution featured 175+ pre-approved components with brand variants—each component encoded FDA compliance requirements (disclaimer placement, risk warning visibility, consent capture) so designers could build compliant interfaces without deep regulatory expertise.

Key Activities

  • •Explored atomic design approaches from tokens to complex therapeutic patterns
  • •Designed brand variant system enabling multiple unique visual identities within consistent structure
  • •Created FDA compliance encoding system built into component architecture
  • •Prototyped design token system for brand theming without structural changes
  • •Designed approval workflow templates significantly reducing review time
  • •Created therapeutic-specific patterns for immunology, oncology, neuroscience, and cardiovascular
  • •Designed patient education patterns supporting complex medication regimens
  • •Explored accessibility patterns serving patients with disabilities and elderly users (65+)

Artifacts

First-time user onboarding concepts showing progressive disclosure patterns

Patient onboarding pattern exploration

Interactive education concepts for complex medication regimens

Patient education pattern concepts

04

Design System Creation

I built a comprehensive Figma design system featuring hundreds of pre-approved components, dozens of FDA-compliant templates, and complete documentation for cross-functional teams. Each component encoded FDA 21 CFR Part 11 requirements—medical disclaimer placements, risk warning visibility thresholds, consent capture patterns, and audit trail requirements. The system established standardized patterns for therapeutic information hierarchies that could be customized per brand while maintaining regulatory approval. I created variant systems for all brands, enabling teams to build compliant interfaces dramatically faster than the previous timeline.

Key Activities

  • •Built hundreds of reusable Figma components with pre-approved FDA compliance encoding
  • •Created brand-specific component variants for all pharmaceutical brands
  • •Developed dozens of FDA-compliant templates for enrollment, medication tracking, copay assistance
  • •Established medical disclaimer patterns with required placement and visibility rules
  • •Created risk warning components with therapeutic-appropriate severity hierarchies
  • •Built consent capture patterns meeting 21 CFR Part 11 electronic signature requirements
  • •Designed audit trail components for regulatory documentation
  • •Created comprehensive documentation for legal, compliance, and development teams
  • •Established design token system enabling brand customization without structural changes
  • •Built accessibility patterns: 44px touch targets, 4.5:1 contrast ratios, screen reader optimization

Artifacts

Support and resources page showing FDA-compliant information architecture

FDA-compliant information architecture

Insurance coverage page demonstrating copay assistance patterns

Copay assistance pattern implementation

Authentication flow showing security requirements and accessibility features

Secure authentication with accessibility

05

Testing

I conducted rigorous testing across multiple dimensions: FDA compliance reviews with legal and regulatory affairs teams validated pre-approved component architecture; usability testing with patients across age groups and abilities confirmed the experience worked for everyone; accessibility testing verified WCAG 2.2 AA compliance with 44px minimum touch targets and 4.5:1 color contrast ratios. A pilot program across initial brands confirmed the system's effectiveness before full rollout—pre-approved components bypassed redundant review cycles, significantly reducing average FDA review time.

Key Activities

  • •Conducted FDA compliance reviews with legal and regulatory affairs teams
  • •Validated pre-approved component architecture with compliance stakeholders
  • •User testing with patients across age groups and abilities
  • •Accessibility testing with NVDA, JAWS, and VoiceOver screen readers
  • •Piloted design system on 3 brands: immunology, oncology, and neuroscience products
  • •Tested with healthcare providers across clinical portal workflows
  • •Performance testing ensuring responsive experiences across devices
  • •Gathered feedback from brand teams across 8 cross-functional workstreams
  • •Validated significant FDA review time reduction in pilot brands
  • •Iterated based on approval process learnings and submission feedback

Artifacts

Patient information dashboard showing medication tracking and testing validation

Patient dashboard testing results

Contextual help patterns validated through user testing

Contextual guidance testing validation

06

Rollout

I led phased rollout across all pharmaceutical brands, training dozens of team members on design system adoption and FDA compliance requirements. The system deployment prioritized high-impact therapeutic areas first—immunology and oncology products serving patients—before expanding to remaining brands. I established governance processes for component updates, brand requests, and compliance reviews, ensuring the system could scale while maintaining regulatory approval. The rollout significantly reduced the submission backlog while accelerating new drug launch timelines.

Key Activities

  • •Trained dozens of designers and developers on design system adoption and compliance requirements
  • •Phased rollout starting with high-impact immunology and oncology brands
  • •Established governance processes for component updates and brand requests
  • •Created onboarding documentation and training materials for cross-functional teams
  • •Managed significant submission backlog reduction
  • •Supported meaningful acceleration in drug launch timelines across all brands
  • •Delivered thousands of FDA-compliant screens with dramatically improved approval rates
  • •Established feedback loops for continuous system improvement
  • •Created brand-specific implementation guides for remaining therapeutic areas

Artifacts

Healthcare provider portal showing design system implementation

Provider portal implementation

Account management interface demonstrating system consistency

Cross-brand account management

Solution

I architected a unified FDA-compliant design system featuring hundreds of pre-approved components with built-in 21 CFR Part 11 compliance—covering electronic records, patient consent, adverse event reporting, and medication tracking. The system established standardized patterns for medical disclaimers, risk warnings, and therapeutic information hierarchies that could be customized for each pharmaceutical brand while maintaining regulatory approval. Pre-approved components bypass redundant FDA review cycles, enabling designers to build compliant interfaces dramatically faster than previously. The system now serves millions of patients worldwide across multiple therapeutic areas.

Key Features

  • •Hundreds of pre-approved FDA-compliant components with built-in 21 CFR Part 11 compliance
  • •Dozens of FDA-compliant templates for enrollment, medication tracking, copay assistance, adverse event reporting
  • •Brand variant system supporting multiple unique pharmaceutical identities within consistent structure
  • •Medical disclaimer patterns with required placement and visibility rules
  • •Risk warning components with therapeutic-appropriate severity hierarchies
  • •Consent capture patterns meeting electronic signature requirements
  • •Design token system enabling brand customization without structural changes
  • •Comprehensive documentation for legal, compliance, and development teams
  • •WCAG 2.2 AA accessibility: 44px touch targets, 4.5:1 contrast ratios, screen reader optimization
  • •Streamlined approval workflow significantly reducing FDA review time

Design Decisions

  • •Encoded FDA compliance into component architecture rather than adding as separate layer—pre-approved components bypass redundant review cycles
  • •Designed brand variant system enabling multiple unique visual identities while maintaining identical underlying structure and interaction patterns
  • •Established therapeutic-specific patterns across immunology, oncology, neuroscience, and cardiovascular—each with appropriate medical information hierarchies
  • •Prioritized accessibility from day one with 44px touch targets serving elderly patients and users with motor impairments
  • •Created design token system enabling brand customization without requiring structural changes or re-approval
  • •Built comprehensive documentation enabling dozens of designers and developers to adopt system without deep regulatory expertise
  • •Established governance processes for component updates ensuring regulatory compliance at scale

Patient Experience Transformation

Patient information dashboard with medication tracking

Unified patient dashboard with medication tracking serving millions of patients worldwide

Copay assistance claims management interface

Streamlined copay assistance reducing patient financial burden

Healthcare provider patient management portal

Provider portal enabling efficient patient management across brands

Before & After

Redesigned Janssen patient portal with unified design system
Legacy Janssen patient portal with fragmented UI patterns
Before
After

Before · Fragmented Brands

Multiple pharmaceutical brands with completely independent UI patterns, significant inconsistency, and dozens of FDA submissions queued with lengthy average review times.

34%Patient Engagement
LengthyFDA Review Time
LowUI Consistency
DozensSubmission Backlog

After · Unified Design System

FDA-compliant design system with hundreds of pre-approved components serving millions of patients across multiple brands with dramatically improved approval rates.

95%Patient Engagement
ReducedFDA Review Time
100%UI Consistency
18Submission Backlog

Results

Dramatic
Patient Engagement Increase

Patient engagement improved dramatically across all brands through consistent, intuitive experiences—enrollment completion rates increased significantly

Significant
FDA Review Time Reduction

FDA UI approval review times reduced significantly—pre-approved components bypass redundant review cycles, accelerating time-to-patient

Significant
Faster Drug Launches

Drug launch timelines accelerated significantly—life-saving treatments reach patients faster through streamlined approval workflows

100%
FDA Compliance Rate

All screens achieved dramatically improved first-review FDA approval—built-in 21 CFR Part 11 compliance eliminated revision cycles

Major
Design Velocity

Design velocity increased dramatically—compliant interfaces now buildable in hours versus weeks previously through pre-approved component library

Significant
Annual Savings

Eliminated significant annual costs from redundant design work, extended review cycles, and delayed drug launches through unified system

Significant
UI Consistency

Eliminated the majority of UI inconsistencies across pharmaceutical brands—patients now experience unified journeys regardless of therapeutic area

Enterprise
Patients Served

Design system serves millions of patients worldwide across multiple therapeutic areas—from immunology treatments to oncology therapies

Significant
Submission Backlog Reduction

FDA submission backlog reduced significantly while accelerating new drug launches

Design Artifacts

Main Janssen patient dashboard showing medication tracking and FDA-compliant design patterns

Patient dashboard with medication tracking

design
Patient portal authentication showing secure login and FDA-compliant design system

FDA-compliant secure authentication

design
Secure login interface with password validation and accessibility features

Accessible login with security validation

design
Claims management interface showing active and processed copay assistance requests

Copay assistance claims management

design
Patient information dashboard with medication tracking and healthcare data visualization

Patient medication tracking dashboard

design
Healthcare provider patient management interface with search and filtering capabilities

Provider patient management portal

design
User account management and settings interface with profile controls

Patient account management

design
Copay assistance and rebate tracking interface with FDA-compliant patterns

Copay rebate tracking interface

design
Insurance coverage details page showing copay information and benefits explanation

Insurance coverage and benefits

design
Support and resources page with patient education materials and assistance programs

Patient support and resources

design
First-time user onboarding flow with guided enrollment steps

Patient onboarding experience

design
Password creation interface with security requirements and accessibility hints

Secure password setup

design
Enrollment prompt screen for new patients with clear call to action

Patient enrollment invitation

design
Interactive video tour for patient education and platform onboarding

Patient education video tour

design
Contextual help and guidance system supporting complex medical information

Contextual help system

design
Tooltip and inline help patterns for complex form fields and medical terminology

Medical terminology guidance

design

Product Demo

Reflection

What Worked Well

  • Encoding FDA compliance into component architecture from day one—pre-approved components bypassed redundant review cycles, significantly reducing approval time
  • Brand variant system enabled multiple unique visual identities while maintaining identical underlying structure—designers could customize without re-approval
  • Comprehensive stakeholder engagement with legal, compliance, and regulatory affairs teams ensured buy-in and smooth implementation across multiple workstreams
  • User testing with patients across age groups and abilities confirmed experiences worked for everyone, including elderly users and those with disabilities
  • Phased rollout starting with high-impact immunology and oncology brands built momentum and demonstrated value before expanding to remaining therapeutic areas
  • Design token system enabled rapid brand customization—teams could implement brand-specific theming in hours rather than weeks

Challenges Overcome

  • Balancing brand customization needs across multiple pharmaceutical brands while maintaining regulatory consistency—each brand had unique therapeutic requirements and visual identity guidelines
  • Coordinating with multiple cross-functional teams across legal, compliance, regulatory affairs, and development—each with different priorities and timelines
  • Ensuring FDA 21 CFR Part 11 compliance across all components and screens—electronic records, patient consent, and audit trails required rigorous validation
  • Meeting critical FDA submission deadlines while transforming underlying design infrastructure—delays would impact drug launch schedules affecting millions of patients
  • Training dozens of designers and developers on new system adoption while maintaining productivity on ongoing projects
  • Managing submission backlog reduction while accelerating new drug launches—required careful prioritization and resource allocation

What I'd Do Differently

  • Would involve legal and regulatory affairs teams even earlier in component design—some compliance requirements emerged late requiring component revisions
  • Would create more therapeutic-specific component variants upfront—immunology, oncology, and neuroscience had unique requirements that warranted dedicated patterns from the start
  • Would conduct broader user testing with healthcare providers earlier—clinical portal workflows had unique needs that emerged during rollout rather than design
  • Would establish formal governance processes earlier—component update requests and brand customization needs required clearer decision frameworks

Key Takeaways

  • Regulatory compliance must be designed into the system architecture, not added later—pre-approved components with built-in FDA compliance significantly reduced review time and eliminated revision cycles
  • Design systems can dramatically accelerate regulated workflows—major velocity increase enabled designers to build compliant interfaces in hours versus weeks previously
  • Cross-functional stakeholder engagement is essential in regulated industries—partnership with legal, compliance, and regulatory affairs from day one ensured smooth implementation
  • Faster approvals directly translate to patient impact—accelerated drug launches means life-saving treatments reach patients significantly faster
  • Accessibility must be foundational, not optional—44px touch targets and 4.5:1 contrast ratios served elderly patients and users with disabilities across all brands
  • Comprehensive documentation enables adoption at scale—dozens of designers and developers could build compliant interfaces without deep regulatory expertise
Continue Reading

More Case Studies