SPF Studios
A skincare app that replaces trial and error with transparent guidance, routine tracking, and trust-first community reviews.
3-Minute Demo
Try the Prototype →
Interactive Figma prototype — click through the full app flow
The Brief · Design Challenge"How might we help users build consistent, safe skincare routines in a market where too much information — not too little — is the real problem?"
Design Principles
Transparency over automation
Don't just recommend. Explain why a product fits the user's skin, routine, and budget.
Privacy by design
Skin data is sensitive. Users control what's stored, shared, and deleted.
Consistency through clarity
A confusing routine builder discourages use. A clear one builds habits.
5
Research methods
3
Prototype rounds
7
Core features
IND 494/598
Course
Key Challenges
User Challenges
- 1.Users relied on trial and error — leading to wasted money, skin irritation, and inconsistent routines.
- 2.Too much conflicting information from social media, influencers, and sponsored content made trustworthy guidance hard to find.
- 3.Even users with existing routines forgot steps, skipped sunscreen, or lost motivation without feedback loops.
Design & Constraint Challenges
- 1.AI skin scanning raised trust and privacy concerns — recommendations needed transparent logic, not black-box outputs.
- 2.Gamification had to feel motivating without being childish or anxiety-inducing for missed days.
- 3.The community page risked recreating the same misinformation problems it was designed to solve if not carefully structured.
image placeholder
Research artifact
Drop in an affinity diagram, journey map, or synthesis board that shaped the direction.
Situation
Skincare is overwhelming — not because users lack information, but because they have too much of it. Social media, influencer content, and sponsored reviews made it hard for users to know which advice actually applied to their skin type, concerns, and budget. Our context study confirmed: users relied on trial and error, struggled with ingredient combinations, didn't know correct product order, and couldn't stay consistent with routines.
Task
As part of team SPF Studios in IND 494/598 Advanced UX/UI Design at ASU (Dr. Kimi Zhong), I co-designed SPF — Skin, Purpose, Feel-Good — a mobile skincare app that combines personalized onboarding, routine building, ingredient guidance, AI skin scanning, progress tracking, community reviews, and gamified rewards to help users make confident, informed skincare decisions.
Action
- Context study — conducted user interviews, questionnaires, persona development (Maria, 38, Marketing; Emily, 15, High School), empathy mapping, and affinity mapping to surface 4 core problem areas: trial and error, troubleshooting, active ingredients, and the skin barrier.
- Created How Might We questions and a user epic: 'As someone interested in improving skin health, I want to find, organize, and curate skincare products and routines with confidence so I can maintain consistency and measure results over time.'
- Designed 7 core features: (1) Personalized onboarding by skin type, concerns, sensitivity, budget. (2) Routine builder with AM/PM steps and ingredient order guidance. (3) Product library — current, archived, and wishlisted products. (4) Transparent product recommendations with explained reasoning — why a product matches skin concern, budget, and routine. (5) Community page with skin-type filters and zero paid promotions. (6) Progress tracking with optional photos and weekly AI skin analysis. (7) Character-based gamification — earn coins, customize Pebble the character for completing routines.
- Low-fidelity testing — tested Routine and Community flows. Discovered: users expected to reorder routine steps, needed clarity on whether product search pulled from personal library or global database, wanted multi-select filters on community page, and wanted reviewer skin type shown on reviews.
- High-fidelity prototype — built complete app experience. Ran heuristic evaluation and cognitive walkthroughs. Key feedback: community page felt disconnected (too dark, high information density), navigation icons needed text labels, routine section needed categories, date picker for routine history.
- Iterated community page — redesigned with lighter purple background, white cards, cleaner hierarchy. Separated Q&A Forum and Products tabs. Added skin type filter panel (All, Acne, Sensitive, Oily, Dry, Combination, Normal).
- Research proposal — extended the project with a proposed HCI study investigating: (1) how transparent ingredient guidance affects trust, (2) how routine tracking and gamification affect consistency, (3) how skin-type-filtered community reviews affect trust vs general reviews.
Result
- Delivered a fully designed, high-fidelity prototype covering 7 interconnected features across the complete skincare journey.
- 3-minute demo video produced showing the complete app experience — from onboarding through routine tracking, community page, and character rewards.
- Testing confirmed core concept strength: users understood routine tracking value and community guidance — but pushed us to simplify hierarchy and reduce cognitive load.
- Key insight validated: skincare confusion is not a lack of information problem — it's a filtering and trust problem. SPF's transparent recommendation logic directly addressed this.
- Proposed longitudinal HCI study design to measure whether gamification and routine tracking sustain consistency over 2 weeks — connecting to behavior change research (Aguiar et al., 2022; Tran et al., 2022).
image placeholder
Process & exploration
Sketches, flow diagrams, wireframes, or iteration shots.
image placeholder
Final outcome
Hero shot of the final screen, artifact, or installed deliverable.
Project Partners
SB
Stephan Bui
Team Member
IND 494/598 · ASU
SG
Surmeet Gill
Team Member
IND 494/598 · ASU
DK
Dahye Kim
Team Member
IND 494/598 · ASU
DK
Dr. Kimi Zhong
Course Instructor
Ira A. Fulton School of Engineering · ASU
Tech Stack
FigmaFigJamMazeMiroPaper prototyping
Research Methods
User interviewsQuestionnairesPersona developmentEmpathy mappingAffinity mappingCrazy 8s ideationUser flow mappingLow-fidelity usability testingHigh-fidelity heuristic evaluationCognitive walkthrough
AI Used
AI skin scanning and analysis — conceptual facial scan generating personalized skin health reports with weekly progress tracking
Tags
Mobile UXHealth & WellnessAI FeaturesGamificationCommunity DesignConsumer AppResearch
Lessons Learned
- "The biggest insight from user testing wasn't about features — it was about information architecture. A feature can be genuinely useful and still feel overwhelming if the layout doesn't match how users think."
- "Designing the community page taught me that trust is architectural, not just visual. Zero paid promotions and skin-type filters are not nice-to-haves — they're what makes the whole feature trustworthy."
- "Gamification only works when it reduces shame, not adds to it. Pebble the character was designed to celebrate streaks without punishing missed days — a subtle but important ethical design decision."