Restyling sito web PANDorà: Case Study

PANDorà è un’azienda locale che realizza prodotti da forno tipici della tradizione ligure: la sua offerta è rivolta a realtà commerciali sia in Italia che all’estero.

Qualche mese fa, i titolari si sono rivolti a noi per il restyling del sito web: si lamentavano dell’aspetto antiquato e dei contenuti non aggiornati del sito aziendale. Trovavano anche che fosse difficile da fruire da smartphone e che i contenuti fossero mal distribuiti rendendo complessa la navigazione.

Insomma, non erano contenti che quel sito fosse il biglietto da visita da presentare alle altre aziende, soprattutto ai clienti più importanti come le grosse catene di supermercati.

Prima di delineare un piano d’azione per il rifacimento del sito web, abbiamo analizzato attentamente il vecchio sito per verificare tutte le criticità: quindi, abbiamo cercato le soluzioni più idonee per soddisfare le esigenze dei titolari dell’azienda.

Design e aspetto: quando il restyling grafico del sito web è necessario

La prima criticità del vecchio sito saltava subito agli occhi: l’aspetto grafico obsoleto catapultava il visitatore direttamente sul web dei primi anni 2000!

Per prima cosa, quindi, abbiamo deciso di rivoluzionare il layout grafico a 360 gradi.

Per rifare il sito abbiamo scelto di usare WordPress e di sfruttare tutte le potenzialità di Elementor per sfogare la nostra creatività.

Abbiamo progettato un template che rispondesse alle esigenze comunicative del nostro cliente e si integrasse alla perfezione con il logo aziendale: quindi, abbiamo ripreso la palette di colori e scelto una combinazione di font che si armonizzasse con quest’ultimo.

Per sviluppare al meglio header e footer, menu di navigazione, layout della home page e della pagine interne, abbiamo tenuto conto anche dei contenuti che avrebbero popolato il sito affinché l’aspetto grafico non fosse solo un mero orpello estetico, ma andasse a veicolare nel modo più efficace il messaggio del sito, rendendo la navigazione dell’utente più fluida e semplice possibile.

Infine, per enfatizzare bontà e genuinità dei prodotti pubblicizzati, per il restyling sito web abbiamo coinvolto un professionista di nostra fiducia, il quale ha realizzato uno shooting fotografico che ci ha permesso di pubblicare immagini professionali di altissima qualità.

Visualizzazione da mobile: restyling sito internet per renderlo responsive

Un’altra enorme pecca del vecchio sito era la “non responsività” cioè il fatto che non si adattava alle dimensioni degli schermi più piccoli.

Immaginate cosa vuol dire visualizzare la versione desktop di un sito (lo standard dei monitor per pc è rappresentato per lo più da misure che vanno dai 21 ai 23 pollici, con formato 16:9) sullo schermo di uno smartphone da 4 a 6 pollici che si fruisce di norma in verticale? Significa caratteri minuscoli, pulsanti e link impossibili da cliccare, immagini grosse come un francobollo e così via.

Mettiamoci poi l’antipatia di Google verso i siti non pronti per smartphone e il gioco è fatto!

Il restyling sito web intervenendo sul layout, quindi, era imprescindibile non solo per renderlo più moderno ed accattivante, ma soprattutto per una questione di usabilità lato utente sui dispositivi mobili e di considerazione da parte dei motori di ricerca.

Architettura e distribuzione dei contenuti: il restyling sito web non è stato solo grafico

Il vecchio sito si presentava disorganizzato dal punto di vista della distribuzione dei contenuti: testi ripetuti, percorsi di navigazione poco chiari, argomenti trattati senza una suddivisione logica coerente.

Dopo averlo scansionato con uno strumento apposito che si chiama Screaming Frog per farci un’idea di come fossero impostate le url, ne abbiamo riprogettato l’alberatura organizzando i contenuti secondo una struttura gerarchica.

In testa la home page (ovviamente) e, a livello sottostante, le pagine istituzionali dedicate alla presentazione dell’azienda, ai contatti, alle politiche di sostenibilità e qualità, etc…, nonché le categorie dei prodotti (la linea classica e la linea biologica) collegate a loro volta alle pagine dedicate a ciascun prodotto.

Sottoporre a restyling il sito web migliorandone la distribuzione dei contenuti, ci ha consentito di strutturare al meglio il menu di navigazione ed i link interni alle pagine così da renderne la fruizione semplice ed intuitiva.

Scrittura dei contenuti: rifacimento sito web anche nella sostanza

Con la collaborazione dei titolari, abbiamo agito anche sulla qualità dei contenuti testuali del sito:

• li abbiamo aggiornati con informazioni nuove;
• li abbiano ampliati;
• li abbiamo riscritti (copywriting web) tenendo conto dell’attività di ricerca keywords che abbiamo svolto ai fini SEO per il posizionamento sui motori di ricerca.

Per il restyling sito web dei contenuti, siamo partiti dai testi esistenti e dall’analisi del sito con uno strumento apposito (SEOZoom) per scoprire per quali parole chiave si posizionasse su Google e quali volumi di traffico ricevessero le singole pagine web: a seguito dell’analisi, abbiamo rilevato che – purtroppo – le parole chiave non erano molte e, soprattutto, che buona parte di esse non era di alcun interesse commerciale per l’azienda (alcune rivelavano altresì intenti di ricerca totalmente estranei).

Si rendeva necessario correggere il tiro! Abbiamo quindi rivisto l’elenco delle keyword interessanti sulla base delle quali costruire i contenuti proprio con l’obiettivo di attirare traffico qualificato e profittevole sul nuovo sito (se i nostri sforzi saranno ripagati, lo scopriremo solo con il tempo. Per ora, manteniamo il sito monitorato e aspettiamo che Google perfezioni il suo lavoro di indicizzazione e posizionamento).

Attività SEO on-page: restyling sito internet per piacere anche ai motori di ricerca

L’attività di keyword research ci ha altresì consentito di perfezionare le azioni SEO on-page sulle pagine web.

Sulla base dell’elenco di parole chiave selezionate abbiamo:

• migliorato la scrittura delle url (facendo gli opportuni redirect 301 una volta messo il sito online);
• dotato ogni pagina web di tag-title e meta-tag description di contenuto e lunghezza adeguati;
• inserito l’heading-tag H1 e tutte le altre intestazioni di pagina che ci hanno aiutato a suddividere il testo per rendere più agile e scorrevole la lettura lato utente;
• rinominato tutti i nomi dei file immagine ed assegnato a ciascuno titolo ed attributo alt;
• evidenziato le parti del testo più importanti con adeguata formattazione (bold ed italic);
• creato anchor-text intelligenti per linkare le pagine del sito tra loro.

Rifare il sito web per averlo in doppia lingua

Per PANDorà, avere il sito in versione inglese è importante perché l’offerta dei suoi prodotti è rivolta anche al mercato estero.

Il vecchio sito sembrava predisposto per il multilingua: la classica bandierina presente nell’header lasciava presupporre la possibilità di fruirlo sia in italiano che in inglese. Peccato che il widget per lo switch della lingua non funzionasse!

Per consentire al visitatore di navigare comodamente sul sito in entrambe le lingue, abbiamo installato su WordPress un plugin ad hoc (WPML) che ci ha consentito di gestire correttamente le pagine in italiano e in inglese: abbiamo caricato le traduzioni (compresi tag e meta-tag SEO) e configurato il sistema in modo che l’utente ora può effettuare lo switch da una lingua all’altra rimanendo sempre sulla stessa pagina (senza ritornare tutte le volte sulla home page).

Rifare il sito significa anche restyling di form, informazioni di contatto e call to action

Il vecchio sito era interattivo: consentiva ai visitatori di contattare PANDorà attraverso alcuni form e dava loro la possibilità di scaricare documenti relativi all’azienda (ad esempio le certificazioni) e le schede tecniche di alcuni prodotti cliccando su appositi link. La dislocazione di questi elementi all’interno delle pagine, però, era caotica e disorganizzata.

Ascoltate le esigenze specifiche dei titolari, abbiamo agito per rendere più semplice ed immediato il contatto con l’azienda, il download di documenti e schede tecniche, la richiesta di informazioni.

Durante il restyling sito web, abbiamo dotato ogni pagina di form e pulsanti attraverso cui l’utente può effettuare azioni specifiche come:

• eseguire il download della scheda tecnica direttamente compilando il modulo dalla pagina prodotto (una mail generata in automatico invia un link da cui è possibile scaricare la scheda);
• proporre idee per nuove ricette al reparto “Ricerca e Sviluppo” utilizzando il form dedicato (PANDorà realizza varianti personalizzate dei propri prodotti in base alle esigenze specifiche del cliente);
• mettersi in contatto con l’azienda attraverso le modalità indicate nella pagina dei contatti (telefono, e-mail e modulo richiesta informazioni) sempre raggiungibile da qualsiasi altra pagina del sito cliccando sul pulsante “contattaci ora”.

Per invogliare l’utente a proseguire la navigazione, inoltre, abbiamo collocato in punti strategici delle pagine web bottoni ben visibili aventi funzione di call-to-action: tramite questi pulsanti, il visitatore ha la possibilità di approfondire argomenti, scoprire nuovi prodotti e – una volta pronto – contattare l’azienda, proporre la sua ricetta o scaricare i documenti di suo interesse.

Privacy e sicurezza per tutelare i visitatori e i loro dati

Il vecchio sito faceva riferimento a cookie e privacy policy non aggiornate.

Per far sì che quello nuovo fosse conforme alle più recenti introduzioni normative, abbiamo attivato un servizio online che genera documenti “GDPR compliant” (Iubenda) per tutte le versioni del sito (lingua inglese e lingua italiana): l’utente ora può prestare il proprio consenso al trattamento dei dati ed informarsi in merito alle politiche aziendali adottate.

Abbiamo quindi personalizzato il generatore automatico di cookie e privacy policy e lo abbiamo integrato nel sito sia in versione italiana che in versione inglese.

Abbiamo poi protetto il sito trasferendolo su server dotato di certificato di sicurezza efficace in modo che sia pubblicato sotto protocollo https (prima il sito era in http), così da infondere ulteriore fiducia negli utenti con conseguenti vantaggi anche dal punto di vista commerciale.

Il protocollo https per la comunicazione su internet protegge l’integrità e la riservatezza dei dati scambiati tra i dispositivi dei visitatori ed il sito, così che l’utilizzo di quest’ultimo possa avvenire in modo sicuro e privato grazie a tre livelli di protezione: crittografia (i dati sono criptati e quindi protetti da eventuali intercettazioni), integrità (i dati non possono essere modificati o danneggiati durante il trasferimento), autenticazione (il visitatore è sicuro di comunicare proprio con il sito web che si aspetta).

Trasferimento del sito su nuovo server

Il trasferimento del sito su nuovo server (fornitura dello spazio web) non è servito solo a garantirne la sicurezza, ma anche ad assicurare performance al top per quanto riguarda la velocità di caricamento.

Non solo: proprio per garantire tempistiche di caricamento imbattibili e rendere il sito gradito sia agli utenti che a Google, abbiamo curato tutti gli aspetti inerenti all’ottimizzazione della velocità (alleggerimento del peso delle immagini, ricorso al “caching”, adozione protocollo http/2, ottimizzazione del database di WordPress, abilitazione della compressione GZip, minimizzazione e compressione dei file CSS e Java Script, etc…).

Restyling sito web senza dimenticare i particolari

L’usabilità di un sito e l’esperienza di navigazione sono fattori influenzati da tantissime variabili, ma spesso sono i dettagli a fare la differenza.

Oltre agli elementi fondamentali (menu di navigazione, efficacia delle CTA, semplicità dei form, chiarezza nell’organizzazione dei contenuti, adattabilità al mobile, etc…), esistono una serie di piccoli accorgimenti che rendono più gradevole e fluida la fruizione di un sito.

Nel restyling sito web di PANDorà non abbiamo lasciato niente al caso.

L’utente si imbatte in un errore 404? Ok, abbiamo reindirizzato tutte le url del vecchio sito verso le pagine di quello nuovo, ma può succedere… magari per un errore di digitazione! Ecco che una pagina 404 dall’aspetto gradevole che informa il visitatore del fatto che la risorsa che sta cercando non esiste e lo invita con un pulsante colorato a ritornare sulla home page può fare la differenza tra un ritorno sulle pagine del sito o un abbandono definitivo.

Il visitatore sceglie di compilare un form per scaricare un documento o richiedere informazioni: riempie i campi commettendo un errore ed il sito lo avvisa gentilmente dove deve rimediare, invia il modulo ed il sito lo avvisa che tutto è andato a buon fine… piccoli accorgimenti che servono a dare un feedback all’utente che rimarrà sicuramente soddisfatto di averlo ricevuto!

Risultati ottenuti con il restyling del sito internet

Grazie al restyling, oggi il sito di PANDorà è sicuramente un sito moderno grazie alla grafica curata ed alle immagini professionali di qualità.

È un sito che si adatta perfettamente alle dimensioni di ogni schermo perché è compatibile al 100% con le modalità di visualizzazione di ogni dispositivo.

È un sito che soddisfa le esigenze dei visitatori perché spiega con chiarezza l’offerta della ditta, fornisce ogni dettaglio sui prodotti commercializzati e dà agli utenti interessati la possibilità di compiere con facilità le azioni previste (contatto e download di documenti).

È un sito fruibile anche in versione inglese così che gli utenti stranieri non abbiamo difficoltà a leggere i contenuti nella loro lingua.

È un sito perfettamente ottimizzato per i motori di ricerca perché ogni attività on-page è stata curata nel dettaglio sulla base di uno studio approfondito delle parole chiave più profittevoli per gli obiettivi di business dell’azienda.

È un sito sicuro, GDPR compliant e super veloce.

Ma il nostro lavoro di restyling sito web non finisce qui!

La collaborazione con PANDorà continua perché ci siamo impegnati a:

• tenere sempre aggiornato WordPress ed i relativi plugin per non esporre il sito ad attacchi malevoli che possono comprometterne la sicurezza;
• tenere sotto controllo l’efficacia delle attività SEO intraprese in termini di posizionamento su Google al fine di effettuare tutti gli aggiornamenti e le migliorie necessarie;
• valutare l’opportunità di inserire in futuro nuovi contenuti (magari istituendo una sezione dedicata a post e notizie) così da soddisfare tutti gli intenti di ricerca di utenti potenzialmente interessati all’offerta aziendale e sfruttare ogni opportunità offerta dal web per convogliare traffico qualificato sul sito.