Un progetto di restyle per riflettere la qualità e l'innovazione del brand in ogni dettaglio.
Innovazione
·
Usabilità
·
Sport
·
Prototyping
·
Testing
·
Innovazione · Usabilità · Sport · Prototyping · Testing ·
Project summary
IL MIO RUOLO
Questo progetto è il risultato dell’esame finale del master in UX/UI design di Start2impact University.
COACH
Il progetto è stato revisionato da Sara Riscica.
TIMELINE
settembre - dicembre 2024
ThePole è un’azienda italiana specializzata nella progettazione e produzione di attrezzatura professionale per pole dance e discipline aeree. Il mio lavoro si è concentrato sul miglioramento della piattaforma e-commerce, rendendola più usabile e visivamente più in linea con l’eccellenza del brand.
Il sito attuale presenta diversi problemi di usabilità e un’estetica datata, che non riesce a trasmettere la qualità dei prodotti né il posizionamento di ThePole come leader di mercato. Ho riprogettato le principali pagine del percorso di acquisto, migliorando la navigazione, la ricerca dei prodotti e l’esperienza utente complessiva.
QUICK OVERVIEW
Il nuovo design semplifica la ricerca e la selezione dei prodotti, migliorando la comunicazione dei valori del brand e rendendo il processo d'acquisto più fluido ed efficace.
IL MIO APPROCCIO PROGETTUALE (01)
Il lavoro si è concentrato sul miglioramento delle pagine chiave per l’acquisto. Ho progettato un prototipo responsive per assicurarmi che il sito fosse fruibile su tutti i dispositivi. Ogni scelta progettuale è stata guidata dai dati raccolti.
DESIGN PROCESS (02)
Il mio processo si articola in tre fasi: una fase di ricerca, per comprendere il contesto e raccogliere dati su utenti e competitor; una fase di design, in cui progetto soluzioni basate sui dati raccolti; e infine, una fase di test per validare le ipotesi e assicurarmi che le soluzioni siano efficaci.
CHALLENGE (03)
QUALI ERANO I PROBLEMI? 👩🏻💻
Navigazione: alcuni Call-to-Action non sono chiari, come il pulsante “Catalogo Prodotti” che conduce a una sotto-categoria specifica. Inoltre, l’uso di termini tecnici senza spiegazioni rende l’esperienza complessa.
Home page: la Hero Section è un’immagine di sfondo con il payoff del brand, ma non sfrutta lo spazio per comunicare messaggi chiave o guidare l’utente.
Pagina Categoria: i prodotti consigliati non modificano il prezzo complessivo, causando confusione. Le descrizioni sono prolisse e poco chiare.
Pagina Prodotto: i prodotti sono troppo simili e le differenze non sono evidenti, creando incertezza nel processo di scelta.
Mini-Cart: il pulsante “X” elimina tutti i prodotti invece di chiudere la finestra. Inoltre, le variabili selezionate (materiali, diametro, altezza) non vengono riportate.
… E A LIVELLO DI ACCESSIBILITÀ COME SIAMO MESSI? 🦾
Contrasto: il colore principale non garantisce un contrasto sufficiente, rendendo il testo difficile da leggere.
Struttura: gli headline non sono marcati correttamente, compromettendo la navigazione tramite screen reader.
Font: le label utilizzano un font troppo piccolo, risultando poco leggibili per molti utenti.
Immagini: manca l’attributo alt, impedendo la descrizione delle immagini agli utenti con disabilità visive.
Terminologia: l’uso eccessivo di termini tecnici rende difficile la comprensione dei contenuti.
Punti deboli del sito
📝
Punti deboli del sito 📝
IL VECCHIO SITO
La navigazione tra le pagine del vecchio presentava problemi di usabilità e un estetica datata.
NAVIGAZIONE 🌐
I Call-to-Action sono posizionati in modo incoerente, creando confusione. Inoltre, l’uso di terminologia tecnica senza spiegazioni adeguate rende difficile l'accesso alle informazioni per gli utenti meno esperti.
PAGINE INTERNE 🛒
Nelle pagine categoria, i prodotti non sono distinti chiaramente. Le descrizioni nelle pagine prodotto sono troppo lunghe e ambigue, mentre la mini-cart presenta pulsanti poco intuitivi e manca di informazioni essenziali.
HOME PAGE 🛍️
La Hero Section non sfrutta appieno il suo potenziale, con un’immagine di sfondo e il payoff del brand, ma senza messaggi chiave o elementi interattivi che guidino l’utente.
ACCESSIBILITÀ ⚖️
Problemi legati al design e alla struttura, come il contrasto insufficiente, font poco leggibili e l’assenza di descrizioni alternative per le immagini, compromettono l’inclusività del sito, soprattutto per utenti con disabilità o minore esperienza digitale.
ANALISI DEGLI UTENTI (04)
ThePole si rivolge principalmente a un pubblico femminile, pur includendo anche uomini. Gli utenti hanno un’età compresa tra i 25 e i 45 anni e provengono da tutto il mondo, con un’attenzione particolare al mercato italiano.
Genere
Età
Nazionalità
Il questionario è stato compilato da 110 persone appartenenti al target di riferimento
👧👩👨
Il questionario è stato compilato da 110 persone appartenenti al target di riferimento 👧👩👨
QUESTIONARIO (05)
QUALI ERANO GLI OBIETTIVI? 🎯
Preferenze d’acquisto: capire le motivazioni d'acquisto e le caratteristiche più importanti per gli utenti nella scelta di un palo da pole dance.
Esigenze: capire quali caratteristiche cercano gli utenti in un palo da pole dance (materiali, caratteristiche, montaggio, ecc.).
User Experience: comprendere quanto quali sono le difficoltà degli utenti che acquistano un palo da pole dance online.
Preferenze d’installazione: indagare se gli utenti preferiscono installare in casa pali permanenti o removibili.
INSIGHTS QUESTIONARIO
PREFERENZE 🙈
Il 90% delle persone acquista un palo da pole dance per allenarsi in autonomia. Tra le finiture, la vernice a polvere è la più popolare (35%), seguita da cromo (33%) e acciaio inossidabile (27%). Il silicone è scelto solo dal 5%.
ESIGENZE 🙉
Gli utenti che acquistano online pali per pole dance cercano informazioni chiare (40%) con descrizioni dettagliate, istruzioni di montaggio chiare, foto e video di qualità e questionari che possano aiutarli nella scelta del prodotto perfetto.
Il 18% desidera assistenza personalizzata , anche tramite chat live. il 16% è attento al prezzo e apprezza promozioni o regali. Il 12% si affida alle recensioni dei clienti e i consigli degli esperti.
ASPETTATIVE 🙊
Il 90% degli utenti preferisce pali removibili per l’allenamento a casa. Le caratteristiche più ricercate sono stabilità (29%), facilità di montaggio (25%) e qualità dei materiali (19%). Un 5% ha esigenze diverse.
COSA VOGLIO MODIFICARE? 🚀
I dati emersi dal questionario hanno guidato la progettazione della nuova interfaccia utente, rendendola più in linea con le esigenze degli utenti.
Ho semplificato la scelta del palo introducendo un questionario che aiuta a individuare il prodotto più adatto in base alle necessità personali. Inoltre, ho reso più chiare le caratteristiche dei pali, come finitura e diametro, e migliorato la sezione informativa, rendendola più esplicita e facilmente comprensibile.
REVISIONE DELLA SITEMAP (06)
È stato introdotto un mega menu sotto la voce "Shop" per semplificare la navigazione tra le categorie. I nomi delle categorie sono stati semplificati, eliminando termini tecnici non necessari. Alcune categorie, come Whirlpole, sono state riposizionate: da "Aerea" a "Pole Dance", per una struttura più coerente e chiara.
Vecchia sitemap agmdesign.it
Nuova sitemap agmdesign.it
WIREFRAME
Prima di procedere al prototipo ad alta fedeltà ho strutturato le nuove pagine con un wireframe
RESTYLE LOGO (07)
Il logo e il payoff sono stati riprogettati per allinearli più efficacemente ai valori del brand e ai prodotti che rappresenta, trasmettendo dinamicità, forza e chiarezza.
QUALI SONO LE CARATTERISTICHE? 🌟
Font: sans-serif per un messaggio chiaro e diretto. Lo stile italic aggiunge dinamicità, mentre la versione extended e bold garantisce impatto e presenza visiva.
Lettering: le lettere sono state mantenute in maiuscolo per esprimere forza, solidità e autorevolezza.
Payoff: "Spin in your way" enfatizza movimento e versatilità. "Spin" richiama il palo girevole, mentre "in your way" riflette la varietà di stili e la flessibilità del brand nel soddisfare ogni esigenza.
Pittogramma: il nuovo pittogramma riprende la "O" di "Pole", stilizzando la posa Crescentmoon. Integra dinamismo e forma una "P", mantenendo coerenza e trasmettendo fluidità.
Vecchio logo
Nuovo logo
DESIGN GUIDE (08)
Ogni elemento visivo, dai colori ai font, fino alle icone e agli stili dei pulsanti, è stato attentamente scelto per riflettere i valori del brand e migliorare l'esperienza utente.
USER TEST (09)
Il test è stato ideato per raccogliere feedback e valutare l’efficacia del nuovo design, analizzando l’esperienza utente e identificando eventuali aree di miglioramento. Esso è composto da un 5 second test e da un usability test.
5 SECOND TEST
HERO SECTION: 📋
Obiettivo: Valutare se la nuova hero section comunica il messaggio del brand in modo chiaro, accessibile e accattivante.
Domande: “Qual è stata la tua prima impressione guardando l'immagine?”
“Cosa ti ricordi maggiormente dell’immagine?” “Di cosa pensi si occupi questo sito?” “C’è qualcosa che ti ha colpito particolarmente?”
USABILITY TEST
ARCHITETTURA DELL’INFORMAZIONE 📱
Obiettivo: Valutare quanto facilmente gli utenti riescono a navigare nel sito e a trovare le informazioni di cui hanno bisogno.
Task: “Apri il menu e seleziona la categoria Flying Pole” “Aggiungi ai preferiti il Cerchio aereo con diametro di 30 mm”
RICERCA E COMPARAZIONE PRODOTTI 🛍️
Obiettivo: Verificare che il processo di ricerca e comparazione permetta agli utenti di trovare e scegliere facilmente i prodotti.
Task: “Aggiungi al carrello il prodotto Palo con diametro di 45 mm rivestito in GeckoGrip” “Completa l'acquisto del prodotto che hai inserito nel carrello”
I test sono stati svolti da 5 persone
👧👩👨
I test sono stati svolti da 5 persone 👧👩👨
RISULTATI USER TEST (10)
5 SECOND TEST: HERO SECTION
Il test ha avuto esito positivo: tutti gli utenti hanno compreso immediatamente l’ambito del sito. Inoltre, le immagini sono state apprezzate per la loro qualità visiva, trasmettendo chiaramente l’idea di prodotti professionali e di alto livello.
“Qual è stata la tua prima impressione guardando l'immagine?” “Cosa ti ricordi maggiormente dell’immagine?” “Di cosa pensi si occupi questo sito?” “C’è qualcosa che ti ha colpito particolarmente?”
USABILITY TEST: TASK 01
“Apri il menu e seleziona la categoria Flying Pole”
100%
Successo task
37%
Tasso missclick
Tutti gli utenti hanno completato con successo il task, ad eccezione di un inconveniente.
L'utente 4 ha riscontrato difficoltà nel selezionare la voce Flying Pole, senza ottenere alcuna risposta dal prototipo. L'analisi del report di Maze ha confermato il problema: la heat map dei suoi click mostrava un'interazione corretta, ma il prototipo non reagiva come previsto.
USABILITY TEST: TASK 02
“Aggiungi ai preferiti il Cerchio aereo con diametro di 30 mm”
60%
Successo task
52%
Tasso missclick
Tre utenti hanno completato il task senza alcuna difficoltà.
L’utente 4 è arrivato correttamente alla pagina del prodotto, ma ha cliccato sul pulsante “Aggiungi al carrello” invece che sull’icona dei preferiti. L’utente 5 non è riuscito a completare il task perché nel menu ha selezionato la categoria Flying Pole invece di Cerchi aerei.
USABILITY TEST: TASK 03
“Aggiungi al carrello il prodotto Palo con diametro di 45 mm rivestito in GeckoGrip”
100%
Successo task
7%
Tasso missclick
Tutti e 5 gli utenti hanno completato il task senza alcun intoppo.
Dopo aver acquisito familiarità con il sito nei task precedenti, hanno navigato con sicurezza, aprendo direttamente la categoria Pole Dance e individuando rapidamente il prodotto corretto. I missclick sono stati molto bassi e il tempo di esecuzione è stato rapido.
USABILITY TEST: TASK 04
“Completa l'acquisto del prodotto che hai inserito
nel carrello”
100%
Successo task
5%
Tasso missclick
Tutti gli utenti hanno completato il task senza difficoltà.
Il task 4 è stato separato dal task 3 per gestire eventuali problematiche nel completamento del primo, ma in questo caso la divisione si è rivelata superflua, dato che nessun utente ha incontrato ostacoli.
MODIFICHE PROTOTIPO (11)
Il test ha evidenziato l’efficacia del prototipo, ma nelle considerazioni finali due utenti hanno segnalato difficoltà selezionare la card corretta del palo da pole dance. Si è scelto quindi ti ipotizzare un’ulteriore modifica per rendere la selezione del prodotto ancora più intuitiva.
Card prodotto prima del test:
Nonostante le modifiche apportate, la pagina di categoria dei pali da pole dance presenta ancora prodotti visivamente simili.
Gli utenti hanno percepito correttamente questa difficoltà, poiché serve qualche secondo in più per distinguere le differenze. Le nuove card rappresentano un netto miglioramento rispetto al vecchio sito, ma c’è ancora spazio per ulteriori ottimizzazioni.
Card prodotto dopo il test:
Per migliorare la chiarezza visiva, è stato assegnato un colore a ciascun livello di grip: verde per il basso, giallo per il medio e rosso per l’alto. Questo permette agli utenti di identificare subito la categoria del prodotto senza dover leggere la descrizione o interpretare il tag.
Inoltre, il prezzo è stato evidenziato con il colore principale per dargli maggiore enfasi e renderlo più facilmente riconoscibile all’interno della card prodotto.
CONCLUSIONE (12)
IL DESIGN CHE FACILITA LA SCELTA 💖
Il progetto ha semplificato la navigazione, migliorato la ricerca e la comparazione dei prodotti, e reso l'e-commerce più in linea con i valori di The Pole come leader nel mercato delle attrezzature per discipline aeree. Grazie al nuovo design, l'interfaccia è diventata visivamente più coerente con l'immagine del brand, offrendo un'esperienza che unisce funzionalità ed estetica, in linea con la sua posizione di riferimento nel settore.
COSA FAREI MEGLIO LA PROSSIMA VOLTA? 👩🏻💻
Per migliorare ulteriormente il mio lavoro, la prossima volta mi concentrerei a selezionare un target più verticale per il questionario. In questo caso, sarebbe stato più utile rivolgersi esclusivamente a persone che acquistano prodotti The Pole, per ottenere dati più pertinenti e precisi.
Esplora gli altri miei progetti
5 min di lettura
·
5 min di lettura ·
CASE STUDY 01: Personal project
Da sito poco intuitivo a piattaforma user-friendly
Coming soon
···
Coming soon ···
Work in progress…
CASE STUDY 03: Work project