Transforming the Healthcare Portal Experience for Janssen Pharma

Project Overview

Client: Janssen Pharmaceuticals (Johnson & Johnson)

Role: UX/UI Designer (IBM iX)

Duration: 2021-2022

Objective: Create an FDA-compliant, scalable design system and cohesive UX across 18 pharmaceutical brands spanning over 2,000 screens.

Key Outcome: Successfully launched a design system that significantly streamlined development and ensured regulatory compliance, resulting in Janssen extending their multi-year contract with IBM.

Demo

  • Color System

  • Brand Colors

  • Type System

  • Savings Program

  • Help Modal

  • Rebate Process

  • Submit Form Process

  • Login

  • Landing

The Challenge

Janssen Pharmaceuticals faced significant challenges maintaining consistency and compliance across digital assets for their extensive portfolio of pharmaceutical brands. With over 18 different brands and more than 2,000 screens, inconsistency led to regulatory risks and an inefficient user experience. Janssen needed a robust, scalable design system that would unify user experience, accelerate digital product launches, and adhere strictly to FDA regulations.

Janssen Pharma's existing digital assets were outdated and negatively impacted user experiences. However, updating these assets to meet modern usability standards while complying with rigorous FDA regulations posed a significant challenge.

Key challenges included:

  1. Balancing design modernization with regulatory compliance

  2. Fostering collaboration among designers, stakeholders, and legal teams

  3. Managing the scope of designing over 2,000 new screens within tight timelines

Approach

Research & Discovery

I initiated extensive stakeholder workshops, user interviews, and competitive analyses to pinpoint pain points:

  • Workflow inefficiencies caused by inconsistent design practices.

  • High compliance risks due to fragmented digital experiences.

  • Challenges in maintaining brand identity across diverse platforms.

Design & Execution

Using research insights, I spearheaded the development of a Figma-based design system, ensuring:

  • Comprehensive Style Guide: Standardized UI elements for FDA compliance and brand consistency.

  • Modular Component Library: Facilitated easy adaptation across various digital platforms.

  • Collaborative Design Practices: Managed and mentored two junior designers, ensuring cohesive implementation and documentation.

  • Cross-Platform Scalability: Designed adaptable components optimized for mobile, tablet, desktop, and web applications.

Iterative Testing & Refinement

  • Conducted multiple usability testing sessions with healthcare professionals to validate system efficiency.

  • Incorporated stakeholder feedback through iterative refinements to align with compliance and usability goals.

Wireframing & Prototyping

We began by developing detailed wireframes for both desktop and mobile platforms. These wireframes facilitated discussions on layout, workflow, and functionality without the distraction of aesthetic design elements.

Through an iterative process of stakeholder feedback and refinement, we evolved the wireframes into interactive prototypes. These functional mockups allowed for dynamic usability testing that closely mimicked real-world use.

Creating a Unified Design System

In collaboration with external agency partners, we crafted a comprehensive design system using Figma. This scalable and flexible system:

  • Defined reusable components, ensuring visual and functional consistency

  • Provided guidelines while allowing for necessary adaptations

  • Was thoroughly documented for correct implementation by all team members

This design system was critical in maintaining a cohesive user experience across Janssen Pharma's extensive array of digital assets.

Implementation

To ensure a seamless transition from design to development, we worked in close collaboration with Janssen Pharma's engineering teams. Figma's collaborative features enabled developers to access design specifications directly, minimizing the risk of misinterpretation or errors.

Regular problem-solving sessions allowed us to address any technical constraints while maintaining the integrity of the design intent.

Results & Impact

  • Operational Efficiency: Achieved approximately 30% reduction in development and QA timelines.

  • Regulatory Compliance: Attained 100% FDA compliance, significantly mitigating risks.

  • Enhanced User Experience: Delivered a consistent, intuitive UX across all digital platforms.

  • Strategic Client Impact: Project success led to Janssen extending IBM’s contract, reinforcing their confidence in the solution.

Outcomes & Learnings

  • Scalable design systems significantly improve consistency, usability, and compliance across complex digital ecosystems.

  • Cross-team collaboration and mentorship enhance adoption and execution of enterprise-wide UX initiatives.

  • Iterative user validation is crucial for achieving compliance and optimizing workflows in highly regulated industries.

Previous

California DHCS
Next

United Airlines