SkinCircle
Year: 2024 Role: Sole UX/UI Designer
How can the skincare journey be simplified through trusted, personalized recommendations?
Meet SkinCircle, a mobile-first responsive website designed for my UX/UI case study to bring ease and clarity to an individual’s skincare journey.
Overview
SkinCircle is a community-centered platform designed to simplify an individual’s skincare journey through trusted connections.
Users can identify their skincare concerns and be matched with a supportive community to discover personalized solutions and skin care products that work for them.
The Problem
Many users feel overwhelmed by the number of skincare products on the market, making it difficult to know where to start or how to build a routine they can stick to.
With inconsistent information online and a trial-and-error approach, users often end up disappointed when products don’t meet their expectations or worsen their skin concerns, leading to frustration, wasted money, and a lack of trust in the process.
One: Competitive Analysis, User Research & Personas
Analysis
To begin the process of designing SkinCircle, a competitive analysis of similar platforms revealed the following gaps and paint points:::
1. Lack of Personalized Recommendations: Many platforms offer general reviews or trending products but don’t consider individual skin types, concerns, or sensitivities. Product suggestions often feel one-size-fits-all, leading to trial-and-error buying.
2. Weak Community Interaction: Some platforms have comment sections or reviews, but few offer real connection or ongoing skincare journeys.
3. Distrust in Sponsored Content: Skincare advice on social platforms can be biased, unverified, or driven by sponsorships rather than results.
4. Lack of Long-Term Support or Routine Tracking: Few platforms help users stick with a routine or monitor product performance over time. Progress is rarely tracked, making it hard to tell what’s helping
User Research
The goal for the user research is to understand how individuals approach their skincare journey, including how they discover products, seek advice, and maintain routines.
I interviewed five users to further identify pain points, unmet needs, and opportunities to design a personalized and supportive skincare experience.
Questions were asked to better understand users’:
1. Skin care routine
2. Process to find skin care products
3. Challenges faced when searching for new products
Affinity Map
After conducting user interviews, I organized the responses into an affinity map to uncover key insights.
I noticed users repeatedly expressed skepticism toward trying new products, often leading them to make repeat purchases.
Many felt overwhelmed by the number of options on the market and preferred skincare recommendations from trusted sources such as friends, family, estheticians, or dermatologists.
User Insights
1. Targeted Skin Care
Users want skincare that works for their specific concerns and helps them maintain healthy skin without fear of wasting money. Users commonly feel skin care products “all do the same thing.”
2. Simple Routines
Users prefer to have skincare routines that are simple yet effective and that will not require constant changes. Users are more inclined to try new products for a “need.”
3. Personalized Recommendations
Users are inclined to buy a new skin care item through trusted recommendation or someone who has more knowledge of skin care. (dermatologist, family member, etc.)
Personas
Two user personas, Melissa & Leah were created based on the interview insights. Each persona represents a different type of user with unique skin care needs and challenges:
1. Melissa tends to try new skincare products when facing specific concerns like acne or dryness. While she feels she should do more research or get trusted recommendations, her busy schedule limits the time she can spend exploring options.
This often leads to hesitation, as she worries about wasting money on products that might not work.
2. Since Leah has gotten older, she doesn’t deal with acne as often, but has a flare up occasionally. When trying new items Leah is careful to check the ingredients and seeking out reviews written by people with similar issues to her to find out what could work for her.
Leah mostly trust her dermatologist or a skin care professional for product recommendations.
Two: User Flows & Information Architecture
User Flows
Before designing individual screens, I created user flows to map out key interactions based on the needs of each persona. The user flows I focused on was for users to create an account, complete the skin care survey and join a new skincircle group.
Sitemap
Focusing on the apps structural hierarchy, I developed the sitemap for the SkinCircle. As a mobile-first responsive website, the starting point is the homepage followed by the sign up, profile, survey pages and more.
Three: Branding
Moodboard
The moodboard for SkinCircle visually reflects the brand’s core values: community, trust, safety, and confidence. While incorporating playful, welcoming elements to encourage fun and engaging interactions within a supportive skincare space.
Style Guide
The style guide establishes a cohesive visual identity for SkinCircle.
Color: I chose a vibrant orange as the primary color, symbolizing energy, vibrance, and freshness. Yellow complements this, adding a sense of fun and engagement.
Logo Design: The SkinCircle stacked icon, with the addition of three dots on top representing a group of individuals. This aligns with SkinCircle’s brand value of community.
Icon Set: The custom icons include the navigation bar, the ‘results’ icon for when users receive their skin results. The ‘profile’ icon and the ‘group’ icon which includes the 3 dots which comes from the SkinCircle logo.
Four: Wireframes
Low Fidelity Wireframes
After curating the design style, I sketched low-fidelity wireframes which then evolved into mid and high-fidelity prototypes.
I aimed to design wireframes that made the skincare survey and group joining process feel fun, intuitive, and meaningful.
Low fidelity wireframes for skin care survey flow
Low fidelity wireframes to join a skincircle group
Mid Fidelity Wireframes
Once my initial frames were sketched, I developed mid-fidelity wireframes focused on the flows to login, complete the skin care survey and the group joining experience.
Mid fidelity wireframes for skin care survey flow
Mid fidelity wireframes for log in flow
Mid fidelity wireframes for joining a skincircle group flow
High Fidelity Wireframes
Building on the mid-fidelity designs, I created high-fidelity wireframes to finalize the visual design, UI components for the skincircle user experience.
Five: Prototyping & Testing
Usability Test
Five remote usability tests were completed using the updated high-fidelity clickable prototype in Figma. The test focused on the ability for users to:
1. Create an Account
2. Complete the Skin Care Survey
3. Select a SkinCircle Group to Join
Key Findings:
Overall, users found the process to join and interact with a skincircle group exciting and not difficult to complete.
During the process to select a skincircle group, users found the description and percentage match for each group to be a helpful guide.
All five users suggested to distinctly see the number of people who are in the skincircle group prior to joining. This change improved the trust and clarity for the user. The image below represents the design iteration for the group page.
Six: Final Design
Prototype
The SkinCircle prototype showcased the app’s core functionality, enabling users to experience intuitive navigation, explore personalized food recommendations, and engage with the community through interactive features.
SkinCircle Prototype
SkinCircle is a mobile-first responsive website designed for my UX/UI case study to bring ease and clarity to an individual’s skincare journey.
Final Thoughts
While designing SkinCircle, I learned that the design process is an ongoing journey of iteration and improvement. Even when a product feels polished, there's always room to evolve the experience based on new insights and user needs.
User interviews and usability testing were especially valuable in shaping the direction of the platform.
I also came to understand that skincare is deeply rooted in trust. Similarly, designers must consider how every aspect of a product’s design can shape a user’s ability to trust and connect with it.
