Da un sito poco intuitivo ad una piattaforma user-friendly, capace di valorizzare sia i prodotti che i valori del brand.
Project summary
IL MIO RUOLO
Questo progetto è il risultato di cinque esami del master in UX/UI design di Start2impact University
COACH
I progetti sono stati revisionati dai seguenti coach: Discovery da Fabio Orlandi, Accessibilità da Francesca Pulina, Wireframing da Daniele Del Gaudio, User Interface da Fabio Orlandi e User Test da Alessandro Curci.
TIMELINE
2023-2024
Sostenibilità
·
Usabilità
·
Accessibilità
·
Prototyping
·
Testing
·
Sostenibilità · Usabilità · Accessibilità · Prototyping · Testing ·
Ecodream è un brand indipendente di moda sostenibile specializzato in borse, zaini e accessori eco-friendly. Il mio lavoro si è concentrato sul miglioramento della piattaforma e-commerce.
Il sito presentava notevoli problemi di usabilità e sembrava poco affidabile. Ho riprogettato le pagine principali del percorso di acquisto. Le modifiche sono state guidate da un’analisi “as-is” del sito esistente, una ricerca sugli utenti e uno studio dei competitor.
QUICK OVERVIEW
Il nuovo design da maggiore visibilità ai prodotti di Ecodream, i valori del brand vengono comunicati in modo più efficace e il processo di acquisto è diventato più semplice e fluido
IL MIO APPROCCIO PROGETTUALE (01)
Ogni scelta progettuale è stata guidata dai dati raccolti. Ho riprogettato il percorso di acquisto realizzando un prototipo responsive su Figma.
DESIGN PROCESS (02)
Il lavoro si articola in tre fasi: Discovery per comprendere il contesto e raccogliere dati su utenti e competitor; Design, in cui ho progettato le soluzioni; e infine, Test per validare le ipotesi e assicurarmi che le soluzioni siano efficaci.
CHALLENGE (03)
Punti deboli del sito
📝
Punti deboli del sito 📝
QUALI ERANO I PROBLEMI? 👩🏻💻
Navigazione: i link nel testo non sono correttamente visualizzati, alcune immagini che sembrano decorative in realtà sono collegamenti; le pagine sono molto lunghe e non è possibile tornare velocemente in cima.
Shop: nelle pagine di categoria non sono presenti i filtri per selezionare i prodotti, né il breadcrumb per navigare facilmente tra le categorie.
Carrello: non appare nel menu, quindi per accedervi bisogna navigare nello shop; inoltre, non è possibile aumentare la quantità dei prodotti selezionati.
… E A LIVELLO DI ACCESSIBILITÀ COME SIAMO MESSI? 🦾
Testi: i paragrafi sono troppo lunghi e le frasi importanti non sono evidenziate, rendendo difficile lo scanning. Il font ha dimensioni insufficienti e un peso troppo sottile.
HTML: i titoli non sono correttamente marcati, le immagini non presentano un testo alternativo e ci sono molti tag vuoti.
Focus state: Non è facilmente individuabile e riconoscibile.
Non solo problemi di usabilità, ma barriere critiche che aumentano il Bounce Rate e riducono la fiducia nel brand
IL VECCHIO SITO
La navigazione tra le pagine del vecchio sito mostra difficoltà d’uso e una struttura poco intuitiva.
NAVIGAZIONE 🌐
Elementi visivi e funzionali non sono chiaramente definiti, rendendo difficile orientarsi tra i contenuti e accedere rapidamente alle informazioni desiderate.
CARRELLO 🛒
L'assenza di un accesso diretto nel menu principale e la difficoltà nel modificare la quantità dei prodotti selezionati creano barriere operative, penalizzando l'efficienza del processo di acquisto.
SHOP 🛍️
La mancanza di strumenti di navigazione e orientamento complica il processo di esplorazione e selezione, rendendo l'esperienza meno immediata.
ACCESSIBILITÀ ⚖️
Leggibilità dei contenuti, struttura delle pagine e interattività generale richiedono miglioramenti per garantire un accesso equo e agevole a tutti gli utenti.
ANALISI DEGLI UTENTI (04)
I prodotti di Ecodream sono rivolti principalmente a un pubblico femminile, pur includendo alcuni articoli dedicati agli uomini. L’azienda opera sul territorio italiano e si rivolge a una fascia d’età adulta, caratterizzata da un interesse per la sostenibilità.
Genere
Età
Nazionalità
Il questionario è stato compilato da 52 persone appartenenti al target di riferimento
👧👩👨
Il questionario è stato compilato da 52 persone appartenenti al target di riferimento 👧👩👨
QUESTIONARIO (05)
QUALI ERANO GLI OBIETTIVI? 🎯
Abitudini d’acquisto: esplorare cosa acquistano abitualmente gli utenti target e in quali modalità.
Caratteristiche: identificare le funzionalità e le qualità che il target considera fondamentali per completare un acquisto.
Disponibilità economica: valutare il budget di spesa del target.
INSIGHTS QUESTIONARIO
I FATTORI PIÙ IMPORTANTI 📊
Gli utenti hanno identificato come determinanti nella scelta di acquisto di borse e zaini la qualità del prodotto (indicata dal 93,3% degli intervistati) e il prezzo (selezionato dal 70%).
DISPONIBILITÀ ECONOMICA 💰
Il 60% degli utenti che hanno compilato il questionario dichiara di essere disposto a spendere tra €50 e €100 per una borsa artigianale made in Italy, realizzata con materiali ecosostenibili. Inoltre, il 63,3% afferma che spenderebbe la stessa cifra anche per uno zaino con caratteristiche analoghe.
Questi dati sono in linea con i prezzi e con l’obiettivo di Ecodream di rendere i suoi prodotti accessibili.
VALUTAZIONE DELLE FUNZIONALITÀ 🛠️
Il 70% degli intervistati ritiene fondamentale la possibilità di leggere le recensioni dei clienti. Inoltre, il 43,3% considera molto utile la barra di ricerca per trovare i prodotti, mentre il 56,7% attribuisce massima importanza alla presenza dei filtri per facilitare la selezione.
Queste valutazioni confermano che inserire le recensioni dei prodotti, aggiungere i filtri e una barra di ricerca possa migliorare significativamente il sito web.
DISPOSITIVO UTILIZZATO 📱
Il 63,3% degli utenti intervistati afferma che utilizza maggiormente lo smartphone per acquistare online.
Questo conferma l’importanza di ottimizzare il sito soprattutto per i dispositivi mobile.
WIREFRAME
Prima di procedere al prototipo ad alta fedeltà ho strutturato le nuove pagine con un wireframe
MOBILE MENU (06)
Poiché il sito offre solo 3 categorie di prodotti, oltre agli accessori, si è deciso di semplificare la navigazione dello shop progettando un menu superiore che mostri visivamente le categorie disponibili.
COME SI NAVIGA? 🚣♀️
Menu superiore: i prodotti vengono suddivisi in 4 categorie: Borse, Zaini, Hybrid e Altro. Facendo tap sui modelli si raggiunge la pagina Catalogo del modello selezionato.
Menu inferiore: troviamo le altre voci per navigare all’interno del sito quali Ricerca, Account, Carrello e Menu. Tappando su “Menu” si apre a tutto schermo la navigazione completa del sito.
DESIGN GUIDE (07)
Ogni elemento visivo è stato attentamente riprogettato per riflettere i valori del brand e migliorare l'esperienza utente.
USER TEST (08)
Il test ha verificato l'efficacia di tre nuovi interventi sull'interfaccia, permettendomi di individuare problemi che non erano emersi in fase Discovery.
USABILITY TEST
ARCHITETTURA DELL’INFORMAZIONE 📋
Obiettivo: Valutare l'efficacia della nuova architettura.
Task: “Vai nel tuo carrello e acquista lo Zaino UBY in pelle arancione”
RICERCA E COMPARAZIONE PRODOTTI 🛍️
Obiettivo: Analizzare l’efficacia del nuovo sistema di ricerca e la comparazione dei prodotti.
Task: “Aggiungi ai preferiti la Borsa MN in pelle arancione” “Aggiungi al carrello lo Zaino UBY in pelle arancione”
NAVIGAZIONE MENU 📱
Obiettivo: Esaminare l’efficacia del nuovo menu mobile.
Task: “Cambia la lingua del sito in inglese”
RISULTATI USABILITY TEST (9)
TASK 01:
“Cambia la lingua del sito in inglese”
Il test di usabilità e stato svolto da 5 persone
👧👩👨
Il test di usabilità e stato svolto da 5 persone 👧👩👨
52,4%
Tasso missclick
Il tasso di missclick è elevato perché l'Utente 1 ha cliccato prima 3 volte su “Account” e dopo 3 su “Home”, mentre tutti gli altri utenti hanno completato il task senza errori.
La scelta dell'Utente 1 di navigare in 'Account' per cambiare la lingua non è sbagliata. Anche se il prototipo non prevedeva questa opzione, è un'idea progettuale da considerare per lo sviluppo del sito definitivo.
Heatmap Utente 1
Heatmap Utente 2, 3, 4 e 5
TASK 02:
“Aggiungi ai preferiti la Borsa MN in pelle arancione”
17,4%
Tasso missclick
Si sono verificati alcuni missclick poiché l'Utente 1 ha cliccato 2 volte su 'Acquista'. Gli altri utenti hanno completato il task senza errori.
Considerando l'errore commesso dall'Utente 1 si può rendere più esplicita la funzione del pulsante. Per esempio modificare la CTA in “Aggiungi al carrello” per evitare.
Heatmap Utente 1
Heatmap Utente 2, 3, 4 e 5
TASK 03:
“Aggiungi al carrello lo Zaino UBY in pelle arancione”
80%
Successo task
L'Utente 5 non ha completato l'aggiunta dello Zaino UBY al carrello, poiché ha erroneamente cercato di acquistare la borsa MN. Gli altri utenti hanno completato il task senza errori.
L'errore potrebbe essere stato causato dalla confusione con il task precedente, che richiedeva di aggiungere ai preferiti la borsa MN, anch'essa di colore arancione.
Percorso corretto per il task 03:
Shop
Pagina categoria
Pagina prodotto
TASK 04:
“Vai nel tuo carrello e acquista lo Zaino UBY in pelle arancione”
28,6%
Tasso missclick
Il tasso di missclick è elevato a causa dell'Utente 5 che ha cliccato 3 volte su “Visita lo shop”, mentre tutti gli altri utenti hanno completato il task senza errori.
Ho ipotizzato che questo errore è dovuto al fatto che Utente 5 non ha completato il task precedente. Di conseguenza, ha provato ad aggiungere l’articolo tramite “Visita lo shop”, senza notare che nella schermata di test lo Zaino era già presente nel carrello.
Heatmap Utente 1, 2, 3 e 4
Heatmap Utente 5
MODIFICHE PROTOTIPO (10)
Il test ha confermato il successo del prototipo iniziale e convalidato il prototipo.
Dal test è emersa la possibilità di aggiornare la CTA della pagina prodotto da "Acquista" a "Aggiungi al carrello" per migliorare ulteriormente il processo di acquisto.
Pagina prodotto prima del test
Pagina prodotto dopo il test
CONCLUSIONE (11)
UN’EVOLUZIONE SOSTENIBILE 🌳
Il progetto ha portato a una significativa semplificazione della navigazione, un miglioramento nella presentazione dei prodotti e una maggiore accessibilità per gli utenti, allineandosi agli obiettivi di Ecodream di offrire un’esperienza d’acquisto sostenibile e piacevole.
COSA HO IMPARATO DA QUESTO PROGETTO? 👩🏻💻
Questo progetto è stata la palestra per applicare un approccio data-driven al design. Se dovessi portarlo in produzione oggi, il mio prossimo step sarebbe definire dei KPI chiari (es. tempo medio di completamento dell'acquisto) per misurare quantitativamente l'efficacia del nuovo design rispetto al precedente.
Esplora gli altri miei progetti
5 min di lettura
·
5 min di lettura ·
CASE STUDY 02: Personal project
Un restyle che riflette la qualità del brand
Coming soon
···
Coming soon ···
Work in progress…
CASE STUDY 03: Work project