web design
Skincare, Simplified
Bringing routine building, ingredient analysis, and compatibility checking all in one place — so skincare finally makes sense.
context
Project Overview
The Challenge
Skincare should be simple — but between conflicting ingredients, misleading marketing, and paywalled apps, building a routine that actually works feels overwhelming. After going down my own skincare rabbit hole, I noticed a gap: no tool combined routine building, ingredient checking, and compatibility analysis in one place.
The Solution
I prototyped a webapp to address these gaps.
my role
What I Owned
Discovery & Research
- →Competitive Analysis
- →User Flow
Design & Prototyping
- →Wireframing
- →Figma Make for Iterations
- →Style Guide Creation
outcomes
The Prototypes
A simple website that achieves it all: craft a personalized routine, view community routines, and check the compatibility of ingredients in your current routine. This was a self guided project to grow my familiarity designing with AI and to create a passion project for my interests- the design is consistently being refined in my free time.
Personalized Skincare Routine (Slide 1-2)
Users participate in a short quiz and the app will then populate a simple routine curated to their concern and climate conditions. With so many emerging products, it's easy to be overwhelmed at first. Having examples provided can start the user with basic information on what they should be looking for.
Ingredient Compatability Analysis (Slide 3-4)
Efficacy of certain ingredients can be absorbed better while others can cancel each other out. I wanted to highlight this in the design, where users can the results of their own routines.
Community Routines (Slide 5)
Users would rather trust more commonly-used products that target address their skin concerns. Being able to have this view on the site, separate from paid promotions, was the inspiration.
methodology
The Process
Competitive Analysis
I looked at existing skincare apps, websites, and how people often asked skincare questions. The idea for this project came from many hours on skincare subreddits.
Ideation > Experience
My research informed me of the gaps between different sites: no one had it all. From this, I drafted potentials flows for how a user would interact with the site, narrowing down to three main areas that were most commonly searched for.
Wireframes
I created a style guide to establish an identity for the site, and used that to draft initial wireframes. I worked with a software engineer to determine feasibility for different features — because good design doesn't need to be complicated.
User Testing
With the wireframes I had polished, I utilzied Figma Make (Gemini Pro 3 model) to help me iterate on my designs and fill in the blanks. It helped populate text, created a more structured look, and helped give inspiration for the next iteration.
