Spree AI
Overview
Research
Opportunity
Strategy
Persona
State System
Multimodal
Before
During
After
Evolution
Reflection
Selected Work / AI Product Design
Spree AI — AI Styling Assistant
A multimodal AI shopping assistant that reduces decision fatigue across the entire purchase journey.
Conversational AI System
Multimodal Interaction
3D Try-On Experience
My Role — Product Designer (Team of 4)
Research & Synthesis · UX Strategy · Feature Definition · Information Architecture & User Flows · AI Interaction Behavior
Team /
4 Product Designers
Timeline /
PENDING
Tools /
Figma · ProtoPie · After Effects
Team concept (original project) → working Chrome extension (2026, independent).
SLOT-01
Hero: mira Recommend screen · ≤6s muted loop · fallback: hi-res key frame
The Problem /
Online shopping overwhelmsthe very people who love it.
The research set out to understand how online fashion shoppers actually make purchase decisions — and where those decisions break down across the journey.
Desk Research /
Shopping takes time. Expectations are rising. AI adoption still requires trust.
79 min
Average time spent searching for products online
Source / Think with Google Consumer Research
70%
Expect personalized online shopping experiences
Source / Epsilon
47%
Open to using an AI shopping assistant
Source / Capgemini
01 / Decision Fatigue
Discovery is becoming work.
An average 79-minute search points to discovery as effort, not pleasure — the earliest signal of the decision paralysis pattern ahead.
02 / Personalization Gap
Users increasingly expect relevance.
A high bar for relevance out of the box, before any conversation begins.
03 / AI Adoption Barrier
Interest exists, but confidence is conditional.
Openness to an AI assistant is an opportunity — earned only through trust.
Original Project Research /
15 user interviews (remote & in-person) · 40+ survey responses · conducted over 7 days — focused on shopping behavior, decision patterns, and frustrations across the purchase journey.
Product Experience Audit /
01 / First Photo Capture
When taking the first photo…
Original annotated audit screenshot — native UI colors, annotations legible.
A1 /
Callout anchor reserved for the original audit annotations (arrive with SLOT-02).
Takeaway /
Entry point of the journey — the first moment audited for friction.
SLOT-02
02 / Try-On Review
When checking the try-on…
Original annotated audit screenshot — native UI colors, annotations legible.
A1 /
Callout anchor reserved for the original audit annotations (arrive with SLOT-03).
Takeaway /
Confidence checkpoint — the second moment audited for friction.
SLOT-03
15 interviews and 40+ survey responses revealed how people actually decide.
Primary Research /
Research Scale /
User Interviews
15
Survey Responses
40+
Days
7
Synthesized Into
3 Behavioral Themes
Decision Paralysis /
Saving replaced deciding.
“I end up saving so many items, but when it’s time to buy, I’m not sure which one I actually want.”
Difficult Exploring /
Lost between seeing and finding.
“I wish there was an easier way to track down products I see on social media and actually get them before they’re gone.”
Outfit Frustration /
Full closets, nothing to wear.
“It’s frustrating, my closet is full, but I still feel like I have nothing to wear!”
Source Verification Pending
Emma / 32 / Active Shopper
— “Shopping is my absolute favorite thing to do.”
CUI & AI Interaction Research /
External Interaction Research · Supporting Literature
The project also included dedicated research into how conversational and AI-assisted interfaces succeed or fail. The principles below, drawn from foundational human–AI interaction literature, form the research lens behind the persona, state, and multimodal systems documented later in this case study.
01 /
Make the system’s status visible
Users need continuous feedback about what a system is doing — the first, most-cited usability heuristic.
Idle
→
Awake
→
Listening
→
Processing
→
Speaking
→
Success
⤴
Error → recovery
→ Spree AI: seven explicit mira states, with a visible recovery path when things go wrong.
Nielsen Norman Group, 10 Usability Heuristics · 1994
02 /
A consistent persona builds trust
People read personality into voice and tone; inconsistency erodes trust faster than limited capability.
1
2
3
→
one consistent voice, held across the journey
→ Spree AI: three selectable personalities — the user chooses one complete, consistent tone.
Nass & Brave, Wired for Speech, MIT Press · 2005
03 /
Close the expectation gap
Agents fail most when users can’t tell what the system can actually do.
Onboarding scope
→
Suggestion chips
→
understood capability
→ Spree AI: onboarding sets style profile, brands, and capabilities explicitly.
Luger & Sellen, “Like Having a Really Bad PA,” CHI · 2016
04 /
Keep the user in control
Correcting, refining, or dismissing AI output must be efficient — never forced acceptance.
AI recommends
→
User reviews
→
Correct
Cancel
Choose
→ Spree AI: size choice stays with the user, pre-orders cancel anytime, recognition returns options.
Amershi et al., Guidelines for Human-AI Interaction, CHI · 2019
05 /
Coordinate modalities by strength
Multimodal systems work when each modality does what it does best.
Voice
conversation
Vision
photo recognition · try-on
Touch
heatmap · scrub · size
→ Spree AI: voice carries conversation, vision carries products, touch carries precise control.
Oviatt, “Ten Myths of Multimodal Interaction,” CACM · 1999
Evidence → Design Response /
001
Status Visibility
→
7 CUI States
State System
002
Persona Consistency
→
3 Selectable Personalities
Persona
003
Expectation Setting
→
Scoped Onboarding
Before Purchase
004
User Control
→
Correctable AI Actions
During Purchase
005
Modality Coordination
→
Voice · Vision · Touch
Multimodal
Synthesis /
D2 — Research Convergence
4 Research Inputs /
Desk Research
Primary Research
Product Experience Audit
CUI & AI Interaction Research
↓
Insight 01 /
Decision Paralysis
Guide the purchase path
Insight 02 /
Difficult Exploring
Make finding “THAT” item faster
Insight 03 /
Outfit Frustration
Plan outfits with what users own
↓
3 Design Directions /
Guided Decision-Making
Faster Product Discovery
Context-Aware Outfit Planning
Reconstructed from original project documentation.
“How might we create an AI shopping assistant that helps people decide, discover, and combine with confidence?”
Sources & Supporting Literature /
Think with Google Consumer Research · Epsilon · Capgemini — market data
Original project research: 15 user interviews · 40+ survey responses · 7 days
Nielsen Norman Group (1994) · Nass & Brave (2005) · Luger & Sellen, CHI (2016) · Amershi et al., CHI (2019) · Oviatt, CACM (1999) — interaction literature
Framing /
The pain isn’t one moment — it spans the whole lifecycle.
The three design directions map to three moments in the shopping journey.
Diagram /
D1 — Lifecycle Opportunity Matrix
01 / Before Shopping
Overwhelming Choices
↓
Curated Shopping Assistant
Guided Decision-Making
02 / During Shopping
Inefficient Product Exploring
↓
Seamless Shopping Journey
Faster Product Discovery
03 / Post Shopping
Too Many Clothes, Nothing to Wear
↓
Tailored Fashion Editor
Context-Aware Outfit Planning
Reconstructed from original project documentation.
Research Synthesis /
Target User Archetype
E1
Emma, 32 · Active Shopper
“Shopping is my absolute favorite thing to do.”
Designed archetype based on the project’s research synthesis — not an individual research participant.
01 / Decision Behavior
Saves many items before deciding.
02 / Discovery Behavior
Tracks down products first seen on social media.
03 / Wardrobe Behavior
Owns many clothes, but struggles to coordinate outfits.
Core Need /
Guidance that adapts across discovery, decision-making, and everyday styling.
Observed across her journey ↓
Mapping Emma’s journey — dialogue, emotion, and modality at every step.
SLOT-03a
Full journey-map overview strip · retrieved artifact · muted treatment — the green frame marks the excerpt enlarged below.
Phase
Action
Goal
Emotion
Dialogue
Modality
Features
SLOT-03
Enlarged During-phase journey excerpt · hi-res export · Dialogue / Modality / Emotion rows must remain readable · click to zoom. Retrieved from original project documentation.
Strategy /
One assistant, the whole journey.
Instead of adding isolated features, we designed a single AI companion that carries context from onboarding to closet. Every interaction Mira has with the user makes the next decision easier.
Diagram /
D3 — Experience Architecture
mira home — voice · vision · touch
Prompt
Conversation Bar
Archive
Try-on Gallery
Smart Photo Recognition
↓
Before /
Curated Shopping Assistant
CUI Personality Customization
Style Profile Creation
Brand Affinity Selection
During /
Seamless Shopping Journey
Smart Photo Recognition
Immersive Virtual Try-On
3D Modeling & Detailed Product Checks
Pre-Order Access
After /
Tailored Fashion Editor
Virtual Closet
Archive Purchased Items
Outfit Recommendations
Information architecture and feature definition across the lifecycle.
AI Persona System /
An assistant with a personality you choose.
User Need 01 /
Reduce uncertainty without losing agency.
Context / decision-making support
↓
Desired Quality /
Reassuring
Encouraging
Supportive
↓
Personality Direction /
Optimistic Mira
Energetic
Friendly
Encouraging
Makes guidance feel supportive without adding pressure.
User Need 02 /
Move from inspiration to relevant products faster.
Context / product discovery support
↓
Desired Quality /
Efficient
Decisive
Focused
↓
Personality Direction /
Sharp Mira
Sleek
Direct
Decisive
Creates a faster, more focused discovery experience.
User Need 03 /
Stay engaged through repeated outfit decisions.
Context / everyday styling support
↓
Desired Quality /
Lightweight
Engaging
Expressive
↓
Personality Direction /
Witty Mira
Playful
Sarcastic
Expressive
Keeps recurring styling interactions engaging over time.
Three interaction needs informed the personality directions — users choose the tone that fits them.
Personality changes how Mira speaks — not just how she looks.
SLOT-04
Stylist-selection screen · ≤4s selection loop · fallback: 3-state comparison, one per persona
01 / Optimistic
“I’m here to help you discover your perfect style”
02 / Sharp
“Let’s get straight to it, your style deserves nothing but the best”
03 / Witty
“No pressure, but I’m basically a fashion genius.”
→ Spree AI: one choice sets the tone for the entire journey.
Visual System /
From personality to interface language.
01 / Typography
Aa
Poppins
Aa
Montserrat
03 / Mira Signature
Original gradient mark · retrieved from project identity materials.
02 / Color System
Green
#2EB67D
Green Gradient
from project identity
Dark
#2E2B6D
Dark Gradient
from project identity
Project palette — evidence only; the page keeps its editorial system.
04 / CUI Branding
Professional
·
Sleek
·
Playful
·
Tailored
→
01 Optimistic
02 Sharp
03 Witty
Four documented brand attributes, expressed through the three selectable Mira tones above.
05 / Interface Components
Conversation bar — “Ask anything”
CMP-01
Suggestion chips — “Find a garment” · “Check my archive” · “Take a photo for my future try-ons”
CMP-02
Stylist-selection cards — “Let’s Find Your Stylist”
CMP-03
Size selector — XS–XXL
CMP-04
Try-on controls — “TRY ON · Virtual try on”
CMP-05
Component crops retrieved from the original Components file — frames sized for the final assets.
Personality defines how Mira speaks. The system defines how users understand what Mira is doing.
CUI State System /
Seven states make an invisible AI legible.
Applying the research / Visibility of system status — Nielsen Norman Group · 1994 (Principle 01, Section 2).
Diagram /
D4 — CUI State Matrix
Calm
Dynamic
Proactive
Reactive
Idle
Listening
Awake
Processing
Speaking
Success
Error
Position = behavior: calmer states sit left, proactive states sit higher.
Reconstructed from original project documentation.
Diagram /
D5 — State Transition Flow
→
01 /
Idle
→
“Hey MIRA”
02 /
Awake
→
User commands
03 /
Listening
→ Processing
04 /
Processing
→ Speaking
05 /
Speaking
→ Success / Error
06 /
Success
flow complete
07 /
Error
↩ recovery → Listening
↩
recovery → Listening
Reconstructed from original project documentation · dashed = recovery path.
Iterating motion until each state read instantly.
Motion Exploration /
rejected candidates → final, per state
SLOT-05
01 / Idle
↓
02 / Awake
↓
03 / Listening
↓
04 / Processing
↓
05 / Speaking
↓
06 / Success
↓
07 / Error
↓
Motion-exploration frames · rejected candidates and final, per state · from the original exploration pages. Final tiles (SLOT-05): ≤3s muted loops, hover = pause + state label · fallback: 2–3-keyframe strip (rest → peak → settle).
Seven states, one language. Motion is how Mira thinks out loud.
Multimodal Interaction /
Voice, vision, and touch in one interface.
Applying the research / Coordinate modalities by strength — Oviatt, CACM · 1999 (Principle 05, Section 2): voice carries conversation, vision carries products, touch carries precise control.
01 / Prompt
02 / Conversation Bar
03 / Archive
SLOT-06a
mira home screen · hi-res · 9:19.5 · five numbered callouts point to distinct on-screen elements
04 / Try-on Gallery
05 / Smart Photo Recognition
SLOT-06
time ↓
Voice input word-by-word transcription · ≤4s loop · fallback: 3–5 sequential frames, top→bottom = time
Voice
/ conversation
Vision
/ photo recognition · try-on
Touch
/ heatmap · scrub · size
→ Spree AI: each modality does what it does best — nothing is duplicated.
1 / Before Purchase
2 / During Purchase
3 / After Purchase
Onboarding with AI /
Before Purchase — Curated Shopping Assistant.
Onboarding is where Mira learns enough to reduce uncertainty without taking away control.
CUI Personality Customization
Style Profile Creation
Brand Affinity Selection
SLOT-07
Onboarding hero key frame · WEB: optional ≤5s flow clip · fallback: strongest single onboarding screen
Three signals that teach Mira your taste.
Onboarding screens · hi-res · six steps, left to right.
S-01
01 / “Hi, I’m mira — Your Personal Fashion Stylist”
S-02
02 / “Let’s Find Your Stylist”
S-03
03 / “Tell Me About Your Style (pick 3)”
S-04
04 / “Your Go-To Brands”
S-05
05 / “Curating your personalized experience…”
S-06
06 / mira home
01 / AI Personality Selection · screen 02
Tone before task.
The assistant’s conversational behavior is selected before shopping begins, so later guidance already matches the user.
02 / Style Profile Creation · screen 03
A signal before history.
Three style keywords give Mira an initial personalization signal before purchase history exists.
03 / Brand Affinity Selection · screen 04
A narrower starting space.
Brand preferences reduce the recommendation space from the first session.
1 / Before Purchase
2 / During Purchase
3 / After Purchase
Exploring with AI /
During Purchase — Seamless Shopping Journey.
01 / Smart Photo Recognition
Smart Photo Recognition
SLOT-08
01 request → 02 capture → 03 recognition → 04 similar items (dominant frame) · WEB: ≤10s click-to-play demo with play badge · fallback: 4-step numbered sequence.
Mira /
“Hey Emma, good news! I’ve found some items that are similar to the sweater you showed me.”
→ Spree AI: recognition answers with options, not a single match — the user keeps the final choice.
02 / Virtual Try-On & AI Size Prediction
Try it on before it exists in your closet.
AI Size Prediction — Best Size: M
“Based on our AI technology, size M will have a relaxed fit, which is your true size. If you would like an oversized fit, we recommend size L.”
→ Spree AI: the AI recommends; the size selector stays with the user — assistance without takeover.
SLOT-09
3D try-on rotation (dominant) · ≤8s click-to-play · fallback: front/side/back + thin 360° arc cue
SLOT-10
Heatmap toggle · supporting state · ≤3s loop · fallback: 2-state off/on comparison, toggle UI visible
03 / Material Interaction
Feel the fabric before you choose.
SLOT-11
01 / touch
02 / scrub texture
03 / stretch material
Material scrub & stretch · signature interaction · WEB: ≤8s click-to-play video · fallback: annotated storyboard with neutral touch-point dots.
Interaction Logic /
Digital material exploration translates touch into visible product behavior, helping the user inspect texture and stretch before purchase.
04 / Pre-Order Access
Reserve what’s gone — without losing control.
Mira /
“Great, Emma! I’ll place the order when it’s back in stock. You can cancel it anytime if you change your mind.”
→ Spree AI: out-of-stock becomes a commitment the user controls — reserve now, cancel anytime.
PO-01
PO-02
PO-03
01 out of stock (dominant) → 02 reservation → 03 confirmation.
1 / Before Purchase
2 / During Purchase
3 / After Purchase
Archiving with AI /
After Purchase — Tailored Fashion Editor.
Your closet becomes tomorrow’s outfit.
01 / Closet Update
SLOT-12
02 Emma’s Closet (dominant) · 01 notification → 03 item detail supporting · ≤6s loop fallback: 3-step sequence.
Continuity /
Every confirmed purchase becomes usable closet context for Mira’s future guidance.
02 / Outfit Recommendation
SLOT-13
Mira /
“Here’s your outfit for today.”
Result screen (dominant) · request dialogue supporting · ≤5s loop.
Personalization Loop /
Closet context turns past purchases into relevant outfit suggestions for the next decision.
Every try-on and purchase feeds Mira’s next recommendation.
Three moments, one assistant. The journey the research framed, closed.
From Concept to Product /
Product Evolution — Mira Chrome Extension (2026).
The original Spree AI concept was a four-designer team project. In 2026, I independently extended it into a working Chrome extension, collaborating with two engineers.
Diagram /
D9 — Concept → Evolution Timeline
Team Project /
Spree AI concept — 4 product designers
Research
Framing
System
Experience
↓
Independent Evolution /
Mira Chrome extension — with 2 engineers
2026
Timeline reconstructed from project history.
One-click Across Retail Sites
Personal AI Avatar System
Persistent Virtual Wardrobe
EXT-01
Extension running on a real retail site · WEB: demo capture click-to-play · fallback: static screenshot.
EXT-02
Extension panel / wardrobe view · static screenshot.
Scope /
Shipped as a working Chrome extension — one-click try-on across retail sites, a persistent personal avatar, and a saved wardrobe.
Contribution & Reflection /
What I owned, and what I learned.
My Contribution /
Within a four-designer team that collaborated closely across the project, I drove user research and synthesis, framed the lifecycle opportunity, and defined the core feature set across Before, During, and After Purchase. I shaped the product’s information architecture and user flows, and defined how Mira — the AI persona — should behave, respond, and guide users throughout the journey. Concept development, visual design, and prototyping were shared across the team.
Outcome /
The concept evolved into a working Chrome extension (2026), built independently with two engineers.
Three things this project taught me /
01 / [Pending — to be written in the designer’s own words]
Suggested theme · making non-deterministic AI legible through states
02 / [Pending — to be written in the designer’s own words]
Suggested theme · how persona shapes trust and tone
03 / [Pending — to be written in the designer’s own words]
Suggested theme · what changes when a concept must actually ship
Designed as a system. Shipped as a product.