PROJECT
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
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
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
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.
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
I designed three variations to review with the team and test with users to better understand their preferences.
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
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.
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.
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.
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
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.
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.
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.
