Piattaforme nazionali per milioni di utenti
UX/UI designer e lead di 3 sviluppatori frontend. Un solo design system per più fornitori.
Il problema
Servizi pubblici digitali usati ogni giorno da studenti, docenti e amministrazioni, cresciuti per stratificazione: flussi incoerenti tra sistemi, linguaggio burocratico, nessuna libreria condivisa tra i fornitori e nessuna organizzazione efficace del lavoro tra i team.
Il mio ruolo
Doppio ruolo: UX/UI designer sui flussi e sulle interfacce, e lead di 3 sviluppatori frontend su più progetti in parallelo. Ho definito design system e workflow condivisi, concordato le priorità con product ed engineering e scritto spec e documentazione tecnica che hanno ridotto l’attrito nel passaggio design-sviluppo. Non c’era un’organizzazione efficace tra i team, così l’ho impostata io in Asana, portando i ticket di tutti i team in un unico posto.
L’impatto
Un solo design system adottato dai team di più fornitori: i componenti vengono riusati invece di essere ridisegnati a ogni progetto, e servizi che prima sembravano di aziende diverse oggi si leggono come uno. Dopo il redesign l’uso di Sigillo è cresciuto del 200% e il voto medio nei questionari del Ministero è salito da 2,5 a 4,5 su 5. Nell’handover con i 3 sviluppatori frontend le revisioni post-consegna sono passate da più giri per release a uno solo.
Dalla misura delle vecchie pagine alla misura delle nuove
Prima un punto di partenza
Test con heatmap sulle pagine esistenti, per vedere come venivano usate davvero.
Una direzione, una bacheca
Un modello comune di navigazione, gerarchia e tono su .italia, e i ticket di tutti i team organizzati in Asana.
Ogni stato, cliccabile
Prototipi interattivi in Axure per desktop e mobile, con stati vuoti, di errore e di conferma.
Presentato, poi misurato
Revisioni con i dirigenti del Ministero e di Leonardo, e test con heatmap sul redesign.
Usato tre volte tanto
Uso di Sigillo +200%, voto nei questionari da 2,5 a 4,5 su 5.
Ricerca e validazione: dati prima e dopo il redesign
Prima di progettare ho fatto test con heatmap sulle pagine in uso, per avere un punto di partenza su dove andavano attenzione e clic. Lo stesso test, ripetuto sul redesign, ha permesso di confrontare prima e dopo alle stesse condizioni, invece di discutere di gusti.
Le proposte sono state presentate in call con i dirigenti del Ministero e di Leonardo, mostrando i prototipi interattivi in Axure invece di schermate statiche: le decisioni si prendevano sul comportamento reale di ogni flusso, compresi gli stati vuoti e di errore.
Sigillo: il lavoro ordinato per quello che c’è da fare
La navigazione segue lo stato di un documento, non l’ufficio che l’ha mandato: cosa compilare, cosa firmare, cosa aspetta qualcun altro e cosa è concluso.
- Documenti da compilare
- Documenti da firmare
- Documenti in attesa, con il motivo
- Riepilogo dell’anno per stato
- Da compilare
- Da firmare
- Firma singola
- Più firmatari, in un ordine stabilito
- Firma massiva, per gli amministratori
- In attesa di firme precedenti
- Archivio
- Scheda documento in sola lettura
- Campi firma, per pagina
- Presa visione
- Firma con SPID
- PDF firmato ed elenco firmatari
Costruito su .italia, il design system ufficiale della pubblica amministrazione, con una libreria di componenti condivisa da tutti i fornitori.
Sigillo: un solo modo di firmare, qualunque sia il documento
Sigillo è la piattaforma di firma elettronica avanzata per il personale scolastico: da un unico posto si firmano, si compilano o si prendono in visione documenti ufficiali con la propria identità SPID. Il documento singolo, quello che richiede più firmatari in un ordine preciso e la firma massiva per gli amministratori passano tutti dalla stessa pagina di dettaglio e dallo stesso passaggio SPID: nessuno deve imparare il prodotto due volte. I documenti che aspettano firme precedenti restano visibili con una spiegazione, invece di sparire. Ho progettato ogni flusso come prototipo interattivo in Axure, per desktop e mobile, con stati vuoti, di errore e di conferma e un primo accesso dedicato ai minorenni.
- Un documentoUn solo firmatario
- Più firmatariIn un ordine stabilito
- Firma massivaUn amministratore, molti documenti
- Stessa pagina
Documento
Scheda, campi da firmare, PDF.
- Stesso passaggio
Presa visione e firma
Un solo passaggio SPID.
- Stesso risultato
Firmato
PDF e firmatari.
Test A/B: lo stesso test con heatmap sulle due versioni
Il test con heatmap fatto sulle pagine esistenti, dove andavano attenzione e clic, è stato ripetuto sul redesign alle stesse condizioni, così le due versioni sono state confrontate alla pari.
Punto di partenza
I servizi com’erano.
- Cresciuti per stratificazione, incoerenti tra sistemi
- Linguaggio burocratico
- Schemi diversi da fornitore a fornitore
Ordinato per quello che c’è da fare
Sigillo dopo il redesign.
- Navigazione per stato del documento: da compilare, da firmare, in attesa, archivio
- Una sola pagina di dettaglio e un solo passaggio SPID per ogni tipo di firma
- Prima le date, una sola azione principale per documento
- I documenti in attesa restano visibili, con il motivo
Dopo il redesign l’uso di Sigillo è cresciuto del 200% e il voto medio nei questionari del Ministero è salito da 2,5 a 4,5 su 5.
Decisioni chiave
Prima il design system, poi le schermate.
Con più fornitori sullo stesso ecosistema, concordare componenti e regole all’inizio è costato tempo in avvio e l’ha restituito su ogni progetto successivo.
Una direzione comune a tutte le sezioni, costruita sul design system .italia.
Partendo dal design system ufficiale della Pubblica Amministrazione ho definito un modello condiviso di navigazione, gerarchia e tono di voce per tutti i servizi: conformità agli standard nazionali e, insieme, percorsi riconoscibili da una sezione all’altra.
Documentare per chi non c’era.
Le spec sono state scritte per team che non avevo mai incontrato, quindi ogni componente porta stati, casi limite e note di accessibilità: è la condizione perché il sistema sopravviva ai cambi di fornitore.
Risultato
- Uso di Sigillo
- +200%dopo il redesign
- Voto medio, questionari del Ministero
- 2,5 → 4,5su 5, prima e dopo il redesign
- Giri di revisione per release
- Più → 1nell’handover con 3 sviluppatori frontend