Negli ultimi quattro mesi abbiamo ricostruito gran parte dello store di Culture Shock Club. Il lavoro conta più di 500.000 righe modificate tra aggiunte, rimozioni e refactoring. Il risultato è un sito più veloce, un percorso d'acquisto più chiaro e account cliente più utili.
Punti chiave
- Quattro mesi di rebuild dello storefront: più di 500,000 righe cambiate tra aggiunte, rimozioni e refactor.
- Ogni pezzo è andato live appena pronto, poi raffinato, non un unico relaunch.
- Le pagine chiave fanno 95 or higher nei test Lighthouse su mobile e desktop.
- Focus: first screen più veloce, home più chiara, quick add e search, pagine prodotto, storico ordini ricercabile.
Non abbiamo tenuto tutto da parte per un unico grande rilancio. Abbiamo pubblicato ogni parte appena era pronta, per poi continuare a rifinirla.
Una prima schermata più veloce
La vecchia homepage caricava un carosello di prodotti prima di mostrare la prima vista completa. Così immagini, varianti, prezzi, disponibilità e codice del carosello dovevano caricarsi subito.
La nuova homepage carica per prima la sua immagine di apertura. Sezioni prodotto, consigli, strumenti di analisi e di consenso arrivano dopo, o solo quando servono.
Abbiamo anche ridotto il lavoro iniziale per font, CSS e script. Le risorse vengono memorizzate meglio nella cache e le azioni nel carrello non ricaricano più dati della pagina che non c'entrano.
Le pagine principali ora ottengono 95 o più nei nostri test Lighthouse, sia su mobile sia su desktop. Diventano anche utilizzabili prima, restano più stabili durante la navigazione e richiedono meno elaborazione sui dispositivi mobili.
Una homepage con una struttura più chiara
La vecchia homepage si basava quasi tutta su un unico feed di prodotti. Nel nuovo layout ogni sezione ha uno scopo preciso.
Le novità possono usare una galleria compatta, le collezioni più grandi griglie più fitte. I prodotti già mostrati in alto non ricompaiono nelle sezioni successive, così scorrendo ci sono meno ripetizioni.
Ora la homepage può presentare un'uscita, riproporre prodotti meno recenti e guidare i visitatori verso diverse parti del catalogo senza ripetere gli stessi articoli.
Aggiunta rapida e ricerca senza cambiare pagina
Scegliere un'opzione di prodotto non dovrebbe costringerti a lasciare la pagina.
L'aggiunta rapida ora si apre come pannello dal basso su mobile e come pannello più ampio su desktop. Entrambe le versioni lasciano spazio a immagini, varianti e info sulle taglie.
La ricerca predittiva mostra i risultati mentre scrivi e tiene a portata di mano le ricerche recenti. Le schede dettagliate dei risultati si caricano solo quando servono, così c'è meno lavoro prima ancora di iniziare a cercare.
Così puoi confrontare i prodotti, scegliere un'opzione e aggiungerla al carrello senza perdere il punto.
Pagine prodotto pensate per la scelta d'acquisto
Abbiamo riorganizzato le pagine prodotto attorno alle informazioni che servono per comprare. Media, variante selezionata, prezzo e pulsanti d'acquisto compaiono per primi. Taglie, spedizione, cura e resi restano a portata di mano.
La galleria ora supporta immagini, video, video esterni e contenuti 3D. Cambiando colore, la galleria può passare direttamente all'immagine corrispondente.
I prodotti correlati compaiono in una sezione a parte, «More to Explore». Restano a portata di mano senza fare concorrenza alle informazioni principali del prodotto.
Un carrello che risponde subito
Prima il carrello diventava lento o incoerente mentre elaborava le modifiche. Abbiamo ricostruito il suo flusso di aggiornamento per darti un riscontro immediato.
Modifiche alle quantità, rimozioni, codici sconto e aggiornamenti dei prezzi compaiono mentre il server conferma il risultato finale. Poi il carrello allinea quantità e totali mostrati con la risposta confermata.
Anche l'avanzamento delle promozioni è più chiaro. Il carrello mostra quanto manca alla spedizione gratuita o a un'offerta su più articoli, poi conferma quando ci arrivi.
Il carrello completo e quello laterale ora si comportano in gran parte allo stesso modo. Così entrambi i percorsi verso il checkout sono più coerenti.
Account cliente più utili
Ora lo store resta utile anche dopo il checkout.
Gli account cliente includono uno storico ordini consultabile, con miniature dei prodotti, totali, date e stato di evasione. Le pagine dei singoli ordini possono mostrare dettagli su spedizione, rimborso e reso.
Per gli ordini idonei puoi scegliere prodotti, quantità e motivo del reso prima di inviare la richiesta dal tuo account.
Abbiamo ricostruito anche il selettore di paese e lingua. Puoi cercare per nome del paese, codice paese, valuta o lingua, con risultati raggruppati per area. Cambiando mercato resti sulla pagina in cui sei, mentre lingua e prezzi si aggiornano.
Perché la chiamiamo Energy Edition
Ogni parte di questa versione punta sul ritmo. La homepage fa meno lavoro prima della prima visualizzazione. Navigare richiede meno cambi di pagina. Il carrello risponde subito e gli account cliente gestiscono più cose dopo il checkout.
Non c'è una singola funzione che definisce l'aggiornamento. È il risultato complessivo della ricostruzione delle parti dello store che si usano di più.
Il lavoro continua. Dicci quando qualcosa ti sembra lento, poco chiaro o d'intralcio.
