Ecodream
2026
UX Research Accessibility
UX/UI Designer
IL PROBLEMA
LA SOLUZIONE
Ho riprogettato l’esperienza e-commerce di Ecodream intervenendo su navigazione, accessibilità, gerarchia dei contenuti e processo d’acquisto. Il redesign comprende una nuova architettura dell’informazione, un sistema UI responsive per desktop e mobile e un checkout più chiaro, successivamente iterato sulla base dei risultati di un test di usabilità.
Spostare l'attenzione dalla semplice revisione grafica alla risoluzione dei problemi concreti degli utenti: è questa la visione che ha guidato l'intero progetto. Attraverso 3 fasi sequenziali, ho trasformato i punti critici dell'e-commerce originale in un'esperienza d'acquisto fluida, moderna e accessibile a tutti.
COME HO INDAGATO
Existing experience
Audit del sito
Usabilità, navigazione, gerarchie, accessibilità e percorso d’acquisto.
Users
Ricerca utenti
Survey, personas e user journey per comprendere bisogni, aspettative e frizioni.
Market & brand
Benchmark
Confronto con altri e-commerce per contestualizzare esperienza e posizionamento.
MATERIALI DI RICERCA
01 - UNDERSTAND / DISCOVER
Capire il problema prima di progettare
Prima di intervenire sull’interfaccia, ho studiato il brand, il sito esistente e il comportamento degli utenti per capire quali problemi valesse davvero la pena risolvere.
Audit UX
User research
Competitor analysis
SITO ORIGINALE - HOME
Navigazione poco chiara
Gerarchia debole
Accessibilità migliorabile
COSA HO IMPARATO
Tre insight che guidano il redesign
01
La struttura del catalogo e i percorsi di navigazione devono aiutare l’utente a restringere rapidamente la ricerca.
02
Prodotto, valori del brand e processo d’acquisto devono essere leggibili, prevedibili e facilmente scansionabili.
03
Contrasto, leggibilità, focus e feedback devono supportare utenti con esigenze differenti.
Dopo aver individuato le principali criticità dell’esperienza esistente, ho trasformato gli insight della ricerca in obiettivi e priorità progettuali.
02 - CREATE / WIREFRAMES
Ho progettato i wireframe delle principali schermate per organizzare contenuti, gerarchie e percorsi chiave, concentrandomi sulla struttura e sulla funzionalità prima di definire l’aspetto visivo.
Desktop
Mobile
2.1 / HOME
La homepage presenta il brand e accompagna l’utente nell’esplorazione dei prodotti. I contenuti sono organizzati in sezioni progressive: hero, categorie, collezioni e contenuti di supporto.
FOCUS
Valore del brand più evidente · Accesso rapido alle CTA · Percorso di navigazione più chiaro
2.2 / PRODUCT PAGE
La scheda prodotto è stata organizzata per aiutare l’utente a valutare rapidamente l’articolo e prendere una decisione informata. Ho dato priorità a immagini, prezzo, varianti, recensioni e call to action, spostando i contenuti più dettagliati in sezioni espandibili per mantenere l’interfaccia ordinata e leggibile.
FOCUS
Gerarchia informativa più efficace · CTA più evidente · Maggiore fiducia e chiarezza
Desktop
Mobile
Desktop
Mobile
2.3 / CHECKOUT
Il checkout riduce il carico cognitivo e guida l’utente fino alla conferma dell’ordine. La disposizione dei campi e il riepilogo aiutano a mantenere il controllo del processo.
FOCUS
Riduzione del carico cognitivo · Struttura più prevedibile · Conversione più fluida
I wireframe mobile riprendono la stessa struttura delle versioni desktop, riorganizzando i contenuti in verticale e ottimizzando navigazione, griglie e CTA per l’uso touch.
Menu
Shop
Filtri
Impostazioni account
2.4 / USER FLOW
Ho costruito il flusso principale di acquisto per verificare che l’utente potesse passare dalla scoperta del prodotto al checkout attraverso un percorso prevedibile e coerente.
Home
Shop
Filter
Product
Cart
Checkout
Confirmation
2.5 / DESIGN SYSTEM
Ho sviluppato un sistema visivo coerente per mantenere continuità tra pagine e dispositivi. Tipografia, colori, griglie, spaziature e componenti definiscono un’esperienza più chiara e accessibile.
Typography · Px · Regola: 1.333 perfect fourth
Heading 1 50.5 / Mobile 37.9
Heading 2 37.9 / Mobile 28.43
Heading 3 28.4 / Mobile 21.33
Body 16 / Mobile 16
Caption 14 / Mobile 14
4
8
12
16
24
32
Success
#3A962B
Warning
#FF8A26
Error
#FF3B3B
Inputs
2.6 / CREATE — Final UI - Home
Comunicare il brand e guidare l’esplorazione
Una volta definiti struttura, componenti e regole visive, ho applicato il Design System alle principali schermate dell’e-commerce. L’obiettivo era trasformare i wireframe in un’esperienza coerente, contemporanea e riconoscibile, dando maggiore spazio ai prodotti e mantenendo continuità tra desktop e mobile.
FOCUS
Brand positioning — valori e proposta del brand più immediati.
Visual hierarchy — contenuti e CTA organizzati con priorità più chiare.
Product discovery — accesso più rapido a categorie, collezioni e prodotti.
2.7 / Pagina Shop
Rendere il catalogo più facile da esplorare
La pagina Shop è stata ripensata per rendere più semplice la scoperta e il confronto dei prodotti. Ho organizzato il catalogo attraverso una griglia più pulita, una gerarchia visiva più chiara e controlli di filtro e ordinamento immediatamente accessibili.
FOCUS
Filtering — filtri facilmente accessibili e comprensibili.
Product grid — struttura ordinata per confrontare meglio i prodotti.
Responsive browsing — esperienza coerente tra desktop e mobile.
2.8 / Product Page
Supportare la decisione d’acquisto
La pagina prodotto è stata riorganizzata per concentrare in un unico punto tutte le informazioni necessarie alla scelta. Ho dato priorità a immagini, prezzo, varianti, quantità e CTA, mentre descrizione, recensioni e dettagli aggiuntivi sono stati mantenuti accessibili senza appesantire la schermata.
FOCUS
Product information — gerarchia più chiara dei contenuti.
CTA hierarchy — azione principale più evidente.
Trust — recensioni e dettagli a supporto della scelta.
2.9 / Checkout
Checkout Senza Attrito
Il checkout è stato progettato per accompagnare l’utente fino alla conferma dell’ordine attraverso una struttura più leggibile e prevedibile. Ho separato visivamente dati personali, spedizione, pagamento e riepilogo, riducendo il carico cognitivo e rendendo più chiaro cosa completare in ogni fase.
FOCUS
Information grouping — contenuti organizzati per fase.
Form clarity — campi e feedback più comprensibili.
Order summary — totale e dettagli sempre facilmente verificabili.
Responsive consistency
Desktop adaptation
Sebbene il mobile sia stato il focus principale del redesign, ho progettato l’esperienza anche in versione desktop, mantenendo coerenza visiva, gerarchia e continuità tra i diversi dispositivi.
Home
Shop
Product Page
Checkout
03 / VALIDATE
Dopo aver completato il prototipo, ho testato l’esperienza mobile con utenti reali per verificare se navigazione, comunicazione del brand e percorso d’acquisto fossero realmente chiari ed efficaci.
Ho scelto un test di usabilità qualitativo, remoto e non moderato su Maze, svolto esclusivamente su mobile. L’autonomia dei partecipanti mi ha permesso di osservare il comportamento senza guida esterna, simulando una normale esperienza di shopping online.
3.1 OBIETTIVI
01
Verificare se l'utente, atterrando sulla Homepage, identifica immediatamente Ecodream come un brand di moda sostenibile e premium.
02
Valutare la chiarezza di menu e categorie per verificare se la struttura dei prodotti (borse, zaini, accessori) permette un’esplorazione intuitiva e senza esitazioni.
03
TARGET
Ho coinvolto 5 partecipanti tra i 25 e i 45 anni, abituati allo shopping online e interessati alla Slow Fashion, alla sostenibilità e a prodotti di fascia medio-alta.
TASK
Gli utenti hanno prima esplorato liberamente la Home, poi cercato uno zaino per uso quotidiano e infine completato l’intero processo di acquisto. In questo modo ho osservato il percorso dalla scoperta del brand fino alla conversione.
3.2 RESULTS
Esito e Insight
La Home funziona bene nel guidare verso i prodotti, ma il menu può essere più efficace. Gli utenti si aspettano Bestseller e, in misura minore, Outlet/Saldi, mentre la storia e l’artigianalità del brand devono avere maggiore visibilità.
Il checkout è comprensibile ma presenta alcuni punti di incertezza. Serve distinguere meglio pagamento rapido e compilazione manuale, rendere più trasparenti spedizione e fatturazione.
3.3 /MENU
Navigazione più immediata
Per garantire una gerarchia visiva immediata, sono state introdotte icone dedicate e posizionate in cima le voci Best Seller e Outlet, delimitate da una linea divisoria chiara. Inoltre, per ridurre il disordine, le sottocategorie sono state accorpate sotto Borse e zaini tramite un menu ad espansione, dimezzando la lunghezza totale della schermata per un'interfaccia pulita e minimale.
PRIMA
DOPO
PRIMA
DOPO
3.4 /MENU
Più spazio alla storia del brand
Il test ha evidenziato che storia e artigianalità non emergevano abbastanza dalla Home. Ho quindi introdotto una nuova sezione dedicata al racconto del brand, con contenuti e immagini capaci di rendere più immediati i valori distintivi di Ecodream.
3.5 / CHECKOUT
Un acquisto più progressivo
Il checkout è stato suddiviso in tre step: Spedizione, Pagamento e Riepilogo, così da ridurre il carico cognitivo e rendere il percorso più prevedibile. Ho inoltre chiarito pagamento rapido, fatturazione, costi di spedizione e gestione dei prodotti nel carrello.
FINAL OUTCOME & WHAT I LEARNED
Il redesign di Ecodream ha trasformato un’esperienza frammentata in un percorso più semplice e coerente, dalla scoperta del brand fino al checkout. La validazione con gli utenti ha permesso di confermare le scelte principali e affinare navigazione, storytelling e processo d’acquisto attraverso un’ultima iterazione. Questo progetto mi ha mostrato quanto sia importante non fermarsi alla prima soluzione. Analisi, progettazione e testing hanno lavorato insieme: alcune scelte sono state validate, mentre altre sono state migliorate grazie ai comportamenti e ai feedback degli utenti.