Encouraging young adults to
self-check in hopes of reducing late stage cancer diagnosis

UX/UI Design

AR-focused mobile app for an educational charity to improve their mobile experience and optimize their global reach. The Self-Checkout tool allows users to learn more about breast awareness in hopes of reducing late-stage cancer diagnosis.

coppafeel thumbnail.png

PROJECT OVERVIEW
The Kick-Off

Project type:

Timeline:

Role:

Tools:

Academic 

1 week Design Sprint

UX Researcher, Design Strategy, UX/UI Designer 

Figma, Invision, Photoshop, Illustrator

During this design sprint, we aimed to design for social good. We collaborated towards the creation of a meaningful digital product. Myself and two other UX Designers were given the task of increasing the value of an existing non-profit organization, prompted by the How Might We:

 

"How might we help social impact organizations express their value, and inspire people to take action in order to drive positive change?"

 

Using the 5-day Google Sprint Method, we looked into areas of opportunity for the charitable organization known as CoppaFeel! They are a UK-based breast cancer awareness charity that educates young people about self-checking. My team created an AR-focused mobile app for the charity using their existing brand assets. We created a digital solution to increase the number of self-check users and optimize their global reach.

mockup.png

ABOUT
CoppaFeel!

Coppafeel’s mission is to stamp out late detection and misdiagnosis of breast cancer by ensuring that people know the signs and symptoms, know what their boobs look and feel like normally, check their boobs regularly throughout their lifetime, and have the confidence to do so.

 

They aim to raise funds to drive awareness and education campaigns to help 18-30 year old people check their boobs. Ensuring that no one dies of breast cancer because of late detection or misdiagnosis is their company vision.

COPPAFEEL
Self-Checkout

​CoppaFeel! recently released their online web tool known as the Self-Checkout, which is a user guide for navigating chest health and knowing how to properly check. The self-checkout tool is crucial to the organization but lacks clarity and accessibility when navigating it. Currently, Coppafeel! does not have any mobile apps that allow their users to easily access these information and tools offline.

 

We evaluated their current organization and improved their mobile experience and optimizing their global reach.

about coppa.png
unnamed.png

EMPATHIZE

COPPAFEEL
Problem Space

Due to COVID, CoppaFeel! has been impacted in a variety of ways, with the largest being the adaptation of their programs to run virtually - this was an opportunity we focused on.

 

Some issues that CoppaFeel! are facing include:

  • Suspension of physical outreach and events due to the coronavirus

  • Decrease of reach and education amongst young people

  • 90% of their projects were canceled and 40% of programs adapted to run virtually

How could we bridge the gap between their local users and those who are international and looking to use their tools and insights?

PROBLEM SPACE
Secondary Research

Some of our biggest insights when researching is how many people can detect Breast cancer themselves, and how many don’t know how to do it properly

25% 

of women survivors detected breast cancer through self-examination

Doctors recommend that women in their

20s

1/5

of young women are scared to visit their doctor with any concerns they have due to fear of catching COVID-19

begin regular breast self-examinations to understand what looks and feels normal for their breasts.

As well, we found some background on reasons why people struggle to check themselves.

 

Sexualization and Breast Cancer

 

  • Focus exclusively on breasts as a sexualized body part 

  • Women are often not referred to or portrayed in their entirety

 

Breast cancer is not ju a cis-female issue

 

  • Folks who do not identify as women or have had mastectomies are still at risk for breast cancer

ASSUMPTIONS & CONSTRAINTS
Digging Deeper

To proceed, we created some assumptions

 

  • Young people don’t check themselves often (once a month) enough for breast cancer

  • People don’t know how to check themselves properly

  • Non-cis folks don’t feel included in breast cancer-related campaigns

  • Folks have a hard time finding information about what feelings are right, and which are wrong

  • Young people in our target area all have and use smartphones

 

Constraints

Socio-Cultural Limitations

  • Non-cis females aren’t educated about their chest health

  • Women's bodies and breasts are constantly sexualized which makes talking about their bodies difficult

BASED ON ASSUMPTIONS
Protopersona

we then created a protopersona based on our assumptions to align the needs and behaviour of our target audience.

PROTOPERSONA.png

PRIMARY RESEARCH
Understanding the User

To understand the “why” behind the problem, we conducted six 30-minute interviews with young Canadians between the ages of 23-26 who are at risk- about breast cancer and their self-exam process 
 

interviewee.png

UNDERSTADING THE USER
Interview Guide

Interview topics:

  • Breast cancer awareness

  • Self-exam information

  • Self-exam tools/support

Interview criteria:

  • Young adults (ages 18-30)

  • Have or have had breasts

General Questions

  • What do you know about breast cancer?

  • Do you know someone who has experienced breast cancer before?

  • How did/does that make you feel?

  • Why do you think that self-awareness and education regarding your chest area are important?

  • Describe to me a time (does not need to be in detail, whatever you are comfortable with sharing) when you performed a self-exam.

  • Describe to me your level of education regarding breast health.

Specific Questions

  • How often do you self-check your chest area? (daily, weekly, monthly, quarterly, etc.)

  • How do you feel when doing a self-check?

  • How do you know that you are checking yourself correctly?

  • Where did you gain insights into correct self-exam procedures?

  • What are some things that would increase your confidence when it comes to self-exams?

  • Do you currently use any tools that assist you with self-exams?

  • What are some features you would like for educating yourself about breast health?

Group 25.png

LACK OF KNOWLEDGE

“I need more knowledge in regards to how to check, what to look for, and what a healthy boob feels/looks like”

“I don’t know major causes of breast cancer nor if there’s anything I should do to properly prevent breast cancer”

“I’d like to know more about what I can do at home to prevent/check up on breast cancer examinations”

Group.png

LACK OF SUPPORT

“I wish I had something to guide me through it but that’s also such a personal and intimate area of the body so I don’t know how that’d work from home.”

“I definitely feel worried and scared that I will find something wrong or abnormal.”

“ I am not the greatest at keeping track of changes.”

“ I think a way to encourage chatter about this amongst my friends and family would be neat.”

Vector.png

CONFUSION

“A guide or a tutorial on how to perform self exams would increase my confidence”

“I routinely perform self exams (once a week) but I don’t know if I’m doing it correctly”

“I feel okay doing  self check, but I wish I knew what I was looking for”

UNDERSTADING THE USER
Interview Insights

After completing the interviews, we combed through the interview notes, classified quotes as pain points, motivations, or behaviors, and used empathy mapping to extract three main themes and insights: lack of knowledge, confusion, and lack of support.

 

People didn’t know much about breast cancer nor how to self-check & those that do self-check didn’t know what they were looking for or if they’re doing it correctly, so having a support system to guide them through the self-check process is what people are looking for. 

PAIN POINTS, MOTIVATION, BEHAVIOUR
Interview Insights 

From the interview themes, we broke it down even further to better understand user goals, motivations and pain points.

GOAL

Detect breast cancer symptoms in the earliest stages

More knowledge in regards to how to check and what to look for when self-checking

An easy to use guide to encourage users to self-check

MOTIVATION

Get into a routine of self-checking regularly to reduce late-stage diagnosis

Convenience and ease of self-checking through a mobile app

To find an inclusive and accessible solution for self-checking

PAIN POINTS

Lack of knowledge into proper methods for self-checking

Trouble with keeping track of when the last self-check was and when to do it next

Not sure where to find inclusive and assistive support when self-checking

DEFINE

PERSONA
Uncovering the Moment of Opportunity

From the interview insights, we developed the persona of Lorena Boucher. She’s active and does basic things to keep herself in good health but often doesn’t know what to look for or do when complications arise. Lorena is uncomfortable in the doctor’s offices and likes to solve problems on her own.

 

She’s curious to learn more about breast health since breast cancer runs in her family. She tries to perform self-exams but doesn’t know if she’s doing it correctly as she’s unsure what normal breasts are supposed to feel and look like.

PERSONA.png

Having a deeper understanding of my persona, her main pain points,  it was important to revisit my "How Might We" statement and make any necessary revisions to ensure that it still best framed the problem at hand:

REVISED DESIGN CHALLENGE

Hmw support and encourage young people to routinely check for breast cancer symptoms in order to detect it in the earliest stage?

COMPETITIVE ANALYSIS 
Understanding the Market

After analyzing the Coppafeel brand and Competitors we made a map to evaluate our community impact and information complexity. We evaluated our space within the landscape based on the following criteria:

 

Community vs Independent

Does the app have forums, events & webinars or is it for a lone user?

 

Simplicity vs Complexity

Is the information basic or dense?

Group 20.png

IDEATE

UI INSPIRATION
Exploring Solutions

We then took to the internet to find some UI Inspo, checking existing apps within our niche and outside for features we could include.

UI board.png

SKETCHING
Design Process

We ran through a thorough design process of sketching, debating and ideating. We ran many crazy 8s and solution sketches were drawn to flesh out what features we wanted in our app, we then voted on our favourite screens and ideas helped to determine what our app would look like

PXL_20210608_204827009 1.png
PXL_20210608_204953640 1.png
PXL_20210608_204849911 1.png
PXL_20210608_204924463 1.png
PXL_20210608_204939481 1.png
PXL_20210608_204906242 1.png

USER STORY
Design Process

Then we envisioned what our users will experience and how they will travel through our app

Group 24.png

DESIGN PROCESS
Task Flow

Based on the user story, we created a task flow.

TASK SELECTION

Perform a breast self-check and add a monthly reminder

USER STORY

As an unorganized and unsure young person, I want to accurately perform a breast self-check and set reminders for myself so I can feel confident about my breast health.

task flow.png

DESIGN PROCESS
Story Board

We then created a storyboard of Lorena’s experience self checking.

CoppaFeel Storyboard 1 1.png
CoppaFeel Storyboard 2 1.png

PROTOTYPE

WIREFRAMES
Ideating Solutions

From the series of sketches we developed, we highlighted different ideas, features, and components to incorporate into the first round of low-mid-fidelity grayscale prototypes. Developing and working with grayscale prototypes allowed us to quickly iterate and test out components, layouts, information hierarchy, and screen flows before adding a visual identity.

wireframes.png

TEST

USABILITY TESTING
Gathering Feedback

During the wireframing process, we conducted usability tests on five different individuals to obtain practical, real-time feedback that was incorporated to improve the design and deliver a more frictionless user experience. To bring clarity and consistency to my testing we devised a Testing Plan outlining the steps to validate my design assumptions, smoothness of the overall flow and to see if the app’s functions and features helped the user achieve their goals.

USABILITY TEST OBJECTIVES

  • Gather honest feedback in real-time

  • Reveal friction points in the task flow

  • Uncover gaps in the experience

  • Discover actionable findings that can help improve the design

EVALUATION TASKS

The tasks the testers were asked to complete include:

 

Task 1: Signing Up & Setting Preferences

 

Task 2: Performing a Self-Check

 

Task 3: Seeking Additional AR Assistance during Self-Check

 

Task 4: Setting a Reminder for Monthly Self-Checks

USABILITY TESTING
User Testing Findings

Our testing revealed we had a lot of elements missing for accessibility, like progress bars for location purposes, exits and back buttons, and confusion arose during the self-check process when flagging problems and finding help. Below were the 5 issues that stood out:

  1. Lack of progress bars for location during onboarding

  2. Unclear how to flag a problem during self-checkout

  3. Unclear iconography

  4. Lack of understanding into why this app is necessary and important to use

  5. Lack of exits and back buttons

We inputted the findings into a prioritization matrix to best determine what elements are most valuable to the users and the organization.

Group 5.png

DESIGN

COPPAFEEL BRAND COLORS
Injecting Life into Design

After completing user testing, we enhanced the user experience by translating the grayscale prototype into a high-fidelity prototype by developing and applying a visual identity to the digital product. We kept true to CoppaFeel’s brand and identify by maintaining their brand guidelines when designing the task flow.

Group 32.png

INCORPORATING FEEDBACK
Journey to Hi-Fidelity

Below are the major changes applied to our final prototype based on the user testing results

Major change #1:

we updated our icons during the self-check process to better describe their actions and revised the copy to be more indicative of what the user should be looking out for in terms of signs and symptoms.

Screen Shot 2021-09-09 at 11.17 1.png

Major change #2:

Adding in page progress bars at the bottom helps the user understand where they’re at exactly during onboarding.

Screen Shot 2021-09-09 at 11.18 1.png

Major change #3:

Editing the copy on the welcome screen lets users understand better the purpose of this app and the tools it contains.

Screen Shot 2021-09-09 at 11.18 2.png

HIGH-FIDELITY PROTOTYPE
Enhancing the User Experience

After injecting CoppaFeel’s visual identity into the prototype, and implementing the findings, we were able to create our final prototype.

coppafeelmockup.gif

HIGH-FIDELITY PROTOTYPE
Interactive Design

Looking at the high-fidelity prototype, we can see the three main benefits that the Self-Checkout offers:

Feature 1: Inclusive Preferences

4 Pref - Age Filled.png
5 Pref - Size Filled.png
3 Pref - Terms Filled.png

Users can select imagery and terms that fit what they identify with

Feature 2: Helpful Wizards

11 Self Check 2.png
11 Self Check 4.png
11 Self Check 3.png

Various options for obtaining assistance while in-app for better accessibility 

Feature 3: Reminders

17.2.png
18 Reminders - Empty.png

Users can set up a monthly self-check reminder so that they can make this into a routine.

DESIGN DECISIONS

DESIGN DECISION
Accessibility & Inclusivity

We took accessibility and inclusivity into consideration when designing. Users are able to set their preferences from a range of inclusive options. We introduced a wizard that guides the users during the self-check process to eliminate any confusion, on top of this users are also able to obtaining further assistance from our visual and audio guides.

 

  • Inclusive Options: Users can select imagery and terms that fit what they identify why 

  • Accessibility: Various options for obtaining assistance while in-app

  • Progress Bars: Knowledge of what is ahead and ability to skip through

DESIGN DECISION
Value to the Organization

We kept true to Cop pa Feel’s brand and identify by maintaining their brand guidelines. We want to connect their users with an explore page so they can learn more about CoppaFeels’s initiatives and join in on virtual events.
 

  • Branding: Maintains CoppaFeel! brand guidelines from website

  • Social Media: Ability to share self-check with loved ones on social media will increase breast cancer awareness for young people

  • Explore Page: App users can learn more about CoppaFeel! initiatives and join in on online content from organization from the navigation bar

OVERALL
Key Learnings

During this 5-day design sprint, we were able to:

  • practice communicating and working as a collaborative team

  • develop our presentation and storytelling skills

  • reflect on our discoveries and sprint outcomes

 

We were able to analyze an existing charitable organization and determine an area for meaningful design intervention. The CoppaFeel! app will be a helpful tool for young people who are looking to learn more about their breast health and understand the signs and symptoms of breast cancer.

Next Steps

LOOKING INTO THE FUTURE
What's Next for CoppaFeel!

For our next steps, our revised prototype goals include adding more features to increase better accessibility and simplicity. We want to implement features that will encourage users to perform more self checks and set reminders for themselves to routinely do so.

 

Some of our revised prototype goals include:

 

  • Adding a save button to the preferences page so users can revisit it at another time if they decide not to input their preferences right away

  • A page indicator for the reminders page so users will know the different reminders they are able to set (ex. doctor’s visit, mammogram appointments, etc.)

  • Reconfigure the layout of the reminders page to a more simple layout to encourage users to set their weekly/monthly reminders to Self-Check

  • Break down the information even further on the welcome screen so users will have an easier time navigating through the steps of their Self-Checks

LOOKING INTO THE FUTURE
Future Project Goals

We plan on increasing community efforts to encourage further education and open conversations as well as creating global campaigns to bring awareness to people everywhere.

 

  • Expanding app to highlight donation features, CoppaFeel! webinars and events

  • Creating a community page for breast cancer awareness and open conversations

  • Incorporating better AR elements to bring the app to life

  • Global marketing campaigns to bring awareness of self-checking to people everywhere

coppafeel thumbnail.png

PEAKED YOUR INTEREST?
Explore Other Projects

mei mockupppp.png

MEI is a digital tool designed for users to virtually try on makeup trends using AI and AR technology.

Users can find their perfect shades, customize their looks and shop all at their fingertips. It’s like having a personal glam squad in your own pocket!

google mockup.png

Collaborated with data scientists and web developers in a 24-hour hackathon challenge to create an innovative solution that explores data security.

Rookie is an education tool designed to engage in real-time interactions through Google Chrome to improve user privacy through data education.