Skinspect

“Scan your skin concern and
get reliable results immediately”
User-design image

01

Team

  • UX Researcher
  • 2 UX Designers
role icon

Role

02

  • Lead UI Designer
  • UX Designer
  • UX Researcher
team icon

tools

03

  • Figma
  • Adobe Photoshop
duration icon

Duration

04

  • 4 months

exploring the layers

Background

Skin health is central to one's overall well-being. Common skin issues often cause unnecessary panic and emotional distress.

Did you know?

1 in 5

people will develop skin cancer by
the age of 70
32 days

is the waiting time for an American dermatology appointment
O.T.C

(over-the-counter) products could treat most common skin conditions
With that being said...

Skin self-examination is a good strategy to assist early cancer detection

Competitive Research

kaiser permanente logo
Online 

care is provided by clinicians
15 Days

for routine specialty care appointment
10 Days 

for routine primary care appointment
Kaiser Permanente is a high-end health maintenance organization with a few good options readily available. The waiting time for visiting a dermatologist is just 10 days for their members, and they provide online care. However, their online services is provided by clinicians and not specialists; which can be a pain for persons seeking specific skin care attention.

Proposing a solution

Problem Statement

How might we promote skin self-examination and provide reliable results and guidance regarding various skin diseases?

Our aim for taking the steps to solve this problem is to design a tool that provides state-of-the-art preventive care for skin self-examination.

Peeling back the layers

Interviews

My team and I begin with research on the topic of skincare and then jumped right into interviewing. We received pretty interesting insights regarding the target audience’s behavior.
 
Here’s what they had to say: 
“I went online to Google search and I couldn’t figure it out so I went to the Doctor.”
Google didn’t help. There were too many pictures.”
I had to wait a long time for my appointment with the doctor. I was feeling anxious and stressed the whole time ”
When I have a spot, I take a picture. If there are changes, I go see a Doctor.”


Meet our persona:

persona image

Allison
skincare advocate

  • Allison is 35 years old, lives and works in the city as a technology professional.
  • She is a Kaiser Permanente member and loves their telehealth services.
  • She wishes there was a way to understand the severity of her skin condition as soon as possible.
“I have a family history of skin issues. I need a more efficient way to monitor my skin changes.”
“I follow a strict skincare regimen as a preventive measure to protect my skin.”

Allison's Experience via Journey Map

To further communicate an understanding of our user and to illustrate the thoughts and emotions they may be experiencing once discovering a skin concern, we decided that a Journey Map would be a perfect addition to our design process.


Journey Map Image
Our persona, Allison's Journey Map Experience

Mind mapping

Mind mapping was essential for us in organizing our thoughts and relating the insights we gathered from research interviews. What we found mostly interesting was the importance and outcomes of users knowing whether their condition was low, moderate or high risk

mind map image
Piecing together our thoughts via mind mapping

Low Fidelity Sketches

I started off with creating lo-fi sketches of one of the potential app user flows with the team to help communicate and begin to tell the story of Skinspect — focusing on the meat-and-potatoes and simplicity of solving the pain points of our target audience.

low fidelity sketches image
Lo-fi sketches of one of the user flows

Wireframes

Gathering valuable feedback during usability testing and iterating on wireframes were a key component in helping figure out a meaningful sequence and to finalize the necessary elements on every screen — narrowing down the distinctions between the “what really matters” from the “out-of-scopes”. After validating our lo-fi sketches, we made iterations to our design and moved into the mid to hi-fi phase.

mid fidelity wireframe image
The beginning of multiple mid to high fidelity wireframe iterations

Hitting roadblocks along the way

Figma was our saving grace as we were able to quickly and collaboratively discuss and make user feedback revisions in real time during daily group phone discussions and messaging. However, in creating a skin care app from scratch — doing the research, validating our designs with users and iterating with the goals and pain points in mind, we found very early on that this would be an overwhelmingly greater challenge than we had anticipated. And that there were a number of edge cases to be accounted for.

wireframe iterations image
A snapshot of the multiple mid to high fidelity wireframe iterations




In ensuring that the direction of Skinspect was a strategic and sound one. Some of the questions that we began to dive into were: 

  1. How do we go about collecting and storing the images and personal data received by users
  2. How can we make this app a reputable one for users with skin concerns to use? 
  3. How far can we go with the use of language in "diagnosing" a skin condition through an app; especially one presenting high risk concerns?
  4. How can we, if possible, avoid the risk of having a skin concern being misdiagnosed?  
  5. How do we get the camera to properly measure/scan the area of concern while properly conveying that feedback to the user?
  6. Would it be better if we were to integrate our app with an existing, reputable health care company like Kaiser Permanente (KP)?
  7. If we decided to integrate, would that limit our app users to being members insured by the partnered health care company?

Proposing solutions

First and foremost, we had decided that it would be best suited to integrate our app with Kaiser Permanente (KP), as it would solve most of our concerns. By doing so and coming up with the solutions for others we found that we:

  1. Integrating with Kaiser Permanente, bypass having to collect user's basic and insurance information, assuming they're already in the KP system. This would also create a more seamless transition of having the user's images being stored and sent directly to a skin specialist of KP
  2. Kaiser Permanente is already a reputable health care company therefore users would trust us more and be more likely to use our product if we're supported by them
  3. By adding disclaimers to remind our users that Skinspect cannot diagnose but instead detect and provide possible solutions of what the diagnosis could be, we help remind users to not rely heavily on our app but to merely use it as a smart tool for preventative care in self-examination
  4. By providing instructions and real-time feedback throughout the camera/skin scanning process —allowing the AI smart camera to auto capture the detection, users can get a better sense of clarity and direction. All they would need to do is aim!
  5. By integrating yet creating our app separately, users can register to use our app without being insured by KP, but with limited features — i.e for the sole purposes of the skin self-examination and results. Having access to KP's skin specialists, for example, will not be included.




Fleshing out the High Fidelity Wireframes

With a clearer solution and vision for Skinspect, we redesigned the look-and-feel of the app — inheriting from Kaiser Permanente for consistency with a bit of our own twist to the design, and constructed the new and improved, KP version of the high-fidelity prototype.

High fidelity images
High fidelity wireframes of a high risk user flow

The final rounds of Usability Testing

We then went ahead and conducted 5 rounds of usability testing, both online and in-person, each lasting for 10 minutes.

High-fidelity
mockup
In-person
and online
10
minute sessions
5
users

Skinspect's splash and landing screen

Research findings

The usability testing revealed issues with the following interaction design principles - perceivability, predictability, and feedback (with ways to improve below). However, we found that learnability and consistency were at a satisfactory level

Aiming to improve perceivability

  • We made the platter clickable to follow a popular mental model
  • We removed the three dots and the pop up menu because the interaction was lacking perceivability
  • We matched the colors more with Kaiser’s branding color
  • We removed the hamburger menu and plus icon for better use of the real estate
History page - AFTER
History page - BEFORE

Aiming to improve predictability

  • We replaced the original flip icon and added more intuitive ones for both with their labels for better instruction
  • We added more detail to the silhouette frame to assist users with locating their issue
  • We followed a simpler mental model regarding the CTA button
Body locator - AFTER
Body locator - BEFORE

Aiming to improve feedback

  • We applied a simpler interaction design pattern focusing on content
  • We improved the visual hierarchy of the summary page
  • We added next steps to make an urgent appointment for high risk results
  • We toned down the risk level by using less alarming colors to avoid panic
Results screen - AFTER
Results screen - BEFORE

The Final Flow

Here’s a video run-through of one of the final flows (i.e. “Add a new case”) done in Figma:

Test it out yourself!

NOTE: when you arrive to the Summary page, scroll to the very bottom of the screen to complete the flow!

Skinspect Prototype - Figma


Retrospective

Although this was a very challenging project, it was very impactful case study that I was super grateful to have been a part of with my amazing team. We were able to get our hands dirty — work relentlessly on an end-to-end product that solves a real-world problem and successfully produce a mobile app experience that users found viable.

For future improvements I would consider:

  1. Fleshing out all other user flows and cases for low, moderate, and high risk cases for further validation
  2. Further dive into the interaction design for an even smoother experience
  3. Explore more ways to minimize the number of steps a user takes per flow
View more Case Studies