Contrasto
ProblemaTesto grigio su bianco, quasi illeggibile.
SoluzioneAlmeno 4,5:1 di contrasto.
ecodream
Borse e zaini nati da materiali di scarto: ho ripensato il loro sito, dal wireframe al test con gli utenti.
Il cliente
E-commerce sostenibile
Ecodream Design vende borse, zaini e accessori fatti con materiali recuperati: pelle, PVC, tessuti. Il sito però non era all'altezza del progetto.
Ho analizzato la versione esistente con le 10 euristiche di Nielsen e con le WCAG 2.2, poi ho intervistato 22 persone: da lì sono nati quattro personas e un nuovo sito.
Mission
Rendere accessibile a tutti un modo di consumare più consapevole, dando nuova vita ai materiali.
Vision
Un mondo in cui il design rispetta le persone e l'ambiente, e la creatività nasce dal recupero.
01 · Discovery
Capire il sito, e chi lo usa
Analisi euristica con le 10 regole di Nielsen, competitor, ricerca sul target e una survey a 22 persone: da qui nascono quattro personas e i loro percorsi.
Ecodream Design è un brand indipendente di moda sostenibile: borse, zaini e accessori da materiali di recupero, produzione artigianale e Made in Italy, con uno showroom a Borgo San Lorenzo, nel Mugello. Aderisce a slow fashion, upcycling e alla campagna WearMe30Times.
Rispetto ai competitor mancano barra di ricerca, lista preferiti, CTA accattivanti, filtri, recensioni, assistenza e pagamenti alternativi. Il punto di forza è la storia d’impresa e la descrizione dei materiali.
Personas
Quattro persone, quattro modi di comprare
Sara, 27
Organizzatrice di eventi a Lugano. Ha un blog su cinema e sostenibilità.
Greta, 20
Studentessa di Filosofia a Milano. Cerca uno zaino prima di partire per la Cambogia.
Grazia, 56
Libraia a Firenze. Vorrebbe un regalo per la figlia e comprare con calma.
Maurizio, 60
Calzolaio a Venezia. Cerca materiali di recupero e pensa a diventare rivenditore.
In sintesi
Dai problemi alla strategia
Il 76% degli accessi arriva da cellulare, dove l’acquisto era dispersivo. Prima ho ripensato la struttura, poi l’interfaccia.
01
Problemi
Un e-commerce difficile da esplorare
- Navigazione in parte in inglese
- Niente ricerca né filtri
- Gerarchia debole, testi lunghi
- Carrello poco visibile
- Mancano wishlist, recensioni, FAQ
- Outlet, account e materiali nascosti
02
Bisogni
Un’esperienza più semplice, orientata all’acquisto
- Shop ordinato, con filtri e ordinamento (72,7%)
- Info su spedizioni, resi e cambi (45,5%)
- Recensioni e registrazione semplice
- Descrizioni dei materiali
- Assistenza in chat
- Per i rivenditori: comprare i materiali e trovare «Diventa rivenditore»
03
Strategia
Ripensare la struttura prima dell’interfaccia
- Nuova sitemap e architettura delle informazioni
- Shop con filtri per modello, materiale, prezzo, dimensione e colore
- Link a spedizioni, resi e pagamenti
- Nuove sezioni: wishlist, recensioni, FAQ, materiali
- CTA «Diventa rivenditore» più visibile
02 · Wireframe
Prima la struttura
Dai pain points del sito esistente alla nuova sitemap, poi le pagine in mobile e desktop.
03 · User test
Cosa succede quando lo usano davvero
Test remoto e senza moderatore su Useberry, con 8 partecipanti reclutati su Facebook, Discord, Reddit e LinkedIn. Sette hanno concluso il test.
100%Esplorare il prototipo20,4 s
71%Scoprire chi c'è dietro il brand17,8 s
86%Trovare i materiali8,8 s
86%Card sorting del menu2 min 4,8 s
71%Comprare una borsa nera1 min 4,8 s · 29% abbandona
04 · User interface desktop
Una palette sobria che lascia parlare le foto dei materiali.
Color palette, tipografia, Griglia a 12 colonne, margini da 64 px, gutter da 16 px.
Verde bosco#566B4F · CTA
Salvia#A9BAA4 · accento
Nero bosco#1E2B24 · testi
Crema#ECECE5 · sfondo
PoppinsTitoli, testi e bottoni con un solo font.
05 · User interface mobile
Ecodream mobile
Stesso UI kit, ripensato per il pollice: filtri a scomparsa, schede prodotto verticali, menu essenziale.
Le parole dell'interfaccia
Dire le cose come le cerca chi compra
Nell'analisi del sito molti problemi erano di linguaggio: lingue mescolate, link che non dicono dove portano, informazioni che mancano al momento della scelta.
Menu e titoliUna sola lingua
PrimaFunzione «Translate» e titoli di immagini e link in inglese (SUSTAINABLE FASHION BRAND, ACHIEVEMENTS, INITIATIVES), in un sito scelto in italiano.
DopoTraduzione
Una funzione che traduce davvero e voci di menu e link in italiano.
Link e pulsantiUn nome che dice dove porta
Prima«Scopri di più» sotto un testo, senza contesto. Link grigi, poco distinguibili dal testo.
DopoNome chiaro che descrive scopo e destinazione
Niente «Clicca qui»; link con colore e formato sempre riconoscibili.
ShopLe informazioni, prima dell'acquisto
PrimaNomi e codici prodotto vaghi, nessuna indicazione su spedizioni e resi.
DopoOgni prodotto sarà spedito entro 2/3 giorni lavorativi. È possibile fare cambio o reso entro 14 giorni dalla consegna del pacco.
Nomi come «EMESS – Borsa in tessuto», con il materiale sotto; pulsanti «Filtri», «Ordina», «Aggiungi al carrello».
06 · Accessibilità
Un sito che si legge e si usa per tutti
Sei pagine del sito Ecodream, un controllo con le WCAG 2.2 e il Color contrast checker. Ecco cosa non funzionava e come lo sistemerei.
6pagine analizzate
12problemi ricorrenti
4principi WCAG 2.2
4,5:1contrasto minimo richiesto
- HomeLink e immagini non percepibili
- AboutUn muro di testo grigio
- ContattiNessuna assistenza diretta
- MaterialiNon si può comprare
- ShopSenza filtri né ricerca
- CheckoutModulo lungo, nessun riepilogo
Link invisibili
ProblemaImmagini cliccabili che non sembrano tali, link grigi in corsivo.
SoluzioneColore e formato riconoscibili, nomi chiari.
Immagini mute
ProblemaFoto senza testo alternativo: per lo screen reader non esistono.
SoluzioneTesto ALT coerente, senza ripetizioni.
Lingua mista
ProblemaSito in italiano, titoli e link in inglese.
Soluzione«Traduzione» che traduce davvero.
Muri di testo
ProblemaUn solo blocco, senza titoli né spazi bianchi.
SoluzioneH1, H2, H3 in ordine e più aria.
Moduli infiniti
ProblemaLunghi, solo mouse, errori segnalati da un asterisco.
SoluzionePiù corti, da tastiera, errori spiegati.
Shop senza bussola
ProblemaOltre 50 prodotti senza filtri né ricerca.
SoluzioneFiltro, ordinamento e barra di ricerca.
Target minuscoli
ProblemaCarrello e link piccoli e troppo vicini.
SoluzioneIcone grandi e ben distanziate.
Pagine incoerenti
ProblemaMateriali non si comprano lì; niente breadcrumb.
SoluzioneAcquisto ovunque e breadcrumb.
Contatti muti
ProblemaNessuna mail generica, telefono o chat.
SoluzioneMail, telefono e chat live.
Checkout al buio
ProblemaNiente riepilogo ordine né info su spedizioni e resi.
SoluzioneRiepilogo e info a ogni passo.
Nomi poco chiari
ProblemaNomi e codici prodotto vaghi, in colori deboli.
SoluzioneNomi descrittivi, più grandi e contrastati.
I quattro principi WCAG
PercepibileTesto poco contrastato, link e immagini senza etichette o alternative.
UtilizzabileModuli non compilabili da tastiera, niente breadcrumb né indicatori di focus.
ComprensibileVoci tecniche in lingua diversa, pagine che non fanno ciò che promettono.
RobustoChi usa tecnologie assistive non può cambiare colore, dimensione o formato.
07 · Assistente AI
Un assistente per ridurre l’incertezza
Alcuni attriti della navigazione mobile si sciolgono con una risposta al momento giusto. Ho progettato un chatbot che risponde, consiglia e accompagna.
01
Rispondere
Risposte naturali su spedizioni, resi, materiali e acquisto.
02
Consigliare
Domande contestuali per restringere la scelta.
03
Guidare
Spiegazioni sintetiche, meno carico cognitivo.
