Moles Check
MY ROLE
I was working on this project for three months and I was the only Product Designer involved.
During this project I worked on:
-
Competitive analysis
-
Content Strategy
-
Brainstorming
-
User Research
-
Personas
-
Storyboarding
-
Paper prototyping
-
Low-fidelity and high-fidelity wireframes and Click through prototypes
-
User testing/Evaluative Research
PROBLEM STATEMENT
The rates of melanoma have been rising rapidly over the past few decades.
Moles can be linked to skin cancer and examining for moles can help with early detection of melanoma (the deadliest type of skin cancer) and treatment.
One of the things a person can do to prevent skin cancer and melanoma is to regularly check their skin. Moreover, people with moles are advised to do regular check ups with their dermatologist.
Going to see dermatologist every six months can be a hassle and most people overlook checking their skin regularly or simply forget to schedule an appointment.
Moles Check
Moles Check app helps with preventing skin cancer, by giving the ability to check your skin in timely manner and connect you with your doctor quickly.
PROCESS
1. Define
-
Problem Statement
2. Research
-
Competitive analyses
-
Generative User Research
3. Analysis
-
User Persona
4. Design
-
User Flows
-
Sketches
-
Low and High-fidelty wireframes
-
Clickthrough prototypes
5. Test
-
User Testing
6. Refine
-
Style guide
-
Hi-fidelity mockups
UNDERSTANDING THE USER
I conducted Generative Research to understand what people think of regular skin checks and what they do to prevent skin cancer.
Generative Research discovered that the majority of the interviewed users :
-
Want to check their skin regularly, but they forget or they are not sure they do it right.
-
Forget to go to their dermatologists for skin check every six months or even yearly.
-
Try to avoid waiting in lines in front of doctor's offices
-
Wish there is an easier way to check their skin and be sure what the results are.
PERSONA
Based on the Generative Research, I set up a persona. She represents the potential users I interviewed.
The primary persona wants to take care of her health and to raise health awareness.
-
She has several moles and she knows how important is to check her skin every 4- 6 months, although she always forgets.
-
She doesn’t want to commute to the doctor every 3-6 months or wait for appointments.
-
She wishes she can have easy access to dermatologists and reminders when to check her moles.
-
She seeks for an easier access to dermatologist, without waiting months for doctor’s appointment.
I'm a title. Click here to edit me.
COMPETITIVE ANALYSIS
Next step was clear, I wanted to conduct competitive analysis to see if there are products, which fulfill these needs and what are the opportunities missed.
After the generative research and the persona I set, I knew that I wanted to create a product, which gives the ability to check your skin from the comfort of your home and easily verify the results using IA and connects you to your dermatologist.
Next step was clear, I wanted to conduct competitive analysis to see if there are products, which fulfill these needs and what are the opportunities missed. I found several applications on the market, which I ran competitive analysis with. All of them allowed the user to keep track of their moles, but only one provided results.
Competitive Analysis indicated that:
-
Only one of the competitors have the ability to send the picture to a doctor. However, there was no information about the doctor and how credible he is.
-
None of the competitors support adding your own dermatologist, or search doctors by location or insurance.
-
None of the competitors allow you to save the result to your phone
WIREFRAMES
I started creating sketches and wireframes for a mobile application, which allows the users to check their moles, get an AI result and send their results to their dermatologists.
I created low-fidelity and high-fidelity wireframes and prototype for the following user flows:
-
Main user flow: Capture a mole on your body , get an IA result and share the result with your dermatologist.
-
Supportive User Flows: Sing in and Create an account, Search for Doctors, See Saved Results
My main goal of creating the wireframes was to test them with potential users and understand if the user flows are easily achievable from the target audience.
Welcome
Home/Saved Results
Capture
AI Results
Share with Doctor
Help
Profile
Doctors
Search Doctors
TITLE OF THE CALLOUT BLOCK
USER TESTING
I did user testing with the low-fidelity wireframes. I wanted to understand if the users can successfully complete the main and supportive user flows.
I tested in person with 5 potential users of the product.
I was interested to see how the users would navigate the following user's tasks:
-
How would you navigate the app to capture a mole on your body?
-
What would you do to share your IA results with Doctor Smith?
-
How would you navigate the app to search for a new doctor?
-
Where would you go if you want to learn more about Melanoma?
-
Where would you go to seek support?
-
Where would you go to see your saved results?
FINDINGS AND THEMES
Capture, Get and Share Results
After the user's testing and the findings, the wireframes were updated and refined, based on the potential users' feedback.
The main user flow: "Capture a mole on your body , get an IA result and share the result with your dermatologist.", was refined to meet better the users' goals.
What has changed?
-
The menu has become more user-friendly, having only three buttons in the navigation bar. All the information from "Help" and "Profile" , is now combined under "You". (Users were confused with the previous design, where they didn't associated "Help" tab with learn more and FAQs)
-
Adding "Saved Results" page for users without saved results yet.
-
Adding two CTAs in sharing results screen, and the option to choose, which doctor you want to share with.
-
Adding "Send Results Mail" page
Home/Saved Results
Capture
AI Results
Share AI Results
Send Email
Sign in or Create an Account
I created "sign in" and "create an account" screens, so I can have more of a finished real product look, when testing with the users the high-fidelity wireframes. My aim was the flow to be user-friendly and intuitive. The Home Screen, changes depending if you have saved results or no.
Welcome
Sign In
Sign In/Credentials
Home/Saved Results
Create an Account 1/2
Create an Account 2/2
Home/Saved Results
Confusing CTAs.
Participants had trouble sharing their result with a doctor. They didn't know that they can click on the Doctor to choose him and they thought the button "Search for doctor" is actually "Share with Doctor"
What is the home screen for new users?
When users log In they land on "saved results" page, but what if they don't have saved results yet?
Confusing Icons
Help icon was confusing. Users expected to see customer support and not Learn more and FAQs.
Doctors and Profile Access
Based on the potential users' feedback "Profile" and "Doctors" menu was updated.
What has changed?
-
In the low-fidelity prototype, user were confused about the "Help" icon and according to them, it doesn't represent the content inside. I decided to combine "Profile" and "Help" into "You", in order to make the information easily accessible to every user.
-
As "Saved Results" is very important key screen, I brought the attention to it, by placing in on top of the menu and differentiating it with by using a different color.
- The menu in "You" is organized by sections, which give easy access to what the user is looking for
- "Doctors" screen has been updated by giving the option upfront to search doctors by location and by insurance.
- "Saved Doctors" screen has been added.
Profile
Doctors
Saved Doctors
FINAL PROTOTYPE DESIGN
For the final design of "Moles Check" app, based on the usability testings, I followed simple visual style and kept the user interactions minimal and intuitive.
This Design will help the future potential users be able to scan their moles and skin, get fast results and have the opportunity to quickly communicate it with their doctor
