Restyling del nostro sito: dietro le quinte

Ti presento il nuovo sito di WP-OK! Vediamo insieme come abbiamo affrontato questo restyling.

Restyling sito

Tabella dei contenuti

Come probabilmente hai già notato, abbiamo fatto un restyling del nostro sito web 🎉

Perché un restyling?

Innanzitutto chiariamo la differenza tra un restyling e un rebranding, perché se un giorno vorrai rifare il tuo sito è importantissimo capire cosa vuoi ottenere.

Il rebranding è una scelta legata al marketing, che ha l’obiettivo di riposizionare il valore di un brand esistente, costruendo un’immagine totalmente nuova.

Il restyling invece è una scelta legata alla comunicazione, che ha l’obiettivo di dare una rinfrescata all’immagine di un’azienda, spesso per svecchiarla e renderla più moderna. Insomma un intervento più legato al design che non cambia il posizionamento del brand.

Abbiamo scelto di fare un bel restyling perché dalla nascita di WP-OK (passava l’anno 2015!) il nostro sito – pure attraverso varie evoluzioni – a livello di design è rimasto pressoché invariato.

E considerando che il sito originale l’ho ‘partorito’ io che sono proprio negato come grafico… ero davvero curioso di vedere cosa ne sarebbe uscito! 😀

È stato un lavoro di squadra, gestito dal nostro Roberto che si è occupato di studiare e implementare la nuova grafica.

Lascio la parola a Roberto per raccontarci il ‘dietro le quinte’ di questo lavoro.

Intervista a Roberto

Roberto

Nato come graphic designer, nel tempo Roberto ha approcciato lo sviluppo di siti web e l’universo legato a WordPress.

Il bel mix di skill grafiche e conoscenze di programmazione lo hanno portato a sviluppare temi e plugin per questa piattaforma, e la passione per aiutare i clienti lo hanno fatto approdare nel team WP-OK nel 2018.

Come hai creato il nuovo design?

Il sito WP-OK ha una storia di sei anni, in questo lasso di tempo ha affermato la sua identità senza cambiamenti grafici sostanziali.
Con il passare degli anni è stato necessario intervenire per mantenerlo al passo con i cambiamenti legati all’evoluzione dei servizi offerti.

Negli interventi di restyling è sempre bene ricordare che il brand e l’esperienza utente devono essere centrali essendo però consapevoli che il sito deve rimanere in linea con gli obiettivi e l’immagine dell’azienda.

Nello studio e nella implementazione del restyling l’obiettivo è stato donare a wp-ok.it un aspetto più fresco e moderno, più al “passo con i tempi”.

Nella scelta dei font e dei colori mi sono basato sullo stile del sito precedente, nonché sull’identità aziendale già affermata di WP-OK.
Ho fatto riferimento alla palette colori del material design da cui ho preso ispirazione, ma comunque modificando i colori per adeguarli all’arancio e verde già presenti nel logo.

Quali sono state le fasi del progetto?

Abbiamo diviso il progetto in 5 fasi:

  1. Brief iniziale, per definire in linea generica la struttura e lo stile grafico del sito insieme a Daniele;
  2. Preparazione del wireframe del sito, utilizzando Adobe XD;
  3. Sviluppo sul sito di staging: siamo quindi partiti da una copia del sito esistente, mantenendo plugin e funzionalità precedenti;
  4. Revisione e approvazione del lavoro: questa è stata sicuramente la parte che ha richiesto più tempo 🙂
  5. Messa online del sito finito, che si è concluso in 3 giorni mettendo online un po’ di pagine alla volta.

Tutto il progetto è durato circa tre mesi.

Che tecnologie hai scelto e come mai?

Il sito precedente era realizzato con il page builder Elementor PRO e il tema Hello Theme, unito a vari plugin che ne aumentavano la personalizzazione.

Abbiamo scelto di mantenere gli stessi strumenti, per non stravolgere completamente il sito ma anche perché sono un’ottima accoppiata.

Hello Theme è un tema molto leggero sviluppato proprio da Elementor per essere usato in combinazione con il loro page builder, quindi offre ottima compatibilità e velocità.

Mantenendo questa accoppiata abbiamo mantenuto le personalizzazioni custom già presenti ed, inoltre, utilizzando il Template Widget di Elementor il sito ha acquisito una struttura modulare, di più facile gestione perché lo stesso template viene inserito in più pagine e una modifica sul template si riflette automaticamente su tutte le pagine che lo usano.

Questo è stato un miglioramento molto apprezzato, perché sul sito precedente nel tempo si erano accumulate una serie di incongruenze sulle pagine proprio perché le varie sezioni, per esempio i testimonial, erano da aggiornare a mano.

Per dare un tocco dinamico e accattivante, pur mantenendo un design moderno e minimalista, abbiamo utilizzato immagini in formato SVG e icone animate in formato Lottie.

Abbiamo scelto di utilizzare immagini SVG perché questo formato offre diversi vantaggi rispetto a JPG/GIF o anche WEBP:

  • è molto leggero: gli SVG in genere pesano pochi KB, e quindi rendono il caricamento del sito più veloce;
  • è scalabile: le immagini vettoriali non perdono qualità ridimensionando l’immagine;
  • è un file XML, cioè testuale e leggibile dai motori di ricerca e questo sembra dare un piccolo vantaggio SEO.

Per esempio il logo di WP-OK è passato da 2,1kb (200px x 53px) del formato WEBP, a 1,7kb in formato SVG indipendentemente dalla risoluzione:

WP-OK logo

SVG (1,7kb)

Logo

WEBP (2,1kb)

I Lottie sono invece delle immagini animate, anch’esse vettoriali e molto leggere.
Abbiamo deciso di utilizzarli per rendere  l’interazione con le pagine più coinvolgente e piacevole:

Come è stata la fase di ‘messa live’ del sito?

La messa online del sito è avvenuta per gradi.

Come già detto il restyling è stato effettuato su una copia in staging, non volendo mettere il sito offline durante la fase di passaggio ho scelto di importare i vari elementi grafici ed effettuare le varie modifiche in maniera graduale

Ho iniziato cambiando i vari elementi come la testata, il footer, la sezione blog, per poi procedere con la home, la pagina prezzi, e così via. 
Prestando particolare attenzione alle pagine più critiche ed importanti per i nostri clienti come l’area riservata, le pagine di atterraggio delle campagne ADS, la pagina di checkout, ecc.

Questo tipo di procedura  “step by step” ha permesso la messa online del nuovo sito senza creare disagi o malfunzionamenti per i clienti.

Risultati ottenuti

Il sito precedente ha generato 2,764 ordini: inutile dirti che ora ce ne aspettiamo molte di più 😀
Scherzi a parte, è sicuramente presto per parlare di risultati in termini di vendite e conversioni.

Il risultato sicuramente più immediato è stato l’effetto positivo su PageSpeed e i parametri di ottimizzazione della page experience (i Web Vitals):

Left ImageRight Image

Sul sito precedente abbiamo speso decine di ore di lavoro per adeguarlo, nel tempo, ai parametri di user experience inclusi nella PageSpeed di Google.

Tutto questo lavoro ha portato a buoni risultati, ma era diventato chiaro che per una page experience ottimale serve un sito studiato apposta, costruito con un tema leggero, plugin ben scelti, e scelte di design e tecniche moderne.

Abbiamo osservato anche un miglioramento sui parametri di comportamento degli utenti del sito:

Comportamento su Analytics

Un aumento delle pagine per sessione e del tempo speso sul sito insieme ad una diminuzione del tasso di abbandono sono risultati molto positivi – anche se come dicevo prima è un po’ presto per saltare a conclusioni!

Aggiornerò questo articolo tra un mese quando ci saranno un po’ più dati su cui ragionare 🙂

Quanto è costato

Arrivati a questo punto potresti chiederti: “ma quanto costa un restyling di questo tipo?”.

Ci sono sicuramente diversi aspetti da considerare, qui ne menziono un paio:

  • La tipologia di sito: un ecommerce avviato ha criticità e complessità sicuramente maggiori da tenere in considerazione, rispetto ad un sito vetrina;
  • Il numero di pagine da ridisegnare: si ragiona per tipologia di pagina, quindi se per esempio un blog ha 100 articoli non vanno ridisegnate 100 pagina ma solo il template per gli articoli.
  • Il numero di revisioni: nel nostro caso, lavorando con Roberto che è parte del team ci siamo ritrovati subito allineati sul risultato voluto – ha aiutato molto dare alcuni siti di esempio da cui prendere ispirazione – ma in altri casi ci potrebbero essere 2-3 iterazioni prima di definire su wireframe il design da utilizzare.

A titolo indicativo, questo lavoro ci è costato €1,500 tra studio del design, implementazione, e messa in opera che ha coinvolto più persone.

A te la parola: come ti sembra il nuovo sito di WP-OK? Cosa ti piace? C’è qualcosa che non ti piace?

Lasciaci un messaggio qui sotto nei commenti, grazie!

2 risposte

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Pensa al tuo business

di WordPress ci occupiamo noi

WP-OK è il servizio di gestione siti WordPress e WooCommerce. Un team di esperti che si prende cura del tuo sito.

Qual è l'abbonamento giusto per te?

Compila il questionario per scoprire il piano giusto per le tue esigenze! Ci vogliono solo 2 minuti, parola di WP-OK.