Klara Skincare
Klara - clean, bright, and famous.
Klara Skincare is a mobile app that helps users build a customized skincare routine through an AI-powered face scan or a detailed skincare quiz. The app provides tailored product recommendations and progress tracking to support consistency and skincare goals.
Role: UX/UI Designer
Team: 5 Members
Timeframe: 3 weeks
Tools: Figma, Figjam, Canva
Problem
People struggle to maintain a consistent skincare routine, track product effectiveness, and find suitable products without trial and error. Many existing solutions are overwhelming, lack personalization, and don’t provide clear progress tracking.
Solution
Klara Skincare helps users build effective skincare habits through personalized AI-recommended routines, habit tracking, and progress monitoring.
Impact
We expect Klara will reduce user overwhelm, increase routine adherence, and help users make more informed skincare decisions—ultimately leading to better skin health and higher satisfaction..
Research
-
User Interviews: 5 participants shared their skincare routines, challenges, and thoughts on AI-driven recommendations.
"I’d love a reminder, especially for things I don’t use daily, like masks or serums. Also, something to remind me when a product is close to expiring."
"Finding the right products for my combination/oily skin and dealing with persistent breakouts was the toughest challenge."
"If an app could tell me which products actually work together instead of me guessing, that would be a game-changer."
Survey Data
-
Gathered broader insights into skincare preferences.
Competitive Analysis
-
Reviewed existing skincare apps to identify common features, gaps, and user pain points.
Affinity Diagram
We conducted affinity mapping to categorize user insights based on their:
​
-
skincare routines
-
AI skincare analysis interest
-
community engagement
-
product tracking habits
This helped identify common behaviors, concerns, and expectations.
User Persona & User Insight
Natasha needs a structured and easy way to stay consistent with her skincare routine and track product effectiveness because she often forgets steps, struggles to know if products are working, wastes money on products that don’t suit her skin type and lacks a simple method to monitor her skins progress.
User Journey Map
Natasha's journey map outlines her experience with the Klara app, highlighting key touchpoints and emotional stages as she interacts with the skin analysis and personalized skincare features.
Ideation
Point of View Statement
We believe that developing a skincare app with AI-recommendations, personalized skincare regimens and ingredient-based recommendations will help users like Natasha achieve clear, healthy skin.
How Might We?
How might we help users build a consistent skincare routine, track their progress effectively, and trust product recommendations that align with their needs?
Prioritization Matrix
We used an Impact-Feasibility Matrix to prioritize Klara’s features by value and ease of implementation, helping us focus on what’s most impactful and realistic for launch.
​
-
High impact & feasible: Routine tracking, progress monitoring, habit tracking
-
High impact, less feasible: AI assessments, personalized recommendations
-
Lower impact & feasible: Community features, celebrity insights
-
Low impact & less feasible: Dermatologist consultations, in-app purchases
User Task Flow
This user task flow streamlines the interaction process throughout the app for full experience.
Sketches
These are early-stage sketches exploring potential designs for how different screens could appear.
Mid-Fidelity Wireframes
Mid-fidelity wireframes feature partially refined content, visual elements, and layout, serving as a bridge between basic sketches and fully polished designs.
Wireflow Wireframes
The full prototype wireflow of Klara wireframes demonstrates the entire user journey, starting from onboarding and the face scan process, through to generating personalized skincare routines, ensuring a smooth and intuitive flow throughout the app.
A/B Testing
We conducted A/B testing on two versions of the mid-fidelity home page. The goal was to determine which layout and features users found more intuitive and engaging for tracking skincare habits, completing daily skin analysis, and exploring popular skincare products.
Users preferred different elements from both versions, so we combined the most voted features into the final design:
✔ On-screen Daily Skin Analysis Quiz (from Version A) with an engaging image.
✔ Weekly Habit Tracker (from Version A) for a balanced tracking experience.
✔ Category Filter for Product Browsing (from Version B) to enhance navigation.
​
This blended approach ensures an intuitive, visually engaging, and user-friendly experience, optimizing both usability and engagement.
Usability Testing
We conducted usability testing on Klara's full prototype with four users, aiming to identify usability issues, gather feedback, and assess the app's overall functionality. The test included three key tasks: onboarding, building a skincare routine, and tracking skincare progress.
ONBOARDING
High completion rate. Face Scan was preferred, but the Skin Quiz needed clearer, tailored results, leading to new screens.
BULDING A SKINCARE ROUTINE
Users found product selection repetitive, as they had to navigate back and forth between screens to add items.
PROGRESS TRACKING
Image comparison was well received, but the check-in button needed better visibility.
✔ Skin Quiz now has a proper results page tailored to user responses.
✔ Product selection was revamped to be all-in-one screen for a smoother experience.
✔ UI tweaks for better check-in visibility.
Style Guide
This style guide for Klara Skincare features a cool-toned purple palette, symbolizing power, creativity, and calmness.
​
The minimalist logo reflects elegance, while sleek icons and a clear nav bar ensure a modern, user-friendly experience.
​
The typography pairs The Seasons for stylish headings with Josefin Sans for clean, readable text.
Final Thoughts
Challenges
-
AI + Human Touch: Making AI helpful without feeling impersonal
-
Simplifying Info: Clear, insightful skincare guidance
-
Smooth Navigation: Streamlined user flow for better engagement
-
Flexible Testing: Adapting through feedback while staying on track
Key Learnings
-
User-Centered Design – Prioritizing usability and accessibility for a seamless experience.
-
Effective AI Integration – Implementing AI in a way that is helpful, not overwhelming.
-
Technical & Prototyping Growth – Strengthening our skills in wireframing, interaction design, and testing.
-
Collaboration & Adaptability – Working cross-functionally and problem-solving efficiently.
Next Steps
-
Gamification & Engagement – Add rewards, streaks, and personalized challenges to boost motivation and daily interaction.
-
AI Enhancements – Improve skin analysis accuracy, refine quiz results, and explore AI-driven routine adjustments.
​
Future Opportunities:
-
Social Features – Community forums & expert Q&As.
-
Product Integration – Personalized brand partnerships.
-
Progress Tracking – Data-driven skin insights.
-
Accessibility – Inclusive features for all users.
