TEZSPIRE.COM

Iterating On Patient Website Needs

Project Brief

TEZSPIRE is an asthma medication by AstraZeneca that proactively helps reduce inflammation in patients with severe asthma. As a new medication in the market, the website objective was to empower consumers and prospective patients with tools and resources in order to have the right conversation with their specialist to initiate treatment. The opportunity to differentiate from existing competitors lies in the strategy approach - by focusing on the emotional burden of the disease and how TEZSPIRE can relive that burden, not just for some, but for all.

Audience

Tezspire.com targets those who live with the apprehension caused by the unpredictability of severe asthma. The website aims to address prospective patients regardless of where they are in their patient journey.

Relevant Acronyms

  • CEM: customer experience map

  • DTC: direct-to-consumer

  • SUA: severe uncontrolled asthma

  • QOL: quality of life

  • PSP: Patient Support Portal

Deliverables*

Create a Day 1 Consumer Branded Website with full information, features, and pages that will turn off and function as the immediate FDA approval consumer Day 0 launch website

  • Day 0: January 6, 2022

  • Day 1: January 17, 2022

Incorporate branded campaign imagery into the branded website for an integrated media/marketing-to-website experience as outlined in the CEM

  • DTC: April 17, 2022

*Day 0 (FDA-approval launch) is a bare-bones website announcing the new medication immediately upon FDA approval. Day 1 is the complete website, typically launched some time after the Day 0 launch to account for potential regulatory or legal information changes. The DTC website in this case is mainly cosmetic changes incorporating the Be You campaign.

Design Background and Process

Customer Experience Map (CEM) and User Stories

Specific content strategy for each journey stage of the Consumer Experience Map listed. My work focuses on the branded website, tezspire.com.

The Customer Experience Map (CEM) outlines a patient’s journey from asthma education and management, all the way to successful treatment on TEZSPIRE. The branded website, tezspire.com, acts as a central point for potential patients to be informed and inspired to move to the next phase, which is discussing a TEZSPIRE treatment plan with their asthma healthcare provider.

With the CEM and content strategy established, I created user stories to identify the content and features necessary for a comprehensive web experience. I also consulted AstraZeneca’s component design library to suggest potential modules to use for each feature and estimate the level of effort for development.

Implementation

Sitemap

Based on the identified content and features needed, I created the following sitemaps for Day 0 and Day 1. After the Day 1 website was launched, the team began discussions with the client on changes to include for the DTC website, including campaign character introductions, a Patient Support Portal (PSP) module, a Cost & Affordability page, and other content order modifications.

Grayscale Wireframes

Astrazeneca’s component design library allows developers to quickly produce websites across all their products - utilizing the component library documentation, I mocked up some quick ideas to showcase desktop and mobile views of features we identified as necessary to meet the users’ information needs.

  • Green commentary: context regarding content, user stories, and heuristic justification

  • Blue commentary: hypothetical user interaction notes based on component library documentation and best practice

  • Black text: potential component usage and predicted customizability level

After in-depth discussion with the client development team regarding feature feasibility and customization, I created the following grayscale desktop and mobile wireframes for Day 0 and Day 1.

Unfortunately, due to the rigidity of the design system backend and the complex process required for even simple customization, many of my previous module designs were not implemented.

Click here to view grayscale Figma prototypes

Final Designs

While I organized the layout and worked with the client development to determine which components to use, the team simultaneously worked on creating copy content and applying the brand style into the wireframes. Immediately after the Day 1 launch, we began to optimize campaign imagery to add to the DTC website launch, as well as address additional client requests. 

Click here to view the DTC Figma prototype

 

Retrospective

 

  • Working with a prescriptive design system, even with ample documentation, provided a challenge and opportunity to showcase content and engage users uniquely and creatively within the restrictive boundaries.

  • Identifying the type of content needed does not directly translate to meaningful design. Communication with the development team is necessary to assess feasibility and capacity.

  • Understanding the scope of the CEM provided context on what the website objective is and how content should be organized and designed to achieve it.

  • Always triple check that design requests are compatible with design and development capabilities before starting to prevent redundant effort and time.