Onboarding & beauty profile

4 screens and overlays, 23 states, 1 flows. Frames show a real screenshot where one was captured and a wireframe card where the state needs data or conditions a device run cannot produce.

Flows

Beauty quiz and profile

Get picks for your skin (iOS) — Home card invites the user to take the quiz

Get picks for your skin (Android) — Home card invites the user to take the quiz

Tap Start

Beauty quiz (iOS) — Quiz walks through the steps one question at a time

Beauty quiz (Android) — Quiz walks through the steps one question at a time

Answer and submit

Step 3

Wireframe

Beauty quiz

Saving...

Submit button disabled with Saving... label.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Submit shows a saving state

Saved

Step 4

Quiz confirms the profile is saved

Continue

Step 5

Beauty profile shows answers and recommendations

Branches and edge cases

Get picks for your skin, Dismissed on this device only (iOS) — Not now

Get picks for your skin, Dismissed on this device only (Android) — Not now

Gatefrom step 2

Wireframe

Beauty quiz

Gate

Guest sign-in required

Sign-in placeholder with the sheet opening over it; auth loading falls through to the quiz.

Needs data: Capture audit 2026-10-30. ios: Requires authentication loss while quiz remains mounted; quiz is not deep-linkable as a guest. Needs a dedicated session-expiry fixture. android: Requires authentication loss while quiz remains mounted; quiz is not deep-linkable as a guest. Needs a dedicated session-expiry fixture.

Guest opens the quiz

Beauty quiz, Pregnancy step skipped for male (iOS) — Gender male skips pregnancy step

Beauty quiz, Pregnancy step skipped for male (Android) — Gender male skips pregnancy step

Beauty quiz, Step validation (iOS) — Required step left empty

Beauty quiz, Step validation (Android) — Required step left empty

Beauty quiz, Routine step shows Skip (iOS) — Routine step can be skipped

Beauty quiz, Routine step shows Skip (Android) — Routine step can be skipped

Errorfrom step 3

Wireframe

Beauty quiz

Error

Could not save profile

Danger toast for 5 s: Please check your connection and try again. Answers stay.

Not reachable on a device: Needs a network fault, crash, race or code change to show

Save fails

Flow diagram

Screens and states

Get picks for your skin

InlineBeautyQuizCard

Get picks for your skin

Home card inviting members to take the beauty quiz.

src/features/home/components/sections/beauty-quiz-card.tsx

Entry

Home tab

Exits

Start → beauty quiz
Not now → hide card on this device

States · 2

Edge

Hidden for guests and incomplete data · No user id, no profile, profile still loading, or already completed.src/features/home/components/sections/beauty-quiz-card.tsx:47

Edge

Dismissed on this device only · Not now stores a per-user local flag; it is not saved on the server.src/features/home/components/sections/beauty-quiz-card.tsx:41

Captured states

Beauty quiz

Screen(app)/beauty-quiz

Beauty quiz

Four or five step skin quiz: experience, skin type, concerns, routine, pregnancy.

src/app/(app)/beauty-quiz.tsx

Entry

Home quiz card Start
Beauty profile Start or Retake

Exits

Continue → next step
Done → beauty profile
Back on step 1 → Home or beauty profile

States · 10

Gate

Guest sign-in required · Sign-in placeholder with the sheet opening over it; auth loading falls through to the quiz.src/app/(app)/beauty-quiz.tsx:54

Edge

Pregnancy step skipped for male · Fifth step is skipped only when gender is male; unknown gender still asks.src/features/beauty-profile/constants/validation-rules.ts:84

Edge

Fifth step appears while profile loads · Gender unknown at open, so the pregnancy step is included until the profile arrives.src/features/beauty-profile/constants/validation-rules.ts:106

Error

Step validation · Experience and skin type required; concerns need 1 to 3; routine optional.src/features/beauty-profile/constants/validation-rules.ts:48

Edge

Routine step shows Skip · Button label becomes Skip when no routine item is chosen; only skippable step.src/app/(app)/beauty-quiz.tsx:257

Edge

Resume restarts at step 1 · Answers persist but the step index does not, so prior answers are prefilled from step 1.src/app/(app)/beauty-quiz.tsx:77

Saving... · Submit button disabled with Saving... label.src/app/(app)/beauty-quiz.tsx:255

Error

Could not save profile · Danger toast for 5 s: Please check your connection and try again. Answers stay.src/app/(app)/beauty-quiz.tsx:199

Edge

Silent submit with empty answers · Submit returns without feedback if skin type or concerns are empty.src/app/(app)/beauty-quiz.tsx:170

Success

Profile saved · Store reset, profile marked complete, replaced by beauty profile.src/app/(app)/beauty-quiz.tsx:193

Captured states

Profile saved

My Beauty Profile

Screen(app)/beauty-profile

My Beauty Profile

Shows saved skin profile and recommended morning and evening routine products.

src/app/(app)/beauty-profile.tsx

Entry

Quiz completion
Profile settings preferences row

Exits

Retake Quiz → beauty quiz
Avatar → Edit Profile
Product card → product
See all → products sheet
Back → Profile tab

States · 9

Gate

Guest sign-in required · Header plus sign-in placeholder with illustration.src/app/(app)/beauty-profile.tsx:66

Profile skeleton · Auth loading or beauty profile query still undefined.src/app/(app)/beauty-profile.tsx:120

Empty

No profile yet · Take a quick quiz to get personalized skincare recommendations. Start Skin Quiz.src/app/(app)/beauty-profile.tsx:198

Success

Completed profile · Skin type, concerns, routine chips, pregnancy status if applicable, Morning and Evening toggle.src/app/(app)/beauty-profile.tsx:170

Routine skeleton · Recommendations query still undefined.src/app/(app)/beauty-profile.tsx:434

Empty

No recommendations yet · Retake the quiz to get updated suggestions; steps with zero products are filtered out.src/app/(app)/beauty-profile.tsx:612

Edge

Different completion check than Home card · Completed means skin type is set here, but Home uses the completed flag.src/app/(app)/beauty-profile.tsx:122

Edge

Name and avatar fallbacks · Greeting says Hi there without a name; avatar falls back to the first letter.src/app/(app)/beauty-profile.tsx:101

Offline

No error state · Offline or failed queries show nothing special.unverified

Captured states

Completed profile

Routine step products

Wireframe

Routine step products

Needs data: Needs an account with a completed beauty profile and routine products

SheetSeeAllProductsModal

Routine step products

Sheet listing all recommended products for one routine step.

src/features/beauty-profile/components/routine/see-all-products-modal.tsx

Entry

See all on a routine step

Exits

Product → product page
Dismiss → close

States · 2

Edge

Empty title when no step · Title is blank when no step is selected.src/features/beauty-profile/components/routine/see-all-products-modal.tsx:38

Edge

Loading and empty not handled · No separate loading or empty state; unverified.unverified

Onboarding & beauty profile

FlowsCopy Anchor Link

Beauty quiz and profileCopy Anchor Link

Screens and statesCopy Anchor Link

Get picks for your skinCopy Anchor Link

Get picks for your skin

Beauty quizCopy Anchor Link

Beauty quiz

My Beauty ProfileCopy Anchor Link

My Beauty Profile

Routine step productsCopy Anchor Link

Routine step products

On this page

Flows

Beauty quiz and profile

Screens and states

Get picks for your skin

Beauty quiz

My Beauty Profile

Routine step products