MyCicero — UX Case Study

Redesign di un’app per la sosta in parcheggi a pagamento e l’acquisto di biglietti per i mezzi pubblici. 🚋 🚎 🚗

Qualche mese fa ho deciso di intraprendere un percorso di studi all’Interaction Design Foundation seguendo dei corsi di UX e Interaction Design, così da ampliare il mio bagaglio di conoscenze e poter migliorare i miei processi di progettazione.

Questo case study è un progetto personale di redesign che nasce proprio dall’esigenza di mettere in pratica quanto appreso fino ad ora e verificare in modo tangibile i progressi e le nuove competenze acquisite. Ed essendo un progetto a 0 budget e senza il supporto di un team di design, una delle sfide più grandi che ho dovuto affrontare è stata proprio quella di lavorare autonomamente per raggiungere un risultato che fosse altamente qualitativo. Affrontando le sfide e i limiti con cui normalmente ci si imbatte quando si intraprende questo genere di progetti.

Molto spesso leggo di UX Case Study che affrontano sfide di redesign di piattaforme famose ben consolidate, che hanno a loro interno dei team di design ben strutturati con i quali difficilmente un solo designer può competere.

Per questo motivo ho deciso di lasciarmi ispirare, pubblicando una story su Instagram chiedendo ai miei followers quale app trovassero particolarmente difficile da usare.

Ho ricevuto diverse risposte! Un caro amico ha citato un mio progetto personale, Hashintag, con spirito goliardico (o almeno spero!).

Poi c’è chi ha citato Tinder, e si, conosco molti amici che effettivamente trovano l’app frustrante, ma credo sia per motivi non amputabili alla progettazione dell’app. (Si insomma ci siamo capiti 😏)

Poi una risposta che ha colto nel segno e che ho riconosciuto come campo fertile per il mio case study: MyCicero.

MyCicero è un’app per l’acquisto di biglietti per mezzi pubblici e per la sosta nei parcheggi a pagamento. Mi è capitato di usarla qualche volta in trasferta a Roma per muovermi più agevolmente. Di per se l’app funziona e ha le potenzialità per essere un must to have per tutte le persone che si trovano a dover fare spostamenti sia di piacere che di lavoro. Tuttavia ho riscontrato qualche problema nell’utilizzo in più di un’occasione, e penso che ci siano molti margini di miglioramento da mettere in pratica.

Diamoci dentro! 💪

Quali sono quindi le opportunità di miglioramento per l’app attuale?

La metodologia che ho deciso di adottare (motivo per il quale ho iniziato questo progetto) è quella di Design Thinking, un metodo di progettazione che suddivide in varie fasi il flusso di lavoro e che permette di ottenere risultati che prestano maggior attenzione ai bisogni e agli obiettivi delle persone.

Empathyse

Trattandosi di un progetto personale non ho potuto attingere a grandi risorse (e tempo!), tantomeno a un team strutturato che potesse darmi supporto soprattutto in una fase delicata come quella di ricerca.
Ho cercato quindi di rendere fruttuosi gli strumenti a mia disposizione svolgendo della desk research e una valutazione autonoma sull’app attuale, così da far emergere tutte le frizioni attuali.

Desk Research

Trattandosi di un’app già rilasciata, è stato facile raccogliere le prime informazioni dall’App Store. Infatti è stato prezioso analizzare le recensioni lasciate dagli utenti e poter comprendere quali fossero le principali frustrazioni.

Molte delle quali avevano tantissimi punti in comune tra loro: come per esempio l’interfaccia poco intuitiva, la mancanza di integrazione con i sistemi wallet, o anche l’estetica che risulta nel complesso poco gradevole.

Valutazione sull’usabilità

Come designer ho deciso di svolgere una valutazione sull’usabilità dell’app testando ogni funzione. Andando a snocciolare ogni piccola parte sono riuscito ad individuare diversi pain points, per esempio la presenza di margini e spaziature ingiustificate, elementi interattivi che non rispettano la misura minima dell’utilizzo touch, o anche la scelta di icone che non rappresentano efficacemente la voce interessata.

Define the problems

Personas

L’analisi delle informazioni raccolte mi ha permesso di delineare due Personas, con caratteristiche e necessità molto diverse:

Roberta è una ragazza di 31 anni residente a Milano, copywriter di professione che utilizza l’app per l’acquisto dei biglietti della metro e del bus per le sue trasferte a Roma.

Carlo invece è un uomo di 42 anni residente a Brescia, lavora come agente commerciale per la sua azienda assicurativa e utilizza MyCicero soprattutto per parcheggiare l’auto aziendale nelle strisce blu.

Empathy Map

Ho realizzato per ciascuna Personas delle Empathy Map, e man mano che l’attività procedeva Roberta e Carlo acquisivano elementi che mi aiutavano a comprenderli sempre di più.

User Journey

Infine ho esplorato la loro esperienza con l’app attuale elaborando delle User Journey e andando ad evidenziare due scenari e task diversi. Per Roberta si tratta di acquistare un biglietto della metro e per Carlo di prenotare la sosta su un parcheggio a strisce blu.

Riassumendo, quali sono le problematiche?

Sulla base delle informazioni raccolte e l’utilizzo degli strumenti UX, è emerso quindi che:

  • L’interfaccia è poco intuitiva e presenta problemi di usabilità
  • La compilazione dei dati è complicata, soprattutto l’inserimento dell’orario nella sezione “Sosta”
  • Non è chiara la categorizzazione delle voci in Home
  • Mancano dei sistemi di pagamento rapidi (es: Paypal)
  • L’app non comunica con le funzionalità Wallet (Apple, Google)
  • Esteticamente risulta poco gradevole

Ideate

User Flow

La fase di ideazione inizia con la rielaborazione del flusso di utilizzo dell’app, per rendere l’esperienza più fluida e semplice, avendo bene in mente i task da portare a termine.

Sketch di più soluzioni

Successivamente sono andato di carta e penna per esplorare varie proposte che andassero a risolvere i problemi definiti, annotando le differenze e l’impatto che potevano avere sulla navigazione.

La nuova proposta di layout, a differenza dell’attuale soluzione, non è una suddivisione di funzionalità che il servizio può offrire, ma anzi è una suddivisione per obiettivi. Nella fase di Define abbiamo visto quali fossero i bisogni e gli obiettivi di Roberta e Carlo, e sulla base di questi sono andato a costruire la nuova interfaccia che si suddivide in tre percorsi di navigazione: Biglietteria, Sosta e Mappa.

Prototype & Test

Dopo aver esplorato più soluzioni, sono andato a costruire dei prototipi low-fidelity in Sketch e ho iniziato svolgendo dei test di usabilità su 5 persone.

Prototype e Test sono le due fasi nelle quali mi sono trovato a dover tornare indietro più spesso, poichè i test di usabilità mettono in luce nuovi problemi dell’interfaccia, specialmente nel mio caso dove il flusso di navigazione è cambiato profondamente rispetto alla soluzione attuale.

Qualche volta il test è andato liscio. Altre volte l’utente dopo un primo tentennamento, è riuscito comunque a raggiungere la sezione dedicata, in altre ancora invece è rimasto bloccato in un punto nel quale sembrava non riuscire ad avanzare.

Tornare alla fase di prototipazione e correggere le parti che risultavano più complesse mi ha permesso di acquisire maggior consapevolezza del prodotto, è un processo di autoanalisi che aiuta non solo a rimanere ben focalizzati sull’obiettivo, ma anche a non dare per scontato che la soluzione che stai ideando sia la migliore per tutti.

Visual Design

Una volta validate le soluzioni, ho proseguito con un restyling completo dell’interfaccia.

Ho raccolto gli elementi distintivi dell’attuale app di MyCicero, come per esempio i baffi del logo, e li ho rielaborati in chiave più moderna scegliendo una palette di colori più leggera e armoniosa che si prestasse più facilmente ad un’eventuale versione Dark Mode.

Conclusione

Questo progetto è stato un viaggio tutt’altro che scontato, mi sono spesso messo in discussione alla luce dei feedback ottenuti strada facendo. Ci sono attività che mi sono rimaste particolarmente impresse proprio per i risvolti inaspettati, come per esempio la fase di Test nella quale ho avuto modo di vedere realmente la reazione delle persone, e comprendere come ognuno si sia approciato all’app in modo diverso.

Nei prossimi progetti presterò maggiore attenzione alle opportunità di design riguardo l’inclusività delle persone. Adottare una metodologia così vicina alle esigenze mi ha permesso di comprendere quanto realmente sia importante avere a cuore una progettualità che permetta di migliorare la vita delle persone, ed è gratificante sapere che abbia un impatto reale e forte.

Vi ringrazio per essere giunti alla fine dell’articolo, spero che il contenuto vi sia piaciuto e che qualcuno di voi si sia riconosciuto almeno in parte in questa sfida di design. Se così fosse, fatemelo sapere e sarò felice di confrontarmi e trovare nuovi spunti.

Un ringraziamento speciale va ad Elisa, che mi è stata vicina e ha dimostrato di avere una pazienza immensa, a Kemal Sanli per le due illustrazioni presenti nella Home della nuova grafica e a tutti i miei amici che hanno, seppur in piccola parte, partecipato a questo progetto.

I’m a Digital Designer based in Venice with 5+ yrs exp focussing on Interaction Design. Judge @ CSS Design Awards

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store