Project Overview
Our client is launching a new medication for bronchiectasis, currently pending FDA approval. While awaiting approval, the focus is on creating an educational website aimed at increasing patient awareness of the disease. The site emphasizes disease education without making any claims about treatment effectiveness, offering a clear, unbiased resource for users to learn more about bronchiectasis and the management options available.
Product Design Lead,
Process
These were conversations I led from a Product Design perspective, supported by the Copy, Strategy, Development, UX, and Account teams. Each team brought their expertise to the table, helping us align on key decisions:
-
Name: Speak Up in BE – We wanted patients to feel empowered to speak up about this rare disease while giving them a voice to do so. BE stands for Bronchiectasis.
-
Visual Style: A clean, modern, and elegant design with a magazine-like feel to align with the patient demographic while keeping the cognitive load low.
-
Interactivity: Points of engagement such as animations, videos, and pop-ups were included to keep users engaged.
-
Performance Metrics: Tracked metrics included time on page, video views, sign-ups, and pages visited.
Layout
As we worked closely with UX, we transitioned into layout development to bring our look and feel to life in Figma. Staying true to our goal of achieving a modern and elegant aesthetic, we opted for a darker color palette complemented by striking black-and-white imagery. This combination not only establishes a polished, sophisticated tone but also ensures visual consistency and clarity across the site.
From a functionality standpoint, we implemented a static sub-navigation bar at the top of the page, allowing users to easily navigate between sections. Additionally, we integrated contextual cross-links throughout the experience to guide users to related content where it felt natural. This approach ensured users visited multiple pages with purpose and significantly increased sign-ups by strategically driving traffic to the registration page through in-page CTAs.
Once the storyflow and copy were finalized and approved by the client, we transitioned into full layout development and began incorporating additional features to enhance the user experience. A key addition was a "vortex" of symptoms, allowing users to click through and learn about each symptom in a more engaging and digestible way. To reinforce the "You deserve to be SEEN" message, we introduced subtle animation on the hero page, creating a dynamic and memorable first impression. We also added a Real Stories page, showcasing authentic patient perspectives to foster connection and relatability for users.
On the Real Stories page, we introduced an innovative feature that allowed users to submit their personal stories. Our team transformed these submissions into a collaborative "mural" piece. Each story was represented with a unique visual element, where user quotes and narratives were paired with AI-generated artwork (created using Midjourney). This dynamic mural not only brought the patient stories to life but also created a sense of community and empowerment, visually celebrating the diverse experiences of those living with bronchiectasis.
Results
The results for the full website were outstanding. Users visited an average of 2 pages per session, and an impressive 52% of users who landed on the sign-up page completed the form. Engagement metrics also highlighted strong interaction with the symptom vortex and video content, underscoring the effectiveness of the design. More importantly, the website succeeded in its primary goal: helping patients better understand bronchiectasis and the treatment landscape, earning praise from our client and delivering meaningful value to the patient community.
