Clean Collective Skincare App

Making skincare accessible and approachable, empowering users to take control of their overall skin health.

ROLE

UX Research
UI Design
Branding Design
Prototyping
Usability Testing

Project Duration

Started Jan - Feb 2021; Iterated Aug - Sep 2021

Tools Used

Figma
Maze

Team

Florence Liu (Team Lead)
Iris Chuan
Christiana Ma
‍Melanie Torres

PROJECT CONTEXT

I love skincare, but I know not everyone has such a positive experience with it.

Recently, there's been a boom within the health and wellness industry, and specifically within the beauty and skincare space. It’s a growing demand, since as many as 85% of Americans between the ages of 12-24 experience at least minor acne (AAD). Despite this large statistic, I’ve seen from personal experiences that skincare doesn’t seem to be for everyone, and that the journey towards achieving happy and healthy skin is filled with roadblocks.

In all honesty, skincare can be quite inaccessible with multiple barriers to entry. This led me and my team to pose the following problem statement.
It's easy to feel overwhelmed with such a variety of products on the market.
THE CHALLENGE ⚡️

How might we create a more approachable and accessible platform to help skincare users find products and create routines that work for them?

EMPATHIZE

DIVING INTO RESEARCH

Some assumptions I wanted to validate...

When thinking about a potential solutions, I first wanted to jot down some of my initial assumptions regarding user's experiences with skincare and see if our team could validate these pain points through research.
  • Many users have difficulty picking skincare products that works best for their specific skin types.
  • Many users don't actually know or understand why they add products into their skincare routines, and can oftentimes overcomplicate their routines with excessive products.
  • The current market for skincare can create decision paralysis for many users from excessive product marketing, product over-saturation, and lack of skincare education.
We held these assumptions in the back of our mind as we proceeded onto research and further understand the space.

RESEARCH FINDINGS

Understanding the space and its users

Findings

Findings ✍️
  • Many of the existing skincare apps have traditionally feminine colors and overall looks.
  • Some competitors include very niche/advanced articles and posts that can be confusing or overwhelming for beginners to skincare.
  • Skincare 'quizzes' are used prevalently to consider different factors of a user's skin issues and offer further recommendation.
Insights 💡 - Inclusivity & Personalization
  • Ensure that the app we create is inclusive of all ages and genders.
  • Appeal to users with various backgrounds of skincare knowledge by limiting excessive or intimidating amounts of information.
  • Encourage users to share their experiences to receive personalized advice and recommendations for their unique skin type.

User Surveys

Findings ✍️
  • Finding products geared specifically for them and their skin can be very difficult. Many felt discouraged when popular products did not work as well as reviews may have advertised for them.
Insights 💡 - Consumer & Product Compatibility
  • Stress that skincare isn’t one-size-fits all, and that education is the best way to understand what may work for their skin. Make it easier for users by showing reviews and recommendations from users with similar skin types.

User Interviews

Findings ✍️
  • Skincare research can be overwhelming and confusing. It's especially difficult to understand if multiple products are working well together when incorporated in a routine.
Insights 💡 - Products in Context
  • Teach users the different types of skincare products, what their purposes are, and how to curate a well-balanced routine with active ingredients that don’t counteract each other.

RESEARCH FINDINGS

Understanding the space and its users

Findings ✍️

Insights 💡

Competitive Analysis
  • Many of the existing skincare apps have traditionally feminine colors and overall looks.
  • In AI skin analysis, some competitors used discouraging verbiage and rating systems that could diminish confidence and put users down.
  • User must manually log and choose their won products and create routines
Inclusivity & Personalization
  • Ensure that the app we create is inclusive of all ages and genders.
  • Validate users of all skin types and avoid negative labeling words.
  • Provide instant skincare insights or based on the user’s personalized skin concerns and give structure to building routines.
User Surveys
  • Finding products geared specifically for a user's skin type can be very difficult. Many felt discouraged when popular products did not work as well as advertised.
Consumer & Product Compatibility
  • Stress that skincare isn’t one-size-fits all. Make it easier for users by showing reviews and recommendations from users with similar skin types.
User Interviews
  • Skincare research can be overwhelming and confusing, especially when considering multiple products that are incorporated in a routine together.
  • Users are frustrated by inaccessible information and jargon of ingredients that makes them feel discouraged to learn more products.
Products in Context
  • Teach users the different types of products, their purposes, and how to curate a well-balanced routine with ingredients that don’t counteract each other.
  • Appeal to users with all skincare backgrounds, empowering users with digestible and approachable information.

USER PERSONAS

Meet Our Skincare Connoisseurs

My team created two personas with the intention to create an app that was valuable for all experience levels of skincare users. As a skincare newbie, Andrew would be able to learn and build a routine from scratch, while the more experienced Avery would be able to add her to knowledge, and analyze her existing routine.

DEFINE

FEATURE PRIORITIZATION

What would benefit users the most?

In order to narrow the scope, I began to list all potential product features out so I could sort them in an Effort/Impact Matrix. I focused primarily on features that would be most beneficial to Andrew and Avery's needs, while keeping in mind creating a competitive edge for the app in a saturated market. Sorting by high/low impact/effort really helped me consider the feasibility and necessity of the features when building an MVP.
Through the Effort/Impact Matrix, I identified three main user flows that would be imperative to our MVP:

Skin + Lifestyle
Onboarding Quiz

Discovering Products & Ingredients

Building a
Personalized Routine

IDEATE

IDEATING

Exploring different concepts through sketches and mid-fidelity wireframes

With these user flows in mind, I began sketching to visualize out some of the most prioritized ideas and concepts that would encompass the different functions of our app and how they would flow together effectively.
‍
By designing in mid-fidelity first, I was able to clean up the vision from the sketches, ensuring a focus on the feature functionality and interaction before directing more energy on the more creative nuances.

BRANDING

Developing a Visual Style

While branding, I decided to choose a color palette, fonts, and an overall aesthetic that are inclusive to all people and genders. I opted for sleek, minimal san serif fonts while choosing very bright vibrant colors that felt more gender-neutral. Blue represents academia, reliability, and calmness, while the warmer yellow and orange tones were chosen to evoke feelings of freshness, confidence, and vibrance.

PROTOTYPE & TEST

USABILITY TESTING

Talking to more users!

After finishing up high-fidelity frames and prototyping, I put the frames to test and conducted 7 usability tests through Maze. It was great to test the intuition and logic behind every design decision with fresh eyes and users with varying levels of skincare knowledge and backgrounds. Their feedback both validated some assumptions made from research, as well as highlighted other pain points that made for great opportunities for improvement.
Successes 👍
  • All users said the onboarding flow was easy to follow, and intuitive.
  • 4 users mentioned the product filter and overall product page to be cohesive and straightforward.
  • 2 users enjoyed how personalized the app’s information was, especially the “For You” section.
Suggestions/Opportunities 🤔
  • Accessibility and Sizing:
  • 3 users didn't notice the existing CTA buttons in the onboarding quiz — an opportunity to increase accessibility
  • Although there was a small progress bar, two users mentioned not knowing how long the onboarding quiz was going to be.
Pain Points/Confusions 👎
  • 3 users were confused as to why they had to continue to filter after they had already inputted their skin information during the onboarding quizzes.
  • 1 user felt there was too much content on the product page.

PRIORITY REVISIONS

Implementing insights to improve onboarding, consistency, and hierarchy

Insight 1: Onboarding Questions

"I wish there were 'back' and 'next' CTA buttons at the bottom of each page because the arrows at the top of the interface didn't stand out as much."
-Participant 4

"There was no indication of how many steps there would be in total...I would have preferred knowing how long the quiz was going to be from the onset!"
-Participant 2

Version 1

Onboarding Quiz - Version 1

👎 Touchpoint of next/back arrows too small
👎 Progress bar very small and illgible
👎 Contrast of the active state of buttons can be improved
👎 Unable to tell if the question is multi-select

Version 2

Onboarding Quiz - Version 2

👍 Decreasing text size and increasing our CTA arrows made navigation easier
👍 Progress bar status indicator more clearly defined
👍 Darker drop shadow on selected buttons helps with contrast
👍 Caption and checkboxes indicate that the user can select multiple answers

Insight 2: Dashboard Organization

"I'm a bit confused as to what I'm supposed to do on the dashboard. What's this calendar here for?"
-Participant 3

Version 1

Home/Dashboard - Version 1

👎 Arbitrary dashboard calendar has little affordances of how it works or if it’s interactive
👎 Very dark drop shadow and round edges for cards is not as strong of a stylistic choice
👎 Use of “Click here” hyperlink is not a best practice for mobile design

Version 2

Home/Dashboard - Version 2

👍 Calendar UI more clearly labeled as “Skincare Diary” to indicate being able checking off your daily routines and check past progress
👍 Updated card styles are more well defined overall to look interactive and clickable as a standalone.

Insight 3: My Profile Organization

For this iteration, I was able to conduct A/B testing on which Profile screen was preferential.

I like Profile [Version 3] more because of the way different cards and separated and grouped together. It provides a visual break and visually distinguishes certain information from the other.
‍-Participant 3

Version 1

My Profile - Version 1

👎 Can feel overwhelming on the eyes due to the “list” nature of the design
👎 Some users confused by the color changes in icons, seems uninformed
👍 More consolidated overall

Version 2

My Profile - Version 2

👎 Can feel overwhelming on the eyes due to the “list” nature of the design
👍 Colorful and visually engaging icons - glassmorphic elements tie well with app’s overall look and feel

Final Version

My Profile - Version 3 (Final!)

👍 Better visual hierarchy - groups are sectioned to make it easier for user to find what they're looking for
👍 More scannable with larger sections and icons and increased breathability
👍 More consistent look and feel with the rest of the application

FINAL SCREENS

Introducing Clean Collective!

The final prototype reveals the specific design decisions I implemented in my solution to create a more accessible and digestible platform both for improving skincare education and discovering good habits within your personal skin routines.

View Full Prototype

Personalization

Clean Collective allows users to have personalized recommendations and education while setting realistic and attainable skin goals through a thorough Onboarding Quiz. Sharing their skin conditions and experiences gives the app insights needed to analyze and advise the user's individual needs.

REFLECTION

Thoughts &
 Lessons Learned

TAKEAWAY - VALIDATING ASSUMPTIONS FROM RESEARCH

I really enjoyed the research aspect of this project, especially having skincare already be an existing passion of mine. I’ve had my fair share of experiences of blindly listening to friend’s recommendations because “it worked for them”, or even tried to do my own research to help my friends with their own skincare needs. This project reminded me again how important research was - it both helped validate my assumption of how important individual education is to crafting a personalized skincare routine for each user while also uncovered more insights that I hadn’t yet considered. I was able to capture and understand a more varied and complex image of the experiences of each individual user.

FUTURE ROADMAP

Next Steps

If I had more time to continue iterations, I would love to be able to further my research and explore other potential solutions and. aspects of skincare outside of just products. For example, being able to connect users to skincare professionals like dermatologists or estheticians where users could perhaps receive even more specialized treatment would be an interesting feature consideration for the app!
Next Project:

Disney+ Feature

Thanks for stopping by! 👋

Powered by T-Swift 🎵 & runny egg yolk