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
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:
Balancing design modernization with regulatory compliance
Fostering collaboration among designers, stakeholders, and legal teams
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.