Restyling e nuovo logo piattaforma modulistica digitale PA: UX/UI accessibile e brand identity moderna

L’unità di UX/UI Design di Wave Informatica è stata coinvolta nel restyling della piattaforma di modulistica digitale della Pubblica Amministrazione e nel design della brand image.

La piattaforma

Si tratta di un applicativo che permette agli Enti della Pubblica Amministrazione italiana di raccogliere le richieste dei cittadini e delle aziende telematicamente, attraverso un software per la gesione di modulistica digitale.

Il team di Wave Informatica supporta la progettazione e lo sviluppo dell’applicativo, e per questo l’unità di UX/UI design è stata coinvolta nel processo di restyling grafico e della User Experience.

Gli obiettivi del restyling

Conformità alle linee guida AGID

Dal momento si tratta di un servizio messo a disposizione dalla Pubblica Amministrazione e rivolto ai cittadini, deve rispettare le linee guida per i servizi digitali della PA dell’AGID, l’Agenzia per l’Italia digitale.

Le linee guida riguardano vari ambiti, quelli che hanno interessato maggiormente il restyling sono:

• stile grafico, ad esempio i caratteri tipografici, gli spazi, l’organizzazione dei contenuti, le icone;
• accessibilità, ovvero la capacità di rispondere alle esigenze di utenti con disabilità;
• user experience, infatti le interfacce devono essere semplici ed intuitive da usare.

L’intervento di restyling si è quindi svolto in tre ambiti:

1. revisione dell’aspetto grafico dell’applicativo, attraverso la creazione di una versione personalizzata di Bootstrap Italia, la libreria realizzata dal team di Designers Italia secondo le indicazioni dell’AGI;
2. ottimizzazione delle logiche di navigazione, al fine di rendere il percorso utente più semplice, intuitivo ed efficace;
3. organizzazione ed ampliamento dei contenuti, per semplificare l’esperienza d’uso da parte dei cittadini.

Nel concreto, abbiamo dunque agito non solo sulla grafica e sul codice dell’applicativo, ma anche analizzato e rivisto i link, le ridirezioni (dove l’utente viene portato dopo aver compiuto una certa azione), aggiunto pagine utili come le FAQ e il riepilogo dell’istanza.

Creare un’identità di brand unica

Il secondo obiettivo del restyling era realizzare una brand identity unica, efficace, moderna e accattivante.

Per questo abbiamo riprogettato il logo, sempre mantenendo coerenza con le scelte di design applicate all’interfaccia web, e definito gli elementi base di design (o design tokens), come la palette colori.

Le fasi del progetto

1. Logo design e design tokens

Per prima cosa, abbiamo applicato i design tokens dei Bootstrap Italia, come ad esempio il carattere tipografico Titillium Web, e definito la nuova palette colori, che vede un blu acceso come colore primario e un verde acido a contrasto.

Nel disegnare il nuovo logo abbiamo voluto mantenere un legame con il simbolo precedente, raffigurante la luna, inserendo elementi di richiamo alla natura della piattaforma (fruizione di modulistica digitale) e alla Pubblica Amministrazione.

Il risultato è un simbolo moderno, con richiami al digitale e al settore della PA italiana.

2. Il mock-up grafico a bassa fedeltà

Un mock-up a bassa fedeltà, detto anche wireframe, serve a rappresentare gli elementi dell’interfaccia in maniera molto grossolana, lasciando da parte qualsiasi scelta estetica come i colori o le immagini.

È stato dunque realizzato un prototipo a bassa fedeltà, con lo scopo di concentrarsi sui contenuti e sulla loro organizzazione.

3. Il prototipo interattivo ad alta fedeltà

Lo step successivo è applicare al wireframe gli elementi di design definitivi, sempre basati sul kit di design Bootstrap Italia.

Aggiungendo poi elementi interattivi, come link, finestre modali e accordion che si aprono al click, bottoni che cambiano colore al passaggio del mouse, abbiamo ottenuto un prototipo grafico molto simile al risultato finale, velocizzando i tempi di verifica del nuovo design e ottimizzando lo sviluppo.

4. Sviluppo e pubblicazione

Una volta approvato il prototipo grafico, il team di design ha collaborato con l’unità di sviluppo nell’implementazione della nuova interfaccia.

Sono state dunque modificate le strutture HTML, i file CSS e le librerie incluse nel progetto, per adattarsi al nuovo design e rispondere ai criteri di accessibilità richiesti.

Infine, ci siamo occupati della pubblicazione delle modifiche sull’applicativo e dei test di usabilità e di accessibilità.

Il risultato finale

Oggi la piattaforma, usata ogni giorno da migliaia di cittadini, aziende e uffici, risulta in linea con le direttive AGID, più semplice da utilizzare e completamente accessibile.

Il restyling della piattaforma di modulistica della Pubblica Amministrazione va ad aggiungersi alla lunga lista di progetti per la Pubblica Amministrazione che abbiamo portato a termine con successo, come ad esempio l’Applicazione per la raccolta firme del Consiglio Regionale del Piemonte.