AstraZeneca – Creating an interactive platform for patients with breast cancer

Laptop with the AstraZeneca Brustkrebs website displayed
During my time at Superhero Cheesecake I’ve had the possibility to work with amazing clients to create impactful digital experiences. One of these clients was AstraZeneca. I helped them create an interactive web-experience, focussed on helping breast cancer patients.
Client
AstraZeneca
Role
UX-design / Interaction design
Platform
Website

The challenge

Creating a new way of showcasing breast cancer in the human body

When looking for information about breast cancer, one often encounters dense, scientific articles that can be challenging to comprehend, given the abundance of technical terminology. Recognising this gap, AstraZeneca identified an opportunity to solve this problem. They approached us with a unique challenge: to design an interactive platform that offers a comprehensive exploration of breast cancer within the human body.

Research

Key insights in the research phase

Breast cancer patients most of the time have no clue what is happening in their body. When getting diagnosed they get a lot of information which is hard to remember in such a short period of time.

There are a lot of information pages about the topic, but they are almost all articles. None of them gives you a good visual overview of what is happening.

Defining

Working out the concept: Brustkrebs

We created a visual representation of what is happening in your body with treatment options, articles and testimonials. In this interactive platform you can go trough the different stages of breast cancer, look into articles that are relevant to you and bookmark these. Your bookmarked page can be shared with friends and family to give them a better understanding of the situation, or to create an overview for yourself.

Note: The platform is enrolled in Germany and will be advised by doctors who give the diagnose

Brainstorming and setting the user flow

After getting briefed on the project I got into a brainstorm with the creative team. The goal of this brainstorm session was to set up How Might We (HMW) questions, generating ideas and creating a user journey.

The process was as following:
Introduction → setting up goals → Research questions → Creating user journey → Brain-writing → Creating HMW questions

We created an insightful user flow out of this brainstorm session and came up with the goal:
“Educate breast cancer patients and their loved ones by providing them all the information they need to take away the feeling of being helpless”.
Miro board with different sticky notes showing the creative process

Ideation

Iterating on an already existing design

The brainstorm session was created around an already existing design (as seen in the image below). The design was made to create a tone-of-voice for the final design, but wasn’t user friendly.
First design of the Brustkrebs website
I found out that the way of navigating through the platform didn’t work and that the information was too hidden for the users. The clickable points on the body also weren’t worked out in a right way. It was all too focused on the design with too little eye for the users.

Back to doing research

In order to redesign the current design I had to create a better understanding of breast cancer. I read many articles and interviewed people from AstraZeneca. I also got a test report from them based on our current design.

Next to getting a better understanding of the topic, I also found out about the TNM classification. This is the classification which diagnosed breast-cancer patients get. The T stands for how big the tumor is, the N stands for whether it has spread to the lymph nodes and the M stands for if it is spread even further.

Because there are a lot of variations of the TNM classification, it was a big challenge to create an uncluttered navigation so each patient can navigate directly to the for his/her relevant page.

Wireframes

Creating the new designs

After doing some research I started redesigning the current design by wire-framing. I used Figma for this. The images and text below show some design details and made choices.

Type of cancer
This was a page that was added because there are multiple types of breast cancer. Each type has different treatment options and are shown different visually. An important choice for this page was to skip this step so people who just visit to explore don’t have to make a hard choice of selecting a specific type of cancer (without knowing what it means).

Wireframe of the breast cancer type selector
Overview page
The first page were the user lands on after selecting a type of cancer is an overview with a 3D model. On this page the user can scroll through the 3D model and see the green spot changing based on the stage and TNM classification they are on. The navigation is made so that the user can quickly change their type of cancer, access their bookmarks and manage (login/sign up) their account.

On the left there is a TNM searcher. This was made so that users can instantly jump to the for them relevant TNM classification. This way the user doesn’t have to scroll through every stadium.
Under the TNM searcher there is a side-menu which shows in which stadium you are. The user can click or scroll through this menu.

The last asset on this page is the description and call-to-action (CTA). These are located on the right of the 3D model. Under the stage 0 header you see in small ‘Tis’, This is the TNM classification you are on at the moment. In this stage there is only one TNM classification, but at other stages this is an important switcher. When changing the TNM, the 3D model will also change visually. Under the TNM switcher you have a brief description of the stage and TNM you are in, and the CTA will give you more information about the stage you are in.
Wireframe of the Brustkrebs overview page
More information
When clicking the CTA (on the previous image) you will get on the information page. This page gives you an overview of treatment options, articles, videos and more. It has been designed so you still see in what stage you are (visually) and supports it with information. Every article is sharable and can be bookmarked so it is easy to collect and share relevant information.
Wireframe of the breast cancer stage overview page

The result

AstraZeneca's Brustkrebs: An interactive experience

Note: The website is in German because it is launched for AstraZeneca Germany
Start page of the Brustkrebs website experienceAstraZeneca overview page showing the different stages and a woman holding her arm up to showcase the lymph nodes under her arm AstraZeneca's TNM selectorAstraZeneca breast cancer stadium overview