UX/UI Agid compliant per applicativo del Consiglio Regionale del Piemonte

Nome cliente

Consiglio Regionale del Piemonte

Sede principale

Torino

Settori di riferimento

Pubblica Amministrazione, Servizi Digitali al cittadino

Competenze coinvolte

UX/UI Design, Prototipazione, Accessibilità digitale, Design System Designers Italia, Web Development, Testing e sicurezza applicativa

Tecnologie utilizzate

Angular, HTML, CSS, Sass, JavaScript, Bootstrap Italia, Figma, Designers Italia Kit

In breve: obiettivi, soluzione e risultati

L’applicativo “Raccolta firme” del Consiglio Regionale del Piemonte, usato per gestire le firme dei cittadini relative a referendum e proposte di legge, necessitava di una completa revisione tecnica e grafica.
La vecchia versione era installata localmente, priva di autenticazione e con problemi di sicurezza, efficienza e usabilità.
Wave Informatica ha progettato e sviluppato una nuova piattaforma web moderna, sicura e veloce, con sistema di autenticazione integrato e interfaccia conforme alle linee guida AGID.
Il team ha curato l’intero ciclo di progetto: analisi dei requisiti, UX/UI design con kit Designers Italia, prototipazione interattiva e sviluppo in Angular.
Applicativo web affidabile, conforme alle direttive AGID, con UX/UI ottimizzata per gli operatori.
Navigazione chiara, controlli per rilevare firme duplicate, notifiche di sistema, shortcut e breadcrumb rendono l’inserimento delle firme più rapido ed efficiente.

L’applicazione è stata inoltre pubblicata sulla piattaforma Developers Italia, diventando un software open-source per il riuso da parte della Pubblica Amministrazione Italiana.
1. Fase 1: Analisi e definizione requisiti
2. Fase 2: Definizione degli user flows
3. Fase 3: Prototipo interattivo ad alta fedeltà della user experience e user interface
4. Fase 4: Sviluppo del backend e del frontend (con Angular)
5. Fase 5: Pubblicazione e test di sicurezza
6. Fase 6: Supporto e manutenzione

Con questo progetto, Wave Informatica ha contribuito alla digitalizzazione sicura e accessibile della partecipazione democratica in Piemonte, riducendo i tempi operativi e aumentando l’affidabilità dei processi di raccolta firme.

Gli obiettivi

Il progetto aveva come obiettivo principale il rifacimento dell’applicativo “Raccolta firme”, utilizzato dagli operatori del Consiglio Regionale del Piemonte per la gestione delle firme dei cittadini.

Questa piattaforma svolge un ruolo essenziale nei processi democratici, perché consente di monitorare in tempo reale l’avanzamento delle sottoscrizioni e di garantire la validità delle iniziative popolari.

Trattandosi di iniziative che, per essere poi approvate, hanno bisogno di raggiungere un numero minimo di firme, l’applicazione deve poter rilevare se la stessa persona ha apposto più di una firma per la stessa iniziativa.

Un altro aspetto molto importante riguardava lo UX/UI Design: l’esperienza utente e il design necessitavano di un adeguamento rispetto alle nuove Linee Guida AGID.

Le sfide tecniche e di design

Mentre in precedenza l’applicativo veniva installato localmente sulle macchine (i computer) degli operatori e senza sistema di autenticazione, con evidenti rischi per la sicurezza dei dati personali trattati, la nuova piattaforma sarebbe stata sviluppata con tecnologie web moderne.

Per questo è stato necessario introdurre un sistema di autenticazione robusto, che garantisse la protezione dei dati sensibili e la tracciabilità delle operazioni effettuate dagli operatori.

L’Ente, inoltre, ha voluto ristrutturare la piattaforma per ridurre i tempi di caricamento, in modo da massimizzare l’efficienza degli operatori e ridurre i costi di gestione.

Dal punto di vista del design, lla sfida più grande è stata creare una nuova interfaccia grafica di facile comprensione per l’utente finale, che utilizza l’applicazione per periodi brevi e intensi.

Per rispondere a questa esigenza, il team di UX/UI Design ha progettato un’interfaccia basata su percorsi visivi immediati, messaggi di feedback chiari e scorciatoie operative.

Le fasi progettuali e di sviluppo

1. Analisi e definizione dei requisiti

Insieme al committente abbiamo scritto un documento di analisi, in cui sono stati riportati la vista d’insieme del progetto, i requisiti di business, le caratteristiche della soluzione tecnica proposta e il piano di rilasci.

2. UX/UI Design

Dopo la prima fase di analisi e definizione dei requisiti, abbiamo realizzato un mockup grafico delle schermate, basandoci in parte sui percorsi utente (o user journey) pre-esistenti.

Il mockup è stato creato utilizzando il kit per la Progettazione interfaccia di Designers Italia, per ottenere un aspetto grafico vicino a quello dei sistemi digitali della Pubblica Amministrazione. Il tema è stato poi personalizzato con i colori e gli elementi caratteristici del Consiglio Regionale del Piemonte.

3. Prototipazione

Partendo dal mockup grafico ad alta fedeltà, abbiamo aggiunto gli elementi interattivi.

Il prototipo è stato utilizzato come strumento di test, sia dal team interno che dal committente.

4. Sviluppo

Una volta apportate le ultime modifiche al prototipo grafico, i nostri developer hanno sviluppato l’applicativo, basato sul framework Angular 2.

5. Pubblicazione

L’applicazione è stata messa in produzione dopo un ciclo completo di test di sicurezza e usabilità, garantendo la protezione dei dati sensibili dei cittadini e un’interazione fluida per gli operatori.

Risultati ottenuti e impatto operativo

Il risultato finale è un’applicativo moderno, affidabile, che va incontro alle esigenze dell’utente utilizzatore grazie ad elementi di UX/UI come ad esempio:

bottoni e link shortcut, scorciatoie per svolgere le operazioni più rapidamente;
notifiche e messaggi di sistema chiari;
controlli che avvertono se una firma è già stata inserita;
elementi di navigazione.

Di seguito alcune immagini esemplificative:

Le righe delle tabelle contengono link e bottoni per compiere azioni rapide, come l’eliminazione e la modifica.

I controlli in JavaScript agevolano il lavoro dell’operatore e avvertono in caso di firme duplicate od omonime

I breadcrumb sono un elemento di navigazione utilissimo per far capire all’utente dove si trova e tornare rapidamente alle pagine precedenti

L’utente riceve dei messaggi di notifica chiari e con informazioni specifiche

Oggi gli operatori hanno a disposizione una piattaforma moderna e intuitiva, grazie alla quale possono inserire migliaia di firme in tempi ridotti, con un sensibile aumento dell’efficienza operativa e una riduzione dei margini di errore.

Pubblicazione dell’applicativo su Developers Italia

L’applicazione FIRMIP – Raccolta firme di iniziative popolare è stata inoltre pubblicata sul portale Developers Italia, il punto di riferimento per il software della Pubblica Amministrazione.

Pagina ufficiale dell’applicativo FIRMIP: https://developers.italia.it/en/software/github.com/regione-piemonte/firmip.html

Pagina ufficiale del repository: https://github.com/regione-piemonte/firmip