PROJECT

Administration Comparison Tool for VYVGART Hytrulo

Administration Comparison Tool for VYVGART Hytrulo

UX/UI Design

Mobile Focus

Data Visualization

overview

The Administration Comparison Tool for VYVGART Hytrulo was developed to address a critical need: enabling patients to easily compare treatment options and understand the unique benefits of VYVGART Hytrulo. Recognizing that patients often struggle with complex medical information, the project aimed to create an intuitive, mobile-friendly interface that simplifies treatment comparisons. By integrating user-centered design principles with strategic business objectives, and navigating strict legal and regulatory requirements, the tool empowers patients to make informed decisions and engage in meaningful conversations with their healthcare providers.

DATE

January 24, 2025-

May 5 2025

MY ROLE

UX/UI Design Lead

TOOLS AND TECH

  • Figma

  • Adobe Illustrator

  • Adobe Photoshop

  • Workfront Proof

  • Jira

CORE TEAM

1 UX/UI Designer

1 UX Director

2 Developers

2 Strategists

1 Creative Director

3 Legal Reviewers

step 1: define the problem

Making Treatment Comparisons Clear and Accessible for Patients.

Making Treatment Comparisons Clear and Accessible for Patients.

This project balanced user-centered design principles with strategic business objectives, while navigating the constraints of strict legal and regulatory review.

The project was anchored by a set of clearly defined goals.

Galvanize patients

around VYVGART

Hytrulo’s benefits

Empower patients to learn about their treatment options and speak to their doctor

Cultivate an elevated experience for patients on VYVGART Hytrulo’s

website

We began by clearly defining the user problem to ensure our design decisions stayed anchored to real needs.

We began by clearly defining the user problem to ensure our design decisions stayed anchored to real needs.

User Problem

Patients struggle to compare treatment options, finding it difficult to understand why one medication may be better than another. They need a straightforward way to evaluate benefits and drawbacks across different treatments.

Step 2: research and inspiration

I evaluated the competitive landscape to identify gaps and opportunities for differentiation.

I evaluated the competitive landscape to identify gaps and opportunities for differentiation.

I analyzed competitors currently in the market to identify strengths, and weaknesses.

I analyzed competitors currently in the market to identify strengths, and weaknesses.

A few key insights emerged from competitive research:

  • Mobile layouts are often overwhelming and hard to navigate.

  • Tabs hide important information, making it difficult for users to see everything at a glance.

  • Charts feel clinical and intimidating, discouraging engagement.

I also researched how brands in other industries approach product comparison, drawing inspiration from outside the medical and pharmaceutical space to create a more innovative experience.

I also researched how brands in other industries approach product comparison, drawing inspiration from outside the medical and pharmaceutical space to create a more innovative experience.

Apple’s comparison tool offered a strong example of a clean, airy design with scannable information, supported by helpful iconography and imagery to guide users through dense, potentially overwhelming content.

Step 3: design

Testing Early Designs to Validate User Navigation and Functionality

Testing Early Designs to Validate User Navigation and Functionality

I kicked off the design process by creating early-stage wireframes and prototypes to facilitate team feedback and iteration.

I kicked off the design process by creating early-stage wireframes and prototypes to facilitate team feedback and iteration.

I designed three variations to review with the team and test with users to better understand their preferences.

I created initial designs to align with the team and test which functionalities were most intuitive for users.

I created initial designs to align with the team and test which functionalities were most intuitive for users.

Version 1 - Leaning into iconography and typography.

  • Inspired by Apple’s approach, I experimented with typography and iconography to make the information more digestible.

  • On mobile, I tested a horizontal scroll function, allowing users to swipe through the chart and easily compare treatment details as they progressed.

Version 1 - Leaning into iconography and typography.

  • Inspired by Apple’s approach, I experimented with typography and iconography to make the information more digestible.

  • On mobile, I tested a horizontal scroll function, allowing users to swipe through the chart and easily compare treatment details as they progressed.

Version 2 - Bold color and a toggle function.

  • In Version 2, I aimed to infuse more branding and experiment with a bold, unconventional design. On desktop, I retained the grid structure from Version 1.

  • On mobile, I introduced a new interaction—allowing users to toggle between treatments to compare them against VYVGART Hytrulo.

Version 2 - Bold color and a toggle function.

  • In Version 2, I aimed to infuse more branding and experiment with a bold, unconventional design. On desktop, I retained the grid structure from Version 1.

  • On mobile, I introduced a new interaction—allowing users to toggle between treatments to compare them against VYVGART Hytrulo.

Version 3 - A conservative and scaled back design.

  • Given the need to comply with strict legal reviews, I developed a third, more conservative option as a fallback.

  • This design functioned similarly to a chart, removing any type hierarchy or icons that might be seen as distracting.

  • On mobile, I flipped the axes from the desktop version and introduced an accordion-style dropdown. This allowed users to easily navigate categories while reducing cognitive load by letting them choose what they wanted to explore.

Version 3 - A conservative and scaled back design.

  • Given the need to comply with strict legal reviews, I developed a third, more conservative option as a fallback.

  • This design functioned similarly to a chart, removing any type hierarchy or icons that might be seen as distracting.

  • On mobile, I flipped the axes from the desktop version and introduced an accordion-style dropdown. This allowed users to easily navigate categories while reducing cognitive load by letting them choose what they wanted to explore.

User and stakeholder feedback from the first design iteration provided critical insights that shaped future improvements.

User and stakeholder feedback from the first design iteration provided critical insights that shaped future improvements.

Feedback from user testing, along with input from the team, guided the refinement and iteration of the design. The process surfaced several key takeaways.

step 4: A/B testing

Leveraging Early Feedback to Drive Design Improvements

Leveraging Early Feedback to Drive Design Improvements

  1. Both on desktop and mobile, an Important Safety Information (ISI) tray will be visible on the page, which partially obstructs the screen. To ensure users could still compare multiple treatment options at once, I carefully considered the height of each row, ensuring the design accommodated the ISI tray without compromising usability or clarity.

  1. During testing, I noticed users struggled with the horizontal scroll section—it wasn’t immediately clear that the scroll direction would change. This insight led me to realize that the mobile design needed to be revised, and one of the other designs would be a better fit for moving forward.

  1. Users reported confusion with the functionality of this design, as it wasn't immediately clear what action they needed to take. I realized we would either need to add instructional text or an icon to explain the functionality. However, this solution felt clunky and unnecessarily complicated for users.

  1. The team appreciated the simplicity of the third solution but felt it lacked visual interest, making the dense text feel overwhelming for users. We needed to find a way to add engaging elements without compromising the clean, straightforward design.

step 5: iterate

Refining the Design: Focusing on Meaningful Icons and Mobile Usability

Refining the Design: Focusing on Meaningful Icons and Mobile Usability

For the next design iteration, I narrowed down to a single concept based on user and team feedback. I focused on refining the use of icons — aiming to ensure they added meaningful context rather than serving as purely decorative elements.

On mobile, the experience adapted to flipped axes and leveraged purposeful icons and elevated typography to improve content hierarchy and readability.

The final iteration

The final iteration

For the third iteration, I was determined to keep icons in the design. I moved them from within the rows, to out in the column. This helped to differentiate the different column headings, while still using icons to create visual interest and break up the text.

Next Steps

Next Steps

  • Refinement & Testing: Continuously iterate on designs and conduct usability tests to assess how easily users understand and navigate the comparison tool.

  • User Interviews: Gather qualitative insights through interviews to explore user sentiment around VYVGART Hytrulo and identify opportunities for enhancing the comparison experience.

  • Traffic Monitoring: Track engagement metrics to evaluate if users are interacting with the tool effectively and completing desired calls to action.

© 2024 Sara Duval