What I did.
End-to-end UI ownership — from client buy-in pages to production-ready, developer-handoff Figma files.
- 01Designed every page of the website, from key pages used for client buy-in through final production layouts
- 02Extended and refined an existing agency design system
- 03Owned visual hierarchy, typography, spacing, and component usage across desktop and mobile
- 04Designed complex educational UI under strict pharmaceutical regulatory constraints
- 05Prepared files and annotations for developer handoff in Figma
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.
Three tensions at the core.
This project had three core UI challenges — each a balance between emotional care, medical accuracy, and regulatory reality.
Patients are anxious and cognitively overloaded
Patients are anxious, overwhelmed, and often processing life-altering information.
Treatment spans multiple phases over a long time horizon
The MATTERHORN regimen includes multiple treatment phases over a long time horizon, which needed to be understood holistically.
Safety and regulatory content cannot be hidden or deprioritized
Critical safety information could not be hidden, and layouts needed to accommodate evolving copy through regulatory review.
The UI needed to reduce cognitive load without oversimplifying medical reality.
Clarity as an act of care.
Three lanes — clarity, technique, and compliance — stacked so the page reads calmly under medical, regulatory, and emotional load.
Clarity first
- Body copy set at 18px to improve readability for older and visually impaired users
- Generous white space to reduce visual clutter and anxiety
- Clear grouping of content to support scanning rather than linear reading
- Hierarchy driven by typography and spacing first, imagery second
Techniques used
- Progressive disclosure to surface essential information first
- Calm color palettes aligned with brand but softened for patient contexts
- Consistent rhythm across pages so users always knew “where they were”
Accessibility & compliance
- Designed to WCAG 2.2 AA standards
- Flexible layouts to accommodate evolving regulatory copy
- Safety information integrated into hierarchy without overwhelming the page
The IMFINZI treatment journey.
The core UI challenge was explaining a treatment journey that can span up to two years.
I designed a three-phase treatment visualization that allows patients to:
- View the journey holistically
- Understand what happens before surgery, after surgery, and during continued therapy
- Absorb complex information at a controlled pace
This component went through multiple iterations to balance patient comprehension with stakeholder expectations — and became the visual anchor of the site.
Systemized, not constrained.
Deferred, not forgotten.
Motion was planned to support pacing and comprehension but intentionally deferred due to development constraints, with future updates scoped for proper implementation.
Currently in development.
The site is currently in development. The experience is designed to:
This project strengthened my ability to lead UI design in highly regulated environments, balancing empathy, clarity, brand, and compliance without compromising usability.
Live surfaces
In the wild.
