Meet Designers Italia - Il Design System per una nuova generazione di servizi pubblici
Il Team per la Trasformazione Digitale presenta a designer e agenzie il design system della Pubblica Amministrazione e spiega come partecipare alla progettazione dei servizi pubblici italiani.
le "piattaforme abilitanti", l'ossatura infrastrutturale per i servizi digitali del paese. ➔ Anagrafe Nazionale Popolazione Residente (ANPR) ➔ progetto IO - Cittadinanza digitale ➔ Codice Amministrazione Digitale (CAD) ➔ Data & Analytics Framework (DAF) ➔ Designers Italia ➔ Developers Italia ➔ Ecosistema di API ➔ Docs Italia ➔ Pagamenti digitali PagoPA ➔ Piano trasformazione digitale ➔ Sistema Pubblico di Identita Digitale (SPID)
come ponte fra la tecnologia e le persone ➔ progetti concreti insieme alla parte più tech del team Il redesign del flusso di pagamento del servizio pagoPA
impatto enorme Un particolare dello UI Kit Nuovo sistema di prenotazione della carta d’identità elettronica 1min risparmiato a transazione x 1mln utenti / anno = 2k giorni / uomo risparmiati
Director ➔ Service Designer ➔ UI & Interaction Designer ➔ Content Designer ➔ User Researcher ➔ Frontend Developer Mai abbastanza Abbiamo coinvolto esperti, collaboratori e professionisti per completare il quadro delle competenze
concept di servizio e i requisiti per la sua progettazione. I kit utili per l’analisi dell’attuale esperienza d’uso di un servizio e del sistema di attori coinvolti. I kit utili per costruire la nuova esperienza d’uso del servizio digitale e lavorare in team.
gli utenti interagiscono con un servizio digitale per renderlo più usabile Ecosystem map Identifica i soggetti coinvolti nell’erogazione di un servizio e analizza le loro connessioni User interview Intervista gli utenti del servizio per identificare i loro bisogni, motivazioni e frustrazioni Web Analytics Osserva i comportamenti degli utenti partendo dai dati di utilizzo del servizio IDEARE Co-design workshop Genera idee coinvolgendo utenti e stakeholder di un servizio Personas Assumi la prospettiva dell’utente per ideare soluzioni valide, basate su necessità concrete User journey Analizza tutti i passaggi dell'esperienza d’uso di un servizio e individua le opportunità di intervento User stories Descrivi le principali narrative di utilizzo di un servizio per individuare più facilmente requisiti e funzionalità Information architecture Organizza la struttura dei contenuti in modo chiaro, efficace e coerente FARE UI kit Progetta l’interfaccia di un servizio con uno stile grafico semplice e coerente Web toolkit Costruisci siti, applicazioni e servizi web in assoluta semplicità Content kit Gestisci i contenuti e organizza la strategia editoriale in modo collaborativo Wireframe kit (in lavorazione) Definisci il modello di interazione e l’organizzazione di informazioni e contenuti nelle schermate SEO (in lavorazione) Progetta e ottimizza i contenuti del sito in base ai bisogni e le priorità che gli utenti esprimono durante le ricerche web
Il kit contiene i materiali per preparare e gestire un workshop di co-design. Le sessioni di co-progettazione aiutano ad allineare il punto di vista di tutti gli stakeholder coinvolti in un progetto e identificare velocemente delle opportunità progettuali valide. Analisi di una mappa di sistema: criticità e opportunità
contiene ➔ Un esempio di agenda per organizzare un workshop di Co-Design ➔ Dei fogli di lavoro per: Descrivere le personas Strutturare una system map Analizzare una user journey ➔ Un esempio di esercizio di card sorting Fogli per la descrizione dei personas
del workshop agenda della giornata lancio esercizio 01 lancio esercizio 02 momento di pausa lancio esercizio 03 condivisione risultati https://docs.google.com/presentation/d/1dQqoq6hHBaFQ8Elz21tLrldvJJKo_7oC6FrtG3B9B60/edit?usp=sharing
approfondire Al kit per Co-Design Workshop sono associate le linee guida di service design, che spiegano come orientare la progettazione di un servizio digitale intorno alle effettive esigenze degli utenti, e descrivono nel dettaglio gli strumenti di co-progettazione.
blog di Designers Italia raccontiamo per esempio un case study su come abbiamo utilizzato gli strumenti di co-progettazione per facilitare una sessione di lavoro su SPID, coinvolgendo i principali interlocutori coinvolti sul progetto in una serie di esercizi di analisi dei casi d’uso e generazione di idee. Esperienze utili
WEB TOOLKIT Come sono usati Lo UI Kit e i Web Toolkit possono essere utilizzati per realizzare siti e applicazioni mobili di comuni, scuole, enti, ministeri e altri servizi pubblici. Esempi di applicazione di UI/Web Kit
WEB TOOLKIT Cosa c’è in questi kit? Lo UI Kit e i Web Toolkit e mettono a disposizione librerie di elementi grafici e codice sorgente già pronti e validati per la creazione di interfacce conformi alle Linee Guida di design per i servizi web della Pubblica Amministrazione.
WEB TOOLKIT I kit migliorano e apprendono da: ➔ nuovi progetti ➔ comunità e feedback dei cittadini ➔ nuovi pattern di design ➔ esperienze di altri governi ➔ errori In continua evoluzione Il processo di creazione dei kit non è sempre lineare.
WEB TOOLKIT Come approfondire Allo UI Kit sono associate linee guida per la User interface*, per la realizzazione di interfacce di servizi pubblici moderni e semplici da usare, che chiariscono ➔ Principi ➔ Stili e Pattern ➔ Best practices * con nuovi aggiornamenti nelle prossime settimane!
WEB TOOLKIT Sul blog di Designers Italia un post ci porta “alla scoperta dello UI kit partendo dalle basi”, raccontando nel dettaglio: ➔ come costruire un grid system ➔ con quali criteri abbiamo realizzato quello contenuto all’interno del kit Dal blog di Designers Italia
sui contenuti Il kit dedicato ai contenuti propone una guida al linguaggio della Pubblica Amministrazione, strumenti per organizzare un workflow per la creazione e gestione dei contenuti e degli esempi di scrittura e revisione collaborativa. Content kit Progettare, gestire, scrivere
Il kit semplifica la pianificazione, preparazione e conduzione di sessioni di osservazione diretta dell’interazione tra utente e servizio digitale, fornendo tutti gli allegati necessari secondo quanto previsto dal protocollo ufficiale per la conduzione di test di usabilità. Usability Test Osserva come gli utenti interagiscono con un servizio digitale per renderlo più usabile
contiene Esempio di modulo per la raccolta del consenso al trattamento dei dati Questo kit fornisce tutti gli strumenti necessari per la preparazione, conduzione e l’analisi dei risultati di test di usabilità, per osservare in che modo un utente interagisce con un servizio digitale.
approfondire Le linee guida forniscono l’approfondimento metodologico che guida l’utilizzo dei kit, spiegando nel dettaglio come svolgere le diverse attività.
blog di Designers Italia parliamo di come migliorare i servizi digitali di un Comune utilizzando i test di usabilità. Per farlo, raccontiamo alcuni esempi di test di usabilità realizzati per “rendere più chiara l’organizzazione dei contenuti e i menu di navigazione” dentro alcuni siti di Comuni. Esperienze utili
il design di nuovi servizi al cittadino, fornendo piattaforme centralizzate come SPID o PagoPA, permette: → Alle Pubbliche Amministrazioni di adottare e riutilizzare piattaforme testate e costantemente evolute, per fornire un’esperienza coerente associata a momenti specifici dello user journey → Ai designer di concentrarsi sulla ricerca con gli utenti e sulla progettazione dell’innovazione legata al servizio → Ai cittadini di riconoscere e imparare a utilizzare un set di servizi efficaci e che rimangono coerenti pur se erogati da amministrazioni diverse
è l’identità digitale rilasciata a tutti i cittadini maggiorenni (per ora ;-)). Permette di accedere a tutti i servizi online della Pubblica Amministrazione e dei privati accreditati, con un'unica Identità Digitale (nome utente e password) ed è utilizzabile da computer, tablet e smartphone. Cos’è SPID? 2.593.842 Totale Identità Rilasciate +176% Tasso di crescita da Gennaio 2017 4.016 Numero di PA che usano il servizio
sono i vantaggi? PER IL CITTADINO PER I SERVICE PROVIDER → Ricordarsi un unico set di credenziali per tutti i servizi della PA e non solo. → Privacy e sicurezza: SPID comunica al service provider solo i dati necessari a svolgere un certo servizio. → Validità a livello europeo. → Non dover più implementare e gestire il proprio sistema di account proprietario. → La garanzia di un riconoscimento sicuro. → L’utilizzo di un sistema conforme ai requisiti eID della commissione Europea.
più livelli di sicurezza (LoA) ➔ possibilità di ottenere uno SPID professionale che sblocchi funzionalità dedicate ai professionisti ➔ possibilità di firmare online, favorendo l’implementazione di processi end-to-end online ➔ possibilità di gestire flussi di delega tra utenti SPID in maniera sicura SPID I casi d’uso
GESTIRE VERSIONE 1.0 IN SVILUPPO siti service provider sito ufficiale spid.gov.it siti Identity Provider “scivolo” presso enti selezionati richiesta nuova identità presso IdP autenticazione livello 1 autenticazione livello 2 riuso identità pregresse per riconoscimento campagne social forum autenticazione livello 3 delega ad altro cittadino firma con SPID accesso su SP europei uso professionale recupero credenziali modifica accettazione condizioni cambio password diritto all’oblio log degli accessi obbligatorio SPID per minorenni Attribute Authority
i pagamenti digitali dei cittadini verso lo stato. Mette in relazione i soggetti che partecipano alla transazione economica: i cittadini, gli enti pubblici (creditori), gli istituti di pagamento (le banche), gli strumenti di pagamento (carte di credito, paypal, satispay, etc.), i canali fisici di pagamento (uffici postali, tabaccai, etc.) Il "paypal" della pubblica amministrazione PagoPA, il nodo centrale per i pagamenti verso lo stato. 9.947.702 Totale Transazioni +219% Tasso di crescita 2017 vs 2018 16.920 Numero di PA che usano il servizio
➔ pagare come e dove preferisce: in digitale con l'home banking, con la carta di credito, con paypal, con satispay, oppure fisicamente in posta, al tabaccaio, in ricevitoria, al supermercato. ➔ vedere lo storico di tutte le proprie transazioni verso la pubblica amministrazione. ➔ salvare i propri strumenti di pagamento preferiti e riutilizzarli ogni volta che vuole ➔ essere sicuro di pagare la somma corretta: quando si inizia una transazione l'importo viene attualizzato automaticamente comprendendo eventuali rimborsi o interessi di mora. ➔ ricevere un avviso digitale e cartaceo unico, uguale per tutti gli enti, e pagarlo anche tramite qr code da molte app ➔ La prova del pagamento (quietanza liberatoria) è subito disponibile insieme alla ricevuta della transazione.
➔ riconciliazione automatica degli incassi: la somma viene riversata da pagoPA nelle casse dell'ente creditore ➔ riduzione dei costi di transazione e processo, che è in massima parte automatico ➔ avviso di pagamento standard più economico e più semplice da leggere ➔ maggiori incassi prima della scadenza, data la maggior facilità nei pagamenti ed il numero maggiore di strumenti a disposizione. ➔ minori costi di notifica per eventuali morosità
"spontanei" del cittadino presso il sito dell'ente ➔ pagamenti dall'applicazione mobile dell'ente grazie all'integrazione degli SDK IOS e Android ➔ pagamento di un avviso cartaceo dalla app di home banking del cittadino ➔ notifica e pagamento dalla app (web o mobile) di home banking ➔ Agenzia delle Entrate - Riscossione ➔ Istituto Nazionale per l'Assicurazione contro gli Infortuni sul Lavoro - INAIL ➔ Automobile Club d'Italia ➔ Comune di Milano ➔ Regione Veneto ➔ Ministero della Giustizia ➔ Regione Piemonte ➔ ROMA CAPITALE ➔ Istituto Nazionale Previdenza Sociale - INPS ➔ Regione Liguria I primi 10 enti per numero (assoluto) di transazioni
sito o app pagoPA Ente Creditore backend Conto bancario utente Conto bancario ente AVVISO PAGAMENTO RICONCI- LIAZIONE ricevuta quietanza avviso e-mail e/o cartaceo avviso in-app wizard di pagamento (WISP) home banking web/app
i cittadini Il progetto IO, l'app dei servizi pubblici ➔ Funzioni condivise da tutti i servizi digitali erogate da piattaforme centrali a disposizione degli enti: messaggi, pagamenti, documenti, preferenze, identità. ➔ Una semplice app mobile per consentire ai cittadini di usare queste funzioni
vi serve... Open source everything! #1 ➔ In estate uscirà un Minimum Viable Product (lo facciamo in Agile, ma per davvero) ➔ stiamo sviluppando tutto completamente open source ➔ tutti gli strumenti di gestione del progetto sono aperti: github, pivotal tracker, slack, invision ➔ seguiamo le best practice internazionali e le linee guida di developers italia ➔ usiamo IO per testare lo UI kit e/o per estrarne dei componenti che poi vengono generalizzati ➔ Il codice della app di IO viene realizzato a moduli (es login spid) che poi possono essere riutilizzati in altri progetti ➔ La documentazione dell'app è molto dettagliata per costruire un’ eventuale ossatura di altre app simili di enti o di aziende ;-) ➔ le API di IO saranno disponibili a tutti gli enti pubblici secondo standard aperti
Italia è la comunità degli sviluppatori che, assieme a Designers Italia, è il punto di riferimento per la progettazione e la realizzazione di servizi pubblici digitali.
di lavoro e gli strumenti nati nel mondo open source, che sono ormai modello di riferimento mondiale per lo sviluppo di soluzioni software. Non solo gli sviluppatori, ma anche i designers usano strumenti collaborativi come GitHub o Sketch Cloud. Portiamo questi metodi nella Pubblica Amministrazione. Lo facciamo attraverso le community e anche attraverso le leggi!
partner esterni lavorano insieme per ottenere risultati concreti in modo più rapido, di migliore qualità e validati da tutti. Utilizziamo un modello di sviluppo condiviso che ci permette di “usare” alcuni progetti chiave per sperimentare metodologie di lavoro virtuose. Open Governance Developers Italia
Piattaforme Abilitanti*, cioè tutte quelle funzionalità trasversali che aiutano a portare a compimento servizi digitali al cittadino, per consolidare pratiche di design e sviluppo solide e validate. * ➔ Carta d'Identità Elettronica (CIE) ➔ Fattura elettronica ➔ Anagrafe Nazionale della Popolazione Residente (ANPR) ➔ Data & Analytics Framework (DAF) ➔ Nodo di pagamento verso la Pubblica Amministrazione (PagoPA) ➔ Sistema Pubblico di Identità Digitale (SPID) ➔ Le community di DevOps Italia e Designers Italia
open source Schede di progetti software indicizzati. Possibilità di visibilità per i maintainer dei progetti, anche privati. Abilita un meccanismo virtuoso di evoluzione del codice open-source.
pubblicare, leggere, organizzare, cercare e commentare documenti. Si integra con gli altri strumenti della trasformazione digitale. Documentazione tecnica, ma anche circolari, linee guida (FP) e leggi (CAD).
modo migliore per partecipare all’affermazione del design system che proponiamo e aiutarci a migliorarlo è… usare le risorse e i modelli proposti da Designers Italia! Ogni volta che ti capita di lavorare a un progetto legato a un servizio pubblico digitale, approfitta delle risorse messe a disposizione dalla Community, aiutaci a farle evolvere, raccontaci la tua esperienza.
Il Piano per l’informatica nella Pubblica Amministrazione ti mette a disposizione tre strumenti di supporto, dove trovare informazioni, fare domande e scaricare materiali: - Forum.italia - GitHub - Docs Italia Inoltre puoi utilizzare i canali Slack di Developers Italia dedicati al design
una community aperta alla partecipazione di tutti i designers e i professionisti della Pubblica Amministrazione. Per questo puoi partecipare attivamente: ➔ alimentando il design system, partecipando all’evoluzione dei kit attraverso dei repository pubblici su GitHub ➔ partecipando all’evoluzione delle Linee guida di design della Pubblica Amministrazione
parte alla discussione sul design dei servizi pubblici sul forum di Designers Italia ➔ seguendoci sui social e leggendo la nostra newsletter Inoltre puoi partecipare alla vita della community di Designers Italia:
di Designers Italia è aperto alla partecipazione di tutti i professionisti del design e della Pubblica Amministrazione che abbiano esperienza nella progettazione di servizi pubblici. Puoi mettere in condivisione le tue esperienze in questo ambito scrivendo e pubblicando dei guest post tra le pagine del blog.
Amministrazione ha bisogno di design Designers Italia nasce per avvicinare (per quanto possibile) il mondo del design e la Pubblica Amministrazione Uno dei modi di farlo è diffondere alcune informazioni di base sui processi di acquisto della Pubblica Amministrazione
di acquisire i beni e i servizi di cui hanno bisogno attraverso gli strumenti messi a disposizione da Consip S.p.A., la “centrale acquisti” della Pubblica amministrazione italiana, con azionista unico il Ministero dell'Economia e delle Finanze. Gli strumenti Consip sono sostanzialmente due: 1. Convenzioni/accordi quadro 2. Mercato elettronico della P.A. (MePA) GLI ACQUISTI DELLA P.A.
l’acquisizione di servizi di interesse generale delle PP.AA., stipulando una Convenzione/accordo quadro con l’aggiudicatario/i. Tali accordi consentono alle PP.AA. di effettuare acquisti direttamente dagli aggiudicatari, alle condizioni e ai prezzi stabiliti nelle convenzioni, fino al raggiungimento del quantitativo o dell’importo di proprio interesse. Le PP.AA. dopo aver definito, con il supporto dell’aggiudicatario, il proprio fabbisogno, stipulano con il fornitore un contratto esecutivo. GLI ACQUISTI DELLA P.A. Strumenti di acquisto: Convenzioni/Accordi quadro 01
di beni e servizi offerti dai fornitori abilitati, per importi inferiori alla soglia comunitaria. Il MePA è aperto a tutti gli operatori economici che si abilitano. Gli acquisti sul MePA possono essere effettuati attraverso tre strumenti: 1. Ordine diretto di Acquisto (OdA); 2. Trattativa diretta; 3. Richiesta di Offerta (RdO). OdA e TD sono utilizzati, in genere, per gli affidamenti diretti (< € 40 mila), nei quali le P.A. possono rivolgersi direttamente ad un singolo fornitore abilitato; la RdO è utilizzata per gli acquisti fino alla soglia comunitaria e prevede l’invito di almeno 5 operatori economici. GLI ACQUISTI DELLA P.A. Strumenti di acquisto: MePA 02
bandi del Mercato elettronico a cui i fornitori possono abilitarsi, se soddisfano le condizioni generali e i requisiti fissati nel bando • FASE 2 I fornitori si abilitano (e pubblicano le loro offerte per i prodotti a catalogo) • FASE 3 Le Amministrazioni emettono ordini d’acquisto (OdA) o negoziano prezzi e condizioni di fornitura migliorativi attraverso richieste d’offerta RdO e trattative dirette TD GLI ACQUISTI DELLA P.A. Strumenti di acquisto: MePA 02
gare pubblicate per l’aggiudicazione di una Convenzione/Accordo quadro ovvero abilitandosi al MePA. Consigli utili: - Effettuare una mappatura dei bandi ed iscriversi a tutti quelli di proprio interesse - Per i servizi ICT, oltre a bandi specifici, iscriversi anche al bando “Servizi per l’information and communication technology” - Indicare, se possibile, un indirizzo mail ad hoc per ricevere le comunicazioni del MePA e gli inviti del MePA a presentare offerta alle procedure bandite dalle PP.AA. - Documentazione: analizzare attentamente la documentazione di gara ed in particolare individuare la documentazione amministrativa da presentare per partecipare e le caratteristiche tecniche del servizio richiesto, al fine di una corretta formulazione dell’offerta tecnica ed economica GLI ACQUISTI DELLA P.A. Cosa devono fare gli operatori che vogliono lavorare con la P.A.? Qualche consiglio utile . . .
vogliono lavorare con la P.A.? Qualche consiglio utile . . . - Garanzia provvisoria: oltre alla ordinaria fideiussione bancaria o assicurativa è possibile il deposito cauzionale presso le Tesorerie provinciali dello Stato la cui costituzione è più veloce - Iscriversi al portale ANAC-Servizio AVCPASS, per ottenere in relazione alla singola gara il codice PassOE - Caricare tutta la documentazione richiesta nelle apposite sezioni, facendo attenzione a non caricare documentazione attinente all’offerta economica in sezioni dedicate alla documentazione amministrativa o tecnica (conoscere elementi economici dell’offerta prima della seduta economica potrebbe determinare l’esclusione) - Controllare sul portale MePA la pubblicazione di RdO aperte di proprio interesse, perché per tali RdO il MePA non invia comunicazioni agli operatori economici; - Controllare i siti internet delle PP.AA. (amministrazione trasparente/bandi e contratti), per verificare la presenza di eventuali indagini di mercato propedeutiche alla pubblicazione di procedure sul MePA.
è il luogo virtuale in cui P.A. e operatori economici, anche di piccole dimensioni, possono incontrarsi. Un corretto utilizzo del MePA, per le gare sotto soglia comunitaria, da parte delle PP.AA. e degli operatori economici: - per la P.A. determina un ampliamento del ventaglio di scelta, con la possibilità di confrontare prodotti e servizi offerti da fornitori presenti su tutto il territorio nazionale; - gli Operatori Economici, anche di piccole dimensioni, possono avere accesso al mercato della P.A. su tutto il territorio nazionale.
analizzato il modello di procurement di GDS, uno dei più avanzati e sta lavorando a una serie di indicazioni sul procuremente che verranno inseriti nel Piano Triennale
della PA indicheremo che tutti gli enti devono inserire riferimento alle linee guida nei capitolati di gara Cosa c’è nelle linee guida? 1. project management 2. processo di design 3. competenze di design 4. servizi di design (ricerca, prototipazione, sviluppo) 5. protocolli e kit da usare per realizzare i servizi
costruito un capitolato di gara che segue un percorso human-centered design ll capitolato contiene un template che guida l’agenzia nel rispondere (per non dimenticarsi nulla) Lo renderemo disponibile sul sito Designers Italia, e aggiungeremo altri modelli in modo da aiutare le Pubbliche Amministrazioni a scrivere capitolati più vicini al design dei servizi
di lavoro è relativa alla possibilità di codificare meglio i servizi di design, per far capire meglio alle pubbliche amministrazioni cosa devono acquistare (e in quale fase) L’idea è questa • creare dentro Designers Italia una vetrina di servizi “acquistabili” dalla Pubblica Amministrazione • introdurre logica pacchetti (nuovi servizi / redesign servizi / cicli di ottimizzazione) • prevedere che ciascuno di questi possa fare riferimento a un “percorso” nel MEPA.
partenza Il livello di interazione dei siti web delle scuole è molto limitato, con servizi digitali ridotti, se non del tutto assenti. Il cartaceo (autorizzazioni, circolari, giustificazioni) la fa ancora da padrone pressoché dovunque.
partenza Altro elemento critico è costituito dalla relazione fra il sito web della scuola e il registro elettronico, piattaforma di uso obbligatorio, ma realizzata e offerta da privati.
di quest’anno come Lcd, studio di design della comunicazione, e Bsd, studio di human-computer interaction, abbiamo vinto la gara indetta dalla Presidenza del Consiglio per la realizzazione di un modello web delle scuole.
succede spesso le procedure delle gare Mepa, così come quelle di aggiudicazione, sono estremamente complesse ma, forse per la prima volta, il capitolato redatto dal Team Digitale è stato rispondente ai metodi e ai tempi del progetto di design.
riguarda il coinvolgimento degli stakeholder che si è basato su La ricerca qualitativa → Interviste individuali → Focus group → Workshop di co-design Il sito scolastico dovrebbe essere Google: scrivi ciò di cui hai bisogno e ottieni immediatamente il risultato. ” “
personas svolgono sul sito della scuola hanno portato a definire la serie degli User Journey, necessaria per la definizione della flowchart e della navigazione. Tutta la documentazione di ricerca prodotta sarà resa pubblica attraverso Read The Docs. La ricerca qualitativa
integra gli elementi presenti sullo UI Kit. La presenza del Team Digitale come interfaccia con la pubblica amministrazione ha permesso l’utilizzo di strumenti di design innovativi (Sketch, Slack, GitHub, Invision, Read the Docs). La prototipazione Lo-fi
diffondere il design system e il suo utilizzo. Il cittadino del futuro: un evento a Settembre per costruire insieme una visione su alcuni servizi verticali.