STELARA® — Humanizing Pharma Through Responsive Design

Navigating Regulatory Complexity: Delivering Empathy-Driven UX and Persona Routing for Chronic Care Patients

Role & Engagement

Executive Creative Director, Lead UX/UI & Visual Designer
(Ansible / IPG Mediabrands for Johnson & Johnson)

The Regulatory & Design Challenge

STELARA® (a flagship Johnson & Johnson prescription biologic for moderate-to-severe plaque psoriasis and psoriatic arthritis) was burdened by three fragmented, adaptive site codebases across desktop, tablet, and mobile. To modernize the digital ecosystem, J&J required a single responsive architecture. However, pharmaceutical web design presents steep regulatory hurdles: mandatory medical disclosures, strict FDA compliance, and persistent Important Safety Information (ISI) viewports often clutter the canvas and disrupt the user experience. The objective was to design a compliant, highly accessible digital platform that seamlessly guided four distinct patient personas to relevant medical content while overcoming the alienation often felt by chronic skin condition sufferers.

Strategic & Hands-On Scope

  • Persona Architecture & Medical Routing: Mapped out navigation pathways for four defined patient profiles—ranging from newly diagnosed individuals seeking basic awareness to serious patients evaluating advanced biologic treatment options.

  • Hands-On UX/UI & Art Direction: Stepped in during team resource constraints to lead site architecture, wireframing, storyboarding, use-case mapping, and visual art direction.

  • Regulatory Compliance UX: Engineered a persistent ISI drawer that met strict FDA visibility requirements without degrading mobile usability or visual aesthetics.

  • Empathy-Driven Visual Direction: Curated a warm, human-centered photography and copy framework designed to dismantle feelings of isolation and build emotional connection.

Central UX Strategy
Balancing Compliance with Emotional Connection

In heavily regulated healthcare advertising, utility and empathy must coexist with legal mandatories. The experience turned rigid regulatory constraints into clean, user-first UI components.

1.

The Sticky, Non-Intrusive ISI Drawer

  • The Pharma Friction: FDA mandates require Important Safety Information (ISI) to remain accessible across every page view. Traditional implementations flood the screen with dense legal text, causing user frustration and high bounce rates.

  • The UX Solution: Engineered a dynamic, sticky ISI tray pinned gracefully to the bottom of the viewport. It provided instant one-tap expansion for full medical disclosures while preserving valuable screen real estate for core educational content.

2.

Indication Gateways & Dynamic Persona Self-Selection

  • Dual-Indication Landing Gateway: Designed an initial gateway prompting users to select between Plaque Psoriasis or Psoriatic Arthritis, immediately streamlining content relevancy.

  • Self-Identification Quick-Links: Placed interactive intent cards directly beneath the primary hero carousel to help users self-identify their condition severity and familiarity with STELARA®. As patients drilled deeper, contextual “Related Topics” modules served hyper-curated follow-up reading matched to their mindset.

3.

Visual Art Direction Grounded in Human Intimacy

Breaking the Stigma: Psoriasis sufferers often hide their skin under heavy clothing and feel alienated from loved ones. The visual system intentionally featured men and women wearing short sleeves, engaging in outdoor activities, and freely embracing family—reflecting restored confidence, intimacy, and freedom of movement.

Impact & Results

Unified Multi-Device Ecosystem

Successfully consolidated three legacy adaptive codebases into a single, high-performance responsive platform across all viewports.

Overwhelmingly Positive Patient Testing

Usability testing across patient focus groups showed a dramatic improvement in content discoverability, emotional resonance, and brand approachable perception.

FDA-Compliant Design System

Established a flexible, fully compliant UI framework that J&J brand teams deployed as a model for complex biologic digital experiences.

 

Regulatory Architecture & Technical Execution

Pharma & Regulatory Challenge UX & Design Solution Patient & Business Impact
Mandatory ISI Placement FDA regulations require visible safety warnings, often cluttering small viewports. Designed a collapsible, sticky ISI drawer that satisfies legal mandates without blocking content.
Multi-Indication Friction Patients get confused when browsing multiple medical indications simultaneously. Implemented an upfront indication gateway to isolate condition-specific clinical information.
Alienating Clinical Tone Traditional pharma sites feel cold, institutional, and overwhelming to anxious patients. Combined approachable copy with warm imagery celebrating skin exposure, movement, and intimacy.