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:
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.
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
User Flow
Key process of AI powered skin scan and order placement
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.
Hi-Fi Designs
After research and analysis, I identified important areas for improvement and made priority revisions that aligned with the product’s goals.
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
#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
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
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
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
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
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.