<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=351110188613778&amp;ev=PageView&amp;noscript=1">

NATO STABILITY POLICING CENTRE OF EXCELLENCE: Redesign del sito centrato sugli utenti

GLI OBIETTIVI

Il progetto di redesign del sito aveva l’esigenza di potenziare il sito migliorandone l’usabilità complessiva, rendendolo più facilmente accessibile al pubblico internazionale a cui si rivolge e ottimizzarlo per tutti i dispositivi (il sito non era responsive) in modo da aumentarne la visibilità e in generale la reputazione.

In modo particolare, il Centro intendeva raggiungere più obiettivi, tra cui:

  • Rendere il sito il punto di riferimento per chi cerca informazioni sulla Polizia di Stabilità;
  • Incrementare la visibilità del sito e i nuovi utenti, riducendo il bounce rate;
  • Aumentare il traffico proveniente da altri siti e dai social media;
  • Favorire le richieste di informazioni;
  • Aumentare i download di contenuti e risorse.

 

Sinfonia ha partecipato alla gara con un progetto di redesign centrato sull’utente, proponendo come elemento essenziale il coinvolgimento degli utenti a più livelli durante la realizzazione del sito. L’approccio presentato, caratterizzato da metodologie e strumenti propri dello User Experience Design e focalizzato sull’utente, ha portato il Centro di Eccellenza a scegliere Sinfonia per il redesign del sito.

 

LA SOLUZIONE

 

ANALISI

In fase di analisi abbiamo raccolto le statistiche relative alle Google Analytics e analizzato le performance con Sem Rush per avere un’immagine completa e poter identificare chiaramente le maggiori criticità da considerare nel redesign. Dall’analisi è emerso che:

  • La media delle pagine visitate per sessione era molto bassa e le pagine di destinazione e in uscita spesso coincidevano, dimostrando come gli utenti non seguissero un reale percorso di navigazione, fermandosi molte volte alla prima pagina visitata;
  • La frequenza di rimbalzo era molto elevata, a causa di più fattori, tra cui il contenuto non strutturato adeguatamente, la velocità di caricamento del sito non ottimale, l’assenza di percorsi di navigazione interni e le pagine non ottimizzate per la fruizione mobile.

 

ARCHITETTURA: TREE TEST E CARD SORTING

Nella revisione dell’architettura abbiamo seguito più direttrici:

  • riorganizzare la struttura interna di ciascuna sezione nell’ottica di ridurre il numero di passaggi necessari per raggiungere un’informazione, eliminando contenuti non più necessari e unificando contenuti affini dove possibile;
  • verificare che le voci e sotto-voci fossero comprensibili;
  • supportare percorsi di navigazione interni.

 

Realizzata la nuova mappa del sito, ci siamo rivolti agli utenti del Centro di Eccellenza tramite un tree test e un card sorting chiuso, per verificare se la riorganizzazione dei contenuti fosse chiara e in linea con i modelli mentali degli utenti.

Con il tree test si verifica se gli utenti riescono a trovare l’informazione richiesta navigando il menu fornito, mentre con il Card Sorting si osserva se l’architettura costruita dai partecipanti coincide con la struttura proposta, facendo emergere contenuti difficili da classificare o la necessità di collegamenti interni per supportare differenti modalità di navigazione.

Testare la nuova mappa del sito secondo queste due prospettive ci ha permesso innanzitutto di validare la revisione proposta, ma allo stesso tempo di raccogliere delle suggestioni su come migliorare la navigazione interna, favorendo la fruizione dei contenuti.

Dall’analisi dei dati è emersa quindi la necessità di intervenire in primis sull’architettura, cercando di semplificarne la struttura per permettere all’utente di raggiungere i contenuti più facilmente, riducendo il numero di click necessari.

 

PROGETTAZIONE: WIREFRAME

Nella realizzazione dei wireframe, considerando le criticità emerse in fase di analisi e le considerazioni derivanti dai test con gli utenti, il lavoro principale ha riguardato l’organizzazione e la visualizzazione dei contenuti. Il sito era infatti molto denso di testi e presentava pagine particolarmente ricche di informazioni, ma non molto fruibili. Era quindi necessario riorganizzarli senza modificarne il contenuto. Abbiamo quindi identificato le strutture ricorrenti e realizzato delle soluzioni per ottimizzare la leggibilità e agevolare la comprensione, riportandole in modo coerente nelle varie pagine.

Ad esempio, i paragrafi che descrivevano i passaggi storici, molto frequenti nelle diverse sezioni del sito, sono stati rappresentati adottando una timeline, che permette di focalizzare l’attenzione sui punti chiave, intervallando le fasce di testo. Abbiamo costruito altri elementi modulari, come fasce icona-testo o griglie immagine-descrizione per veicolare i diversi contenuti in modo più dinamico.

In parallelo, abbiamo lavorato per semplificare la navigazione, evitando di creare molti sotto-livelli, inserendo invece delle tab e privilegiando elementi come gli accordion, che permettono di conservare inalterato il testo, ma di renderlo più o meno visibile a seconda delle esigenze di approfondimento dell’utente. Abbiamo inserito contenuti correlati e valorizzato i collegamenti, in modo da supportare una navigazione graduale, ma più approfondita del sito.

Nell’ottica di accompagnare maggiormente l’utente e facilitare la compilazione delle richieste di supporto e informazioni, elementi cruciali per il sito, i due form sono stati strutturati in più step. Anche i contatti sono stati organizzati per area con l’obiettivo di semplificare la ricerca della persona e rendere più veloce contattarla, tramite il link al form precompilato e il recapito telefonico diretto. La progettazione è avvenuta in parallelo per la versione desktop e responsive, in modo da individuare soluzioni ottimali per la fruizione del sito anche da mobile, garantendo una buona leggibilità dei contenuti e supportando una navigazione fluida delle pagine.

 

LAYOUT

Dal punto di vista del layout, per ottimizzare la fruizione dei contenuti e incrementare l’engagement, si è lavorato su più livelli: nel bilanciare spazi e testi, nell’utilizzo più marcato di immagini e icone, nell’alternare i diversi background per dare risalto alle informazioni, stabilendo una gerarchia nella pagina. I due colori principali riprendono i colori del Centro di Eccellenza, rappresentati nel logo, mentre è stata introdotta una terza cromia più accesa per accentuare le Call to action e alcune informazioni specifiche, come i sottotitoli nel menu. Ampio spazio è stato dato all’uso di materiale fotografico e video per raccontare le attività del centro anche ad un pubblico meno esperto.

La struttura che ne risulta è quindi più dinamica e facilita la lettura, presentando gli stessi contenuti di partenza secondo uno stile più vivace e moderno.

layout-3

TEST: VALUTAZIONE DI USABILITÀ DEL SITO

Per validare il design del sito sono stati testati i prototipi con un gruppo eterogeneo di utenti, coinvolgendo anche persone che non avevano familiarità con l’ambito affrontato, in modo da valutare l’usabilità del sito con un campione più ampio. La metodologia adottata è il Think Aloud, una tecnica qualitativa dove l’utente naviga il sito per completare dei task e riporta le sue osservazioni interagendo con il facilitatore.

I test con gli utenti, effettuati sia nella versione desktop sia nel responsive, hanno fatto emergere alcune criticità, ma allo stesso tempo suggerimenti su come migliorare l’interfaccia realizzata. I prototipi sono stati quindi ottimizzati sulla base dei feedback e testati una seconda volta tramite un test di tipo quantitativo, online e non moderato dal team di design. Il partecipante doveva cercare l’informazione richiesta nella pagina, selezionando l’area che riteneva corretta (First click Test), oppure osservare per alcuni secondi la schermata e poi rispondere ad alcune domande (Five second Test). Questo secondo test ci ha permesso di validare la revisione del layout, procedendo quindi con lo sviluppo del sito.

test usabilità

SVILUPPO WEB

Progettare un sito secondo un approccio user centered, si traduce anche nella scelta di un CMS che consenta la massima libertà in termini di sviluppo dell’interfaccia utente. Per il redesign del sito è stato scelto Wordpress, piattaforma CMS Open source matura e SEO friendly.

Lo sviluppo web si è articolato in più fasi:

  • abbiamo mappato le diverse tipologie di contenuto (custom post type) presenti nel sito (pagine, corsi, notizie, press review, publications, documents);
  • sfruttando un approccio modulare, abbiamo confrontato i diversi layout grafici al fine di poter definire dei blocchi di contenuto strutturalmente simili;
  • basandoci sullo stater theme Sage e il developer toolkit create-guten-block abbiamo sviluppato un tema e un plugin custom per poter ottimizzare le performance (come il tempo di caricamento delle pagine) e sfruttare le potenzialità offerte dal nuovo editor visuale “Gutenberg” e del framework css Twitter Bootstrap. Il nuovo editor permette la creazione dei contenuti in una modalità visuale molto intuitiva e il framework Twitter Bootstrap, che sfrutta un approccio mobile-first, garantisce una solida base per lo sviluppo frontend.
    Abbiamo deciso di sviluppare da zero i blocchi Gutenberg in ReactJS basandoci sulla mappatura dei layout fatta in precedenza, questo per poter avere la massima libertà di azione. Nel tema abbiamo sfruttato webpack (module bundler) per creare un pacchetto contenente tutti gli asset del progetto (css, javascript, immagini, font). Per le icone abbiamo creato un font apposito;
  • nello sviluppo dell’interfaccia utente abbiamo adottato un approccio responsive e mobile-first per fornire all’utente finale un’esperienza d’uso ottimale nei diversi dispositivi;
  • poiché da progetto il processo di registrazione e autenticazione dell’utente seguivano alcune procedure non standard della piattaforma Wordpress abbiamo deciso di riscriverle potendo così utilizzare anche richieste AJAX e double opt-in con conferma email nella registrazione;
  • ottimizzare la SEO, curando l’inserimento dei contenuti per garantire il posizionamento delle pagine sulla ricerca organica dei motori di ricerca;
  • garantire la sicurezza, mediante l’attivazione di appositi moduli e plugin che mitigano gli attacchi informatici.

Raggiunti i punti chiave prefissati, al termine dello sviluppo, sono state effettuate le verifiche tecniche e cross browsing per poi pubblicare il sito online.

overview dispositivi

I RISULTATI

Il sito per il Centro di Eccellenza è stato sviluppato seguendo un processo di design iterativo, dove sono stati coinvolti gli utenti in più momenti e mediante più modalità. Seguendo questo approccio, ciascun macro-passaggio della progettazione è stato validato non solo con il cliente, ma anche con gli utenti, potendo quindi intervenire tempestivamente e in modo più efficiente, ottimizzando i tempi e le risorse.

Gli utenti coinvolti hanno definito il nuovo sito moderno e dallo stile pulito, in linea con l’immagine del centro e chiaro nei contenuti.

“Very nice and approachable compared to the american government websites”

“Very modern design compared to the other NATO Centers"

Il sito è semplice da navigare e garantisce una totale fruibilità dei contenuti anche utilizzando altri dispositivi, come smartphone e tablet.

 

A livello di performance, alla pubblicazione online il sito registra ottimi punteggi secondo i parametri di valutazione della piattaforma di sviluppo:

performance sito

Per verificare a medio termine l’andamento del sito, a tre mesi dalla pubblicazione verrà analizzato il miglioramento di alcuni kpi, legati alle maggiori cricità emerse in fase di analisi:

  • diminuzione del bounce rate;
  • aumento della permanenza sul sito e numero di pagine visitate;
  • download di risorse e contenuti;
  • compilazione dei form di richiesta di informazioni e supporto;
  • visite dai dispositivi mobili;
  • posizionamento dei contenuti chiave del sito sui motori di ricerca.