.png)
Project Overview
What is SKINFIT?
SKINFIT is a mobile application that helps users identify ingredients in skincare products that they may be allergic to or sensitive to. Personalized product recommendations are based on the user’s individual needs.
Personal Challenge
The inspiration for this project came from my own experiences with skincare.
During my time as a beauty advisor, I had to attend seminars hosted by different brands to learn about their products. It was important to me that I understood the science behind the products as much as I could to help my clients find products that are most suitable for their individual skin.
But it wasn’t that easy. Each person’s skin type is different. It was hard to learn the ingredients—it was impossible to as there are so many and even different names for the same ingredient. To this day, as someone with rosacea, it's still hard to find skincare products that don't irritate my skin. Skincare isn't one-size-fits-all.
For this project, I wanted to create a platform that can help individuals find out why a product might not work for them.
My Role
UX/UI Designer, UX Researcher
My Tools
Figma & InVision
Project Type
Academic
Duration
Academic
Project Goal
To provide a human-centered digital solution that meets accessibility guidelines and is straightforward to use.
Double Diamond Design
Following the double diamond design, I approached this challenge with my own process in order to do the right thing to empathize with the user and better understand their frustrations with skincare.
Secondary Research
But this isn't about me. It's about the users. So I did some research to identify the challenges that people are facing with skincare. Here is what I found:
The Dirty Dozen article published by the David Suzuki Foundation states that one in eight of the 82,000 ingredients used in personal care products are industrial chemicals: carcinogens, pesticides, reproductive toxins, and hormone disruptors.
With a large amount of skincare products available for purchase, it can be overwhelming and confusing for new users as well as more experienced users to find products that are suitable for their skin.
Furthermore, cosmetics are not FDA-approved and as numerous social media influencers get paid to promote products, potential buyers may not be aware that the products they purchase are harmful to their skin.
Although social media platforms have taken the initiative to help educate people on harmful ingredients, there are thousands of ingredients with various names which may be confusing to learn and keep track of.
What People are Saying
User Interview & Insights
To learn more about the behaviours, motivations, and pain points of my users, I talked to 4 adults (22-27 years old) who have at least a little experience using skincare products. The interview was conducted by asking a series of open-ended questions and collecting direct quotes from the participants.
Here are the insights with their common goals and frustrations categorized into themes:
Learning
-
People want an easier way to learn skincare and its purpose.
-
There are many different steps to skincare which makes it overwhelming.
-
It’s confusing to figure out what products you can use together and what you can’t.
-
Ingredients come in various different names, making it hard to remember.
Effectiveness
-
People dislike wasting products.
-
People dislike having to spend a lot of money to find out the products don’t work for them.
-
People find it difficult to find products that work for their skin
Trust
-
People don’t know who to trust as YouTubers, social influencers, and bloggers may be paid to promote products.
Direct Quotes
“I don’t have the time and patience to learn and search up every scientific name so I really rely on reviews and trial and error”
“Nivea makeup remover broke me out. I don’t know why and I just didn’t bother to try and figure it out because there are too many ingredients in there.”
Persona & Experience Map
From the interview insights, I gained a better understanding of the challenges people are facing regarding skincare. I developed a persona and experience map to paint the frustrations and goals of the target users and to identify opportunities that drive digital solutions.
.png)
Areas of opportunities identified based on pain points and goals:
-
Opportunity to input her skin type, concerns, and goals to recommend suitable products
-
Allowing people to identify what ingredients do not work for them by analyzing current products being used
After looking at the persona and experience map, I realized that my target users want to feel confident about their skincare purchases so they don't waste money. They also want to know what and why certain products and ingredients don't work for them.
How might we help guide new cosmetic users so that they obtain accurate information in order to make informed decisions on skincare purchases?
Task Selection
Considering the needs of Anna the persona, I authored around 30 user stories under 3 epics to capture the functional needs of my target users.
I created the products value proposition to help me decide the functions and features of my design.
Value Proposition
A mobile app that helps new users identify the ingredients that can cause sensitivity and other negative reactions as well as personalized product recommendations.
Core Epic
Skincare knowledge
I developed a task flow to depict the expected user path as they complete a task. This helps me to visualize concepts and ideas for ideation and sketching.
The chosen task flow below shows a user scanning their skincare products to identify ingredients that irritate their skin or cause other negative reactions, so they can determine what ingredients to avoid.
Ideation Sketches
It was time for ideating and sketching possible digital solutions. Pulling from inspirations from other UI components and apps such as Sephora, McDonald's, mobile IOS, etc, I sketched some design elements. I kept in mind to use white space and larger cards for a clean design. The highlighted ones are the chosen ones that I based my version 1 wireframes on.
User Journey
Home Screen
Select Skin Type Screen
Select Skin Concern Screen
Search Product
Scanner & Product Found Screens
Search Results Screen
Wireframes
After exploratory sketches, I created the grayscale wireframes to prepare for prototype testing. As target users are already overwhelmed by their challenges with skincare, my goal was to create as simple and user friendly of an app as possible.
.png)
Version 1 Wireframes - view the full prototype here
Usability Testing
Time for practical real-time feedback
I completed two rounds of usability tests with 5 different users in each to gain insight into how users would interact with the prototype. This helped me to make design changes to improve the functionality of the app for users, enhancing the user experience.
The first round was to iron out any confusion and get feedback for design changes. The second round is to whether the design changes are effective and whether the user experience has improved. It also allowed me to find out whether anything has been missed in the first round of user testing as well as get additional feedback for further improvement.
The users were asked to complete a primary task which is to scan skincare products to compare and identify ingredients.
Selected User Story
As a new skincare user, I want to compare my products to identify common ingredients that irritate my skin, so that I can determine what ingredients to avoid
Overall, the app was described as clean and easy to follow. All users completed the task without major issues. However, there was still much room for improvement to iron out minor confusions.
Home Screen
Changed “Add” to “View” to keep it consistent and to reduce redundancy
Replaced “Identify Ingredients” with “Scan Products” so it stands out more as a key feature of the app
Moved “View More” from under Allergens to the right of Skincare Knowledge to minimize confusion
Moved “View more” from under Paula’s Choice Toner to the right of Suggested Products to minimize confusion
.png)
Select Skin Type Screen
Changed “Select your skin type” to “What is your skin type?” to sound more human and interactive and to match the greeting on the home screen
Widened the “Next” button so it is the same length as the other buttons on the screen
Select Skin Concern Screen
Changed “Select your skin concerns” to “What are your skin concerns?” to sound more human and interactive
Changed “Up to 3” to “Choose up to 3” for clearer instructions
.png)
.png)
Scanner Screen
Added the word "scan" under the scanner button so users would know where to tap to scan a product
Product Found Screens
V1 to V2:
Changed “View Details” to “Compare” after scanning the second product to minimize confusion as it is unclear whether you're viewing details for all the scanned products or only the second
V2 to V3:
Changed the Scan Another Button to a darker gray and changed the text to white to different the buttons
.png)
.png)
Search Results Page
V1 to V2:
Rearranged the order of the screen where "ingredients identified" and the corresponding details are at the top of the screen as users already know what products were reviewed
V2 to V3:
Changed "Ingredients identified" to "Search Results"
Changed "View alternative names" to "View similar ingredients" as there are also ingredients that have similar properties but aren't exactly the same
Added "New Scan" and "Scan Another" so users can either add more products to analyze or start a new scan
Renamed "View Ingredients >" to "Product Details & Ingredients" and moved it to make it a description as it currently appears as a separate link to the existing card
Brand Identity
It was time to set the tone with visual identity before colour injection and to create the high-fidelity prototype.
Describing my brand in words:
More simple than complicated
More modern than old fashioned
More elegant than dull
More soft than loud
More feminine than masculine
Using these words, I searched for inspiration and created a mood board with images, typography, and colour that captured the vibe I was going for.
I thought the phrase "you can do it" captures the mission of the app well as skincare can be quite overwhelming but not impossible. The app was created with the motivation to help make skincare easy to learn.
Naming the App
I wanted to keep it short and simple. I also wanted a name that would look aesthetically pleasing as one word when spelled together.
The two that I really liked—Skinfo and iSkin—are, unfortunately, existing apps.
I thought about iSkincare but I felt that was a little too long. Skintrition was a little too formal. BeautiPal didn’t quite capture the app’s vibe.
Finally, I decided on Skinfit—where the “fit” represents how skincare isn’t one size fits all.
.png)
Creating the App Icon
During this stage, I knew I wanted to create an icon that resembles a leaf—to represent cleanliness and eco-friendlubess—or an abstract S—as the brand name is Skinfit.
Final Product
After brand identity and further usability testing, it was finally time for colour injection and to transform the prototype into a high fidelity prototype.
High Fidelity Prototype
Welcome to SKINFIT, where skincare is made easy to learn.
Images of hi-fi prototype
On the home screen, they can see the feature “Scan Products” with a caption that says “Find what doesn’t work”.
On the select skin concerns screen, the user can choose up to three concerns that will allow the app to analyze and identify the ingredients that are potential causes.
The product search screen explains how features works and the user can either scan products they have on hand or a search for products online.
The product found screen allows the user to either scan more products or see results.
The search results screen tells the user what ingredients have been identified to be the causes of the skin concerns with detailed explanations. Personalized recommendations to other products that are free from those ingredients will be tailored to the user based on their individual needs.
What's Next for SKINFIT?
Next Steps:
Step 1:
I will conduct interviews with users that have experience with makeup as currently, my app is only for skincare as none of the participants I interviewed wear makeup.
Step 2:
I would also like to expand on the other features of the app such as personalized skincare routines as another challenge that users currently face is that many steps of skincare get confusing. Users are also confused about what ingredients can and shouldn’t be used together.
Step 3:
I plan to ideate and develop an iPadOS of this app as it is important that users can access the app from multiple platforms. Users like to use their iPads or other tablets at home as it’s a larger screen.
My Takeaways
1) Ask the right questions
I learned to always ask open-ended questions during interviews as that will promote conversations and insight into the challenges that my target users are facing
2) Design for Accessibility
For every decision that I make, I need to consider accessibility from the start as it’s important to me to be inclusive to everyone. It’s not about me, it’s about the user.
3) Continue to make improvements
Testing and designing are continuous processes and I am not done. As UX copywriting is important, I have to ensure that the writing is straightforward and not confusing to the user. I am also constantly being challenged by constraints such as time so more usability testing and feedback for improvements can and should be done.
4) Conduct more research
As my app deals with ingredients and skin concerns, I have to ensure that the information is correct or I risk users losing trust in my product.