Shipped product case study
StitchFix Onboarding Reimagined
A premium, adaptive style-profile experience that turns a long apparel questionnaire into a guided conversation, then makes the user's answers tangible through a persistent interactive 3D avatar.
Status
Shipped June 15, 2026
Scope
20 completed PRD tickets
Role
Product strategy, UX design, prototyping, and engineering
Product summary
Make a long questionnaire feel like progress
Apparel onboarding asks users for a surprising amount of personal detail before delivering value. The product challenge was to make that effort feel purposeful: break the work into approachable decisions, explain progress, adapt when an answer creates a new need, and show the profile becoming more useful after every step.
The experience uses motion and visual feedback to sustain momentum, local persistence to protect effort, and a conditional activewear branch to avoid irrelevant questions. On desktop, an interactive avatar turns abstract profile inputs into something visible and playful without interrupting the core task.
Shipped outcomes
- Nine-step onboarding flow with adaptive activewear questions
- Persistent local progress with a complete editable profile summary
- Interactive 3D avatar that reacts to apparel choices
- Responsive experience with the avatar hidden on smaller screens
User flow
One guided path, with one relevant branch
The journey stays linear until clothing intent creates a reason to ask a follow-up. Users who select Active see Step 7B; everyone else moves directly into visual style inspiration.
- 01
Welcome
Capture a name and personalize the journey.
- 02
Shopping goals
Understand what the user wants help solving.
- 03
Body type
Choose an illustrated body profile.
- 04
Height
Collect measurements with guided validation.
- 05
Clothing sizes
Capture size and fit feedback by category.
- 06
Fit preferences
Identify tight or loose areas on a body map.
- 07
Clothing types
Select lifestyle needs and update the avatar.
- 7BIf Active
Activewear sizes
Conditional branch shown only when Active is selected.
- 08
Style inspiration
Like or dislike visual looks to signal taste.
- 09
Profile ready
Review the complete profile and edit any section.
PRD ticket ledger
All 20 shipped tickets
The product was delivered in two deliberate phases: first prove the complete adaptive onboarding journey, then layer in the persistent 3D visualization and summary improvements.
Core onboarding experience
Twelve tickets established the product foundation, state model, adaptive questionnaire, and profile summary.
- US-001Shipped
Project scaffold
Configure the Next.js App Router foundation with TypeScript, Tailwind CSS, Framer Motion, and the visual brand system.
- US-002Shipped
Onboarding state management
Create a typed shared profile state, navigation actions, and localStorage persistence so progress survives refreshes.
- US-003Shipped
Step transition shell
Build the reusable header, progress, navigation, and directional slide transitions used throughout the flow.
- US-004Shipped
Welcome and name
Open with a warm personalized introduction, focused name input, and guarded Get Started action.
- US-005Shipped
Shopping priorities
Let users multi-select the outcomes that matter most using animated choice pills.
- US-006Shipped
Body type
Present four illustrated body-type cards with a single-select interaction and optional skip.
- US-007Shipped
Height
Collect feet and inches with validation, smart focus movement, and a responsive visual ruler.
- US-008Shipped
Clothing sizes
Use an accordion to capture size and fit feedback across shirt, waist, inseam, blazer, and shoe categories.
- US-009Shipped
Fit preferences
Guide users through shoulder, chest, midsection, and hip fit questions alongside an animated body illustration.
- US-010Shipped
Clothing types and adaptive activewear
Capture lifestyle categories and insert an activewear sizing step only when Active is selected.
- US-011Shipped
Style inspiration image quiz
Use a visual masonry grid with like and dislike signals to capture aesthetic preferences.
- US-012Shipped
Profile summary
Summarize every answer in editable sections and provide clear completion and restart actions.
3D avatar and experience enhancement
Eight follow-on tickets made the profile visible, interactive, and persistent throughout the desktop journey.
- US-001Shipped
Install the 3D rendering foundation
Add Three.js, React Three Fiber, Drei, and their TypeScript support to the application.
- US-002Shipped
Build a stylized 3D avatar
Create the initial full-body avatar and establish its lighting, camera, proportions, and visual language.
- US-003Shipped
Create clothing layers
Support selectable shirt, pants, and shoe treatments with clear default outfit states.
- US-004Shipped
Add spin interaction
Let users drag to inspect the avatar, constrain the camera, and resume auto-rotation after inactivity.
- US-005Shipped
Build the clothing selector
Add shared outfit state and compact color-matched controls beneath the avatar.
- US-006Shipped
Create the persistent split-screen layout
Keep the avatar visible beside Steps 2-9 on desktop while preserving a focused mobile questionnaire.
- US-007Shipped
React to onboarding answers
Update the suggested outfit as users choose clothing types while still allowing manual overrides.
- US-008Shipped
Fix summary scrollability
Make the summary independently scrollable so every profile section and CTA remains reachable beside the fixed avatar.