Dietro le quinte
Cosa hanno in comune la caccia ai mammut e Page Speed?
di Michael Rudin
Il cuore del «Customer Journey»
31.10.2019
Il checkout è una delle componenti più importanti di ogni negozio online. È qui che avviene l’acquisto finale. Oggi diamo un’occhiata a passato, presente e futuro del checkout su digitec e Galaxus e al team di ingegneri che sta dietro: Goldfinger.
I nostri clienti conoscono sicuramente le pagine checkout di digitec e di Galaxus. Il design è rimasto invariato da diversi anni. Perché dovremmo cambiarle? Funzionano perfettamente e sono generalmente molto facili da maneggiare. I clienti che visitano il negozio per la prima volta, potrebbero essere un po' scoraggiati dal layout piuttosto affollato e dai numerosi testi. Tutti gli altri dovrebbero essere abituati. Tuttavia, è giunto il momento di un aggiornamento. Poiché non volevamo solo apportare modifiche estetiche sulla superficie, abbiamo anche aggiornato le caratteristiche tecniche.
Il team
I Goldfinger sono i principali responsabili dei sottodomini, cioè di tutto ciò che è visibile al cliente. Ad esempio, il processo di ordinazione, il riepilogo dell'ordine e la pagina di checkout. Si occupano anche di come implementare altri servizi che potrebbero essere utili al cliente, senza essere troppo invadenti. Armeggiano nel carrello della spesa virtuale e fanno in modo che il cliente possa facilmente finire il suo tour di shopping. Il team è composto da sviluppatori di back-end e front-end, un team leader, un product owner, un designer UX e uno scrum master.
La sfida più grande
Qual è lo scenario peggiore per la pagina di checkout? Un guasto. Perché se questa pagina va in tilt, anche l'acquisto del cliente va in fumo. Per Digitec Galaxus, uno scenario del genere sarebbe devastante perché comporterebbe anche danni finanziari. Ed è proprio per questo motivo che ogni cambiamento pianificato viene meticolosamente monitorato. Il team Goldfinger utilizza strumenti di allarme per monitorare il processo ininterrottamente. Se succede qualcosa di non pianificato, il team viene immediatamente avvisato via chat ed e-mail in modo che possa reagire.
Lunga vita alla scalabilità!
Dovrebbe essere chiaro a questo punto che la disponibilità del sito ha la massima priorità. Un'altra sfida che dobbiamo affrontare è la scalabilità. Che sia un tranquillo martedì sera o la mezzanotte del Black Friday, la pagina di checkout deve resistere a qualsiasi affluenza. Un gran numero di pagine visualizzate simultaneamente dai clienti, molti dei quali sono alla ricerca di offerte con disponibilità limitata, ci pongono particolari sfide tecniche. In preparazione per il Black Friday di quest’anno, il team sta conducendo test basati sulle previsioni di traffico. Ciò è necessario per identificare le vulnerabilità e sviluppare una comprensione delle soglie e delle prestazioni del sistema. Una volta disponibili i risultati dei test, i miglioramenti per i problemi individuati vengono discussi, progettati e implementati.
La visione chiara
L'aggiornamento delle nostre casse è un progetto ambizioso con diversi obiettivi. Ci sforziamo di rendere l’esperienza del cliente meno complicata, più piacevole e meno confusa. Allo stesso tempo, vogliamo ridurre il carico sui nostri server. Oh, e abbiamo detto che anche il sito ha bisogno di un aumento di velocità? La velocità delle pagine è sempre una questione centrale. Qui trovi maggiori informazioni sull’argomento:
La tendenza minima si sta diffondendo
Cosa significa nella pratica? Iniziamo dal layout. Il processo di checkout esistente è una lunga pagina con molto testo e tanti pulsanti. Nell'anno 2019, tanto contenuto non riflette più pienamente lo spirito dei tempi. La tendenza è verso elementi grandi e puliti, con molto spazio libero e il minor numero possibile di testi. Vogliamo guidare i nostri clienti passo dopo passo attraverso il processo di checkout. I nostri negozi online sono entrati nell'era di tecnologie come React, TypeScript e rendering isomorfo. Questo ci ha permesso, tra l'altro, di spostare alcune parti non critiche del codice nel front-end, il che ci avvantaggia in due modi: riducendo la necessità di comunicazione tra il browser web del cliente e il nostro back-end e migliorando l'interfaccia utente. Le future modifiche al codice saranno più facili da implementare.
Cambiamenti sì, ma solo a piccole dosi
La fiducia è tutto per un negozio online. Nell'era delle fake news, dello spam e del furto di credenziali, i clienti vogliono fornire informazioni sensibili come indirizzo, numero di telefono e dati della carta di credito solo a siti affidabili. Se la pagina sembra completamente diversa da un giorno all'altro, gli utenti si sentono a disagio. Per evitare ciò, le modifiche vengono attuate gradualmente su un periodo di tempo più lungo.
User Experience
Negli ultimi anni è cambiato molto nel web. Oggi, i dispositivi mobili sono al centro di tutto ciò che facciamo. Ogni modifica all'interfaccia utente viene testata su più browser e dimensioni dello schermo. L'esperienza deve essere eccellente, dal monitor wide-screen da 34 pollici allo schermo più piccolo dello smartphone. A tal fine, il team lavora a stretto contatto con i nostri specialisti di User Experience.
Facciamo grandi sforzi per offrire ai nostri clienti una buona esperienza. Ecco un esempio: forse lo hai già notato nella pagina di panoramica degli ordini (dove sono elencati tutti i tuoi vecchi ordini); quando passi il mouse su un ordine, le query GraphQL vengono inviate al back-end del nostro negozio, che recupera i dettagli di consegna e pagamento per quell'ordine. I nostri server rispondono solitamente in circa 200 millisecondi. Questi dati vengono memorizzati nella cache locale del browser. Cliccando sull'ordine invece di interrogare il database, noi recuperiamo le informazioni dalla cache locale del browser e mostriamo la pagina dei dettagli dell'ordine alla velocità della luce. Sono le piccole cose che contano.
Le novità non sempre convincono
Un altro esempio di design user-friendly è la versione "tunnelata" della cassa che il team Goldfinger ha testato quest'estate. In questo design, le colonne a sinistra e a destra della pagina di checkout e diversi elementi nella parte superiore dello schermo non erano visibili. Il nuovo design dovrebbe essere più attraente per i clienti in modo da poter completare il processo di acquisto e l'ordine senza distrazioni. Le prestazioni del progetto sono state misurate con un cosiddetto test A/B, in cui il nuovo layout è stato mostrato al 50% dei clienti sia su digitec che su Galaxus. Tuttavia, le cose non sono andate come il team aveva sperato: nel test A/B, il design tradizionale è stato scelto da una ristretta maggioranza. Anche se questo è stato piuttosto sorprendente per noi, dovremmo tenere presente che, secondo uno studio condotto da Google, la maggior parte dei test A/B indica che tutto dovrebbe rimanere lo stesso.
A proposito, stiamo effettuando un test A/B della cassa. Ma non stupirti se non vedi alcuna differenza. Significa solo che fai parte del gruppo A.
Petri Harju
Software Engineer
Petri.Harju@digitecgalaxus.chIngegnere software. Scrum Master. Scettico.
2 commenti
later