skingenious
SKINCARE
From fresh-faced beginner to skincare sage—your skin's evolution, made easy.
INTRODUCTION
Skingenious is a skincare app that delivers personalized routines and product recommendations tailored to each user's skin type, goals, and budget. Users track their skin's progress with daily check-ins, ensuring they receive the most relevant and up-to-date suggestions. My design challenge was to create a seamless, user-friendly all-in-one experience that not only educates but also provides detailed product reviews to guide confident purchase decisions.
To achieve this, I followed a five-phase design process—Empathize, Define, Ideate, Prototype, and Test—using a variety of user research methods to keep the design human-centered. As the sole UX/UI designer, I handled everything from market and user research to interface design and evaluation through each iteration, ensuring the app met both user needs and business goals.
background.
Having good skin is a positive sign showing that a woman is healthy and that it makes her feel confident with higher self-esteem. With the effects of covid, women are given more time for themselves and taking care of their skin is a way to help them keep up with their daily routine. Searching for an online skincare source that contains credible information and effective skincare products is not easy because of online difficult-to-realize paid articles and product promotion.
Solve the problem of lacking a reliable source of information for women when looking for skincare products onlineSecondary research, screener survey, user interviews, and usability testing
method.
Secondary research, screener survey, user interviews, and usability testing
Solve the problem of lacking a reliable source of information for women when looking for skincare products onlineSecondary research, screener survey, user interviews, and usability testing
objective.
the design process.
1. EMPATHY
I starter with conducting researches to learn the ins and outs of understanding my users and problem space to come up with an effective solution.
secondary research.
The Importance of Skincare and Good Skin
-
Reflects healthy lifestyle
-
Improves mental health and quality of life
-
Practice mindfulness
-
Buffers depression, worry, and anxiety
-
Boosts moods, feeling of accomplishment
-
Opportunity for bonding
(Source: InStyle & Everyday Health)
Users' challenges:
-
Products don’t work as promised (66%)
-
Unclear which are best for my skin (66%)
-
Routine is too expensive (60%)
(Source: InStyle)
-
Afraid to try something new (53%)
-
Lots of time and patience to find products
-
No products for all skin tone (2/3)
(Source: New York Post)
​
user interview.
User interviews were conducted early in the design process to obtain a better understanding of my users’ behaviors, pain points, needs, and goals
2. DEFINE
After obtain insights about my users and the design problem through researches, I created the User Persona, Empathy Map, and Job to be Done. All of which are great tools for my design workflows, helps me think more actively about my users and the decision making process.
persona.
empathy map.
SAY
-
Taking care of the skin is important because it affects how other people think about me
-
Not changing the products if they work
-
Depend heavily on reviews, more importantly, from other relatable users
-
Don’t want to update the app to finish ordering
FEEL
-
Good skin helps me feel confident, happy, and in control
-
The more popular the site, the more trustable the retailer/brand/product
-
Keep platform less distracting, less complicated info and irrelevant ads
-
Prefer simple and basic design
THINK
-
Keep using the same product if it works well
-
Convenient to discuss the problem with a real person and receive fast responses
-
Need accurate and relevant suggestions
-
Colorful design means cheaper products
DOES
-
Start the search with a skin concern
-
Want an easy and quick to navigate platform
-
Submit photos of their skin to get personalized advice
-
Care about product description, benefits, and ingredients.
PAIN
-
Completing a complicated purchase journey with too many steps
-
Price and Budget: Cheaper products are preferable if I don’t have a budget
-
Not being able to try the product if buying online
GAIN
-
Skincare is an investment that improves internal feelings, other people’s perceptions, and life quality
-
Want to feel safe using the suggested products
-
Pickup in store options
-
Being able to try out and return products
-
Rewards/ promotions
jtbd (jobs to be done.)
Job Performer (Who):
-
Women who care about their appearance
-
Circumstances (When/ Where): When searching for skincare solutions online during the pandemic
Needs (Why):
-
Improve one’s appearance with having clearer skin
-
Increase the accuracy of finding suitable and effective skincare solutions
-
Minimize the chance of being recommended irrelevant solutions
-
Minimize the steps to complete the solutions’ tasks
The Power of Taking Control
“I feel more confident.
I’m taking control of something that might be out of my control.”
“The Power of Taking Control” is one common pattern with my user interviewees. It’s the modern women wanting to take control of how they look, the products they choose, how they want other people to look at them, and how they make other decisions in life.
THE
SOLUTION
My solution for the design problem and the users’ concerns is to create a convenient on-the-go retail and education app named skingenious that helps the users:
-
Keep track of their skincare improvement on a daily basis, anytime, anywhere
-
Receive personalized skincare products and routine recommendations
-
Contact skincare experts for more in-depth solutions
-
Purchase skincare products right from the app with different sources of reviews without leaving the app
3. IDEATE
Before starting making any designs, I created a sitemap that helped me keep track of all of the different screens and visualize how they are all connected.
site map.
.png)
user flow charts.
After considering all the ways my users could navigate through the app, I came up with three red routes that are most essential and critical to the app to keep me on track when prototyping my design.
USER FLOW CHART 1: Accessing The App’s Home Page
USER FLOW CHART 2: Completing a Purchase
USER FLOW CHART 3: Updating Skin Progress In User Profile
wire flows.
Wire Flow is a combination of wireframes and user flows. While user flows represent the screens that user will interact with while using the product, the wire flows below represent the places (states and actions) that my users will interact with the various components of the product.
4. PROTOTYPE & TEST
skingenious. wants to be perceived as knowledgeable and friendly like a companion. The images used will promote a healthy and caring beauty community.
The app is inspired by UI designs that are feminine, elegant, yet modern at the same time. Learning shouldn’t be boring. skingenious. want the users to have fun and be bold with their decisions by using bold emphasis when neccessary. To help users focus on the information, I would use neutral colors, a lot of white space, and UI elements with thin lines and basic shapes.
style guide.
usability test &
retesting the iterated prototype.
I conducted Usability testing to understand the kinds of problems users might run into when interacting with the product design and how satisfied they would be with the product. I incorporated the feedback I received into my prototypes.
Then, I conducted another round of testing, synthesized my work and iterated on my ideas.
Changes made to Prototype:
Making content and imagery more inclusive to users
Adding a arrow icons to suggest users to keep interacting
Ensuring all “Back” buttons work properly
Enlarging product images
The onboarding screens represent positive and friendly images that attract users’ attention. With large headings and short introductions on each screen, the users are educated about the app on a basic level.
On these screen, the users are encourage to tap “Get started” to go the next or “Sign In” if they are returning users.
DELIVERABLES
On-boarding
1
2
& Sign-up
Log-in
After completing the quiz, users will be prompted to sign up in order to receive their results. The sign-up process is quick and straightforward—users can either enter their information manually or use social media buttons for a faster login.
Once registered, they’ll be greeted with a Welcome screen, where they can tap the “Access Results” button to view their personalized skincare recommendations.
Skin Quiz
3
Quiz: To discover their unique skin type and concerns, users embark on a quick quiz journey across 8 screens—6 of which are optional, allowing them to skip ahead if they wish.
Result: When they reach the Skin Analysis Result screen, first-time users are greeted with a clear, insightful breakdown of their skin’s needs.
Offer: Users are introduced to the Premium Skincare Program, with an option to "Join" or "Learn More," unlocking access to exclusive skincare guidance tailored just for them.
Skin Profile Screen: User can check their skin progress and start checking in
Users answer 10 basic questions about their skin that day and can write any additional information. They can save the quiz for 24hrs.
The daily check-in result screen that sum up the users’ input.
Regular Check-in
4
5+6
Home & Product
Home screen
-
The user will be greeted by name and encouraged to complete their "Skin Check-In" daily if they haven't already.
-
Recommended products based on their skin analysis will be displayed first.
-
Users can browse products by category, based on their skin analysis results, or by day/night routines.
-
Users are encouraged to join the Premium Skincare Program for personalized advice from skincare experts.
Product Details
-
A percentage score is shown up most to see how the product is compatable to the user.
-
A more detailed description about the product: usage, ingredients, and how to use.
-
Latest video reviews regarding the products
-
Real before-after image results
-
A written review section that summarizes what others discussed about the products and their uploaded photo results.
-
Reviews can be sorted and filtered based on users’ needs.
Check-out
7
To keep the checkout process simple, users only need to complete three main screens to successfully purchase a product.
-
Shopping Cart: basic products and price info
-
Check Out: Address, Delivery, Payment, Rewards
-
Users tapping the secured “Check Out” button
-
Thank you for purchase screen and recommendations
CONCLUSION
skingenious. was my first hands-on UX/UI design project, where I gained invaluable industry knowledge while building the app. Throughout the process, I focused on the 5-step UX design method, always keeping the user at the center. Without conducting user interviews, gathering insights, and performing usability tests, this design wouldn’t have been as practical or effective.
​
Reflection: If I had the chance to redo this product or start a new one, there are a few areas I'd approach differently:
-
Be more time-focused: I’d manage my time more effectively, ensuring that each phase of the design process gets the attention it deserves.
-
Create more efficient animations: Spending more time on animation design would help streamline the handoff to developers and enhance the overall user experience.
-
Dive deeper into user interviews and usability testing: Due to time constraints, I felt I could have gathered more valuable insights. In future projects, I'll prioritize better time management to allow for deeper user research and more thorough testing.
Next Steps:
-
Incorporate mentor feedback: to refine and improve my portfolio.
-
Review Hiring Manager feedback: to align my work with industry expectations.
-
Manager Review, then making final changes to the app design and the portfolio
Photo credits: pexels.com
.png)
The Power of Taking Control