Skinset

Utilizing AI to build a skincare routine customized to your skin's specific needs!

Product

End-to-end mobile app

Role

UX/UI Designer | Solo student project for Designlab UX Academy

Timeline

4 weeks | 80 hours

Primary Tools: 

Figma, Notion, Fathom, Zoom, Photoshop

Background

While shopping online for skincare allows users to take their time to research products and place orders conveniently from home, it can be difficult to determine if the products will work until users get to try them in person.

What if there was an easier way to build a skincare product lineup that suited your skin's specific needs and worked effectively together?

Problem

While skincare has risen in popularity amongst younger generations, there aren't many resources educating them on the subject.

Research Goal: I want to learn about the challenges people face when shopping for skincare products, so I can simplify the process and empower users to make purchases with confidence.

Solution

The key to finding the right products starts with better understanding your skin's needs.

Skinset utilizes AI technology and an onboarding quiz to identify problem areas, track your skin's progress, and recommend key ingredients for your skin. From there, you'll be recommended a product lineup that features the key ingredients suited to your skin type and specific needs.

COMPETITIVE ANALYSIS

Only one other competitor offered an AI experience.

While some competitors had personalization features, such as onboarding quizzes and product recommendations, only Skin Bliss offered an AI feature to help users learn more about their skin.

USER INTERVIEWS

My interviewees looked for clean, cruelty-free ingredients, reviews, and price when shopping for beauty products.

Research Questions:
“What factors matter to you when shopping for beauty products?”
“What is the most memorable shopping experience you've had? What stands out to you about it?”
“Where would you like the beauty product shopping experience to be in five years?”

secondary research

Clinical evidence supports that advanced skincare routines outperform simple routines.

According to a controlled trial conducted by the Journal of Cosmetic Dermatology, advanced routines outperformed simple routines when it came to improving skin brightness, superficial hydration, deep hydration, skin roughness, mean pore area, melanin heterogeneity, and crow's feet wrinkle depth. The advanced routine included a cleanser, a toner, an eye cream, a serum, and a day & night cream.

KEY INSIGHTS FROM AFFINITY MAP

Theme 1: Personalization & Education

4/6 participants wanted a more personalized shopping experience.
2/6 participants felt there was a need for an educational skincare resource.

Theme 2: Shopping Preferences

100% of participants purchase skincare products and shop online.
100% of participants look for products with clean, cruelty-free ingredients.
2/6 participants disliked having to shop at multiple stores because there isn't one place that has everything.

POV STATEMENT AND HMW QUESTIONS

POV 1

I’d like to explore ways to help skincare enthusiasts discover products suited to their skin’s needs because they want to establish an optimized skincare routine.

HMW 1-2

How might we make it easier for users to find products that work for them?
How might we make users feel confident in their purchases?

POV 2

I’d like to explore ways to help skincare enthusiasts have a more seamless online shopping experience because they dislike having to shop on multiple platforms.

HMW 3-4

How might we make the online shopping experience more seamless?
How might we make it easier for users to shop for products?

USER PERSONAS

Nicole, the skincare enthusiast

Motivations:
Wants to learn more about product ingredients and benefits to better care for her skin.
Willing to pay more for quality, ethical products.

Pain points:
Finds it challenging to find everything she needs at one place.
Wishes there was a way to reduce waste and carbon emissions that result from returning products.

TASK FLOWS

With a better understanding of my users, I defined three key task flows that addressed their motivations and frustrations.

USER FLOWS

Before wireframing, I created clear and precise user flows that provided me with the necessary information to make informed decisions regarding the placement and organization of each screen in the interface.

LOW-FIDELITY WIREFRAMES

Based on the user flows and task flows, I sketched out key screens for each flow.

At this stage:
Explored general layouts and UI elements for each screen.

MID-FIDELITY WIREFRAMES

Created mid-fidelity wireframes of the key screens and expanded the design to include necessary screens for each flow.

At this stage:
Created more comprehensive and realistic UI components
Evaluated content structure based on visual hierarchy and layout
Set placement of images and icons

Branding

Skinset should bring to mind: skin, skincare set, and sunset.

The Skinset logo includes a sleek, elegant serif font with minimalist branded elements of a sun and stars. Skinset's brand values are inspirational, delightful, and ethical.

UI COMPONENT LIBRARY

The design system provides the ability to replicate designs using premade UI components.

HIGH FIDELITY WIREFRAMES

Based on mentor and peer feedback, I made the following updates from mid-fidelity to high-fidelity:

Added a toolkit on the homepage that pops up the first time users open the app to inform them of how to use the app.
Updated the onboarding quiz and face scan process to be more comprehensive.

USABILITY TESTING

Success metric: Can the user complete each task with a usability rating over 4.0?

Task flow 1: Onboarding

Average usability rating of 4.9/5

Task flow 2: Building a skincare routine

Average usability rating of 4.4/5

Task flow 3: Checkout

Average usability rating of 4.7/5

USABILITY TESTING

Key results

All users successfully completed the tasks.
Users gave the app an average overall usability rating of 4.25/5.

Key findings

5/6 users took their time during onboarding since it's about skincare, and they're interested in taking care of their skin.
4/6 users were expecting to see products populated on the "My Products" page instead of having to build one from scratch.
4/6 users wanted to customize their routine by editing or deleting categories.
4/5 users were confused when asked to shop for products in their routine because there wasn't a CTA on the "My Products" page.

FIRST IMPROVEMENT

Populated the "My Products" page with recommended products instead of requiring users to build a routine from scratch.

Users were confused to see blank categories on the "My Products" page. From the way the toolkit was worded, it made it sound like they'd be seeing product recommendations.

SECOND IMPROVEMENT

Added primary and secondary CTA buttons, which allows users to add products from this screen instead of having to shop from the individual product page.

Users were confused when asked to purchase products from the original screen because there wasn't a CTA button on the page. They would've had to click on a product and purchase from the product details page.

THIRD IMPROVEMENT

Made the touch points from the AI face scan interactive, so now users can see more details if they click on each point.

3/6 users clicked on the points from the AI face scan to see details during usability testing.

FOURTH IMPROVEMENT

Increased the affordability of the carousel of ingredients at the bottom of the screen to ensure that users don't miss it.

5/6 users overlooked the body text instructing them to scroll right to see more. To prevent this, I increased the affordability by decreasing the width of the cards and having the next one peek onto the screen as a visual cue.

Fifth IMPROVEMENT

Gave users more freedom and control by providing options to choose payment methods and add a billing address.

2/6 users expected to see an option to choose payment methods and input a billing address.

FINAL SOLUTION AND DESIGNS

The final product

CONCLUSION

Next steps

Explore ways to include educational skincare resources on the app.
Continue to refine the AI face-scanning technology to improve the accuracy and efficacy.

More projects: