Client: Ridewill
Industry: Bike / sport
My Services: #UX, #UI
Design Tool: Figma, Marvel
Ridewill.it is one of the biggest bike e-commerce in Italy. After 10 years of activity, the original website had to be completely redesigned in a modern and responsive way.
Ridewill entrusted me with the design of the user experience and asked me to study the new look & feel of the entire interface.
According to the atomic design logics I studied the whole design system: typography, colors, buttons and labels, icons and illustrations, components and widgets, menus, boxes and cards.
Ridewill.it - il mio primo grosso progetto da freelance è finalmente online.
Ad aprile 2022 mi venne proposto di occuparmi del redesign di Ridewill.it, uno dei più grandi e-commerce italiani di biciclette, ebike, accessori, componenti e abbigliamento di ciclismo.
Ridewill.it è un'enorme piattaforma e-commerce sviluppata con tecnologia proprietaria, con oltre 40.000 prodotti a magazzino in pronta consegna di oltre 400 brand e si è affermato come leader per la vendita di ebike, con possibilità di spedizione o ritiro nel punto vendita.
Il sito aveva un front-end basato su un tema di 10 anni fa che doveva essere ripensato e riprogettato al fine di creare da zero un nuovo tema grafico, completamente custom, ma compatibile con le tantissime logiche esistenti.
Ricerca e Analisi
Per tutte le mie attività, a partire dal brief, mi sono interfacciato con Alessandro Masiero, e-commerce manager di Ridewill, con il quale si è creato subito un rapporto di fiducia e un'ottima intesa lavorativa.
Sono partito con un'analisi benchmark dei tanti e-commerce competitor e comparable, per approfondire il mondo della vendita online di biciclette, studiando e confrontando le diverse tipologie di sezioni, pagine e le relative funzioni: homepage e homepage di sezione, schede prodotto, pagine di categoria, login, registrazione, carrello e check-out.
Per ogni sito analizzato ho estrapolato dei take-out e identificato delle best practice, sia desktop che mobile.
Per ogni sito analizzato ho estrapolato dei take-out e identificato delle best practice, sia desktop che mobile.
Progettazione
La mia fase di progettazione è iniziata dalla homepage, prima con i wireframe, ovvero la struttura dei contenuti della pagina senza definizione di grafica, né di stile. Ho studiato due versioni della homepage: fase 1, ovvero il redesign dei contenuti esistenti con alcuni elementi nuovi, e fase 2, cioè come la home si potrà evolvere dopo la prima messa online, con nuovi elementi e funzionalità che prevedono sviluppi ad hoc sul back-end.
Non sono un fan della corrente di pensiero “mobile first”, preferisco un approccio “at the same time design”, cioè la progettazione in contemporanea delle versioni desktop, mobile e, quando serve, tablet delle varie pagine: questo mi consente di pensare subito a come si comporteranno i vari elementi in un'ottica full responsive man mano che prendono vita sulle artboard di Figma, il software di interface design che ho scelto per questo progetto.
La progettazione delle pagine in formato wireframe presenta però un problema: vengono capite solo dagli addetti ai lavori.
Difficilmente un cliente riesce ad immaginarsi come una pagina grigia e bianca, con box, croci, linee e testi finti sarà una volta finita.
Interface design
Per tale motivo, e per velocizzare tutto il processo, sono passato alla progettazione della graphic user interface: ho realizzato e sottoposto al team alcune proposte grafiche della homepage in grado di rendere il look&feel del sito, quindi, una volta selezionata e affinata la proposta scelta, ho cominciato la costruzione del “Ridewill design system”, composto da palette colori, tipografia, grid system, bottoni ed oggetti interattivi, icone e illustrazioni, passando poi per elementi più complessi come header, menu, hero, box e card: un'enorme libreria di componenti per la costruzione di qualunque pagina.
Seguendo le logiche dell'atomic design, ho progettato e costruito tutti i template di pagina, utilizzando i componenti del design system, integrandolo via via con i nuovi elementi che si rendeva necessario disegnare.
Per visualizzare, valutare e validare l'avanzamento del design del sito ho popolato di contenuti veri i suddetti template, creando le principali pagine.
Prototipazione
Utilizzando il tool di prototipazione Marvel ho quindi montato un mockup navigabile desktop e uno mobile, che nel tempo si sono arricchiti di tutte le nuove pagine e sezioni, in alcuni casi anche con diverse versioni per fare test d'uso e di gradimento. A titolo d'esempio: ho realizzato 4 proposte di scheda prodotto e 5 varianti del flusso di check-out.
Tali prototipi sono serviti a far “vivere” un'anteprima quanto più realistica possibile del nuovo e-commerce prima di iniziarne lo sviluppo: i link ai prototipi sono stati condivisi con tutti gli attori coinvolti nel progetto del nuovo sito, così abbiamo potuto raccogliere feedback e analizzare le richieste o i suggerimenti per apportare migliorie e correttivi.
Front-end development
Per lo sviluppo “statico” del front-end ho coinvolto Elena Ghezzi, frontend developer “pixel perfect” che ha sviluppato tutti i template dell'e-commerce in php/html/css e ha scritto tutte le funzioni javascript per le interazioni, le animazioni e le validazioni lato front-end.
Questi template sono stati caricati su un mio server di staging al fine di testarli e validarli prima di passare il codice a Simone Minniti di Gigasys, la società di sviluppo preposta all'integrazione del nuovo tema, che insieme a Franco Bianchi, MySQL Administrator di Ridewill, hanno lavorato per diversi mesi adattando o riscrivendo funzioni e codice per agganciare tutti i dati ai template e rendere funzionanti tutte le pagine.
Questi template sono stati caricati su un mio server di staging al fine di testarli e validarli prima di passare il codice a Simone Minniti di Gigasys, la società di sviluppo preposta all'integrazione del nuovo tema, che insieme a Franco Bianchi, MySQL Administrator di Ridewill, hanno lavorato per diversi mesi adattando o riscrivendo funzioni e codice per agganciare tutti i dati ai template e rendere funzionanti tutte le pagine.
Deploy
Secondo i piani iniziali il nuovo sito sarebbe dovuto andare online ad inizio aprile, per festeggiare il 10° anniversario dell'azienda, ma come spesso succede tra sviluppo, test, debug e modifiche, il rilascio definitivo ha subìto un paio di mesi di ritardo, ma ora..
Ridewill.it è finalmente online!