Ottimizzare la User-Experience del proprio e-Commerce per migliorarne la resa

Oltre che sviluppare e-Commerce ex-novo, ALGORITMA prende continuamente in carico progetti online già avviati. Vediamo, in questo caso studio, com’è possibile individuare potenziali migliorie alla user-experience, riprogettandone la user-interface, e qual è il nostro processo di ottimizzazione.

Strumento ormai consolidato nelle abitudini dei consumatori, l’e-Commerce rappresenta, per un’azienda consapevole e al passo coi tempi, un processo vivo e in continua evoluzione. Ma, come uno squalo che non smette mai di nuotare, un buon sito di e-Commerce deve essere continuamente analizzato e affinato per adattarsi alle abitudini dei  clienti e ai cambiamenti tecnologici. Nel caso che andremo ad analizzare, vedremo come abbiamo migliorato alcuni aspetti dell’e-Commerce basato su Magento 2 di Le Bebè, realtà affermata nella vendita di gioielli che si è rivolta a noi per sanare qualche oggettiva criticità di utilizzo del sito.

Oltre all’aspetto legato strettamente all’aumento delle conversioni, obiettivo importante per il cliente era quello di migliorare la propria brand reputation, armonizzando la presentazione dei propri prodotti con la fascia di mercato occupata dai numerosi concorrenti.

Il nostro processo

Per tracciare una mappa di possibili sviluppi migliorativi, abbiamo analizzato la situazione precedente, tanto per quanto riguarda gli aspetti quantitativi che qualitativi. Si parte quindi facendosi (tante) domande: quali sono le caratteristiche tipiche della clientela di Le Bebè? Che tipo di prodotto cercano e come lo immaginano? Quali sono i loro marchi di riferimento? Quali sono i punti di frizione che rendono più difficoltosa la conversione?

Attraverso questo tipo di analisi, portata avanti insieme al cliente, vengono stabiliti in base al budget a disposizione degli interventi sulla user-experience, Nel caso di Le Bebè gli aspetti su cui intervenire con priorità erano legate alla user-interface definita dal tema personalizzato di Magento 2; senza necessariamente “demolire tutto” (attività che viene sovente offerta perchè paradossalmente meno complessa!), siamo intervenuti chirurgicamente sui singoli aspetti del tema, rielaborando e presentando in maniera più semplice ed elegante contenuti già presenti nel sito. A questa attività si è poi aggiunto il rinnovo interno di contenuti dal punto di vista del copywriting e della comunicazione, fortemente voluto dal cliente e portato avanti dalle sue risorse interne.

Vediamo adesso alcuni degli elementi della user-interface che sono stati riprogettati, suddivisi per semplicità per pagina.

Home Page

INTESTAZIONE E NAVIGAZIONE

PRIMA …

… E DOPO

 

  • È stata migliorata la leggibilità della navigazione, creando un’area apposita
  • È stato sostituito il full-page banner con uno full-width, risolvendo i problemi di lettura causati dallo scarso contrasto di alcune foto di sfondo
  • È stato reso cliccabile tutto il banner, eliminando la call-to-action a pulsante poco visibile ed efficace
  • Sono stati riordinati i vari elementi del layout riportandoli tutti in griglia
  • Le icone carrello e ricerca sono state spostate, rese più visibili e di facile utilizzo
  • È stata introdotta una fascia legata alla value-proposition del marchio (essenziale ai fini SEO)
  • L’header-top è stato sfruttato in modo più efficace, portando sulla sommità link all’assistenza e al cambio lingua.

CATEGORIE IN VETRINA

PRIMA …

… E DOPO

  • Dall’utilizzo delle illustrazioni (recuperate dal catalogo cartaceo) siamo passati alla rappresentazione dei prodotti della categoria stessa, rendendo più immediato trovare il prodotto di proprio interesse e al contempo valorizzando i dettagli dei gioielli.
  • È stata eliminata la ripetitiva action “Scopri di più” a favore di un’immagine completamente cliccabile.

TESTO ISTITUZIONALE A PIE’ PAGINA

PRIMA …

… E DOPO

  • Il testo è stato redistribuito su paragrafi più distanziati e leggibili.
  • Sono stati introdotti link interni alle categorie relative ed il testo è stato arricchito da fotografie

Categoria di Prodotto

INTESTAZIONE

PRIMA …

… E DOPO

  • Tutta l’intestazione è stata resa più snella ed essenziale, eliminando sfumature  e creando una fascia di facile identificazione del titolo.
  • Le breadcrumb sono state valorizzate ed è stata introdotta una descrizione di categoria molto utile ai fini SEO
  • I filtri sono ora più chiaramente identificabili nella gerarchia visiva della pagina
  • I prodotti sono ora più visibili e accessibili più in alto rispetto allo scorrimento verticale della pagina

MODULO PRODOTTO IN GRIGLIA

PRIMA …

… E DOPO

 

  • È stato eliminato l’effetto di hover, poco accessibile soprattutto nella versione Mobile
  • Sono state inserite, subito visibili, le informazioni come codice articolo, nome prodotto e prezzo
  • Adesso è possibile a colpo d’occhio confrontare i prezzi delle differenti versioni dei prodotti nella stessa categoria

Scheda Prodotto

PRIMA …

… E DOPO

  • Gli sfondi sfumati sono stati eliminati in modo da non creare problemi di contrasto con le immagini del prodotto.
  • Sono state predisposte le miniature di anteprima nella galleria fotografica
  • Nel caso di prodotto che presenti varianti, è adesso possibile scegliere versioni differenti dello stesso prodotto direttamente dalla singola scheda
  • La tipografia del titolo è resa più elegante ed in linea con il branding di Le Bebè
  • Le azioni di inserimento in wishlist e ricerca di venditori autorizzati sul territorio sono ora identificate chiaramente da pulsanti
  • Descrizioni e garanzie sull’acquisto (spedizioni, resi, pagamenti, etc) arricchiscono la scheda prodotto di elementi che informano il visitatore e lo rassicurano sul possibile acquisto.

Carrello

PRIMA …

…E DOPO

 

  • Il layout del carrello è passato da full-width ad essere in griglia, così da diminuire lo spazio orizzontale di lettura della pagina.
  • Tutti gli spazi sono stati razionalizzati con una gerarchia visiva più chiara
  • Box specifici sono ora presenti per le opzioni relative alla dedica o all’inserimento dei codici sconto.
  • Nomi, immagini ed eventuali opzioni sulla singola riga prodotto sono ora più facilmente visibili

Conclusione (per ora!)

In questa sede, per semplicità, non abbiamo potuto discutere di tutti gli aspetti che hanno fatto parte del re-design, quali ad esempio:

  • Aspetti tipografici
  • Versione mobile del tema
  • Utilizzo dei colori in relazione alle linee guida del branding
  • Aspetti di miglioramento del posizionamento sui motori di ricerca
  • Performance e aspetti relativi alle prestazioni front-end

Abbiamo provato ad aprire una finestra su un processo di analisi e sviluppo ricco di risvolti interessanti, per far capire – concretamente – come si può agire già da oggi sull’esperienza dei nostri visitatori.

Share this article

Leave a comment