Transforming the Healthcare Portal Experience for Janssen Pharma
Project Overview
Client: Janssen Pharma
Role: Lead UX Designer
Duration: 2021-2022
Tools Used: Figma
Team: Led a team of two designers; collaborated extensively with stakeholders across Janssen, IBM, and other agencies.
Quick Summary: Led a healthcare portal redesign that extended IBM's contract with Janssen through FDA-compliant designs.
Problem Solved for Business: Ensured all portal designs were FDA-compliant, making them legal and extending the contract with Janssen.
Outcome: Successfully extended IBM's contract with Janssen through compliant, well-designed portals.
Demo
-
![]()
Color System
-
![]()
Brand Colors
-
![]()
Type System
-
![]()
Savings Program
-
![]()
Help Modal
-
![]()
Rebate Process
-
![]()
Submit Form Process
-
![]()
Login
-
![]()
Landing
Overview
As a Senior UX Designer at IBM, I led a critical project to modernize the digital interfaces of Janssen Pharma's 18 different pharmaceutical brands. The primary challenge was to create innovative design solutions that enhanced the user experience while strictly adhering to FDA compliance regulations.
Understanding the Problem
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
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.
Measuring Impact
Following the launch, we implemented a structured approach to collect user feedback through surveys, interviews, and analytics tools. The results confirmed significant improvements:
Enhanced user navigation and overall satisfaction
Decreased bounce rates and increased session durations, indicating a more engaging user experience
This feedback loop allowed for continuous enhancements to be made to the portal based on real user insights.
Outcomes & Learnings
Successfully balanced innovative UX design with strict regulatory compliance
Showcased IBM's commitment to quality and compliance, leading to an extended contract with Janssen Pharma
Reinforced the importance of cross-functional collaboration among design, legal, compliance, and technical teams
Created a scalable design system foundation that can accommodate future expansion
Highlighted the power of data-driven decisions in optimizing the user experience
