MoleCare (Case Study) - Part 1

Image by No Revisions
Group 8251.png

Design Process

Part 1 • MoleCare • Digital Healthcare


Despite recent improvements in prevention, diagnosis and treatment, 32,000 melanoma skin cancers occur globally each year (World Health Organisation, 2020). People living in England, the US, and Australia are specifically affected by this disease where the number of lethal incidents is rising every year. Doctors suggest performing regular skin self-exams to spot melanoma at its early stages to avoid...


But do people follow this advice? Do you?


      The goal of this particular project was to create a persuasive intervention to address the barriers to regular skin self-examination and eventually create a habit out of it.

White Up Pointing Backhand Index Emoji.png


Product Designer
User Research, Interaction, Visual Design, Prototyping & Testing

2019 - 2020

1. Background

MoleCare is a free mole-tracking mobile application released by a small group of 3 volunteers. I was one of them responsible for creating UX and UI of the application. The app allows users to take photos of their skin lesions and moles, and monitor their changes. Learn more about MoleCare project.

After a while, since the app was released, it started to become evident that it's lacking the ability to encourage skin self-exams. At the same time, only a few technologies incorporate behavior change science to promote regular skin exams to raise proactive behavior. Being a master's student of HCID at that time, I decided to take the opportunity and do my Master's Dissertation on this topic. 

        I've grown tremendously during this project, some key achievements of which I have listed below:

White Up Pointing Backhand Index Emoji.png

1. Introduced a proper design process

Leading by example, I managed to show and explain the value of a proper design process.

This has helped our team establish more structure for how we conduct our work.

2. Defining the Process



Our process followed the Design Thinking Framework with all key phases incorporated in this project.

  • Critical Context

  • User research

  • Problem definition

  • Ideation 

  • Wireframing

  • Testing & Prototyping

  • Development


3. Understanding Critical Context

As a start, I performed a literature review to understand...

  • Behavior change models and frameworks. What existing models can assist this project in designing behaviour intervention.

  • Discovered factors affecting the behaviour. What factors trigger negative or positive attitudes towards regular SSE.

  • Existing solutions. How other solutions aimed to encourage different health-related behaviour and SSE.


Literature review findings informed the choice of attitude and behavior change frameworks used to conduct user research, to design and evaluate the intervention. The analysis of existing solutions broadened researcher’s understanding of possible functionalities and facilitated ideation.

New Thinking Emoji.png

3.1 Models & Frameworks

After a comprehensive review of multiple common frameworks used to create a persuasive intervention I decided to...


use the COM-B model & TD framework

Why? Because COM-B gives a practical understanding of human psychology and insights into the factors that drive human attitudes and behaviors. TDF, on the other hand, covers the spectrum of behavioral determinants and can be directly mapped onto the COM-B. Both were used heavily in the design of evidence-based interventions in a variety of health settings.

White Up Pointing Backhand Index Emoji.png

        Learn more about COM-B and TDF from the slides below

COM-B (Capability, Opportunity, Motivation - Behaviour) model has been widely used to design for health behaviour change. This model gives a practical understanding of human psychology and insights into the factors that drive human’s attitudes and behaviours. 

3.2 Discovered barriers to SSE

​High-level barriers towards SSE include...

  • Poor public awareness

  • Poor motivation and competence to undertake SSE

  • Inability to recognize suspicious lesions

  • Limited awareness of the importance of early medical presentation

  • Lack of effective strategies to address such factors

Factors contributing towards SSE include...

  • Family history of cancer

  • High level of education

3.3 Existing solutions

Existing solutions can be categorized into 4 groups:

  • Social media groups targeting SSE

  • Mobile application targeting SSE

  • Web-based software targeting SSE

  • Other persuasive solutions targeting health-related behaviors

Screenshot 2022-01-20 at 16.03.01.png
Screenshot 2022-01-20 at 16.46.32.png

4. Conducting Primary Research

In order to understand what people think about skin self-examination, I conducted primary user research with 5 participants not performing regular skin self-examination. The research consisted of a survey and an interview.  Both survey and interview were conducted one after another. I analyzed the data from the surveys and then transcribed the interviews to reveal common barriers.

My research encompassed:

  • Understanding attitudes towards regular SSE and melanoma

  • Understanding barriers and facilitators towards regular SSE

  • Assessing the extent to which people trust persuasive technology

New Thinking Emoji.png

User research findings helped me uncover the gaps associated with participants' barriers towards regular SSE. These informed the following phases in the design thinking process, including define and ideate phases. 

4.1 Barriers to SSE

Screenshot 2022-01-20 at 21.46.31.png

4.2 SSE Facilitators

Capability. One facilitator addressing the Capability component of COM-B is associated with the provision of educational resources and information to reduce the level of anxiety and fear of the unknown, including bad symptoms and guidance on how to perform the behavior.

Opportunity. With regards to facilitators targeting opportunity, two ideas were expressed.

  • (Social opportunity) One of them covers social opportunity by inviting another person to help with SSE. Participants said expressed enthusiasm about having a “double-check” as an activity that not only helps to check their bodies but also encourages physical and emotional intimacy between couples.

  • (Physical opportunity) Two more participants suggested that having necessary tools as well as guidance on how to perform SSE just when they need to would encourage them to initiate behavior. 

Motivation. The most popular facilitator was related to getting the SSE activity into the common routine i.e. performing the exam just after a morning shower. The idea of building a routine around everyday activities has been a valid technique used to promote habit formation.


Other facilitators included...

  • Personalization of data and continuous feedback about one’s health. 

  • Reframing the experience of performing skin self-exam i.e. consider the time spent on SSE as the time used to self-reflect on your body and get a boost of self-appreciation. 

  • Reinforcing statistics of how performing a skin-self exam helps other

5. Defining Problems & Behaviors

I took the extra step of updating the existing persona with the research insights and then used them to define the problem statements as well as more specific behaviors that the intervention would promote.  This was an essential step that helped me to narrow the focus down.


The aim was to...

  1. Use the findings from the user research to update the existing user persona

  2. Define problem statements to navigate the design process

  3. Define positive behaviors to promote by the intervention

New Thinking Emoji.png

Defining the problems, narrowing them down, as well as capturing the behaviors to promote allowed me to maintain focus in the next stages

5.1 Updating persona

Example - Jane Appleseed.png

5.1 Defining problems & behaviors 

Screenshot 2022-01-20 at 23.10.12.png

STEP 1. 

Jane's persona was used to facilitate the creation of the problem statements. The following 3 problem statements on the left helped to specify behaviors to be promoted by the intervention.

Screenshot 2022-01-20 at 23.16.52.png
Screenshot 2022-01-20 at 23.16.58.png

 STEP 2. 

After defining the problem statements, it was important to think about behaviors that could address statements using reflective and automatic motivators.


6. Initial Ideation 

Next, I decided to start exploring different ideas. The aim was to...

  • Generate various ideas to address behaviors defined in the previous stage

  • Categorize the ideas in order to allow for a better understanding

  • Produce low fidelity sketches to better visualize those ideas

New Thinking Emoji.png

Eventually, 3 concepts were picked up on the basis of their relevance to the target behaviors and were expanded further into wireframes. These included:

1. Body Appreciation
2. Quizzes
3. Challenges between the two

6.1 Brainstorming ideas

Screenshot 2022-01-20 at 23.34.37.png

Considering that interview results brought up a bunch of innovative solutions to the problem, I decided to create a mind map to get a holistic view of ideas and concepts.

6.2 Categorising ideas

Screenshot 2022-01-21 at 14.17.56.png

While creating a mind map, more categories became apparent, hence a top-down approach was taken, where the target behaviors were broken down into 6 sub-categories of SSE listed on the right...


1. "Get Jane to learn more about the process of SSE/melanoma symptoms from various sources” behaviour was broken down to:

    1. Get Jane to become more aware of the issue (melanoma) and SSE

    2. Get Jane to learn more about the issue (melanoma) and SSE

  1. “Get Jane to think about SSE from a different perspective” stayed the same.

  2. “Get Jane to set a plan and prompts to adhere to the plan” was broken down to:

    1. Get Jane to set a plan

    2. Get Jane motivated just in time

6.2 Tabulating ideas

High-level ideas brainstormed through the Affinity diagram were then combined to form more realistic persuasive design features.


The table on the right represents those that were inspired through participants’ comments on potential skin self-examination facilitators. 

Screenshot 2022-01-21 at 14.22.02.png

6.2 Sketching ideas

Sketches were created to visualise features separately and then think of the ways to combine those features into meaningful flows and concepts to address target behaviours. Annotations were made to refer BCTs associated with particular features, to holistically see how the design could support users’ motivation.

Screenshot 2022-01-21 at 14.24.31.png

7. Body Appreciation Program

Body Appreciation Program builds upon an idea of reframing the SSE activity. It introduces an alternative activity i.e. “body scanning”, which is much more pleasurable to do on an everyday basis, hence giving users a different perspective on SSE. While the primary goal of this intervention is to show users another perspective on the activity, it also incorporates educational content, introduced through podcasts as well as summary articles. Together with a rising “body positive” trend, this program proposes to reach out to a greater variety of less activated users. The program reinforces behaviour by rewarding participants for listening to podcasts and taking photos of moles and other skin lesions. Users will be able to create an action plan and fit body scanning as part of their shower routine.


According to COM-B and TDF, this design intervention would target both automatic and reflective motivation:
Automatic Motivation: Reinforcement, Emotion (from TDF)
Reflective Motivation: Goals, Beliefs about capabilities, Intentions, Identity (from TDF)

Screenshot 2022-01-21 at 14.32.36.png

To view the exploration of the other two concepts please download the dissertation file


8. Creating Podcasts

Creating podcasts for the program took an iterative approach as well. The underlying concept for the podcast was inspired by Headspace, a mobile application for meditation. Regular meditation has been

found to have a number of positive outcomes on human health and mental wellbeing. It reduces stress and anxiety, improves sleep, lengthens attention spans, enhances self-awareness, and promotes emotional health. Notably, some forms of meditation can also facilitate an improvement of self-image, including body satisfaction. Hence, it was decided to take guided mediation, as the basis for the podcast.

In a guided meditation, a narrator walks the person meditating through the basic steps of meditation practice. Similar to guided meditation practices, ‘Body Appreciation’ podcasts were decided to include 4 act narrative structure, see on the right. 

Considering the nature of meditation is a peaceful and quiet activity, it was decided to maintain a similar mood for the first podcast. Apart from the prevalent narrator’s voice, background imagery - evoking sound was added to complement the atmosphere and aid the positive formation of attitude towards the podcast and skin-self exam as an activity .

1. Introduction: reminding of the reasons why cultivating a feeling of gratitude in general and towards your own body is important
2. Narrowing a focus towards a particular part of the body, gradually raising awareness of this part of the body

3. Guided skin self-check of that part of the body
4. Closing: getting people to have a minute of self-reflection on the activity and their feelings at that particular moment


Want to listen to podcasts?

White Up Pointing Backhand Index Emoji.png



9. Prototyping & Testing

A mid to high-fidelity prototype was designed and iteratively improved until it formed the final MVP intervention.


Each prototype iteration was followed by a test. In total there were 3 iterations, 1 remote expert review and 1 remote usability testing with 5 particiapants. The expert invited to review the first iteration of the prototype holds the Head of Customer Journey Design position at one of the biggest telecommunication companies. His expertise in the field of UX design was the primary reason for inviting him to participate.​


Testing tremendously helped me in uncovering some of the usability issues that otherwise would have been passed to the development. See how the design evolved over time.

View all design screens or play with the final prototype...

9.1 Testing insights

Expert Review & Usability Testing

This deck summarises the key takeways. To view the entire Prototyping/Testing process please download the file below​​​​​

Screenshot 2022-01-21 at 15.29.10.png

9.2 Design evolution (example)

Screenshot 2022-01-21 at 15.18.54.png

View all design screens or play with the final prototype...

Screenshot 2022-01-21 at 15.19.09.png

      Those screens that were amended from the first iteration are marked with the blue tick icon

White Up Pointing Backhand Index Emoji.png
Screenshot 2022-01-21 at 15.22.00.png

10. Development

The development of the ‘Body Appreciation’ program was undertaken by the MoleCare development team.

After having a discussion with the team, I decided to reduce the scope focusing only on the main persuasive features of the program. Internal app testing were conducted until the program was ready for the study, with the first one being conducted as soon as the main functionality was present. After fixing all high and medium fidelity bugs, a fully functional application build was ready for the study.

In order to facilitate the development process and aid communication, every screen was described through its display, function, and call to action. Display represented the list of all static design components on a screen. The function is referred to all functionalities attributed to a screen. Call to action is a component on the screen that triggers a transition to another screen.

New Thinking Emoji.png

Want to know what happens after the program is developed?