Breathless
Jan 13, 2021
A one-page, high-impact educational experience empowering IPF patients and families through awareness, empathy, and action.
Executive Summary
Breathless.com was created as a patient-education hub for Idiopathic Pulmonary Fibrosis (IPF), developed for Boehringer Ingelheim as part of a broader multi-channel awareness campaign. The site intentionally avoided product-specific messaging to build trust and understanding among newly diagnosed patients, caregivers, and the general public. By combining authentic storytelling with strong UX principles and agile development, the project successfully increased patient engagement and informed CRM registration rates—while pioneering new, iterative ways of working for the agency.
Goals
Create a rich-media, one-page website to support a multi-channel campaign for IPF awareness.
Drive CRM registration and track engagement improvements across site metrics.
Educate patients and caregivers about IPF through trusted, authentic stories rather than promotional content.
Pilot an agile development process for the organization, improving collaboration and speed to market.
Discovery
The project began with the selection of our patient ambassador, Bernie, whose story became the emotional centerpiece of the campaign. Content creation was distributed across multiple vendors (video, CRM, and web).
Using Boehringer Ingelheim’s existing patient network, we hosted a content strategy workshop with IPF patients and family members to identify core messaging themes, tone, and content hierarchy. Insights from these sessions directly informed the wireframes, which were further validated through user-research interviews with a subset of the same community to ensure clarity, empathy, and alignment with patient needs.
Implementation
All visual design, specs, and development were managed locally, enabling a highly agile and iterative workflow—unusual for the agency at the time.
To prepare the team, I led a strategic overview session introducing agile principles, sprint-based reviews, and early stakeholder feedback loops. This pilot project became a model for future digital initiatives.
Due to budget constraints, we designed in Photoshop rather than Sketch but overcame those limitations by creating InVision prototypes for both mobile and desktop testing. This allowed for user validation of messaging and interaction patterns before development began, reducing downstream risk.
Outcome
Established a business case for Sketch licenses, demonstrating measurable efficiency gains and reduced rework.
Validated design decisions with real users, ensuring accessibility, empathy, and alignment with patient needs.
Set a new precedent for agile design at the agency, influencing future digital workflows.
Addressed accessibility and animation concerns proactively: although the anchor-link scroll animation was temporarily removed over seizure-risk concerns, we gathered follow-up data to support its reintroduction with the right accessibility affordances.
Performance Metrics
The project exceeded expectations for educational engagement, establishing itself as one of the most visited and time-on-page-rich IPF awareness sites at launch.
Metric | Result | Impact |
|---|---|---|
Average time on page | 4.7 minutes | Significantly above pharma-site benchmarks, demonstrating deep engagement with educational content. |
Scroll depth completion | 82% of visitors | Majority of users consumed full one-page story experience, including video content. |
Video engagement rate | 68% completion | High retention, reflecting emotional resonance and relevance of ambassador storytelling. |
CRM conversion rate | 14% | Moderate but quality-driven, as most registrants opted into ongoing education and updates. |
Bounce rate | 29% | Low for a single-page experience, confirming content relevance and clear navigation patterns. |
One page layout design for desktop:
Mobile design:
