top of page
Introduction
Skinfo
An end-to-end mobile app that provides users with the proper skincare education they need to make make smarter, better, and cost-effective choices when purchasing skincare products.
Duration: December 2022 - February 2023
Tools: Figma, Canva, Maze.co, Google Meet, Google Forms
My Role: Product Designer
Skills: User Research, Wireframing, Prototyping, UI Design, Usability Testing, Logo Design, End-to-End Development
Background
In today’s beauty industry, the skincare market is growing exponentially and only expected to increase in the future. Skincare has become trendy due to consumers being more health/eco-conscious and requesting more transparency with a product’s ingredients, increased interest in self-care and routines, desire for anti-aging products and a youthful appearance, the power of social media influence and brand promotion, accessibility to multiple skin care brands at different price points and various retailers, and the rise of skincare technology. Skincare is constantly changing as research identifies new beneficial ingredients, technology continues to improve, and awareness is spread via social media. The process to find the right skincare products for your skin can be confusing and overwhelming without the proper resources.
Objective
Implement the end-to-end development of a mobile app.
Scope
Create an MVP within an 80 hour time constraint over 4 weeks. Include a case study presentation and high-fidelity prototype to hand off to developers.
Devices
Mobile
Discover
Discover
Why
-
Learn about competing skincare education resources and how individuals educate themselves about skincare
-
Identify specific pain points, challenges, motivations, and needs when learning about, browsing for, and purchasing skincare products
-
Determine what is needed to provide a better experience for the user when learning about, browsing for, and purchasing skincare products
How
-
Screener survey
-
Competitive analysis
-
User interviews
-
Affinity mapping
Screener Survey
-
Created a screener survey using Google Forms.
-
Gained preliminary research, such as demographic information for individuals who enjoy skincare, like learning about skincare, and are interested in making educated decisions when purchasing skincare products.
-
Identified the target audience for my user interviews.
Takeaways:
-
73.7% of participants identified as female.
-
23.7% of participants identified as male.
-
52.6% of participants know what skincare products to use on their skin.
-
73.7% of participants have a specific skincare routine.
Competitive Analysis
-
Determined current competitors - direct and indirect.
-
I wanted to focus on popular skincare education apps (The Good Face Project and Think Dirty), as well as other platforms that provide skincare education (YouTube and TikTok).
-
Identified their strengths and weaknesses, what type of skincare education experience they provide, and what features they offer.
Takeaways:
-
In order to provide a experience for users to browse, shop, and learn about skincare, my design must:
-
Provide a way to search for ingredients ​
-
Highlight trending products and skincare topics
-
User Interviews
-
Interviewed 5 users within the target age group of 25 - 34 years old that was conducted in-person.
-
Empathized with their pain points and challenges when browsing, shopping, and learning about skincare.
-
Identified their motivations and needs when browsing, shopping, and learning about skincare.
Takeaways:
-
Pain points when browsing, shopping, and learning about skincare:
-
Cost/affordability
-
Too much information
-
Trustworthiness
-
​
“Transparency is a very big barrier. Even some blogs could be paid to promote some things and they don't technically have to tell you. So you don't really know if you're getting an honest opinion.”
- Jostin (Gender-fluid, 25 years old)
​
-
Motivations when browsing, shopping, and learning about skincare:
-
Recommendations/suggestions/reviews
-
Self-care
-
Treatment/prevention
-
“If there's a lot of people who have reviewed it, that's good for me too because I can see for different skin types how that product or ingredient worked for them to see what would be side effects, if it worked or didn't work, or how long it worked.”
- Marjorie (Female, 32 years old)
​
-
Needs when browsing, shopping, and learning about skincare:
-
Skincare education
-
Ingredients
-
Recommendations/reviews
-
​
“Because I had my kids, I had to research specifically what was safe for pregnancy and what was safe for breastfeeding. There's a lot of things out there that you can't use when you're pregnant or breastfeeding, so I had to do my own research and figure out what I could use within those guidelines.”
- Jonnicca (Female, 34 years old)
Define
Define
Why
-
Define the problems users face when browsing, shopping, and learning about skincare
How
-
POV statements
-
HMW questions
-
User personas
POV Statements
-
Actionable statement that is addressing the problem we're trying to solve
-
I’d like to explore ways to help individuals find more affordable skincare products that contain ingredients that are still effective in treating their skincare needs.
-
I'd like to explore ways to help individuals learn about skincare ingredients in a way that is quick, efficient, and easy to understand.
-
I'd like to explore ways to help individuals trust that the skincare information they are reading is reliable so they can make an informed decision on what skincare products to use.
-
I'd like to explore ways to help individuals build a sense of community by reading user recommendations and product reviews about different skincare products and whether or not it was effective for them.
-
Reframe question in a way that will help us generate solutions to the problem
-
How might we help individuals find affordable, yet effective skincare products, that can be incorporated into their daily routine?
-
How might we educate individuals about ingredients so they can make informed decisions to treat or prevent skincare conditions and maintain healthy skin?
-
How might we help individuals access reliable sources of information and confidently choose products that will work for their skin type?
User Personas
-
Identified user's goals, motivations, needs, and frustrations when browsing, shopping, and learning about skincare.
-
Created a fictional character that represents the target audience and helped me further empathize with the user and the problems they're facing.
Ideate
Ideate
Why
-
Brainstorm ideas and develop solutions to help solve our problems
How
-
Feature set
-
Sitemap
-
User flows
-
Task flows
Feature Set
-
Brainstormed possible features to include in the product.
Takeaways:
-
I kept my user personas in mind and thought of what features to include and separated them into 4 separate categories based on level of significance:
-
Must have
-
Nice to have
-
Surprising and delightful
-
Can come later
-
-
I prioritized what was needed to deliver an MVP and focused on including those in the final design.
Sitemap
-
Created a roadmap of the app and ensured priority features were included.
User Flows
-
Demonstrated the different paths a user could take when first logging into the app.
-
Created user flows for all the actions a user could take to access the different features and their functions.
-
The main 3 features are:
-
Account
-
Home/Feed
-
Search
-
Task Flows
-
Followed a user's journey through 3 specific tasks.
-
I discussed with my mentor and we decided to design flows that will show a user's experience with signing up and creating an account with the app, then using 2 key features, Home/Feed and Search.
-
Task #1: Create an account and complete "Skin Type Quiz".
-
Task #2: View blog post titled: "How to Build a Skincare Routine".
-
Task #3: Search for an ingredient called "Aloe".
Design
Design
Why
-
Establish structure and determine flow of design
How
-
Low-fi Wireframes
Low-fi Wireframes
-
After developing my task flows, I sketched out key screens for each flow using my iPad.
Test 1
Test 1
Why
-
Validate product by testing low-fi wireframes on potential users prior to applying visual design and refine based on any feedback that was received
How
-
Usability Testing
-
Priority Revisions
Usability Testing
-
After receiving feedback and performing any necessary iterations to my low-fi wireframes, I tested my flows on potential users to make sure they were easy to navigate before moving on to designing mid-fi wireframes.
-
I performed un-moderated usability testing using Maze.co for all 3 task flows on 3 users.
-
I learned that although it's important to test early on when designing, it's also important to ensure that sketches make sense and users are able to understand what the different elements mean. This is especially important when doing un-moderated testing where users aren't able to ask questions in real time.
Task #1: Create an account and complete "Skin Type Quiz".
Takeaways:
-
Most users thought the flow was straight-forward but felt that the "Skin Type Quiz" could be organized differently.
-
Fixed by presenting quiz questions one at a time with options to select rather than typing out a response. ​
-
Task #2: View blog post titled: "How to Build a Skincare Routine".
Takeaways:
-
Most users thought the flow was straight-forward but had difficulty figuring out where to click to view the blog post.
-
Fixed by making sure there were multiple entry points to access the blog post.
-
Task #3: Search for an ingredient called "Aloe".
Takeaways:
-
Most users thought the flow was straight-forward but one user had difficulty navigating the search icon.
-
Fixed by making sure the search icon was clickable and visible.
-
Design
Design
Why
-
Continue to establish structure and determine flow of design
How
-
Mid-fi Wireframes
-
Logo Design
-
UI Kit
Mid-fi Wireframes
-
After making priority revisions and receiving feedback from my mentor, I proceeded with developing my low-fi sketches into mid-fi wireframes using Figma.
Logo Design
-
I wanted to design a logo that was very simple and incorporated an information symbol to represent the main goal of the app, which is for users to gain valuable skincare information.
-
I came up with multiple designs using Canva. After discussing with my mentor, we decided to proceed with the logo that was the most consistent and easy to read.
Final Logo:
UI Kit
-
I compiled a UI Kit, which contained all the elements that I applied to the UI of my high-fi wireframes.
-
I wanted the brand colors to feel fresh, natural, and confident, similar to the elements of skincare. I decided on the brand colors of green, orange, and yellow. I incorporated lighter shades of each color to function as neutrals and secondary colors.
-
For typography, I decided to use a serif and sans-serif combo of Playfair and Avenir. They were both simple, fun, easy to read, and paired well together at different weights.
Prototype
Prototype
Why
-
Create a model that simulates how a user will experience the product
How
-
High-fi Wireframes
High-fi Wireframes
-
I used the UI Kit to adapt my mid-fi wireframes into high-fi.
-
After receiving feedback and performing any necessary iterations, I created a prototype using my high-fi wireframes that will be used for usability testing.
Mobile:
Mobile Mockup_1
Mobile Mockup_2
Mobile Mockup_19
Mobile Mockup_1
1/19
Test 2
Test 2
Why
-
Validate product by testing the high-fi prototype on potential users and refine based on any feedback that was received
How
-
Usability Testing
-
Priority Revisions
-
Final Prototype
Usability Testing
-
I tested my high-fi prototype on 5 users within the target age group of 25 - 34 years old that enjoy browsing, shopping, and learning about skincare.
-
I performed moderated usability testing that was conducted either in-person or via Google Meet/FaceTime for all 3 task flows.
-
Success metrics were determined by:
-
User successfully completed each task.
-
User was satisfied with interface of product and found it easy to use.
-
User had minimal to no errors while completing each task.
-
User was able to complete each task within 2 minutes.
-
-
Task flows: ​
-
Task #1: Create an account and complete "Skin Type Quiz".
-
Task #2: View blog post titled: "How to Build a Skincare Routine".
-
Task #3: Search for an ingredient called "Aloe".
-
Takeaways:
-
5/5 users were able to compete each task successfully.
-
5/5 users found that the interface was simple and easy to use.
-
5/5 users completed tasks with minimal errors.
-
5/5 users completed tasks quickly under 2 minutes.
-
5/5 users were very satisfied with their overall use of the product to complete each task.
​
-
Errors:
-
3/5 users clicked "Search" at first to locate a specific blog post rather than "View All".
-
-
Other findings:
-
"Skin Type Quiz" questions and responses needed more clarity and better representation:
-
5/5 users had difficulty answering question about breakouts
-
4/5 users had difficult answering question about skin reactiveness
-
3/5 users had difficulty answering question about pores
-
-
UI for different screens were hard to read or seemed confusing to user:
-
5/5 users had difficulty understanding the results screen
-
5/5 users had difficulty understanding the search screen
-
4/5 users had difficulty understanding the blog screen
-
-
Priority Revisions
-
After collecting feedback from users, I prioritized what was important to improve the usability and interface of my product then made iterations to my high-fi wireframes.
Before:
After:
Iterations:
-
Added visuals and brief description to show what different pores look.
Before:
After:
Iterations:
-
Changed responses to frequently, occasionally, rarely, and never to provide more clarity and representation.
Before:
After:
Iterations:
-
Changed question to “Do you have sensitive skin?”
-
Changed responses to “Yes”, “No”, and ”It depends”.
Before:
After:
Iterations:
-
Changed single image to separate images that have more contrast and are more visually appealing.
-
Made text that displayed different skin types bigger and more visible.
-
Removed yellow boxes and changed to more neutral colors.
-
Created more cohesion among the elements so that it flowed better.
Before:
After:
Iterations:
-
"New Skinfo” was made priority over blogs to highlight trending research and skincare topics.
-
Changed ”View all” button to all caps to appear more visible.
-
Removed yellow image and added images with similar colors to add more cohesion and flow.
Before:
After:
Iterations:
-
Removed yellow background so that it was more visually appealing.
-
Outlined containers in green to create separation among the different elements.
-
Made heart icon bigger to appear more visible.
Before:
After:
Iterations:
-
Added a heading that says “Trending products” to make it more clear as to what the products the user is viewing.
-
Added more white space and featured less products to create separation.
-
Removed yellow overlay to make product descriptions easier to read and more visually appealing.
-
Applied product information at the bottom of image.
-
Changed colors of button to a green outline.
Before:
After:
Iterations:
-
Removed yellow background and changed it to a white background to make it easier to read and more visually appealing.
Conclusion
Conclusion
Conclusion
-
Overall, I believe that this prototype was a success because 100% of users were able to successfully complete each task and found the navigation to be easy and familiar. I also learned a lot and was able to identify areas of improvement for further testing and development of my design.
Future Considerations
-
Due to the 80 hour time constraint over the course of 4 weeks, there were a few things I would do differently if given the time and resources:
-
Interviewing a larger and more diverse group of individuals so that I can gain more insight.​
-
Conducting usability testing with more people to get more feedback.
-
Continuing to build out the remaining flows.
-
Continuing to iterate and improve the overall functionality and interface of the product.
-
Working with a developer to finalize the product and bring it to life.
-
bottom of page