Wardrobe concept + try-on MVP · 2026

Vestly

A fashion app concept that started as wardrobe management and was narrowed into a virtual try-on MVP, combining UX research, brand direction, mobile UI, and React Native development.

Focused MVP

Project description

Vestly began as a digital wardrobe concept: a way to organize clothing, plan outfits, and reduce uncertainty while shopping online. After early research around how people choose outfits, save inspiration, and evaluate clothes they do not own yet, I narrowed the scope to the most valuable MVP interaction: virtual try-on. The case study follows that product decision from rough MVP screens and low-fidelity flows to a cleaner visual identity, onboarding, upload states, and try-on result screens. Development focused on the React Native + Expo mobile experience, Firebase backed app flows, client and server state, and the AI try-on pipeline instead of shipping the entire wardrobe platform at once.

Project highlights

  • Reframed the original wardrobe management vision into a focused MVP around virtual try-on, keeping the long-term product direction but reducing the first build.
  • Mapped the core journey from onboarding and profile setup to clothing upload, generated preview, result review, and save or retry actions.
  • Iterated from rough MVP screens to low-fidelity wireframes and high-fidelity mobile UI, improving hierarchy, copy, loading states, and confidence cues.
  • Defined a soft fashion identity around the Vestly wordmark, Poppins/Raleway typography, pastel gradients, rounded controls, and launch visuals.
  • Built the prototype with React Native + Expo, TypeScript, Firebase, TanStack Query, Zustand, and AI try-on experimentation.

Product case study

From wardrobe vision to virtual try-on MVP.

Vestly started as a broader wardrobe-management idea, then became a tighter MVP around the interaction that carried the clearest value: seeing an outfit on yourself before committing to it.

UX researchProduct scopeMobile UIBrand directionReact Native
Vestly virtual try-on MVP screens

Original vision

Digital wardrobe

A place to organize owned clothing, plan looks, and connect inspiration to what users could actually wear.

MVP decision

Try-on first

The first build focused on upload, preview generation, and result review instead of building every wardrobe-management feature at once.

Outcome

Scoped prototype

A focused mobile prototype with onboarding, profile setup, image upload, AI try-on states, final UI direction, and launch visuals.

Research synthesis

Small survey, practical signals.

The research was lightweight and directional: enough to understand how people think about their wardrobe, shopping confidence, and outfit planning before committing to a full product scope.

The original raw survey export is no longer available, so this section is written as a qualitative synthesis of the findings that guided the MVP.

Wardrobes lived mostly in memory

People described choosing from familiar pieces and forgetting items they already owned, especially when planning looks quickly.

Confidence beat cataloging

The biggest friction was not just organization: users wanted to know whether a piece would work on their body, proportions, and style context.

Shopping was already visual

Screenshots, saved posts, and product photos were already part of the decision process, which made image upload a natural MVP entry point.

Setup needed to be short

A full wardrobe import felt heavy for a first session, so the MVP needed to create value before asking users to catalog everything.

Long-term product flow

The broader wardrobe concept still shaped the product logic: organization, smart suggestions, outfit building, try-on, then saving a look for reuse.

Add items
Organize wardrobe
Wardrobe suggestions
Outfit suggestions
Preview try-on
Save look

Implemented MVP flow

The build was narrowed to the highest-risk interaction: getting from a clothing image to a believable try-on preview.

Upload item
Add body context
Generate preview
Review result
Save or retry

Design evolution

Rough first, then clearer.

The strongest part of the case study is the visible progression: early functional thinking, low-fidelity structure, high-fidelity UI, and a brand layer that made the product feel less like a tool and more like a fashion experience.

Rough MVP map screenshot

Rough MVP map

Early screens explored login, onboarding, try-on, saved outfits, and future wardrobe surfaces before the scope was reduced.

Low-fidelity flow screenshot

Low-fidelity flow

Wireframes cleaned up the onboarding and upload sequence, with placeholders for image selection, confirmation, and result states.

High-fidelity mobile UI screenshot

High-fidelity mobile UI

The final direction added clearer hierarchy, stronger CTAs, warm gradients, product cards, loading moments, and coming-soon boundaries.

Launch visual language screenshot

Launch visual language

Social and brand explorations tested the softer fashion tone: full look, full vibes, AI-powered cues, and a more editorial rhythm.

Visual identity

Soft fashion tech, not cold AI.

The brand system uses a sharp wordmark against warm gradients, black UI accents, and rounded mobile controls. Poppins handles product clarity, while Raleway gives the identity a softer editorial note.

Wordmark

Vestly wordmark

Old mark

Vestly old icon mark

Palette

#f7f0ea

#f7bf4d

#dfa8f4

#f66b35

Typography

Poppins

Product labels, buttons, guidance, and mobile UI clarity.

Raleway

Softer editorial moments and brand-led communication.

AI powered

full look,

full vibes

Perfect for trying complete outfits and seeing your full style in action.

Vestly wordmark

Technologies used

Tools that power the build

React Native
React Native
Expo
Expo
TypeScript
TypeScript
Zustand
Zustand
TanStack Query
TanStack Query
Firebase
Firebase
Gemini
Gemini
Figma
Figma
React Native
React Native
Expo
Expo
TypeScript
TypeScript
Zustand
Zustand
TanStack Query
TanStack Query
Firebase
Firebase
Gemini
Gemini
Figma
Figma
React Native
React Native
Expo
Expo
TypeScript
TypeScript
Zustand
Zustand
TanStack Query
TanStack Query
Firebase
Firebase
Gemini
Gemini
Figma
Figma
React Native
React Native
Expo
Expo
TypeScript
TypeScript
Zustand
Zustand
TanStack Query
TanStack Query
Firebase
Firebase
Gemini
Gemini
Figma
Figma
React Native
React Native
Expo
Expo
TypeScript
TypeScript
Zustand
Zustand
TanStack Query
TanStack Query
Firebase
Firebase
Gemini
Gemini
Figma
Figma
React Native
React Native
Expo
Expo
TypeScript
TypeScript
Zustand
Zustand
TanStack Query
TanStack Query
Firebase
Firebase
Gemini
Gemini
Figma
Figma
React Native
React Native
Expo
Expo
TypeScript
TypeScript
Zustand
Zustand
TanStack Query
TanStack Query
Firebase
Firebase
Gemini
Gemini
Figma
Figma
React Native
React Native
Expo
Expo
TypeScript
TypeScript
Zustand
Zustand
TanStack Query
TanStack Query
Firebase
Firebase
Gemini
Gemini
Figma
Figma