17 Novembre 2022

Restyling della piattaforma di modulistica della Pubblica Amministrazione

Home / News / Progetti svolti / Restyling della piattaforma di modulistica della Pubblica Amministrazione

Autore

Team di Wave Informatica

Categoria

Progetti svolti

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 sistema di gestione della 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.

Il processo di creazione del pittogramma
Il confronto tra il vecchio logo e il nuovo logo realizzato da Wave Informatica
Il logo in diversi colori e sfondi

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.

Esempio di prototipo digitale in forma di mock-up wireframe a bassa fedeltà
Esempio di prototipo digitale in forma di mock-up wireframe a bassa fedeltà

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.

La pagina di aiuto è utile per guidare l’utente all’uso della piattaforma
La bacheca guida l’utente attraverso le fasi di invio di una richiesta
La pagina di accesso alle proprie istanze, con filtri di ricerca avanzata
La nuova interfaccia si adatta a tutti i dispositivi

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.