Niagara.A patient-facing site for IMFINZI in muscle-invasive bladder cancer.
A calm, trustworthy patient experience for AstraZeneca's IMFINZI perioperative regimen in muscle-invasive bladder cancer — translating dense clinical evidence into something a newly-diagnosed patient can actually absorb.
Ten months, one UI design lead, a medical-legal review cycle measured in weeks, and a visual system that had to feel warm without undermining clinical credibility.
My role
UI design lead. End-to-end.
- 01Led UI direction across responsive breakpoints, setting the visual and interaction language.
- 02Partnered daily with content strategy, medical-legal review, and engineering to translate evidence into clear patient-facing UI.
- 03Built the component library — buttons, cards, data viz, dosing tables — and documented the patterns for handoff.
- 04Owned the accessibility pass: contrast, focus, screen-reader order, and plain-language reviews.
The brief
How do you explain a two-year treatment journey?
Clinical density vs. patient comprehension.
The source material was a 200-page trial protocol. The audience is someone who just got diagnosed last week. Every decision had to negotiate that gap.
Regulated copy can't feel cold.
Med-legal guardrails are non-negotiable, but warmth can't be an afterthought. The tone had to carry empathy without hedging the science.
Side effects are a feature, not a footnote.
Patients browse for side effects first. Burying them behind a collapsed section would have been a trust failure.
Mobile carries the weight.
Oncology sessions happen on phones, often late at night. The smallest breakpoint had to feel like the primary experience, not a concession.
Direction
Clarity as a clinical commitment.
The UI had to do three jobs at once: explain the regimen, earn trust, and guide patients toward a conversation with their doctor.
I treated each section as a decision-support surface rather than marketing copy — every card, every chart, every heading had to answer a question a newly-diagnosed patient actually asks.
- Calm, ivory-toned palette distinct from the aggressive corporate blue of most pharma sites.
- Display-weight typography for emotional resonance at the moment of first visit.
- Evidence cards that lead with the stat and back it with source, not vice-versa.
- Phase-based treatment map as the site's visual anchor — the component the whole IA hangs on.
Guardrails as creative input.
Medical-legal review, WCAG, and patient-literacy targets shaped every artboard. I treated the constraints as the problem statement — which made the system tighter, not looser.
One system, many surfaces.
- Dosing tables, evidence cards, and phase maps built from the same tokens.
- Figma variants mapping 1:1 to engineering implementation for clean handoff
WCAG 2.2 AA, no compromises.
- Minimum 4:8:1 contrast on body text across all branded components
- Plain-language review on every headline. Flesch-Kincaid grade 7 ceiling
Voice
Warmth without sentimentality.
Patients arrive in one of the hardest weeks of their lives. The UI had to slow them down without condescending, pace the information, surface a clinician's voice at the right moments, and leave space for emotional weight.
We A/B-tested two tone directions with a small patient advisory group. The warmer variant, softer serif, ivory grounds, and first-person clinician quotes outperformed the clinical-neutral variant on perceived trust and intent-to-ask-your-doctor.
Direction
Mobile as the primary surface.
We designed mobile-first not rhetorically but mathematically, 74% of patient sessions in oncology start on a phone, often at night, often on cellular.
Every component was pressure-tested at 395px before being promoted to larger breakpoints. Desktop is additive; it doesn't carry the experience.
- Four breakpoints - 395, 768, 1024, 1440 - each with its own typography and spacing scale.
- Treatment journey collapses to a vertical phase timeline on mobile, no loss of info hierarchy.
- Side-effect tables reflow to a card stack with persistent headers rather than a cramped scroll.
- Sticky resource nav so "talk to your doctor" is one tap from any scroll depth.
Voice
Shipped, measured, iterated.
Launched on time, cleared med-legal on the first full cycle, and measured healthy engagement on the phases-of-treatment component — the site's primary comprehension signal.
A round of post-launch usability testing with newly-diagnosed patients surfaced two quick wins (a plain-language glossary and a side-effect severity legend) that shipped in the first iteration.
01 · Homepage + Clinical trials
Niagara sharpened my ability to lead design inside regulated environments, holding empathy, clarity, brand, and compliance in the same frame without letting any of them flatten the others.