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.
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.
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.
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.
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
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?
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”
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.”
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.
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?
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.
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
USER STORY
Design Process
Then we envisioned what our users will experience and how they will travel through our app
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.
DESIGN PROCESS
Story Board
We then created a storyboard of Lorena’s experience self checking.
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.
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:
-
Lack of progress bars for location during onboarding
-
Unclear how to flag a problem during self-checkout
-
Unclear iconography
-
Lack of understanding into why this app is necessary and important to use
-
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.
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.
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.
Major change #2:
Adding in page progress bars at the bottom helps the user understand where they’re at exactly during onboarding.
Major change #3:
Editing the copy on the welcome screen lets users understand better the purpose of this app and the tools it contains.
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
Users can select imagery and terms that fit what they identify with
Feature 2: Helpful Wizards
Various options for obtaining assistance while in-app for better accessibility
Feature 3: Reminders
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
PEAKED YOUR INTEREST?
Explore Other Projects
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!
