Benessere in Farma: restyling e-commerce e migrazione a PrestaShop 9

Una parafarmacia con un catalogo profondo

Benessere in Farma vende online integratori alimentari, dermocosmesi, alimenti specifici e prodotti per lo sport. Il catalogo conta migliaia di referenze organizzate in reparti, con marche che il cliente spesso conosce già.

Chi arriva sul sito, nella maggior parte dei casi, sta cercando qualcosa di preciso: un principio attivo, un formato, un prodotto che ha già comprato in farmacia. Il progetto e-commerce è partito da qui.

Un sito cresciuto per aggiunte successive

Il sito precedente era costruito su un tema commerciale acquistato anni prima e aveva accumulato moduli, banner e personalizzazioni a ogni campagna. Nulla era rotto: l’insieme aveva perso coerenza.

Dall’analisi iniziale sono emersi cinque problemi ricorrenti:

• Gerarchia visiva incoerente: ogni sezione aveva ereditato la tipografia del modulo che la generava.
• Troppi elementi in evidenza contemporaneamente, con il risultato che nessuno lo era.
• Prezzi sempre in rosso, anche in assenza di sconto, con perdita di efficacia sulle promozioni reali.
• Contrasti cromatici sotto la soglia di accessibilità su diversi elementi cliccabili.
• Base tecnica ferma a PrestaShop 8.1.7, con moduli non più aggiornati.

Le tre cose che il progetto doveva ottenere

Partire dall’identità esistente invece di sostituirla

Il cliente aveva una base di acquirenti abituali che riconosceva il sito dai suoi colori. Un rebrand completo avrebbe azzerato quel riconoscimento.

Abbiamo ancorato il nuovo design system ai colori già presenti e li abbiamo portati a un livello di maturità superiore: stesso verde, più profondo e con più contrasto; stesso arancione, calibrato per rispettare i requisiti di accessibilità; crema invariato.

Ogni token della palette ha una provenienza documentata. Questo ha semplificato anche la discussione con il cliente: non erano proposte di gusto, era un’evoluzione motivata di ciò che già esisteva.

Quattro decisioni cromatiche che hanno definito il resto

/* I token sono definiti una volta sola e versionati con il progetto */
:root {
  --bf-primary:      #0E5C5A;
  --bf-accent-cta:   #E0792B;
  --bf-surface-warm: #FFF9E0;
  --bf-ink:          #1A1F2C;
  --bf-price:        var(--bf-ink);
  --bf-radius-m:     10px;
}

/* e vengono rimappati sulle variabili del tema, così gli
   override necessari restano pochi e concentrati in un punto */
:root {
  --bs-primary:       var(--bf-primary);
  --bs-body-color:    var(--bf-ink);
  --bs-border-radius: var(--bf-radius-m);
}

Gli elementi che il cliente incontra più spesso

Il pulsante d’acquisto è identico in ogni contesto: stessa altezza, stesso colore, stessa etichetta. Lo sconto usa il verde del brand, perché è un’informazione sul prodotto e non un avviso di allerta. Una sola azione primaria per schermata; le secondarie hanno un peso visivo volutamente inferiore.

Home, categoria e scheda prodotto

Le tre schermate su cui si concentra la quasi totalità delle visite. La ricerca è il primo elemento dopo il logo: su un catalogo profondo è il punto di ingresso più usato. I filtri restano visibili durante lo scorrimento. La scheda prodotto dà nella prima schermata le quattro informazioni che determinano la decisione: cos’è, quanto costa, se è disponibile e come si compra.

Le modifiche principali

Requisiti integrati nei token, non verificati alla fine

I requisiti di accessibilità sono stati messi dentro i token e i componenti, così ogni elemento nuovo li eredita invece di doverli superare a lavoro finito.

• Contrasti verificati secondo lo standard WCAG AA su testi, pulsanti ed etichette.
• Indicatore di focus visibile su ogni elemento interattivo, spessore 2px, con distanziamento.
• Aree di tocco da 48px sui comandi principali, dimensionate per l’uso da smartphone.
• Corpo del testo a 15px con interlinea ampia, invece dei 13-14px del tema originale.
• Il colore non è mai l’unico veicolo di informazione: ogni stato è accompagnato da testo.

Un impianto che il cliente può aggiornare

Il redesign è coinciso con la migrazione da PrestaShop 8.1.7 alla versione 9.1 e con il passaggio a un tema completamente diverso. Abbiamo lavorato su un child theme e su nove moduli sviluppati appositamente, senza mai modificare il core della piattaforma. La migrazione è stata provata integralmente su un ambiente di staging, con test end-to-end sul checkout e sui metodi di pagamento prima di intervenire sul sito in produzione.

L’impianto di analisi costruito insieme al sito

Insieme al redesign abbiamo realizzato il sistema di tracciamento e-commerce: un modulo dedicato che raccoglie i dati di navigazione e acquisto e li rende disponibili agli strumenti di analisi e alle campagne pubblicitarie.

La gestione del consenso è integrata: i dati vengono raccolti secondo le preferenze espresse sul banner dei cookie, senza soluzioni provvisorie da sistemare in seguito.

Il lavoro che c’era prima del redesign

Il redesign è arrivato dopo due anni di lavoro sullo stesso e-commerce: SEO, campagne di performance marketing e ottimizzazione delle conversioni, con il fatturato online raddoppiato. Rifare l’interfaccia è stato il passo successivo, non il primo.

Come abbiamo proceduto