Finding Your Makeup Match - Foundation
An app designed to help people find makeup products based on their personal skin type, tone, and color.
Overview
"I can't find the right products for me"
I’ve had friends and family members express difficulties when shopping for beauty products. They've shared how overwhelming it can be to find what works for them. I can see the challenges in finding the right beauty product for the right person. I wanted to find one of these problems and solve it.
September - December 2022
Role:
Product Design
User Interviews
User Research
Prototyping
Tools:
Deliverables:
Mockups
Prototypes
Documentation
Problem
Understanding the why - goals, assumptions, etc.
💡WHY
As a beauty lover myself, I want more people to feel confident and enjoy finding and purchasing products.
🎯 GOAL
Find a problem within the beauty shopping experience to solve.
🧐 INITIAL ASSUMPTIONS
Majority of people feel overwhelmed by the amount of options that are available.
Target audience will be largely women.
Finding the best product for ones skin is a common struggle.
🗓️ CONSTRAINTS
Self-imposed constraints: 3 months to perform research, ideation, and delivery. Must be within the beauty shopping experience.
Solution
Find the right products for you - Foundation App
From my research, I found several problems to be solved. I decided to focus on one: helping people find the right beauty products based on their skin type, tone, and color.
Beginning of the experience to build a tree back to the ancestor they have found
Research/discovery
Understanding the WHO and WHY
Research Goals: Discover who I am designing for, their pain points, and needs in the beauty shopping experience.
Survey
Why: understand the demographics I will be designing for.
I surveyed 121 people through Qualitrics. From my survey, I learned the following about my users:
Female
Ages 18-36
Employed full-time
Categories of beauty products purchases most include (in descending order): haircare, makeup, and skincare
Most important factors when buying beauty products: recommendations from others, reviews, and prices
Most expressed challenges when buying beauty products: getting the best quality for the best price, finding the right color, and too many options
Interviews
Why: dive deeper into my user's current paint points, needs, and motivations.
My survey helped me create questions to dive further into my users needs and pain points. I interviewed 6 women ages 23-36 years old who buy beauty products.
Sample Questions:
What kinds of beauty products do you purchase?
Where do you shop for beauty products?
Tell me about your last beauty purchase?
How do you know a beauty product was worth or not worth the money?
How does color play a role when choosing makeup products?
Interview with Megan E.
Interview findings:
Finding the right colors was mentioned in all interviews
A common complaint shared by all but one user was a product not meeting a users expectations
Expectations are formed by reviews, product claims, and recommendations
Four out of six said shopping for beauty products can feel overwhelming
Three out of six shared a desire want to see the product on actual skin and in use
All but one user utilizes their mobile phone when searching/buying online
Competitive Analysis
Why: see what is out there, what is being solved, and what is missing that can be in my solution.
I analyzed mobile beauty applications that have the goal of helping users find the right products for themselves. Those apps were: E.L.F. App, Slapp, Brandify, and Mirror Me by Mary Kay. Each app had their strengths and weaknesses. I wanted to carry over strengths from the apps such as easy navigation, a community feature, and a minimalistic color scheme. However, I found that none of these apps truly answered a problem users have: finding the right colors for them based on their skin.
Diving into design
User Personas
Why: visualize the data/information collected during research.
From my surveys and interviews, I created two personas. These profiles helped me make design decisions later on in the process such as what features to include and the hierarchy within the app.
Persona of a minimal, money-conscious person
Persona of a makeup lover
Empathy Map
Why: To see what challenges Katie faces and what she sees/hears out in the world currently.
Empathy map for makeup minimalist
Information Architecture
Before sketching the app, I confirmed all the needed information.
User flow
With the information architecture created, I made a flow chart for the app. This was beneficial as I could see what steps the user would need to accomplish their goal (buying a product that matches their skin). This process supported the sketching and designing of the app.
Ideation
Uber's Base Component library was the chosen vehicle for this step. This allowed me to design quicker and keep the design guidelines mobile friendly.
Some of the sketches done for the app
With my user flow and information architecture, I was able to sketch various solutions with the personas, Katie and Brittany, in mind. Specifically, I focused on their wants and needs with regards to the hierarchy in the app.
Paper prototype
Using the best ideas from the sketches, I made paper prototypes and focused on 6 screens considered vital to the users end goal. The goal was to see what the users mental models were, if their needs were being met, and what users would want in the app.
Low-fidelity designs
As the initial design phase continued, I based screen designs on feedback and findings from user research.
High-fidelity designs
Testing
2 Goals: 1) Determine if users can complete core tasks within the prototype of the color matching app. 2) Determine if the app is user friendly.
Study Questions:
What can we learn from the steps that users take, to find makeup?
Are there parts of the user flow where users get stuck?
Are there more features that users would like to see included in the app?
Do users think the app is easy or difficult to use?
Scenarios
Let’s say you want to try a new foundation but have no idea what would be best for your skin. You heard about this app and downloaded it. You are opening it for the first time. Your task is to buy a foundation.
You want to leave a review on the foundation you tried. How would you do that?
Let’s say you want to ask people on this app for a blush recommendation. Show me the steps you would take.
You want to receive updates when people comment on your posts. How would you do that?
Let’s say it’s now summer time and you have tanned a bit. How would you figure out the right colors for you?
Round 1 | Paper prototype
Findings:
The skin assessment was confusing - improve design
“How to” on the product page has different meanings for each person - be more specific
Everyone found the app simple to use to and easy to navigate
The focus isn’t clear - is it a shopping app or an app just to help you find your skin tone and color?
CHANGES MADE:
Improved the design for the skin assessment to ensure the purpose is clear and interactions match the users expectations.
Round 2 | Low-fidelity prototype
Insights:
Be more descriptive on skin tone tests
Users found cart location confusing - move cart to bottom navigation
Search filter was overlooked (only one person clicked on it)
Recommended foundation color on the product screen was never seen
The community aspect is still a bit confusing to users (unsure of its purpose)
CHANGES MADE:
Updated the navigation to include the cart
Moved the recommended foundation color to be above the color options
Round 3 | High-fidelity prototype
Insights:
The UI is pleasing to the users - seems luxurious
The app is easy to navigate and use
Difficult to see the number of items in the cart
Users want deals within the app (want to get the lowest price)
Remove the edit profile tab - seemed redundant next to settings tab
When users heart an item, they expect it to be under "favorites" not "saved products"
CHANGES MADE:
Improved the navigation bar on the bottom to make the number of items in the cart easier to see. Also, added a line under the "current" screen to account for accessibility needs.
Changed hearted items to favorites instead of saved products. Removed edit profile as users could make changes under settings. Improved the colors of the UI throughout the app.
Final Designs
Based on user feedback from the 3rd usability study, the Foundation experience is intuitive, the app is easy to use, and users accomplished their end goals.
What I learned:
Effective discovery research
How to perform competitive analysis
Use and adapt a component library for designs
Next Steps:
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine new areas of need.
Add more features and flexibility backed by research.
Final home screen and product screen
Interaction with product page
Final designs