Un progetto non comune: un prototipo di sito web per i Comuni italiani

Abbiamo usato i kit di Designers Italia per progettare un modello di sito comunale a misura di cittadino. Ecco come

di Daniele Tabellini e Giulio Lucci

Consolidamento di identità e pattern di navigazione

Il Team Digitale ha ideato il progetto di creazione di un modello per i siti e i servizi digitali dei Comuni italiani con lo scopo di creare uno standard di qualità elevata, favorire le sinergie tra Comuni, ridurre gli sprechi e liberare risorse da dedicare a progetti di innovazione e a non reinventare ogni volta la ruota. Per gestire il progetto, ha utilizzato la piattaforma e la community Designers Italia, nata proprio per favorire l’introduzione di metodi di service design nei progetti della Pubblica Amministrazione italiana

Il progetto

Un progetto per creare un modello per i siti dei Comuni non poteva che vivere dentro la realtà dei Comuni italiani, e così è stato. In particolare, ha mosso i primi passi partendo dal progetto del sito del Comune di Firenze, grazie al lavoro di Gianluca Vannuccini, Barbara Tonetto e Leonardo Ricci; e ha preso forma nel Comune di Cagliari, il primo Comune italiano che sta realizzando quanto abbiamo progettato, e nel farlo ci restituisce consigli e indicazioni per migliorarlo grazie al lavoro di Riccardo Castrignanò, Antonio Pascalis e Francesco Sogos. In mezzo, tanto lavoro di analisi, interviste e progettazione.

Il progetto ha avuto un team di designer composto da Giulio Lucci, Daniele Tabellini, Roberta Tassi, Laura Toffetti e Lorenzo Fabbri, e ha beneficiato del wireframe kit, dello UI kit e del webtoolkit di Designers Italia, seguito tra gli altri da Francesco Zaia e Daniela De Blasis. Mentre progettavamo i siti dei Comuni abbiamo potuto condividere esperienze, metodo di lavoro e risorse con un progetto simile di Designers Italia, ma dedicato alle scuole: grazie quindi a Gianni Sinni (e all’agenzia LCD) e a Alessandro Pollini (e all’agenzia BSD) per aver indirettamente supportato anche il progetto dedicato ai Comuni.

Infine, abbiamo scambiato idee e condiviso risultati di ricerca con la Regione Veneto, che ha un progetto per standardizzare alcuni dei servizi comunali del Veneto diretto da Antonino Mola.

Scenario d’uso, wireframe interattivo

Il metodo

Abbiamo testato con mano l’utilità di Designers Italia: da un lato, molte delle persone che hanno lavorato al progetto si sono conosciute sulla community di Designers Italia; dall’altro, la disponibilità dei kit di design ha permesso di lavorare velocemente, parlando da subito la stessa lingua.

Grazie all’utilizzo di collaboration tool e dei kit di design è stato possibile ridurre la curva di apprendimento e accorciare i tempi di fine tuning tra membri del team che in molti casi non si conoscevano e seguivano il progetto da zone del Paese diverse.

Abbiamo utilizzato strumenti come il forum e Slack per favorire una gestione agile, “iterare” velocemente e coinvolgere persone in modo estremamente flessibile. Proprio da Slack, ad esempio, ha preso il via lo scambio di informazioni e la collaborazione con il Comune di Cagliari, prima sul canale pubblico #design-service su developers.italia.it poi successivamente nel canale dedicato al progetto.

Grazie a Sketch e Invision, e alla sincronizzazione con GitHub (anche via Plant) delle librerie di componenti messe a disposizione da Designers Italia, siamo riusciti a gestire un’attività di prototipazione molto ampia e articolata in tempi rapidi, e allo stesso tempo ad arricchire le stesse librerie.

Questo metodo di lavoro si sta diffondendo in una crescente comunità di designer, che riesce così a lavorare in modo più fluido e integrato, portando quel contributo che finora mancava a molti progetti della Pubblica Amministrazione. 
Abbiamo toccato con mano come gli strumenti di collaborazione abbiano favorito la condivisione di idee e standard d’eccellenza, permettendoci di arrivare con più facilità a soluzioni efficaci.

Le fasi del progetto

La ricerca

Per capire a fondo il contesto e individuare le soluzioni più efficaci è stato fondamentale impostare una solida base di ricerca con cui abbiamo indagato le caratteristiche e i bisogni degli utenti, i benchmark più rilevanti e i processi della PA nella gestione del contenuto.

Ad esempio, i risultati della ricerca etnografica svolta dalla Regione Veneto per il progetto MyPortal ci hanno ispirato nella creazione dei nostri modelli di utente, i personas. Una serie di usability test hanno fatto emergere le aree d’attenzione per l’esperienza utente mentre un benchmark internazionale ci ha aiutato a vedere come altri hanno soddisfatto esigenze simili.

Interviste e usability test

Le interviste agli utenti all’interno delle istituzioni, infine, ci hanno permesso di capire i processi di gestione dei contenuti e i vincoli organizzativi più importanti da tenere in considerazione nel progettare l’architettura e il layout del sito.

Gli scenari d’uso e l’architettura dell’informazione

Abbiamo cominciato mappando le esigenze dei cittadini da un lato e tutti i contenuti disponibili sul sito di un Comune dall’altro. Il nostro obiettivo non era progettare tutte le possibilità per tutti i servizi, quanto creare dei modelli, dei pattern di esperienza utente che fossero semplici, altamente usabili, replicabili e adattabili alla ricchezza di specificità riscontrabile in tutti i Comuni italiani.

Il percorso standard (pattern) che un utente deve fare per usare un servizio sul sito web di un Comune

Prima di metterci a disegnare schermate abbiamo immaginato l’esperienza d’uso del sito attraverso sei scenari.

Come iscrivo mio figlio all’asilo nido? Che incentivi ho a disposizione per far crescere la mia attività? Cosa succede negli uffici del Comune?

Ogni scenario ci ha permesso di arricchire e dare profondità alla struttura dei contenuti individuando criticità, necessità e potenzialità nel raggiungimento della piena soddisfazione d’uso.

Abbiamo usato il kit di architettura delle informazioni come base nella definizione delle sezioni principali e lo abbiamo arricchito con le peculiarità del progetto. Contributi fondamentali sono stati una lista preliminare di argomenti con cui organizzare i contenuti e la sezione di amministrazione trasparente che si basano sulla logica dei tag. Facendo leva su relazioni flessibili tra le pagine, abbiamo impostato un’architettura modulare, che offre punti d’ingresso differenti adattandosi al percorso di navigazione degli utenti.

I prototipi

Abbiamo lavorato fin da subito su un prototipo interattivo per dialogare con efficacia con i diversi stakeholder e fare test mano a mano che il progetto prendeva forma.

Prima di definire il dettaglio delle singole pagine, è stato importante capire come creare un’esperienza unitaria che integrasse tra loro funzionalità e contenuti eterogenei. Navigare tra le schermate dei wireframe ci ha premesso di condividere e validare i pattern di user experience.

Parallelamente abbiamo costruito un prototipo in alta definizione di una selezione dei layout. Oltre a comunicare visivamente il progetto costituisce un ponte per lo sviluppo del front-end: le schermate, visualizzate come se il sito fosse in produzione, forniscono tutte le indicazioni per declinare lo UI kit su tutto il sito e per estendere e gestire la visualizzazione delle pagine su diversi device.

I risultati

Le soluzioni che abbiamo proposto hanno l’ambizione di migliorare (di un po’ 😏) la vita dei cittadini attraverso soluzioni pragmatiche alle esigenze delle persone.

I servizi al pubblico sono organizzati a partire da esigenze concrete, come iscriversi, pagare o segnalare e sono esposti con una gerarchia che privilegia le informazioni chiave e scende via via verso i dettagli.

La pagina di un servizio è organizzata a partire dai bisogni dei cittadini

I flussi di interazione seguono pattern consolidati, familiari a chiunque già usa uno smartphone, e prevedono l’integrazione di piattaforme abilitanti come Spid e PagoPA.

Il cuore dell’area personale è un centro messaggi da cui essere aggiornati sulle scadenze e sull’evoluzione dei servizi di cui si usufruisce o delle pratiche in corso.

Una lista di argomenti permette di collegare servizi, documenti e novità gestiti da un’area organizzativa e riferiti a uno stesso tema

I contenuti sono organizzati prima di tutto pensando agli utenti, seguendo il modello mentale delle persone prima che l’organizzazione interna della Pubblica Amministrazione.

Allo stesso tempo, abbiamo fatto in modo che sia più facile informarsi e capire l’operato del Comune, dando spazio agli uffici che lo compongono e alle partecipate affinché possano comunicare con efficacia le proprie attività. Quest’ultimo aspetto è particolarmente importante per superare la necessità di realizzare un sito tematico, separato da quello istituzionale, per ogni iniziativa.

Infine, la sezione di amministrazione trasparente è integrata al sito e ne sfrutta i contenuti, rendendo più semplice la sua gestione e prevenendo la pubblicazione di informazioni ridondanti o incomplete.

Tutto il materiale prodotto, rilasciato in open source, ha permesso al Comune di Cagliari di avviare velocemente lo sviluppo del nuovo sito istituzionale in un progetto pilota. Un’occasione unica per stabilire una best practice nazionale e contribuire a migliorare il modello a beneficio di tutti i Comuni italiani (e di noi cittadini, designer e non 🚀 ).

Link utili

Discussione sul forum

Documentazione e prototipi