top of page

The Purest Solutions App

A bybrid AI application for the skin care industry specialized in skin evaluation and recommendations.

UX Designer:

Zoe Zhao

Platform:

IOS

Project Duration:

3 Days

Tools Used:

Adobe_Photoshop_CC_icon.svg.png
MacBook Pro 16_ - 10.png

Project Overview

The Purest Solutions is launching an AI-powered skin app. This app enables users to scan their skin via daily selfies and receive tailored skincare suggestions based on their unique skin profile.

However, the app has a lot of user experience defects that need rectification for a smoother and more effective usage. After a series of research and ideation processes, I’ve been able to solve these problems in the best way possible.

The problem statement

The current AI-powered skincare app lacks effective personalization leading to a generic approach that does not cater to individual skin types, concerns, and preferences. Users, especially those belonging to marginalized ethnic groups or specific sexual orientations, encounter difficulties due to a complex interface, and data privacy concerns, resulting in a lack of trust and engagement with the app.

Business Goals

1. Develop an AI-powered skincare app that effectively caters to 
     
diverse user demographics, including individuals from different
     
ethnic backgrounds and sexual orientations.


2. Create a seamless and intuitive user experience, thereby
       increasing user engagement, retention, and overall app usage

3. Enhance
data privacy to build user trust and satisfaction,
       fostering a positive brand reputation and enhancing the app's
       credibility.

User Problems beyond the existing app feature:

1. Users struggle to find skincare products that cater to their specific
     skin concerns and goals
, and a lack of trust in generic skincare
     advice.


2. Users may feel uncertain about relying solely on AI-driven 
       recommendations
 without consulting human skincare experts.

3. Users express
fears about sharing personal data with the app or
       misuse 
of their sensitive information.


4. Users feel disengaged due to a lack of interactive features and a
       supportive community within the app.


5. Users from diverse cultural backgrounds worried about the content
       and recommendations may not adequately address their
specific
       cultural skincare practices and needs
.


6. Users with visual impairments or limited technological literacy, may
       face challenges in accessing the app's features,

Insights

I wanted to understand the needs of the users and the challenges they faced with using similar apps. So, I began my research process with the Secondary Research method because we were short on time to conduct user surveys.


Through
market research, reading skincare articles and competitive analysis, I identified the unique pain points that Various users face while doing skincare,


 

  • Lack of ability to adjust product recommendations based on varying climates throughout the year, resulting in skincare routines that may not be suitable for different seasons.

 

  • Many apps overlook gender-special skincare concerns, leading to recommendations that may not meet the distinct needs of men and women

 

  • Apps with complicated user interfaces and navigation may discourage some users, especially those who are less tech-savvy.

istockphoto-1305076645-612x612.jpg

User Solutions beyond the existing app feature:

1. Implement virtual navigation and screen-reader features to
     accommodate users with diverse abilities.

2. Offer a feature that allows users to
track the progress of skincare
       journey 
and make adjustments to their routines.

3. Implement the
user profile system that collects detailed information
      about users' skin types, concerns, and product preferences.

4. Provide option to
analyze regional weather data. Users to receive
      personalized suggestions for each season.

5. Tailored
recommendations that cater to the unique requirements of
       
both men and women, recognizing the differing characteristics of their skin.

Target Audience

  • People of the age group 18 years and above

  • People of different genders and backgrounds

  • People who are trying out skincare and need assistance to make an informed decision

Information Architecture

MacBook Pro 16_ - 5.png

User Flow

Key process of AI powered skin scan and order placement

User Flow.png

Style Guide

For AI powered skin care app, I came up with a unique and consistent set of icons to use throughout the app. The icons play a significant role in the app. They are used for navigation and notifications, for providing feedback on scanned skin spots and for giving skin care advice. Because of their functional importance, the icons had to be straightforward, realistic, and color blind friendly.

MacBook Pro 16_ - 7.png

Hi-Fi Designs

After research and analysis, I identified important areas for improvement and made priority revisions that aligned with the product’s goals.

Frame 58.png

Slogan &
Short Instruction

Iconic Image

Navigation Button

#HOME SCREEN

Large headings and short introductions on each screen, the users are educated about the app on a basic level.

The onboarding screens represent positive and friendly images that attract users’ attention. Image to be enlarged and seamlessly merged to screen background.

The users are encouraged to tap “get started” to go the next or “Sign In” if they are returning users.

Old Version

New Version

2.png

#INSTRUCTION

Slogan &Instruction
Message

Resulted in a better user experience and clarity for user. The separated message section allows users to streamlines the face scan process.

Face Scan Options

AI application in facial recognition and analysis with live (direct phone’s camera) and static (picture) inputs

Navigation Bar

Old Version

Reorganized the tabs based on the project analysis, and protruded the image taking icon to highlight the AI experience.

New Version

#PHOTO TAKING PROCESS

3.png

Page Header

Unified page header structure with “ process navigation button + Page Goal + Voice Instruction”

Face Scan Options

The notification message pop up when the photo is successfully taken the photo, giving the clear breathing space

Navigation Bar

Old Version

Tips need to be paying attention are placed directly to the face scan position.

New Version

Action Button

One of the photo taking process when the app captured the user’s face, click action button to next step

#PERSONAL QUESTIONNAIRE

4.png

Page Header

Unified page header structure with “ process navigation button + Page Goal + Voice Instruction”

Options Highlighted

To increase the user’s readability by creating colored background to the options of each question.

Action Button

Old Version

The action button is floating above the navigation bar to help users navigation through each step.

New Version

#AI SKIN ANALYSIS

5.png

Analysis Results

Clicking to check different category analysis result. Switch icon and text color to green informs the user’s selection

Option Bar

Keep the Navigation Bar consistently to the bottom of the app throughout the pages. Darker blue background informs selected option

Old Version

New Version

#AI SKIN ANALYSIS

6.png

Analysis Results

Option bar re-organized to the top page due to content sequence and design hiarchy.

Action Button

Main navigation button to be consistently placed on the lower section of the page.

Old Version

New Version

AZELAIC-ACID-IDD_1.jpg

Next Steps

  • Complete the MVP app version and create a comprehensive design flow

 

  • Generate an evening regimen to complete the builder

 

  • Conduct usability studies to validate whether the pain points users experienced have been effectively addressed.

Key Takeaways

For this project, brand research, market research and a comprehensive evaluation of the users helped the company build a trustworthy product. In addition to this, the consistent design language helped shape customer's perception about a company.

bottom of page