Prima di noi Roman aveva costruito l'app da solo. Il design era invecchiato, il branding era cambiato e i nuovi servizi non avevano un posto.
Quindi è stato un redesign, non un ritocco: un nuovo sistema, una nuova home, accesso e trasporti, più servizi che l'app non aveva mai avuto. Abbiamo lavorato all'app per 10 mesi; il primo MVP con il nuovo design è andato online in un mese e mezzo.
Vincoli: rilasci in parallelo allo sviluppo, nessuna ricerca con le persone, e la dimensione del testo nelle modalità di accessibilità la calcolano gli sviluppatori con una formula.
Il mio ruolo
Io e Roman portavamo avanti i flussi in parallelo e rivedevamo il lavoro l'uno dell'altra; il brand book, le icone e le animazioni sono suoi. Interamente miei: il UI kit e gli stili, l'accessibilità, l'accesso, la mappa dell'Invincibilità e il redesign di notizie, sondaggi e richiesta della carta. Le prime versioni di mappe e trasporti le abbiamo fatte insieme.
Cosa è cambiato
| Area | Prima | Dopo |
|---|---|---|
| Home | Gli stessi riquadri per tutti | Si adatta alla persona: senza accesso, senza carta, con la carta |
| Stati della carta | Testo su un banner, «chiama la hotline» | Un motivo e un'azione: «Correggi la richiesta», «Contatta l'assistenza» |
| Accesso | Un paragrafo su BankID, gli altri metodi come righe | Metodi raggruppati, 17 nuovi stati – errori, accesso ripetuto, reimpostazione del codice |
| Trasporti | Una mappa con i numeri delle linee e un'unica lista comune dei percorsi, niente metro | Una mappa, le linee della fermata con gli orari, la metro con le linee |
| Notizie ed eventi | Ogni filtro su una schermata a parte | Tutti i filtri su una schermata |
| Accessibilità | Nessuna | Testo al 100, 130 e 160%, quattro modalità colore |
| Nuovi servizi | – | «Il mio deputato», «Per i Difensori», la mappa dell'Invincibilità, un centro notifiche |
Accessibilità e sistema
L'accessibilità fa parte del sistema, non è una funzione aggiunta alla fine: alto contrasto, scala di grigi e testo al 100, 130 e 160%, con le card che crescono insieme al testo. Sotto ci sono 48 token semantici in quattro modalità, così un tema o una modalità di contrasto è un cambio di modalità, non un nuovo set di mockup. I pulsanti sono da 48 px: il cliente li voleva più bassi e ha accettato i 48 dopo che ho argomentato con gli standard.
La home si adatta alla persona
- Perché
- Le persone aprono l'app senza aver fatto l'accesso, senza la carta del residente di Kharkiv, con la carta, oppure con una richiesta in verifica o respinta. La vecchia home mostrava gli stessi riquadri a tutti.
- Cosa ho fatto
- La home cambia con lo stato: notizie e «Accedi con ID.GOV.UA», notizie per chi non ha la carta, la X-card e le azioni rapide per chi ce l'ha.
- Risultato
- Ognuno vede il proprio passo successivo invece dello stesso set di riquadri.
PrimaDopoUno stato della carta ha sempre un passo successivo
- Perché
- Nella vecchia versione lo stato era un testo su un banner. Una carta bloccata diceva «chiama la hotline», e nell'app non c'era nient'altro da fare.
- Cosa ho fatto
- Una schermata per ogni stato: cosa è successo e cosa fare. Richiesta respinta – «Correggi la richiesta»; carta bloccata – «Contatta l'assistenza». Un segnaposto per la carta mentre la richiesta è in verifica.
- Risultato
- Un rifiuto o un blocco non è più un vicolo cieco: l'azione è direttamente nella schermata dello stato.
PrimaDopoAccesso: gli stessi metodi, una scelta più chiara e tutti gli stati
- Perché
- Il vecchio accesso si apriva con un paragrafo su BankID, con gli altri metodi sotto come righe identiche.
- Cosa ho fatto
- Accesso tramite ID.GOV.UA con metodi raggruppati: firma elettronica (file, token, archivio cloud), Bank ID NBU, Diia.Signature, Diia.OAuth. La scelta «Io» o «Mio figlio», la data di nascita, l'accesso sicuro con codice e biometria.
- Risultato
- 17 nuovi stati che prima non c'erano: codice scaduto, troppi tentativi, nessuna connessione, accesso annullato, passaporto non trovato, sessione terminata e altri.
PrimaDopoTrasporti e metro
- Perché
- Nomi e CTA non erano chiari, ricerca e orari andavano rifatti, i capolinea non avevano scenari propri, e la metro nell'app non c'era proprio.
- Cosa ho fatto
- Nuovi nomi e CTA, ricerca, struttura degli orari, scenari per i capolinea, una nuova sezione metro con linee, orari e uscite, un limite ai percorsi salvati. Stati a parte: allerta aerea sulla mappa, offline, localizzazione disattivata.
- Risultato
- La metro mostra le direzioni, gli orari feriali e festivi e le uscite aperte; la mappa mostra i mezzi accessibili.
StatoI flussi sono stati approvati dal cliente. Gli orari sono stati rifatti più volte su sua richiesta; nessun test con le persone.
PrimaDopoPrototipo
Mappa dei trasporti, ricerca dei percorsi e notizie
Schermate dal design finale. Il prototipo scorre da solo; passa a «Provalo tu» per navigarlo.
- Home
- Mappa dei trasporti
- Ricerca della fermata
- Linee alla fermata
- Dettagli della linea
- Percorso sulla mappa
- Notizie ed eventi
Nuovo, prima non c'era
La vecchia versione non aveva nessuno di questi servizi. I più grandi tra i miei sono le richieste al deputato e la prenotazione «Per i Difensori».
«Il mio deputato»: richieste con stati chiari
Le persone inviavano una richiesta e non sapevano cosa ne stesse succedendo né dove trovare le risposte. Ora ci sono gli stati, il motivo se una richiesta non viene esaminata e l'intera cronologia delle risposte nella scheda della richiesta, con documenti e valutazione.
«Per i Difensori»: prenotare una visita dal telefono
Scegli una categoria di richiesta, leggi la descrizione del servizio, scegli una data e una fascia oraria libera e compili i dati del richiedente. Dopo la prenotazione c'è un biglietto con i dettagli, e la prenotazione compare nella lista sulla home del servizio. Gli enti si trovano su una mappa o in un elenco, filtrabili per quartiere e tipo. Stati a parte: nessun orario libero nella data, prenotazione non riuscita, prenotazione annullata dall'ente, visita mancata.
Filtri su una schermata, testo che si riesce a leggere
Ogni filtro degli eventi si apriva su una schermata a parte. Ora tutti i filtri sono su una schermata e quelli selezionati si azzerano con un tap. Titoli 26 px, testo 16 px, pulsanti 48 px.
- 01
Un'app cittadina sta in piedi grazie a regole comuni: ho trasformato 33 colori delle schermate approvate in stili e ho unito i toast in un unico componente, e notizie, trasporti e richieste hanno iniziato a comportarsi allo stesso modo.
- 02
Non tutto è stato accettato: avevo proposto di chiedere alle persone cosa serve nella Home e di alleggerirla, ma la Home è rimasta come approvata.
- 03
Senza ricerca, l'approvazione non diceva se le cose fossero diventate più semplici. Come passo successivo testerei con le persone la ricerca nei trasporti, gli stati delle richieste e l'interfaccia con il testo ingrandito.
