Dramatic
Patient Engagement Increase
Patient engagement improved dramatically across all brands through consistent, intuitive experiences—enrollment completion rates increased significantly
Loading...
Lake Bluff, IL/
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
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
Cross-brand authentication pattern analysis
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
Patient onboarding pattern exploration
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
FDA-compliant information architecture
Copay assistance pattern implementation
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 dashboard testing results
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
Provider portal implementation
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
Unified patient dashboard with medication tracking serving millions of patients worldwide
Streamlined copay assistance reducing patient financial burden
Provider portal enabling efficient patient management across brands
Before & After
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
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
Patient dashboard with medication tracking
design
FDA-compliant secure authentication
design
Accessible login with security validation
design
Copay assistance claims management
design
Patient medication tracking dashboard
design
Provider patient management portal
design
Patient account management
design
Copay rebate tracking interface
design
Insurance coverage and benefits
design
Patient support and resources
design
Patient onboarding experience
design
Secure password setup
design
Patient enrollment invitation
design
Patient education video tour
design
Contextual help system
design
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