Simplified User's Skincare Journey from Education to Tracking
In my first UI/UX project with Design@UCI, we built SkinTrack—a platform for logging skin progress, tracking ingredients, and delivering bite‑sized skincare lessons so users can cut through information overload and personalize their routine.
ROLE
Product Designer
DURATION
Jan - Mar 2022
INDUSTRY
Mobile
Skincare

SKILLS
User Research

Design Systems

Visual Design
TOOLS
Figma
Notion
FigJam
Adobe CC

Understanding the Problem

Accurate Information is Inaccessible
Difficulty Navigating Resources
People are running into skin problems and are not sure where they can seek help from or what ingredients are good for their skin.
Affordability
There are a lack of trusted skincare providers that areaffordable.
Lack of
Knowledge
There is a lack of knowledgeon which skincare products are good for our skin.

"How might we help users feel more confident in navigating their skincare journey and empower them with the tool to comprehensively digest the landscape of skincare information?"

The Solution

Understanding the User

Narrowing Down Target Audience
Ages 18-25, with pre-existing skincare routines but are not satisfied with their current results and want to learn more
User Research (Surveys)
Survey Research Objectives
1. Who are our users/target audience? (age, gender, etc.)

2. How much do our users know about skincare and how do they get this information?

3. What are our users’ experiences with skincare?

4. What features are users looking for in a skincare interface?
Key Findings
01

Users already have skincare routines and have tried many different routines, but are not completely satisfied with their skin for the most part
02

Our target audience are primarily skin conscious young adults who are around 18-25 years old.

Competitive Landscape

Key Findings
Current Products Lack Personalization
Many Preexisting Products Provide Educational Aspects
Products Already Do a Great Job with Providing Ingredient Information

Designing

Determining User Flows

Wireframes created by each
team member

Since many of the group members were beginners at product design, we each designed our own set of key low fidelity wireframes and later came together to create a finalized set of low fidelity wireframes we were going to base higher fidelity designs/iterations on.

Agreed Upon
Wireframes

We agreed upon these wireframes because they gave us a good starting to base higher fidelity designs on and displayed the features we wanted in our product in an understandable way.From the process of designing various low fidelity wireframes with our user research findings in mind we decided to include these key features in our product (can be seen in the below wireframes):Product Recommendation, Tracker, Educational Tab, and Journal

Design System

Colors
Blue is a common color used in major skincare brands’ marketing and packaging designs, I thought it would be a suitable design choice to user for our product. The pastel orange was added into the color palette to act as an contrasting, accent color to draw attention to important element within the product.
Typography
For typography, I also proposed we used modern fonts such as Montserrat and Poppins. I proposed these serif fonts to establish an easy-to-read typeface and to further communicate that “clean” messaging within our app.

Determining User Flows and Design

Onboarding Users in a Quiz Format (Onboarding User Flow)
Our team wanted to create flows that were familiar and comfortable for users to interact with. Common online skincare services like Curology usually onboarded users by gathering information about their skin in a simple, easy-to-follow quiz format.
Starting Flows from the Home Page
Our team believed that having a dashboard-style Home Page to begin every flow would be easier for users to interact with since our product attempts to implement many features. Users would overall have an easier time navigating the product and its features in this way.
Notable Design Decisions
Rounded Corners and Drop Shadows
for the Question Box to reduce harshness in the design and establish hierarchy in the design compared to other elements
A‍dding
Progress Bar
to provide constant feedback to users to ensure they know their progress during the onboarding process
Adding "Tell Us About Your Skin" Copy
to not only prompt users to a specific action but to also the onboarding process feel more personalized to the user

Passion Project Takeaways

Better Research
Moving forward, instead of asking biased/unhelpful information about specific features to implement, I want to do more research to understand the users themselves more.
Time Management
Lacking external deadlines, I would time‑box each design phase to maintain momentum and balanced focus.


Conduct User Interviews
Having user surveys can only reveal so much. I want to conduct interviews in the future to understand different painpoints and use surveys as a opportunity sizing tool instead