Rifare un e-commerce da zero: cosa ho imparato dal restyling di SACCA Gallery
Ci sono progetti che si possono risolvere installando un nuovo tema, configurando qualche plugin e sistemando ciò che non funziona.
Il restyling dell’e-commerce di SACCA Gallery non era uno di questi.
SACCA è una galleria d’arte contemporanea di Modica con un’identità digitale particolare: il suo catalogo mette insieme opere d’arte, oggetti di design e vino siciliano. Prodotti profondamente diversi tra loro, sia per modalità di vendita sia per informazioni necessarie a chi deve scegliere e acquistare.
Il precedente e-commerce era basato su WordPress e WooCommerce, utilizzava WPBakery, un tema commerciale e numerosi plugin accumulati nel corso degli anni.
Non era semplicemente un sito vecchio.
Il problema più importante era un altro: l’architettura aveva perso leggibilità.
Ed è proprio questa distinzione che, secondo me, dovrebbe guidare qualsiasi decisione sul rifacimento di un sito web o di un e-commerce.
Rifare un e-commerce o aggiornare quello esistente?
È probabilmente la prima domanda che un’azienda dovrebbe porsi prima di affrontare un restyling e-commerce.
Conviene rifare tutto da zero oppure intervenire sull’esistente?
Non esiste una risposta valida per ogni progetto.
Il criterio che utilizzo è piuttosto semplice: quanto di quello che vedo è ancora frutto di una decisione progettuale e quanto, invece, è diventato il residuo di interventi successivi?
Un sito con alcuni anni sulle spalle non deve necessariamente essere rifatto. Se l’architettura è corretta, il database è organizzato, il tema è mantenibile e le estensioni utilizzate hanno ancora una funzione precisa, spesso è molto più intelligente evolvere il progetto esistente.
Il problema nasce quando ogni nuova esigenza è stata risolta aggiungendo qualcosa.
- Un plugin per una funzione.
- Un altro plugin per correggere il primo.
- CSS aggiuntivo per modificare il tema.
- Una nuova pagina perché quella precedente non poteva più essere utilizzata.
- Un workaround per mantenere compatibilità con qualcosa installato anni prima.
A un certo punto il costo della manutenzione supera quello della ricostruzione.
Il dettaglio che mi ha fatto decidere di rifare SACCA da zero
Durante l’analisi del vecchio sito ho trovato un dettaglio apparentemente insignificante ma estremamente indicativo.
La pagina Shop configurata in WooCommerce puntava a una bozza mai pubblicata, ereditata da una precedente configurazione.
Il catalogo continuava comunque a essere raggiungibile attraverso altre parti del sito e quindi il problema era rimasto sostanzialmente invisibile.
Tecnicamente si poteva correggere in pochi minuti. Ma il punto non era correggere quella pagina. Il punto era capire perché fosse ancora lì.
Quando all’interno di un progetto iniziano ad apparire configurazioni di cui nessuno conosce più la ragione, significa che si è perso qualcosa di molto più importante del codice: si è persa la mappa dell’architettura.
Da lì la decisione di ricostruire: nuovo tema sviluppato su misura, logica separata dalla presentazione, plugin dedicati e contenuti importati e ricontrollati.
Perché sviluppare un tema WordPress su misura
Sono contrario all’idea secondo cui un sito professionale debba necessariamente avere un tema custom.
Un buon tema commerciale, nel progetto giusto, permette di ridurre tempi e costi e può essere una scelta eccellente.
Ma esiste un punto oltre il quale adattare un tema costa più che sviluppare ciò che serve.
SACCA aveva superato quel punto.
Tre cataloghi che non possono comportarsi allo stesso modo
Un’opera d’arte non è una bottiglia di vino. E una bottiglia di vino non è un oggetto di design.
Sembra un’affermazione banale, ma per un e-commerce significa gestire logiche commerciali differenti all’interno dello stesso WooCommerce.
Un’opera può essere un pezzo unico. Una bottiglia ha uno stock. Un oggetto di design può avere ancora altre caratteristiche.
Cambiano le informazioni necessarie, cambiano i filtri, cambia il processo decisionale dell’utente e, in alcuni casi, cambia perfino il significato del prezzo.
Costringere tutto dentro la stessa scheda prodotto avrebbe significato semplificare il software complicando l’esperienza dell’utente.
Ho preferito fare il contrario.
Il problema delle opere d’arte senza prezzo
Questo è uno dei casi in cui le esigenze del software e quelle del business entrano direttamente in conflitto.
Per WooCommerce un prodotto senza prezzo è sostanzialmente un prodotto che non può essere acquistato normalmente.
Per una galleria d’arte, invece, “prezzo su richiesta” è una modalità commerciale assolutamente normale.
L’opera deve:
- essere presente nel catalogo;
- comparire correttamente nelle ricerche;
- essere associata al proprio artista;
- poter essere filtrata;
- mostrare tutte le informazioni;
- permettere al potenziale acquirente di chiedere informazioni.
Non deve semplicemente sembrare un prodotto rotto perché manca un numero nel campo prezzo.
Questa logica è stata quindi gestita attraverso uno sviluppo dedicato.
Ed è un buon esempio di cosa significhi davvero sviluppare un e-commerce su misura: non cambiare i colori di WooCommerce, ma adattarne il comportamento al modello di business.
Artisti, opere e mostre: quando WooCommerce da solo non basta
SACCA gestisce inoltre un patrimonio di informazioni che non può essere ridotto a semplici categorie prodotto.
Gli artisti hanno una propria identità editoriale: biografia, opere disponibili, partecipazione alle mostre e contenuti correlati.
Le mostre hanno date, materiali, fotografie, artisti coinvolti e approfondimenti.
Le opere sono prodotti, ma appartengono allo stesso tempo alla storia professionale di un artista e all’attività curatoriale della galleria.
Per questo una parte importante del lavoro è stata costruire relazioni tra contenuti, anziché accumulare pagine indipendenti.
È una differenza architetturale che l’utente probabilmente non noterà mai. Ed è esattamente così che dovrebbe essere.
Realtà aumentata nell’e-commerce: vedere l’opera sulla propria parete
La funzione tecnicamente più interessante del nuovo progetto nasce da un problema molto concreto dell’e-commerce di arte online.
Come si acquistano online opere che hanno una forte relazione con lo spazio fisico?
Una fotografia di un quadro da settanta centimetri visualizzata sullo schermo di uno smartphone non permette di comprenderne realmente le proporzioni.
L’utente deve riuscire a immaginare quell’opera sulla propria parete.
Una possibilità sarebbe stata sviluppare un’app. Ma avrebbe introdotto un ostacolo enorme: chiedere a una persona di scaricare e installare un’applicazione semplicemente per valutare un’opera che non ha ancora deciso di acquistare.
La soluzione è stata quindi portare questa esperienza direttamente nel browser.
WebXR e realtà aumentata senza installare un’app
Ho sviluppato una funzione basata su WebXR che permette, dai dispositivi compatibili, di utilizzare la fotocamera e visualizzare l’opera nello spazio reale.
L’obiettivo non era creare un effetto spettacolare. Era risolvere una domanda molto concreta:
“Come starebbe quest’opera a casa mia?”
L’opera viene visualizzata rispettandone le proporzioni reali, cercando di ricostruire una percezione credibile della sua presenza sulla parete.
Il fallback non è il piano B: fa parte del prodotto
Il supporto alla realtà aumentata attraverso browser e dispositivi non è uniforme.
Ed è qui che ho imparato una delle lezioni più importanti di questo progetto: se una tecnologia non funziona per tutti, il fallback non è un dettaglio tecnico. Fa parte del prodotto.
Nei dispositivi sui quali l’esperienza AR completa non è disponibile, il sistema deve comunque permettere all’utente di ottenere qualcosa di utile.
Per questo ho previsto una modalità alternativa attraverso la fotocamera, con posizionamento dell’opera e gestione della scala.
Se una funzionalità innovativa è utilizzabile perfettamente da una parte degli utenti e inutilizzabile dagli altri, non abbiamo costruito una buona esperienza. Abbiamo costruito una demo.
Perché una parete bianca può mettere in crisi la realtà aumentata
Un’altra difficoltà è arrivata da qualcosa che, per una galleria, rappresenta probabilmente lo scenario più comune: una parete bianca.
I sistemi di riconoscimento spaziale cercano caratteristiche visive che permettano di comprendere geometria e distanza. Una superficie uniforme offre pochi riferimenti.
Il rischio è che il sistema riconosca molto più velocemente il pavimento rispetto alla parete e che l’opera venga quindi posizionata nel posto sbagliato.
La soluzione è stata lavorare non soltanto sui piani rilevati, ma anche sui punti disponibili durante la ricostruzione dello spazio, valutandone l’orientamento per privilegiare quelli compatibili con una superficie verticale.
È uno di quei problemi che difficilmente emergono progettando sulla carta. Emergono quando si prova il prodotto nel mondo reale.
Il catalogo WooCommerce: i filtri devono aiutare a scegliere
Con centinaia di elementi a catalogo, il sistema di navigazione diventa parte integrante dell’esperienza di vendita.
Non tutti cercano nello stesso modo.
Chi sta scegliendo un’opera può voler filtrare per artista, tecnica, dimensioni o altre caratteristiche. Chi cerca un prodotto di design segue criteri differenti. Chi naviga tra i vini ha ancora altre esigenze.
Mostrare indistintamente gli stessi filtri significa offrire molte opzioni senza offrire realmente un aiuto.
Per questo ho sviluppato un plugin WooCommerce per filtri avanzati, con configurazioni differenti in funzione del contesto.
Anche il numero accanto a un filtro è UX
Uno dei problemi apparentemente più piccoli ha richiesto più attenzione del previsto: i conteggi.
Il numero accanto a una voce deve indicare quanti prodotti otterrò selezionandola nel contesto attuale, non quante volte quella tassonomia esiste nel database.
Sono due informazioni tecnicamente vicine ma completamente diverse per l’utente.
È il genere di dettaglio che distingue una funzionalità presente da una funzionalità utile.
Restyling e-commerce e SEO: il momento in cui è più facile perdere anni di lavoro
Un rifacimento di un sito e-commerce non è solamente un progetto grafico o tecnologico. È anche una migrazione SEO.
Cambiare architettura significa potenzialmente cambiare URL, tassonomie, collegamenti interni, gerarchie dei contenuti e segnali che Google ha accumulato nel tempo.
Ignorarlo significa rischiare di pubblicare un sito tecnicamente migliore che perde visibilità organica.
Una struttura URL comprensibile
La nuova architettura assegna una posizione precisa ai diversi contenuti: catalogo, artisti, mostre e sezioni correlate non devono essere il risultato casuale delle configurazioni accumulate negli anni.
Una URL dovrebbe essere comprensibile prima ancora di aprire la pagina.
H1, H2 e H3 non sono dimensioni del font
Nel vecchio progetto alcuni titoli erano stati utilizzati principalmente in funzione dell’aspetto grafico.
È un problema molto comune nei siti costruiti attraverso page builder.
Un H3 non dovrebbe essere scelto perché “sta meglio”.
H1, H2 e H3 descrivono la struttura logica del documento.
Il nuovo tema ha permesso di ricostruire questa gerarchia senza dipendere dalla presentazione grafica.
Alt text delle immagini
Un altro esempio concreto è arrivato dalla rassegna stampa.
Numerosi loghi delle testate erano presenti senza testo alternativo.
Per un utente che utilizza tecnologie assistive quelle immagini non comunicavano nulla. E nemmeno ai motori di ricerca offrivano un contesto adeguato.
Il lavoro SEO spesso è molto meno spettacolare di quanto venga raccontato, ma sono proprio questi interventi, moltiplicati per centinaia di elementi, a costruire un sito tecnicamente migliore.
Redirect e dati strutturati
Quando una vecchia pagina cambia indirizzo non deve semplicemente sparire.
La migrazione deve prevedere redirect 301, controllo degli URL indicizzati, revisione dei link interni e implementazione corretta dei dati strutturati dove pertinenti.
Sono attività invisibili nel nuovo design, ma possono fare la differenza tra un restyling e una migrazione riuscita.
Non misuro la SEO dopo una settimana
C’è un dato che in questo articolo volutamente non troverai:
“+XX% di traffico organico dopo il restyling”.
Il nuovo sito è troppo recente.
La SEO richiede tempo, indicizzazione, raccolta dei dati e confronto con periodi statisticamente significativi.
Attribuire un aumento o una diminuzione di traffico a un restyling pochi giorni dopo la pubblicazione significa spesso interpretare rumore come risultato.
Preferisco aspettare.
Tra qualche mese i dati permetteranno di valutare ciò che ha funzionato e ciò che dovrà essere ulteriormente migliorato.
Cosa ho imparato dal rifacimento dell’e-commerce di SACCA
Misurare invece di limitarsi a guardare
Alcuni dei problemi più seri del progetto non erano visibili leggendo il codice. Sono emersi utilizzando il sito.
Texture che non venivano renderizzate correttamente, filtri con conteggi sbagliati, elementi grafici ridimensionati da regole CSS con una precedenza diversa da quella prevista.
Un sito non funziona perché il codice sembra corretto. Funziona quando il comportamento reale è quello previsto.
Browser, dispositivi e dati veri sono il banco di prova.
Simulare prima di modificare
Ogni operazione potenzialmente invasiva sul database è stata preceduta da una simulazione.
Prima vedere cosa cambierà. Poi decidere se cambiarlo.
È una pratica semplice che considero indispensabile soprattutto quando si lavora su siti con anni di contenuti, ordini, media e configurazioni.
In un progetto del genere, la possibilità di eseguire velocemente una modifica non è mai una buona ragione per eseguirla velocemente.
Quando conviene rifare un e-commerce da zero?
La risposta, dopo questo progetto, per me è ancora più chiara.
Non bisogna rifare un sito perché è vecchio.
Bisogna considerare seriamente il rifacimento quando la sua architettura impedisce di evolverlo in modo sostenibile.
Alcuni segnali sono abbastanza evidenti:
- decine di plugin con funzioni sovrapposte;
- dipendenze da componenti non più mantenuti;
- impossibilità di ricostruire la logica delle configurazioni;
- interventi semplici che richiedono workaround continui;
- performance compromesse dalla struttura;
- nuove funzionalità incompatibili con l’architettura esistente;
- UX che non corrisponde più al modello di business.
Se invece il problema è prevalentemente estetico, rifare tutto può essere uno spreco di tempo e budget.
Un buon restyling può preservare ciò che funziona e intervenire soltanto dove serve.
La parte difficile non è sviluppare il nuovo sito. È capire quale delle due strade scegliere prima di iniziare a sviluppare.
Nel caso di SACCA, la possibilità di integrare cataloghi profondamente diversi, costruire filtri specifici, riorganizzare artisti e mostre e soprattutto introdurre la realtà aumentata ha reso la ricostruzione la scelta più razionale.
Non abbiamo rifatto il sito perché quello precedente era vecchio.
Lo abbiamo rifatto perché il nuovo progetto doveva poter fare cose che la vecchia architettura non era stata progettata per fare.
Se stai valutando il restyling di un e-commerce WooCommerce e non sai se sia più conveniente evolvere il sito esistente o ripartire da una nuova architettura, contattami. La prima cosa da fare non è scegliere un tema o un framework: è capire cosa vale la pena conservare e cosa, invece, sta impedendo al progetto di crescere.
