Transforming Healthcare Portal Experiences Through Unified Design

Project Overview

Client: Janssen Pharmaceuticals (Johnson & Johnson)
Duration: 2021-2022
Role: UX/UI Designer (IBM iX)
Team: Led a team of 3 designers, collaborating with developers, stakeholders, and compliance officers

Business Challenge

Janssen Pharmaceuticals faced significant challenges maintaining consistency and regulatory compliance across their digital ecosystem:

  • Fragmented User Experience: 18 different pharmaceutical brands with inconsistent interfaces across 2,000+ screens

  • Compliance Risk: Inconsistencies created potential FDA regulatory violations

  • Development Inefficiency: Lack of standardization led to duplicated efforts and extended timelines

  • User Frustration: Healthcare professionals and patients struggled with disjointed experiences across brands

Process & Approach

  • I led a comprehensive research phase to understand the full scope of challenges:

    • Conducted 12 stakeholder interviews with brand managers, legal teams, and development leads

    • Facilitated 8 user interviews with healthcare professionals to identify pain points and workflow needs

    • Performed competitive analysis of 5 pharmaceutical portals to identify industry best practices

    • Audited existing digital assets to map inconsistencies and compliance vulnerabilities

    Key Insight: Healthcare professionals were spending an average of 12 minutes longer than necessary on administrative tasks due to inconsistent interfaces across Janssen's brands.

  • Based on research findings, I developed a strategic framework for the design system:

    • Created a modular component architecture that balanced brand differentiation with consistent patterns

    • Established FDA-compliant design principles that prioritized clarity, accessibility, and efficiency

    • Developed a governance model for maintaining and evolving the design system

    • Facilitated workshops to align stakeholders on the vision and implementation approach

  • led the creation of a comprehensive Figma-based design system:

    • Core Components: Designed 35+ reusable components with states, variants, and responsive behaviors

    • Typography System: Created a hierarchical type system optimized for readability across devices

    • Color System: Developed accessible color palettes that maintained brand identity while ensuring WCAG 2.1 AA compliance

    • Pattern Library: Established consistent interaction patterns for common healthcare workflows

  • To ensure successful adoption and effectiveness:

    • Created detailed documentation for developers with component specifications and usage guidelines

    • Conducted 3 rounds of usability testing with healthcare professionals to validate improvements

    • Provided hands-on training for internal design teams on using and contributing to the system

    • Established metrics for measuring success including development time savings and user efficiency

  • Color System

  • Brand Colors

  • Type System

  • Savings Program

  • Help Modal

  • Rebate Process

  • Submit Form Process

  • Login

  • Landing

Results & Business Impact

Accessibility Considerations

Responsive Design Approach

Accessibility was integrated throughout the design process:

  • Ensured WCAG 2.1 AA compliance across all components

  • Implemented proper semantic structure for screen reader compatibility

  • Designed with keyboard navigation as a primary interaction method

  • Created color combinations that meet 4.5:1 contrast ratio requirements

  • Included focus states for all interactive elements

The design system transformation delivered significant measurable outcomes:

  • 40% reduction in development time for new digital products through component reuse

  • 100% compliance with FDA regulations across all digital properties

  • 8-minute average reduction in task completion time for healthcare professionals

  • Contract extension: Janssen extended their multi-year contract with IBM based on project success

  • Scalable foundation: System now supports 18 brands and can easily accommodate future growth

The system was designed for seamless experiences across devices:

  • Implemented mobile-first component architecture

  • Created responsive grid system with consistent spacing variables

  • Designed adaptive layouts for critical workflows

  • Used flexible image handling with appropriate resolution management

  • Tested across multiple device types and screen sizes

Lessons Learned

Early stakeholder alignment is crucial when designing systems that impact multiple brands

Balancing compliance with usability requires continuous testing and refinement

Documentation is as important as design for successful implementation

Measuring business impact helps secure buy-in for design system investment

Demo

Next

California DHCS