Breast Cancer Informational Website

"Es geht um mich" is an Austrian breast cancer awareness organisation. They focus on providing people diagnosed with breast cancer with detailed information on the illness and the impact it might have on different aspects of their lives. Historically, the organisation provided a printed informational guide to cancer patients, but to make its content more accessible to a wide range of people they wanted to build a website that people can access wherever they are.

‍

My role in the project

I was the only UX Designer on this project and responsible for creating the responsive website from conception to delivery. Key tasks included researching and analyzing competitors, conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.

The visual look of the website utilised key elements from the printed guide, like icons, patterns and colours, which were created by a creative agency.

‍

Project goal

The main goal of the project was to design an responsive informational website to host the content from the breast cancer guide in an accessible way. With a logically navigable flow of screens, clearly distinguishable sections and recurring "Tips & Resources" suggestions users can browse the websites content easily. Since the visual look of the website is similar to the printed guide users can feel reassured, that they can now find the guides's informational content in a digital way and they are two complimentary products.

‍

Target audience

The primary user group identified through research was people diagnosed with breast cancer, predominantly over the age of 60. A secondary user group identified was friends or family members of breast cancer patients, who wanted to inform themselves about the impact it might have on their loved ones.

‍

Key challenges or constraints

— The printed guide includes a lot of written information, which all needed to be included on the website

— There were limited visual elements or photographs to break of the text

‍

Research study details

I conducted interviews and created empathy maps to understand the users I‘m designing for and their needs. Research revealed that it is difficult for users to find reliable and detailed information on breast cancer and its impacts in one place. Many users also felt that information on the internet was often too technical and did not consider their lifestyle. Competitor organisations heavily use printed materials and do not embrace digital technologies as much as they could. Even though the target audience for this type of content is generally older, a significant amount use the internet at least several times a week.

‍I identified the following user pain points:

• Level of detail of information: Users want to find detailed information in one accessible place
• Navigation: Users prefer a logical navigation structure and the ability to move between sections in a similar way than when using the printed guide
• Personal: Users prefer content that feels personal and not overly scientific
  ‍

‍

Personas

Nina is a recently diagnosed breast cancer patient who needs a way to find reliable information about the illness online because she wants to be able to inform herself about the impacts it might have on her live and share information with her loved ones.

“I would love to find a website where I know it can answer all the questions I might have about breast cancer at how it might affect my life."

‍

Sophie is a university student with a family history of breast cancer whose mother was recently diagnosed. She needs to find useful tips and resources online so she can better understand what her mother is going through.

“Most breast cancer information on the internet is overly scientific — I just want to find information that is real-life and actually relevant to my mother.“

‍

Initial design concepts

I started the design process with paper wireframes. Taking time to draft iterations of each screen of the website on paper ensured that the elements that made it to the digital wireframes were well-suited to address users’ pain points. I started with desktop wireframes and then drew up iterations for tablet and mobile.

‍

Wireframes

I then transferred my initial paper wireframes to digital wireframes using Adobe XD. As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research. It was important to users to be able to identify the different sections from the printed guide and see them reflected on the website. In addition, users needed to be able to navigate between sections with ease.

‍

Low-fidelity prototype

After completing wireframes for all screens, I created a low-fidelity prototype, so that it could be put to the test in a usability study with users.

‍

User testing results

I conducted two rounds of usability studies. Findings from the first study helped me guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and highlighted which aspects of the design still needs refining.

‍

Round 1 findings highlighted that:

• Users additional navigation elements that link sections of a single page and allow them to move quickly to relevant content
• Users want to have breadcrumbs at the top of the page so they know exactly where in the website they are and how to get back to the previous category
• Users want a "back to top" button at the bottom of each page

Round 2 findings highlighted that:

• Users want to have mobile content in boxes, so they don't have to scroll so much
• Users would like the option of having adjustable font sizes

‍

High-fidelity designs

Using user testing results as a basis to design high-fidelity screens.

Conclusion & learnings

While designing the responsive website for "Es geht um mich" I learnt how important it is to really understand the needs of your target audience. At the start of the project I was worried, that the website will be too text-heavy and lack interesting visual elements, yet user research confirmed that the target audience wanted to find exactly this amount of detail and not be distracted by modern, interactive visual elements.

I would have liked to implement some additional accessibility features, especially the option to manually increase text sizes, because the majority of users are 60+ years of age and some might find the current text sizes a struggle to read. However, budget and time restrictions meant this feature could not be added at this point, but will be something worth considering in future updates.

‍

‍