top of page

Redesigning PDF Link Interactions for a Global Pharma Giant

Redesigned the product list experience for a global pharma giant by removing disruptive popups and introducing a scalable, accessible dropdown. Making it faster and easier for healthcare professionals to access essential documents.

Group 19_edited.png

🎯 Project Summary

As the Senior UX Designer for a global pharmaceutical company, I led the redesign of the PDF link experience on the product list page of their HCP (Healthcare Professional) platform. The existing popup-based interaction was cumbersome, inaccessible, and unscalable. My task was to replace the popup with a more intuitive, accessible, and future-ready solution. All while collaborating with cross-functional teams across drugs and vaccines divisions.

💼 Background & Business Ask

The Product List Page is a critical hub for healthcare professionals (HCPs) to access essential drug and vaccine-related information across this global pharmaceutical company’s ecosystem. The HCP platform is divided into 2 key portals: one focused on Drugs and the other on Vaccines. Each portal features 15 to 20+ product brands, each with its own individual website. These portals support distinct user journeys and provide access to downloadable resources such as Prescribing Information, Medical Guides, and product-specific usage information.

​

Business Request:
Remove the existing popup mechanism used to display multiple PDFs for a few drug products. The request was part of a broader initiative to reduce popups across the platform. However, no specific usability issue was initially cited.

🔍 Research & UX Audit

📌 Context

The HCP platform spans two major divisions: Drugs and Vaccines, each with its own portal. The PDF popups appeared only in the Drugs portal for three products — two dual-branded (with different document sets) and one with bilingual PDFs. Max PDF count per product: 6.​

​

✅ UX Audit Findings

  1. Cumbersome Flow: Accessing a single PDF required multiple tedious steps —

    Go to product > Click PDF link > View popup > Click desired PDF > View in new tab > Download PDF > Return to previous tab > Close popup > Repeat for next product

  2. Visual Redundancy: Product info ( generic name, dosing) was unnecessarily repeated in the popup.

  3. Limited Scalability: Popup wasn’t future-ready if PDF count grew.

  4. Poor Accessibility: Screen readers couldn’t distinguish between identical PDF link names across products.

  5. Low Visual Clarity: PDF links were underlined black text — hard to identify as links.

  6. Mobile Issues: Popups obstructed navigation, especially on smaller screens.

image_edited.png

🧭 Competitive Benchmarking

I evaluated 9 competitor healthcare professional platforms to understand how they present multiple PDF links to professionals. My key focus areas were:

  • Layout & Structure – Inline links, dropdowns, tabs, or grouped formats?

  • Labeling & Clarity – Are the document names meaningful?

  • Ease of Access – How many steps to reach a PDF?

  • Mobile & Accessibility – Is the solution mobile-friendly?

image_edited.png

💡 Ideation & Solution Exploration

Based on the findings, I brainstormed and tested multiple interaction models:

  • Inline Links (Vertical & Horizontal)

  • Tab Interface

  • Dropdown

All options were wireframed in FigJam and reviewed internally. We shortlisted Inline and Dropdown for high-fidelity design.

👉 Evaluation Summary

To compare layout directions systematically, I summarized the pros, cons, and ideal use cases for each option in this table:

image_edited.png

✏️Low-Fidelity Wireframe Explorations

Below are lo-fi wireframe iterations of the shortlisted options—showing different layouts and grouping strategies tested in FigJam:

lo-fi iteration_edited.png

We shortlisted Inline (Vertical & Horizontal) and Dropdown for high-fidelity design.

🎨 High-Fidelity Design + Accessibility Solutions

✨ Built 3 Variants:

  • Inline Vertical

  • Inline Horizontal

  • Dropdown

🔐 Accessibility Challenge Identified:

During a team review, a critical accessibility issue was flagged on the product list main page: screen readers couldn’t distinguish identically named links such as “Prescribing Information” across different products.​

image_edited.png

🧪 Accessibility Research & Solutions

To address the accessibility issue where screen readers couldn’t distinguish identically named links across products, I explored two potential solutions:

  • Hidden Assistive Text (Presented)
    A visually hidden span with the product name, announced only by screen readers.
    I shared this idea with developers using a mockup and sample HTML code to illustrate the logic.

​​​

  • Descriptive Link Names (Eliminated)
    E.g., “Prescribing Information – Hepatanix”
    (Considered but rejected due to UI clutter and excessive text)

image_edited.png
image_edited.png

🤝 Cross-Team Collaboration

I conducted 3 walkthroughs to validate the accessibility direction:

Internal Design Team (3 participants) (Design Lead, 2 Junior Designers)

I presented 2 accessibility options: Descriptive Link Names and Hidden Assistive Text. After discussion, we agreed to drop the Descriptive Link Names approach due to its space consumption and impact on visual hierarchy.​

Focused Stakeholder Review (8–9 participants) (Product Owners, Designers, Developers)
I presented the Hidden Assistive Text solution for feedback and validation. The group aligned on its clarity and usability benefits.

Larger Stakeholder Session (35+ participants) (Developers, Product Owners, Brand Team, Business Analysts)
I re-presented the Hidden Assistive Text approach. During the session, developers shared that an ARIA Label solution had already been implemented, offering equivalent screen reader clarity while integrating more smoothly with the existing codebase. Based on this input, we collectively decided to proceed with the ARIA Label solution.

📐 Design System Integration

To ensure consistency, scalability, and faster dev handoff, we built the dropdown using our existing design system components. This approach aligned with our team’s commitment to reusability and accessibility.​

​

Beside is a snapshot of the component library where the dropdown pattern is defined:

image_edited.jpg

✅ Final Solution Highlights

💡 Interaction Pattern: Dropdown component replaced the popup.

🛠 Accessibility Upgrade: All PDF links use ARIA labels — improving screen reader clarity and compliance with WCAG 2.0 AAA standards.

🖼 Visual Improvements: — 

  • PDF links color updated from black to primary (following brand’s link color standard)

  • Desktop, tab & mobile states (default, hover, click) defined

image_edited_edited.png
image_edited.png

📊 Impact & Results

Tested the final dropdown solution with the internal team, feedback was positive, highlighting clarity, fewer steps, and improved accessibility.

  • Reduced user steps: From 6 to 3 (no popup!)

  • Improved accessibility: WCAG 2.0 AAA for screen reader navigation

  • Scalable: Easily accommodates future PDF additions

  • Responsive & Mobile-Friendly: Seamless access to critical content across all screen sizes.

  • Clarity: Enhanced link recognition with visual styling

The solution is now with the legal team for compliance approval, post which development will begin.

🔚 Reflection

This project demonstrated how deeply understanding real user pain points — beyond surface-level business asks — can transform both user experience and accessibility. By combining UX auditing, accessibility research, design system components, and stakeholder alignment, I delivered a simple, scalable, and inclusive solution for a high-stakes healthcare platform.

bottom of page