6 Settembre 2022

Applicazione per la raccolta firme del Consiglio Regionale del Piemonte

Home / News / Progetti svolti / Applicazione per la raccolta firme del Consiglio Regionale del Piemonte

Autore

Team di Wave Informatica

Categoria

Progetti svolti

Gli obiettivi

Il progetto aveva come obiettivo principale il rifacimento dell’applicativo “Raccolta firme”, un’applicazione utilizzata dagli operatori del Consiglio Regionale del Piemonte, per l’inserimento delle firme dei cittadini relative ai referendum e alle proposte di legge di iniziativa popolare.

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

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 cui per accedervi si doveva implementare un sistema di autenticazione robusto.

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, la sfida più grande è stata creare una nuova interfaccia grafica di facile comprensione per l’utente finale, che utilizza l’applicazione per periodi brevi e sporadici, ma molto intensi, trovandosi ad inserire centinaia di firme al giorno.

Fasi del progetto

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.

Le schermate del mockup grafico

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 e sono stati eseguiti tutti i test di sicurezza e di usabilità.

Risultati

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

Oggi gli operatori hanno a disposizione una piattaforma moderna, intuitiva, che permette loro di inserire migliaia di firme in tempi ridotti, con un aumento sensibile dell’efficienza operativa.