"Our design is now outdated. Could you come up with new design that’s more catchy, user-friendly, and compatible?”"
Janssen CarePath
About the Client
Janssen CarePath, part of Johnson & Johnson Pharmaceuticals, provides patient support services (Benefit Investigation, Insurance Coverage review, Financial Assistance programs, Treatment and Care coordination resources, etc.). The portal plays a critical role in connecting user to healthcare resources, making usability, accuracy, and compliance essential to the overall experience.
Mobile Optimization
The existing portal architecture had not been designed with responsiveness in mind, resulting in layouts that were dense, text-heavy, and difficult to adapt to smaller screens.
Desktop-only layouts with no mobile or tablet considerations
Large volumes of mandatory FDA-regulated content
Complex workflows requiring high accuracy with no organized documentation
Limited screen space for presenting dense healthcare information
The need to preserve all existing functionality during optimization
The Challenge
As UX Designer, I was responsible for creating mobile and tablet (portrait and landscape) wireframes for over 130 desktop pages, delivered across 4 structure phases.
Analyze the existing desktop layouts to identify content patterns and critical interactions
Expand design system to include typography and spacing for mobile and tablet
Collaborate with 1 off-shore designer, developers and accessibility teams to ensure responsive feasibility within the existing system
Support testing, deployment, and post-launch change requests
My Role
Design Approach
Rather than simply resizing screens, I focused on rethinking content hierarchy and interaction patterns for smaller devices.
Prioritizing critical user actions and information
Breaking dense content into digestible sections
Maintaining consistency across breakpoints
This ensured the experience remained usable and intuitive across mobile, tablet, and desktop.
Translating Dense Desktop Experiences into Responsive Flows
To manage over 130+ screens across multiple device types, collaborated with Off-shore designer (Amazing designer, Kiran), we created a structured and scalable workspace.
Organized screens by core functionality
Further categorized by product type
Divided each group by device format
This structure improved team efficiency, design consistency, and ease of collaboration and review.
Building a Scalable Design Structure
Screenshot of new Sketch file created for mobile optimization project using new organization structure
The mobile optimization was successfully delivered by providing:
A fully responsive healthcare portal across mobile and tablet devices
Improved clarity and usability
Consistent design patterns across 130+ screens
The final product provided a more accessible, patient-friendly experience while preserving the integrity of complex healthcare processes.
Outcome
Post-design, I supported QA
Create testing scenarios for responsive flows
Perform end-to-end testing
Track and resolve defects
After launch, I continued supporting change requests (each requiring regulatory review), ensuring ongoing design accuracy and compliance.
End-to-End Collaboration & Testing
The Janssen CarePath patient portal was originally designed only for desktop use, with no consideration for mobile or tablet experiences.
As patients accessed the portal on smaller devices, it became clear that the existing desktop layouts were not meeting user needs. Fixed, text-heavy screens made navigation difficult and limited accessibility outside of desktop environments.
This project focused on optimizing the existing portal into a fully responsive experience across mobile and tablet, restructuring content hierarchy and layouts while preserving all core functionality, interactions and regulatory requirements
Project Overview
After addressing mobile usability, Janssen CarePath took the next step by partnering with IBM to redesign and unify the portal platform.
eVolve - Portal Redesign
Following the mobile optimization effort, Janssen CarePath partnered with IBM to lead a full redesign and modernization of the patient portal.
Over several years, the platform had expanded to support new products and services without a unified UX structure. As a result, experiences became visually inconsistent, difficult to scale, and increasingly complex to maintain.
This project focused on redesigning the portal experience while establishing a scalable design system—creating a cohesive, compliant, and user-centered platform that could support multiple brands, workflows, and future growth.
Project Overview
As new programs and brand portals were added over time, the platform evolved without consistent design guidelines or structure.
Fragmented UI patterns across multiple brand portals
Lack of standardized layouts, components, and interaction models
Outdated visual styles and inconsistent hierarchy
Difficulty scaling designs across new products and workflows
Ensuring compliance across all redesigned experiences
The goal was to transform a collection of disconnected experiences into a cohesive, scalable system while preserving complex healthcare functionality.
The Challenge
I worked as part of a small core design team responsible for leading the portal redesign and building the new design system.
Audit existing portals to identify inconsistencies and opportunities for standardization
Translate third-party vendor UI concepts into scalable, system-driven UX solutions
Design end-to-end user flows across redesigned portal experiences
Build and organizing reusable components and patterns in Figma
Establish clear file structure and design processes to support collaboration and scalability
Partner closely with product, engineering, accessibility, and compliance teams
My Role
We began by reviewing screens across all brand portals to understand:
Where patterns diverged
Which components were duplicated or inconsistent
How workflows varied across similar use cases
This audit informed a unified UX direction and highlighted opportunities to simplify and standardize experiences.
Design Approach
Audit a Fragmented Platform
A core focus of the redesign was creating a design system that could support multiple brands and workflows within a regulated environment.
I contributed to:
Defining reusable UI components and interaction patterns
Structuring component libraries for easy scalability
Ensuring designs aligned with accessibility and compliance requirements
Documenting patterns for long-term maintenance
This system became the foundation for all redesigned CarePath portals.
Building a Scalable Design Structure
Screenshot of new Style Guide (aka. Design System) we created
Designing Within Regulatory Constraints - CAC step
Throughout the redesign, every UX decision was evaluated against regulatory and accessibility standards. I worked closely with cross-functional partners to:
Preserve mandatory content and workflows
Ensure clarity for dense healthcare information
Validate designs through compliance review cycles
This ensured the redesigned portal was both usable and fully compliant.
With over 18+ brand portals supported by the platform, the redesign needed to balance consistency with flexibility.
Establish a common layout and hierarchy framework
Allow brand-specific customization within standardized components
Create consistent navigation and workflow structures
This approach delivered a cohesive experience while supporting diverse product needs.
Unifying Experience Across Brands
Screenshot of newly designed portal
The portal redesign successfully delivered:
A modernized, user-friendly, and compliant patient portal experience
Unified UX across 18+ brand portals
A scalable design system supporting future product expansion
Improved consistency and clarity across complex healthcare workflows
Stronger cross-team collaboration through shared design standards
The new UX foundation enabled Janssen CarePath to continue evolving the platform with greater efficiency and consistency.