Wardrobe concept + try-on MVP · 2026

Vestly

Concept fashion nato come wardrobe management e ristretto in un MVP di virtual try-on, unendo UX research, direzione brand, UI mobile e sviluppo React Native.

MVP focalizzato

Descrizione del progetto

Vestly nasce come concept di guardaroba digitale: un modo per organizzare i capi, pianificare outfit e ridurre l'incertezza durante lo shopping online. Dopo una fase di ricerca iniziale su come le persone scelgono outfit, salvano ispirazioni e valutano capi non ancora acquistati, ho ristretto lo scope all'interazione più forte per un MVP: il virtual try-on. Il case study racconta questa scelta di prodotto, passando da schermate MVP grezze e wireframe low-fidelity a una visual identity più chiara, onboarding, stati di upload e schermate risultato. Lo sviluppo si è concentrato sull'esperienza mobile in React Native + Expo, flussi app con Firebase, gestione dello stato client/server e pipeline di try-on AI, invece di costruire subito l'intera piattaforma wardrobe.

Punti chiave del progetto

  • Riletto il concept originale di wardrobe management come MVP focalizzato sul virtual try-on, mantenendo la visione prodotto ma riducendo il primo sviluppo.
  • Mappato il journey principale: onboarding, setup profilo, upload del capo, generazione preview, revisione del risultato e azioni di salvataggio o retry.
  • Iterato da schermate MVP grezze a wireframe low-fidelity e UI mobile high-fidelity, migliorando gerarchia, copy, stati di caricamento e segnali di fiducia.
  • Definita una identity fashion morbida attorno al wordmark Vestly, tipografia Poppins/Raleway, gradienti pastel, controlli rounded e visual di lancio.
  • Sviluppato il prototipo con React Native + Expo, TypeScript, Firebase, TanStack Query, Zustand e sperimentazione AI try-on.

Product case study

Dalla visione wardrobe al virtual try-on MVP.

Vestly nasce come idea piu ampia di wardrobe management, poi viene ristretto in un MVP piu chiaro attorno all'interazione con piu valore: vedere un outfit su di se prima di sceglierlo.

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

Visione iniziale

Guardaroba digitale

Uno spazio per organizzare i capi posseduti, pianificare look e collegare l'ispirazione a quello che l'utente puo davvero indossare.

Scelta MVP

Try-on prima

Il primo sviluppo si concentra su upload, generazione preview e revisione del risultato, invece di costruire subito tutte le feature wardrobe.

Output

Prototype focalizzato

Un prototipo mobile con onboarding, setup profilo, upload immagine, stati AI try-on, direzione UI finale e visual di lancio.

Sintesi research

Sondaggio piccolo, segnali concreti.

La ricerca era leggera e direzionale: abbastanza per capire come le persone ragionano su guardaroba, sicurezza nello shopping e pianificazione outfit prima di fissare lo scope completo.

L'export originale del sondaggio non e piu disponibile, quindi questa sezione e scritta come sintesi qualitativa degli insight che hanno guidato l'MVP.

Il guardaroba viveva molto nella memoria

Le persone tendevano a scegliere i capi piu familiari e a dimenticare pezzi gia posseduti, soprattutto quando dovevano comporre look velocemente.

La fiducia pesava piu del catalogo

La frizione principale non era solo organizzare: gli utenti volevano capire se un capo funzionava su corpo, proporzioni e contesto di stile.

Lo shopping era gia visuale

Screenshot, post salvati e foto prodotto erano gia parte del processo decisionale, quindi l'upload immagine era un ingresso naturale per l'MVP.

Il setup doveva restare breve

Importare subito tutto il guardaroba sembrava pesante, quindi l'MVP doveva dare valore prima di chiedere all'utente di catalogare ogni capo.

Flusso prodotto completo

Il concept wardrobe piu ampio ha comunque guidato la logica: organizzazione, suggerimenti smart, costruzione outfit, try-on e salvataggio del look.

Aggiungi capi
Organizza wardrobe
Wardrobe suggestions
Outfit suggestions
Preview try-on
Salva look

Flusso MVP sviluppato

Lo sviluppo e stato ristretto all'interazione piu rischiosa: passare da un'immagine capo a una preview try-on credibile.

Upload capo
Aggiungi contesto corpo
Genera preview
Rivedi risultato
Salva o riprova

Evoluzione design

Prima grezzo, poi piu chiaro.

La parte piu forte del case study e la progressione visibile: pensiero funzionale iniziale, struttura low-fidelity, UI high-fidelity e layer brand che rende il prodotto meno tool e piu esperienza fashion.

Mappa MVP grezza screenshot

Mappa MVP grezza

Le prime schermate esploravano login, onboarding, try-on, outfit salvati e superfici wardrobe future prima della riduzione dello scope.

Flow low-fidelity screenshot

Flow low-fidelity

I wireframe hanno ripulito onboarding e sequenza di upload, con placeholder per selezione immagine, conferma e stati risultato.

UI mobile high-fidelity screenshot

UI mobile high-fidelity

La direzione finale aggiunge gerarchia piu chiara, CTA piu forti, gradienti caldi, card prodotto, momenti loading e confini coming-soon.

Linguaggio visual di lancio screenshot

Linguaggio visual di lancio

Le esplorazioni social e brand testano un tono fashion morbido: full look, full vibes, cue AI-powered e ritmo piu editoriale.

Visual identity

Fashion tech morbido, non AI fredda.

Il sistema brand usa un wordmark elegante su gradienti caldi, accenti neri e controlli mobile arrotondati. Poppins tiene la UI chiara, mentre Raleway porta una nota piu editoriale.

Wordmark

Vestly wordmark

Logo vecchio

Vestly old icon mark

Palette

#f7f0ea

#f7bf4d

#dfa8f4

#f66b35

Tipografia

Poppins

Label di prodotto, bottoni, microcopy e chiarezza nella UI mobile.

Raleway

Momenti piu editoriali e comunicazione guidata dal brand.

AI powered

full look,

full vibes

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

Vestly wordmark

Tecnologie utilizzate

Gli strumenti dietro al progetto

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