Restyle e riparazione (completo)

Ripristinato il funzionamento, migliorato l'esperienza, combattuto la guerra e aggiustato il visuale del brand.

Client: Enneagramma Integrale
Date: Autunno 2020
Services: Riparare il sito e-commerce WordPress e brand visuals

Immagina di essere una professionista riconosciuta del tuo settore, avere sulle spalle anni di formazione, esperienze ed avere la passione che ti guida nel aiutare le persone a migliorare la qualità della propria vita.

Ora immagina che per un motivo o altro è il momento che ti serve il tuo sito e ti affidi ad un’agenzia, ti costruiscono il sito con la loro tecnologia proprietaria. Poi scopri che l’investimento per ogni piccola modifica lo rende insostenibile.

Quindi ti affidi ad una professionista che ricostruisce tutto in WordPress e finalmente ogni modifica è sostenibile e soprattutto, si riesce a gestire anche in autonomia.

Solo che ti accorgi che le parti più importanti non funzionano ed è terribilmente macchinoso usarlo. Cosa fai?

NB: se lo strumento di comunicazione che usi entra in contatto con i tuoi clienti prima di te (sito, volantino…), trasmette subito qual’è il tuo livello di autorevolezza e professionalità.

RICERCA

La sfida

A questo punto non andava quasi nulla e anche se il tema è responsive, il sito appariva al quanto strano in mobile. Anche il contenuto, per lo più testuale, era aggiunto senza una forma. In ogni pagina c’era un grosso blocco di testo che ti sfido a leggere!

Non bisogna dimenticare che a questo punto sono la terza persona alla quale si rivolge, bisognava assolutamente trovare la strada più sostenibile e facile per portare maggior valore.

RICERCA

Il focus

Prima di andare avanti, ci siamo sentiti per capire meglio il progetto e gli obiettivi. Questo per capire se il sito effettivamente soddisfa il bisogno.

Il tempo scorre e bisogna mettersi in moto il prima possibile, quindi dopo aver mappato tutti i problemi visibili di funzionalità e usabilità siamo riusciti a mettere a fuoco le priorità e partire in ordine di urgenza:

  • Far funzionare la navigazione, l’e-commerce, modulo di newsletter, la lingua inglese…
  • Migliorare la fruizione di contenuti.
  • Togliere il superfluo e lavorare sulla performance.
  • Mettersi in regola con il GDPR.
  • Migliorare l’aspetto visivo per allinearlo alla professionalità e autorevolezza della persona.

La soluzione

Mantenere la tecnologia utilizzata (WordPress, tema, alcuni plugin) cambiando solo le parti che non funzionavano al meglio.

Riesaminare i colori usati e creare un minimo di aspetto visivo professionale per supportare i contenuti delle pagine del sito.

DESIGN

Il sito

Qual’è la prima cosa da fare in ogni lavoro? → Il backup. La seconda? Partire 😊

Ho sfogliato il sito in ordine di urgenza per correggere problemi man mano che si presentavano. WordPress in questo senso è molto divertente perché è prevedibile e si risolvono con relativa facilità anche i problemi più enigmatici. Personalmente mi piace risolvere problemi proprio comportandomi da utente e sistemando le parti dove vedo che c’è dell’attrito, ripercorrendo la strada fino a quando va liscia e morbido come la seta.

Ora che il sito è funzionante, ho fatto la preview per piccoli aggiustamenti grafici. In pratica ho fatto qualche wireframe a mano per la riorganizzazione della home e poi costruito un prototipo veloce per capire insieme al cliente se le piace o vorrebbe delle modifiche prima di implementarlo.

Fatto qualche modifica, sono partita a cambiare il sito visivamente.

PRIMA

DOPO

  1. Ricordava un po’ il “Multicentrum”. L’ho cambiato in uno sfondo con colori in movimento per renderlo più organico. Aggiunto anche un benvenuto più chiaro e la navigazione per le sezioni più importanti.
  2. Il primo contenuto della pagina doveva essere cambiata in quello che porta più valore: gli appuntamenti e le pubblicazioni.
  3. Newsletter non era collegata a nulla; Ho diminuito l’importanza data ai box colorati e l’ho reso più uniforme e responsive.
  4. La sezione del footer era inserita a mano in ogni pagina; l’ho ricostruito per permettere al cliente di modificare i dati una volta sola e vedere il cambiamento su ogni pagina.

PRIMA

DOPO

  1. Sostituzione della categorizzazione annuale con solo due categorie: articoli, video. Ora gli utenti non devono più cercare i video in mezzo agli articoli e il cliente non deve più aggiungere a mano le categorie ogni anno.
  2. Aggiunta delle immagini in evidenza che erano nascoste e il bottone.
  3. Cambio del font e dimensioni per aumentare la leggibilità.
  4. Aggiunta la navigazione delle pagine sotto gli articoli.
  5. Aggiunto l’esportazione automatica di news e video al secondo sito del cliente; con rimando a questo sito (per il SEO).
DESIGN

I colori

Ho lavorato sui colori in parallelo alla costruzione del prototipo partendo dal materiale vecchio del cliente. Serviva solo una leggera ricostruzione del branding visivo.

Partendo dalla ruota di colori arcobaleno che aveva nell’icona di prima, ho scelto dei colori più vibranti che rimanessero lineari nella sfumatura e fossero carini anche usati come sfondi chiari cambiando l’opacità al 5-10%. Ammetto che pensavo fosse più semplice, era una bella sfida stimolante.🌈

Per facilitare l’utilizzo dei nuovi colori al cliente e rimanere coerenti in futuro, ho dato al cliente una piccola guida con i colori convertiti anche nel CYMK per rimanere in linea anche in stampa.

PRIMA

DOPO

PRIMA

DOPO

I tratti a pennello dell’icona con i numero non erano tanto facili da vettorializzare, ma alla fine, nulla è impossibile. Questa icona rappresenta 9 tipologie di personalità, questo porta il bisogno di avere dei colori chiaramente diversi tra di loro.

  1. Cambio del colore 8, per non confonderlo con 1.
  2. Cambio del colore 2 dal verde chiaro al giallo.
  3. Aggiunta della scritta del marchio registrato nell’icona.

Logo:

  1. Cambio del font con uno più aperto.
  2. Sfruttato meglio la disposizione con il testo per rendere il simbolo di Enneagramma più grande.
  3. Mettendo il simbolo a sinistra è migliorato la leggibilità.
IMPREVVISTO

Lo spavento 😱

Una mattina ci siamo svegliati con la scoperta che tutto il sito era sparito e al suo posto c’era una pagina diffamatoria con parole forti per creare danno professionale al cliente. 🙈

La designer prima di me aveva scoperto che il cliente ha cambiato ed ecco… ha sfruttato l’unico punto di accesso sulla quale non si aveva il controllo sul servizio hosting di Aruba: il cambio della password/nome utente di una database.

Per fortuna si è risolto abbastanza in fretta ripristinando il backup, ma abbiamo sfruttato il momento per traslocare il sito da Aruba a Siteground.

DESIGN

Funziona?

In questo caso l’intero processo è stato fatto con il sito online, senza lavorare in parallelo o in locale, pubblicando a prime modifiche pronte. Così ogni giorno gli utenti si trovavano un sito migliore.

Finito gli aggiustamenti tecnici del sito, sono partiti i test di visualizzazione responsivecross-browser (Safari a volte ci regala sorprese sfidanti ❤️) e performance.

  • Per responsive, avevo già pensato con mobile in mente mentre sistemavo, quindi c’era relativamente poco da correggere. Solo alcuni dimensioni e spazi.
  • Per cross-browser l’unico outsider era Safari, ma grazie a Lambdatest anche questo si è risolto subito.

 

Parlando di performance, nonostante il tema bella pesantina, sono passata da 4,83s a 187ms di Time To First Byte. Con tutti i variabili che ci sono, alla fine ho trovato i risultati migliori con:

  • Cloudflare CDN;
  • SVG dove si può;
  • Fast Velocity Minify per minimizzare il peso delle file sul sito.
  • Resizer di immagini e WebP Express per ottimizzare le immagini caricate dal cliente.
  • WP Optimize per tenere automaticamente il database leggero.

Il risultato finale

✨ Tutto bello funzionante e uno strumento che il cliente può usare in autonomia. ✨

Parlando di dati, l’incremento in vendite è aumentato del 250%. É migliorato un pelino anche nella ricerca Google: vedi il tratteggiato (prima) linea continua (dopo).

Analytics mostrava 77% di utenti in più tra cui la maggior parte sono quelli nuovi (+73%). Le persone hanno iniziato ad utilizzarlo di più (+81% di sessioni) e a visualizzare 60% di pagine in più. Da considerare che questi sono i dati di chi non blocca i cookies.

REALITY CHECK

Cosa ho imparato?

Non si smette mai di migliorare la chiarezza nel comunicare. Non capitano spesso i clienti che ti dicono “non ho capito”. Grazie a questo progetto ho conosciuto una persona che (oltre ad essere di ispirazione) mi ha fatto notare gli aspetti dove potevo spiegare più chiaramente. É stata un’opportunità incredibile per mettermi alla prova e migliorare. Ora ho iniziato ad usare meglio la comunicazione visiva. Sul web davvero ogniuno può avere un proprio vocabolario 🙂 Rimuoviamo le barriere!

Prudenza non è mai troppa. “Non si sa mai”. È sempre una buona idea cambiare le password, fare i backup, screenshot o la qualsiasi precauzione necessaria quando si prende in mano il progetto creato da qualcun altro. Non l’avevo imparato con questo caso, ma è un buon esempio.

Scegli con chi lavori. Questo progetto mi ha fatto riflettere molto su collaboratori, è quasi più importante conoscere i valori che li guidano e la loro maturità emotiva che quello che sanno fare.