Yeppon
eCommerce ■ Experience Design ■ Development
Rapido, scalabile, iper-performante: il nuovo shop Headless di Yeppon
Con un catalogo di oltre 350.000 prodotti, Yeppon.it è un eCommerce in costante crescita che compete in molteplici settori, come elettronica, articoli per la casa, fai da te, attività outdoor e tempo libero. Lo scopo del nostro progetto era fornire a Yeppon una soluzione eCommerce pienamente compatibile con la sua scala di business, migliorando tutti gli indicatori di performance, dalla rapidità al posizionamento SEO. Prioritari erano anche il rinnovamento e l’ottimizzazione della User Experience, attraverso un redesign del sito e dell’App mobile. Per ottenere i risultati prefissati, abbiamo scelto un approccio Headless, in grado di garantire la flessibilità e la rapidità di sviluppo necessarie.
Una roadmap da disegnare
Lo shop di Yeppon utilizzava una soluzione custom cresciuta di complessità nel corso degli anni: per questo nell’ambito del rinnovamento complessivo dello stack tecnologico il primo passaggio è stato svolgere un’analisi approfondita dell’as is. Il nostro team ha lavorato a stretto contatto con quello di Yeppon per comprendere e documentare il loro ecosistema eCommerce preesistente, dal punto di vista delle tecnologie adottate, dei workflow, dei data model e dei processi interni di gestione. Le informazioni raccolte in questa fase preliminare ci hanno permesso di stendere una roadmap dettagliata per la migrazione in Headless.
Un approccio research driven
Il front-end del nuovo Shop è stato progettato sfruttando pienamente la libertà conferita dall’approccio Headless. Abbiamo identificato le aree più critiche su cui focalizzare la revisione partendo da un’approfondita ricerca durante la quale abbiamo mixato metodologie quantitative e qualitative:
- Discovery workshop con il cliente
- Competitor Analysis
- Data Analysis
- Usability Test as is
- Session recording e heatmap
Il design di un'esperienza ancora più fluida
Abbiamo definito tra i principali obiettivi del redesign la valorizzazione dell’unicità e della distintività del brand, obiettivo che abbiamo declinato dal punto di vista strategico dando maggiore spazio ai servizi esclusivi proposti da Yeppon e dal punto di vista della UI attraverso scelte cromatiche ed elementi di navigazione coerenti e caratterizzanti.
Un altro aspetto importante su cui abbiamo orientato l’evoluzione del design è stato la semplificazione della navigazione tra il catalogo prodotti. Da questo punto di vista la sfida principale è stata quella di coniugare la progettazione di un’esperienza ancora più fluida e intuitiva alla complessità del catalogo e delle variabili annesse alla vendita: una sfida che abbiamo accolto strutturando percorsi rapidi e semplificati per il processo di acquisto, uniformando la navigazione tra livelli e ottimizzando la consultazione delle informazioni delle schede prodotto.
Abbiamo realizzato il Design System del progetto contenente la libreria dei componenti visuali, fornendo una documentazione completa che ha garantito la massima qualità e aderenza del design durante il successivo passaggio allo sviluppo.
Un'architettura Headless per prestazioni eccezionali
Lo sviluppo del progetto è stato portato avanti con l’obiettivo di migliorare le performance dI Yeppon.it su tutti i livelli. Il sito è stato reimplementato tramite il framework NextJS, riscrivendo i componenti di frontend in React e introducendo un CMS headless, Strapi, che supera le rigidità della soluzione precedente offrendo al team di store management del cliente una “cassetta degli attrezzi” molto più flessibile.
Abbiamo utilizzato le strategie più raffinate di idratazione (SSR, ISR, SSG) per migliorare gli indicatori SEO e ottimizzare la resa delle immagini, ottenendo tempi di risposta dell’interfaccia così veloci da non richiedere il ricorso a tool di pre-rendering esterni. A aumentare ulteriormente le prestazioni contribuisce Algolia, integrato come motore di ricerca e tool di visual merchandising. Per interfacciare frontend, CMS e API native di Yeppon è stato scelto un server Apollo GraphQl. Al lavoro sul sito si sono affiancati il rinnovamento e il redesign dell’App Yeppon, che replica da mobile la stessa esperienza d’acquisto fluida e intuitiva.
Lo Shop è stato poi integrato con Klaviyo, per orchestrare con la massima precisione tutti i flussi di marketing automation rivolti a un numero di clienti che nel 2022 ha sfiorato i 300.000.
Risultati
Nei primi tre mesi del 2024 abbiamo ottenuto ottimi risultati che hanno impattato sia il Journey dell’utente sia i dati di conversione. Lato UX, si evidenziano dati molto positivi già a partire dalla vetrina principale di Yeppon: l’homepage.
L’aggiunta di diversi percorsi di navigazione rilevanti per gli utenti e la riprogettazione del menu hanno portato a una diminuzione del tasso di abbandono della pagina pari al 23% rispetto al periodo precedente al lancio. La nuova UI ha valorizzato anche lo Yeppon Club, servizio fortemente distintivo e vantaggioso che propone al cliente un sistema di cashback, generando un incremento delle visualizzazioni della landing dedicata del 62%.
La revisione della consultazione della PDP e l’ottimizzazione dei percorsi di acquisto hanno portato a un notevole aumento degli utenti che avviano il checkout: + 92% da desktop e addirittura +203% da mobile, dati che suggeriscono una maggiore fluidità dell’esperienza grazie all’eliminazione dei punti di frizione individuati in fase di ricerca.
Questi miglioramenti si sono tradotti in una crescita degli acquisti su tutti i dispositivi, in particolare quelli mobili, con un incremento del 94%, seguito da un +37% per gli acquisti da desktop rispetto al periodo aprile-giugno 2023. In totale, l’incremento è stato del 58%.
-23% tasso di abbandono in homepage
+203% avvi di checkout da mobile
+58% acquisti su tutti i dispositivi
Progetti
Esplora i prodotti digitali e i servizi che abbiamo progettato
