Design Role
・UX Designer ・UX Researcher・UI Designer
Duration & Tools
・3 Weeks ・Figma・Google Workspace
Part 1: Overview
Client
Jessica Watanabe. She is passionate about skincare. Currently, no skincare app satisfies her and she was looking for a user-friendly skincare app.
The Problem
-
Finding the proper skincare products can be extremely difficult with all the various options and brands out there.
-
It's hard to tell how your skin is changing unless you keep a photo record of it.
-
When you use many products, you forget what you thought of the skincare products you used before.
Solution
Bare Skin offers three features:
-
Skin Type Quiz: Answer a few simple quizzes and upload a photo of your skin to find out your skin type.
-
My Products: Record information and impressions of the skincare products you use for future reference.
-
Skin Log: Keep a skin log with photos to track changes in your skin condition.
Part 2: Research & Discovery
Market Research
I began with market research to understand the skincare industry by collecting information on demographics, market trends, and user preferences. Here is what I found:
-
Millennials are the largest consumer group with the highest purchasing power
-
53% of women think their skincare is ineffective and are afraid to try something new
-
AI and virtual advisers help to provide personalized experiences that consumers need
%201.png)
Market Research
I conducted user interviews with five participants, four female and one male, between the ages of 25 to 35, all of whom have a skincare routine. I outlined a series of open-ended questions to scope out user behaviors and pain points of finding skincare products.
-
People are not pleased with their current results and do not know if their routine is effective: Four out of five respondents said they are unsure if their current skincare products would make a difference.
-
People spend too much time researching online: All participants have spent hours - even days - researching the ingredients being used in products before they make any purchases.
-
People try too many different products and forget the ones they used before: Four out of five participants said that they don't record their impressions of the skincare products they use, so they don't remember much about the products they used before.
Competitive Analysis
.png){kind=small}
Neutrogena Skin360
Strengths
-
Free App
-
Take a 180-degree selfie analysis using a smartphone
-
Generates an AM/PM skincare routine based on skin type
Weaknesses
-
App only works in the U.S
-
Skin analysis results show on a 1-10 scale (not analytical)
-
Only recommends Neutrogena products
UI Design
.png){kind=small}
Trove Skin
Strengths
-
Free App
-
Has product routine recommendations, skin goals, and let users take photos of the products they use to keep track
Weaknesses
-
Can’t get product recommendations
-
Lighting affects the analysis
-
Skin analysis results aren’t analytical
UI Design
User Persona
Using the user insights as a guideline, I created a fictional but realistic persona, whose needs and goals I would be revisiting throughout the project to ensure that all the design decisions I make would be for the user. Meet Sara!
Journey Map
User Flow
I created user flows to visualize the path a user would take through my interface to complete the high-priority tasks identified in my user stories. This helped me understand the kind of visual hierarchy I would need to design and how all the elements would relate together.
Sketches
%201.png)
Low-Fidelity Wireframe
Using the user flow and my competitive analysis, I created low-fidelity wireframes. After developing and few iterations in the wireframe process, I settled on how I wanted the app to flow visually from the home page through the skin log.
Part 4: Visual Design
Style Tile
I wanted to create a minimalist design with luxurious color tones, so I decided to use light blue as an accent color to prevent the main color from becoming too dark and heavy.
Prototype and User Testing
I outlined a usability test plan and recruited five participants to:
-
Access & take the skin analysis quiz
-
Access the contact button to speak to a skin expert
-
Access the Product Ingredients page
-
Access & add the product to my products list
The five participants were able to successfully complete all tasks!
Feedback and Iterations
Feedback: "Maybe later" doesn't look like a button and this button is unnecessary. "Sign in" is hard to read because it is integrated with the background behind it.
Iteration: Removed “Maybe later” and changed the color of "Sign in" from beige to white to increase the contrast.
Feedback: It isn't obvious when two buttons with the same color have different actions.
Iteration: Changed the color of the buttons to default/secondary and increased the size slightly.
Feedback: "Live Chat with Specialist" is long and difficult to read.
Iteration: Changed to "Live Chat" only.
High-Fidelity Prototype - The Final Design
Onboarding
Skin Type Quiz
Quiz Results, Product Reviews, Buy Now
Home, Product Records, Skin Log
Part 5: Reflection
What I Learned
User research is the necessary foundation of any design process. I learned that you must constantly think about the user every step of the way, understanding whom you're designing for, and always asking "why" is crucial in bringing your designs to life.
Overall, Bare Skin taught me how to apply conceptual thinking to applied designs. From thinking about the problem to working towards producing a solution, I learned how each step should have a purpose in order to reach the end goal.
Next Steps
Based on my user interviews, I would like to add some other features in a future version.
-
Expand the scope of the product according to the user’s needs
-
Products can be purchased within this app
-
Implement a point and reward system