Ai Avatar — MVP Layout Map

A quick “overall layout” view of screens and flows (static).
Offline-first PWA • Prototype-ready
Primary user journey
Onboarding → AI Estimates → Confirm → Home
1 Upload photos
2 Consent + disclosures
3 AI Estimates (Hair/Skin/Body/Color)
4 Edit (optional)
5 Confirm estimates
6 Aesthetic + goals
7 Budget defaults
8 Finish → Home
Screen
Auth
Sign up / Log in (MVP: local demo)
Email + password Remember session
Screen
Upload Photos
Headshot + Body shot with photo guidance
Camera / file upload Retake tips
Screen
Consent
Biometric-style personalization disclosures + affiliate disclosure
Explicit checkbox Delete anytime
Screen
AI Estimates
Four expandable cards with Confidence + “Why?” explanations
Confidence indicator (example):
Medium
Screen
Edit Bottom Sheet
Segmented controls + “Not sure?” helpers; Save changes → “Edited” badge
Screen
Confirm
Checkbox required → Confirm & Continue; user can update later
Screen
Home
Tiles: Outfits • Hair • Skincare • Makeup + Avatar preview
Module
Outfits
Prompt: “Need styling help?” or “Shopping?”
Style Help: upload item photo → options Shop: budget + filters → swipe items
Module
Hair / Skincare / Makeup
Same pattern: Style/Shop/Help flows with tutorial prompts
What you can click next
Interactive prototype
Use the interactive MVP to click through Auth → Upload → Consent → AI Estimates → Confirm → Home.
Open the interactive MVP prototype →
This is a static layout map. For MVP testing (clickable flows, editable estimates), use the interactive prototype.