OPSYNVI

user interface design + creative direction

Client: Johnson & Johnson

Role: Lead UI Designer

Collaborators: Brand Design, UX Design, Development, Account Management

OPSYNVI® is a prescription medicine used for long-term treatment of adults with pulmonary arterial hypertension (PAH), which is high blood pressure in the arteries of the lungs. Being a recently FDA-approved medicine, J&J came to FCB to build the entire patient-facing site from the ground up. As the lead UI designer for this project, I collaborated with the brand team, development and account management to ensure we delivered a visually immersive site that inspires patients to begin this treatment.


View the live site →

OPSYNVI® is a prescription medicine used for long-term treatment of adults with pulmonary arterial hypertension (PAH), which is high blood pressure in the arteries of the lungs. Being a recently FDA-approved medicine, J&J came to FCB to build the entire patient-facing site from the ground up. As the lead UI designer for this project, I collaborated with the brand team, development and account management to ensure we delivered a visually immersive site that inspires patients to begin this treatment.


View the live site →

OPSYNVI® is a prescription medicine used for long-term treatment of adults with pulmonary arterial hypertension (PAH), which is high blood pressure in the arteries of the lungs. Being a recently FDA-approved medicine, J&J came to FCB to build the entire patient-facing site from the ground up. As the lead UI designer for this project, I collaborated with the brand team, development and account management to ensure we delivered a visually immersive site that inspires patients to begin this treatment.


View the live site →

The Problem:
The Problem:
The Problem:

Being a new prescription medication, Johnson & Johnson needed a digital presence to introduce OPSYNVI® to patients. With limited brand guidelines (logo, core blue and yellow colors, and fonts) the challenge was to design a website that not only aligned with these elements but also established a cohesive digital brand identity from the ground up.

The website had to:

  • Educate patients about PAH and how OPSYNVI® could be part of their treatment.

  • Inspire trust and confidence through an engaging and immersive design.

  • Balance medical information with patient-friendly communication.

Desktop Screens

Mobile Screens

User Flows
User Flows
User Flows

The primary user flows for this site focused on two groups of patients: those who have been newly diagnosed with PAH and those who are currently treating their PAH with existing medications. The key difference between these flows is that newly diagnosed patients are encouraged to learn more about PAH by visiting the About PAH page prior to understanding how OPSYNVI plays a role.

Wireframes

UI Kit

Brand Guidelines

Logo

Colors

Typography

Photography

The Outcome:

The patient-facing website successfully established OPSYNVI®’s digital presence, inspiring confidence in patients exploring treatment for PAH. Through immersive visuals and accessible content, the design effectively communicated the medication’s impact while defining the broader digital brand identity for OPSYNVI®. Client feedback emphasized the site’s ability to balance engaging storytelling with clarity, setting a strong foundation for future digital initiatives.