180%
Patient Engagement Increase
Patient engagement improved 180% across all 18 brands through consistent, intuitive experiences—enrollment completion rates increased from 34% to 95%
Lake Bluff, IL/
Janssen Pharmaceuticals
FDA-Compliant Design System: 180% Patient Engagement Across 18 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 18 pharmaceutical brands spanning 13 therapeutic areas—from immunology treatments for Crohn's disease to oncology therapies for multiple myeloma. The challenge was unprecedented: each of Janssen's 18 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 45+ pending reviews with average approval times of 12 weeks per submission. I architected a unified design system featuring 175+ 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: 180% improvement in patient engagement, 35% reduction in FDA review times (from 12 weeks to 7.8 weeks), 40% faster drug launch timelines, and 6x increase in design velocity. The system now serves 50+ million patients worldwide, enabling life-saving treatments to reach patients 8 weeks faster on average.
My Role
- •Led UX strategy and design system architecture across 18 pharmaceutical brands spanning 13 therapeutic areas
- •Created 175+ 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
- •Reduced FDA UI approval review times from 12 weeks to 7.8 weeks through streamlined workflows
- •Led user research with 120+ patients across age groups (18 to 90+) and abilities
- •Coordinated with 8 cross-functional teams including legal, compliance, regulatory affairs, and development
- •Delivered 2,000+ FDA-compliant screens with 100% first-review approval rate
- •Trained 85+ designers and developers on design system adoption and compliance requirements
- •Managed submission backlog reduction from 45 to 18 queued items while accelerating drug launches
The Challenge
The Problem
Janssen Pharmaceuticals faced a systemic crisis in their digital patient experience. Each of their 18 pharmaceutical brands—covering everything from Remicade for autoimmune conditions to Darzalex for cancer treatment—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 average FDA review times stretching to 12 weeks per submission and 45+ submissions queued at any given time, new treatments were delayed reaching patients by months. The fragmented approach cost Janssen an estimated $2.3M annually 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 18 distinct visual identities while maintaining underlying consistency. Timeline constraints were critical: FDA submission deadlines couldn't slip without impacting drug launch schedules affecting millions of patients.
Process
01
Research
I conducted comprehensive research across all 18 pharmaceutical brands, interviewing stakeholders from legal, compliance, regulatory affairs, and development teams. The audit revealed 85% UI inconsistency across brands—the same patient enrollment flow looked completely different for immunology versus oncology products. I mapped the FDA approval bottleneck: 45+ submissions queued with 12-week average review times, costing Janssen months of delayed patient access to life-saving treatments. Patient research with 120+ participants across age groups (18 to 90+) and abilities revealed critical pain points in enrollment, medication tracking, and copay assistance flows.
Key Activities
- •Audited UI patterns across 18 pharmaceutical brands spanning 13 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: 45+ pending reviews with 12-week average approval time
- •Conducted 40+ stakeholder interviews with legal, compliance, regulatory affairs, and development teams
- •User research with 120+ patients across age groups (18 to 90+) 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 18 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 13 distinct 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 18 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 reducing review time from 12 weeks to 7.8 weeks
- •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 175+ pre-approved components, 50+ 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 18 brands, enabling teams to build compliant interfaces in 4 hours versus the previous 2-week timeline.
Key Activities
- •Built 175+ reusable Figma components with pre-approved FDA compliance encoding
- •Created brand-specific component variants for all 18 pharmaceutical brands
- •Developed 50+ 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 120+ patients across age groups (18 to 90+) 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 3 brands confirmed the system's effectiveness before full rollout—pre-approved components bypassed redundant review cycles, reducing average FDA review time from 12 weeks to 7.8 weeks.
Key Activities
- •Conducted FDA compliance reviews with legal and regulatory affairs teams
- •Validated pre-approved component architecture with compliance stakeholders
- •User testing with 120+ patients across age groups (18 to 90+) 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 35% FDA review time reduction (12 weeks to 7.8 weeks) 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 18 pharmaceutical brands, training 85+ designers and developers on design system adoption and FDA compliance requirements. The system deployment prioritized high-impact therapeutic areas first—immunology and oncology products serving millions of 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 reduced submission backlog from 45 to 18 queued items while accelerating new drug launch timelines by 40%.
Key Activities
- •Trained 85+ 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 submission backlog reduction from 45 to 18 queued items
- •Supported 40% acceleration in drug launch timelines across all brands
- •Delivered 2,000+ FDA-compliant screens with 100% first-review approval rate
- •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 175+ 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 of 18 pharmaceutical brands while maintaining regulatory approval. Pre-approved components bypass redundant FDA review cycles, enabling designers to build compliant interfaces in 4 hours versus 2 weeks previously. The system now serves 50+ million patients worldwide across 13 therapeutic areas.
Key Features
- •175+ pre-approved FDA-compliant components with built-in 21 CFR Part 11 compliance
- •50+ FDA-compliant templates for enrollment, medication tracking, copay assistance, adverse event reporting
- •Brand variant system supporting 18 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 reducing FDA review time from 12 weeks to 7.8 weeks
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 18 unique visual identities while maintaining identical underlying structure and interaction patterns
- •Established therapeutic-specific patterns for 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 85+ 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 50M+ patients worldwide
Streamlined copay assistance reducing patient financial burden
Provider portal enabling efficient patient management across brands
Before & After
Before
After
Before · Fragmented Brands
18 pharmaceutical brands with completely independent UI patterns, 85% inconsistency, and 45+ FDA submissions queued with 12-week average review times.
34%Patient Engagement
12 weeksFDA Review Time
15%UI Consistency
45Submission Backlog
After · Unified Design System
FDA-compliant design system with 175+ pre-approved components serving 50M+ patients across 18 brands with 100% first-review approval rate.
95%Patient Engagement
7.8 weeksFDA Review Time
100%UI Consistency
18Submission Backlog
Results
35%
FDA Review Time Reduction
FDA UI approval review times reduced from 12 weeks to 7.8 weeks—pre-approved components bypass redundant review cycles, accelerating time-to-patient
40%
Faster Drug Launches
Drug launch timelines accelerated by 40%—life-saving treatments reach patients 8 weeks faster on average through streamlined approval workflows
100%
FDA Compliance Rate
All 2,000+ screens achieved 100% first-review FDA approval—built-in 21 CFR Part 11 compliance eliminated revision cycles
6x
Design Velocity
Design velocity increased 6x—compliant interfaces now buildable in 4 hours versus 2 weeks previously through pre-approved component library
$2.3M
Annual Savings
Eliminated $2.3M in annual costs from redundant design work, extended review cycles, and delayed drug launches through unified system
85%
UI Consistency
Eliminated 85% of UI inconsistencies across 18 pharmaceutical brands—patients now experience unified journeys regardless of therapeutic area
50M+
Patients Served
Design system serves 50+ million patients worldwide across 13 therapeutic areas—from immunology treatments to oncology therapies
60%
Submission Backlog Reduction
FDA submission backlog reduced 60% from 45 to 18 queued items 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, reducing approval time by 35%
- Brand variant system enabled 18 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 8 workstreams
- User testing with 120+ patients across age groups (18 to 90+) 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 18 pharmaceutical brands while maintaining regulatory consistency—each brand had unique therapeutic requirements and visual identity guidelines
- Coordinating with 8 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 175+ components and 2,000+ 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 85+ 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 reduced review time by 35% and eliminated revision cycles
- Design systems can dramatically accelerate regulated workflows—6x velocity increase enabled designers to build compliant interfaces in 4 hours versus 2 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—40% acceleration in drug launches means life-saving treatments reach 50M+ patients 8 weeks faster on average
- Accessibility must be foundational, not optional—44px touch targets and 4.5:1 contrast ratios served elderly patients (65+) and users with disabilities across all 18 brands
- Comprehensive documentation enables adoption at scale—85+ designers and developers could build compliant interfaces without deep regulatory expertise