Skin AI | Kyle Ng Design

Skin AI: Creating an end-to-end applicatioin

Duration: Jan - Feb 2021 (4 weeks)

Role: UI/UX Designer

Tools: Figma, FigJam

Background

Skin conditions are one of the most frequent reasons for consultations with doctors. Skin is the protective barrier. It is the very first line of defense for anything you come into contact with.

Problem

Some of the skin conditions like skin cancer and skin infection can be treated easier when caught early. Ignoring the skin condition can worsen the issue tenfold. However, many people who have a skin condition choose to ignore the issue because the condition doesn’t bother them or they don’t have time to visit the doctor.

Our Solution

My solution to this problem is to create an app that helps users to recognize suspicious skin conditions. Users would be able to take pictures of the skin condition, and the app can guide the users to a range of possible diagnoses, and provide them with a more realistic set of possibilities on what the skin condition may actually be. It also allows the users to schedule a dermatologist if the app finds an acute skin condition.

Goals and Objectives

PROJECT GOAL:

The goal of this project is to design an MVP for the Skin AI app and have a presentable case study. I picked iOS as the operating system for this project.

RESEARCH GOAL:

I wanted to first discover how people treat their skin conditions. In addition to this, I would also like to know the pain point of visiting dermatologists from the target audience

RESEARCH OBJECTIVE:

Understand the significance of visiting dermatologists if have skin conditions.
Identify how people react to their skin conditions when they first see them.
Determine the reasons why users tend to ignore skin conditions.

Final Designs

Prototype

All participants accessed the prototype with their own mobile devices.

Research

Competitive Analysis

I conducted a competitive analysis by going through the Apple Store and downloaded four different apps that were advertised as checking skin conditions apps. Then, I briefly used each app myself to test out its features and noted down the strengths and weaknesses of each app.

User Interview

After the initial research, I conducted user interviews in order to ask my participants about their concerns with their skin conditions and how they react to their skin conditions. I also asked participants about their experience when visiting dermatologists.

Participants

• 3 participants total

• Between the ages of 25 to 35 years old

KEY FINDINGS:

2 of 3 participants concern with anything on their skin very often
All participants would look for information online on their skin concerns.
Main difficulties participants experience when trying to visit dermatologists included: long waiting, poor appointment management, and expensive consultation fee.
Their satisfying experience when trying to visit dermatologists included: the professional patient care, the proper resolution of the issues, and providing professional knowledge.

Define

Sitemap

I started this phrase by brainstorming the features that would be included in the app, along with the priority of each feature, and compiled a feature roadmap. Once I finished the roadmap, I created a sitemap that showed the different screens involved in the app.

Task Flow

After the site map was created, I made a simple task flow that showed the steps involved if a user want to evaluate the suspicious skin conditions or view the records and then pay for the online consultation or schedule a doctor appointment.

Ideate

I began my designs with some quick sketches and then created low-fidelity wireframes for an iOS device. I finalized my branding and style kit after creating the low-fidelity wireframe. And then I developed the high-fidelity designs.

Sketches

Low-fidelity Wireframes

High-fidelity Designs

Testing

Usability Testing

After I finished my high-fidelity designs, I moved on to usability testing for the app. For this test, I selected tasks that would allow participants to snap a picture of the skin condition, get possible conditions results, and complete the online consultation payment. I also included a few tasks related to other features of the app, such as viewing the history and deleting the history.

Participants:

3 Participants
Between the ages of 28 to 40

TEST OBJECTIVES:

To see how easily users can evaluate their skin condition in the app.
To see how easily users can complete the payment of the online consultation
for their skin condition.
To understand what difficulties do users encounter when using the app.

TASKS:

You found a suspicious skin condition, try to snap a picture of the skin condition and check the possible conditions results.
You would like to get the online consultation as soon as possible, try to complete the online consultation process and payment.
View the “History Page” and try to delete the oldest record.

KEY FINDINGS

Although all participants were able to complete the tasks presented to them, there were still a few issues that came up during testing.

Didn’t know the cardboards on the Home Page would be clickable.
All participants experienced some confusion with the submitted date on the history page.
The questions are not tidy without a line between them and felt confused about the meaning of "Use this photo" on the skin condition page.

Iterations

During usability testing, I received feedback on new features that could be added to the app for further improvement. I made revisions to my design.

Add “Learn more” in the cards letting users to know they are clickable

Add a line between questions making it more clear
Changed a free form text area for the affected area so user would like to be able to specify
Changed the “Use this photo” button to the “Continue” button

Changed “Submitted” to “Check date”
Add CTA buttons for the record so users can process online consultation in a faster way

Conclusion

KEY LEARNINGS:

I enjoyed spending the extra time to configure the best choices in typography, colors, and imagery that would support the product’s objectives.
Focus on key tasks and flows for an MVP launch. I understand that at least 1 or 2 features should shine to give users a good idea of how the application would work.

CHALLENGING:

When designing an iOS app, there are many guidelines involved.
With skincare being a highly personalized topic that is relative to each individual, it was challenging to address various concerns and needs.

NEXT STEPS:

Continue to test the revisions and alternative designs that were made.
Continue designing other screens for the app such as the profile page and schedule an appointment for the doctor visits.