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?
people will develop skin cancer by
the age of 70
is the waiting time for an American dermatology appointment
(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
care is provided by clinicians
for routine specialty care appointment
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 began 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:
- 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.”
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.
Our persona, Allison's Journey Map Experience
VIEW
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
VIEW
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.
VIEW
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.
VIEW
The beginning of multiple mid to high fidelity wireframe iterations
Hitting roadblocks along the way
VIEW
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:
- How do we go about collecting and storing the images and personal data received by users?
- How can we make this app a reputable one for users with skin concerns to use?
- How far can we go with the use of language in "diagnosing" a skin condition through an app; especially one presenting high risk concerns?
- How can we, if possible, avoid the risk of having a skin concern being misdiagnosed?
- How do we get the camera to properly measure/scan the area of concern while properly conveying that feedback to the user?
- Would it be better if we were to integrate our app with an existing, reputable health care company like Kaiser Permanente (KP)?
- 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:
- 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
- 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
- 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
- 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!
- 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 wireframes of a high risk user flow
VIEW
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
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
- 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
Validation Testing
We conducted a final round of validation testing with 5 new users using our clickable prototype done in Figma. Our summarized gatherings were:
Validation testing results
VIEW
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:
- Fleshing out all other user flows and cases for low, moderate, and high risk cases for further validation
- Further dive into the interaction design for an even smoother experience
- Explore more ways to minimize the number of steps a user takes per flow
