L’applicazione dall’anima conversazionale
Banca Widiba, una delle 10 migliori banche online italiane, offre una piattaforma completa per la gestione quotidiana del risparmio e degli investimenti.
Il design e l’esperienza utente erano però ormai obsoleti rispetto ai concorrenti e agli standard richiesti dal mercato.
Per mantenere alta la promessa di un’esperienza paperless senza frizioni, il redesign dell’applicazione ha introdotto un nuovo sistema di interazione, trasformando l’esperienza utente da un modello transazionale a uno conversazionale.
La sfida
Una nuova modalità di interazione con la banca, che ha richiesto di ripensare la fruibilità del prodotto e dei servizi offerti.
Un’alta qualità del design delle interfacce, con un look and feel consistente cross device.
Una soluzione tecnologica per ridurre lo sviluppo nativo, con una codebase capace di garantire buone performance e sinergia nell’implementazione.
Tipo di progetto
App per mobile
Il mio Ruolo
Sr. UX Designer | Doing come Design Consultant presso il cliente
Cliente
Attività
Concept Design, UX Design, Product Design, Design System, Prototipazione, Testing e Architettura dell’Informazione.
Anno di progetto 2019. Ultimo aggiornamento luglio 2026.
Stai consultando la versione sintetica
Il contesto*
Il progetto è stato definito da due macro fasi che si sono susseguite nella realizzazione del prodotto: (1) una prima fase che prevedeva la realizzazione core dell’applicazione con le funzionalità essenziali e (2) una seconda fase nella quale si sarebbero implementate le funzionalità rimaste ma in un contesto progettuale già definito.
*= In questo progetto vengono descritte le attività relative alla prima macro fase durante la quale sono state prese tutte le decisioni di sviluppo, design e di esperienza d’uso in modo fortemente sinergico e che lo hanno definito nella sua totalità.
Il Processo Metodologico e la definizione del “MUP”
Il progetto inizia con quella che è stata definita come la prima macro fase: caratterizzata da momenti decisionali fondamentali per dare struttura all’applicazione.
Il processo
Il progetto si è sviluppato attraverso un processo a tre fasi decisionali, con sviluppo successivo ma con frequenti punti di contatto tra loro, alle quali ho partecipato con un ruolo di responsabilità o di supporto a seconda delle necessità.
Fase (di)
Experience
L’implementazione della modalità di interazione.
Fase (di)
Sviluppo
La scelta del linguaggio di programmazione.
Fase (di)
Design
Il modello strutturale per la progettazione del Design.
Il MUP
Per intercettare il prima possibile eventuali criticità, ho contribuito a definire fin da subito un Perimetro di Progetto — l’insieme di pagine, funzioni e servizi principali dell’applicazione — tenendo conto anche del MUP (Minimum Usable Product), ovvero l’esperienza minima che l’applicazione avrebbe dovuto garantire in termini di usabilità.
La definizione di un Perimetro di Progetto è stato importante anche per programmare attività fondamentali come i Test di Usabilità durante il processo di sviluppo.
Vuoi saperne di più sui Test di Usabilità dell’App Widiba?
Guarda il progetto.
Fase (di)
Experience
In questa fase mi sono occupato di concept, struttura, livelli di navigazione, linee guida per i template, gerarchie visive, funzioni, interazione tra le pagine, pulsanti, flussi di navigazione e wireframe.
Concept
Il concept è stato l’anima del progetto: ha dato forma all’idea e ha richiesto di ripensare l’intera architettura informativa, perché cambiare la modalità di fruizione di servizi e funzioni cambia tutto, non solo a livello di Design ed Experience, ma anche di Sviluppo.
La sfida principale è stata passare dalla modalità transazionale a quella conversazionale: non solo proporre l’inserimento di un dato alla volta, ma replicare un pattern d’uso già conosciuto, quello della chat, dove gli elementi inseriti restano visibili mentre il focus rimane sempre sul prossimo passo da compiere. Questa modalità è stata pensata per essere utilizzata in ogni funzione e operazione dell’applicazione.
Struttura
Definito il concept conversazionale, ho lavorato su alcuni aspetti fondamentali per costruire la struttura dell’applicazione.
Livelli di Navigazione
Insieme al team ho individuato 3 livelli di navigazione (+1, 0, -1), con il livello 0 come base e gli altri due in relazione gerarchica rispetto ad esso.
Template e linee guida
Successivamente, a ciascun livello corrisponde un template specifico, per un totale di 3 template con caratteristiche strutturali, di contenuto e di interazione proprie.
Individuate le tipologie ho definito le caratteristiche principali dei template considerando tre elementi: Struttura, Gerarchia visiva e Funzionamento.
Aree Strutturali, Gerarchia Visiva e Funzionale del template.
Interazioni e navigazione
Ho inoltre definito le interazioni e i comportamenti di navigazione tra le pagine, a seconda che si trovino sullo stesso livello o su livelli diversi, le icone dei pulsanti associate a posizione e comportamento dei contenuti, e realizzato tavole di flusso per rappresentare i percorsi di navigazione più significativi.
Wireframe
I wireframe mi hanno permesso di dare un primo senso di concretezza al progetto e, avendo già definito molti aspetti di progettazione, di concentrarmi su come la modalità conversazionale e la nuova struttura avrebbero impattato sulla ridistribuzione dei contenuti esistenti e su quelli nuovi da aggiungere.
Ho lavorato, ad esempio, sul flusso dispositivo, convertendo la modalità transazionale esistente in una conversazionale: una soluzione confermata fin da subito come molto più veloce per completare una richiesta dispositiva.
Vuoi saperne di più su come realizzo i wireframe in un progetto?
Fase (di)
< – – – – – >
Experience
Fase (di)
Sviluppo
In questa fase, ho supportato e collaborato con i diversi team di sviluppo, in due momenti fondamentali: individuare quale fosse la tecnologia migliore per sviluppare l’intera applicazione e la “scrittura” di un linguaggio di programmazione realizzato in simbiosi con il design, per creare una reciprocità progettuale.
Quale Tecnologia?
La scelta della tecnologia è avvenuta durante la definizione del Perimetro di Progetto e della modalità conversazionale. Ho affiancato un team di sviluppatori dedicato, supportandoli nel testare i diversi linguaggi di programmazione, valutandone pro e contro per mantenere alti gli standard di fattibilità e ridurre i possibili rework.
La scrittura del Codice
In questa fase ho svolto una funzione di raccordo tra il team di sviluppo e quello di design, supportando il team UI i nel capire come interpretare il codice per raggiungere gli obiettivi qualitativi di design e garantire piena corrispondenza tra progettato e sviluppato.
La Griglia di progetto
Un momento chiave di questa fase è stata la definizione della griglia di progetto: un linguaggio comune tra sviluppo e design, dove ciascuno legge l’informazione necessaria per realizzare la propria parte di lavoro.
Tier
Per garantire un look & feel coerente su smartphone con viewport molto diverse tra loro, ho definito un sistema a Tier: ho raggruppato le viewport dei device in gruppi omogenei per proporzionalità, assegnando a ciascun gruppo un modello di smartphone di riferimento, individuato tra i più venduti sul mercato.
Flex
Su questa base ho costruito i Flex, una griglia con valori relativi (righe e colonne) che permette al design di riproporzionarsi in modo armonico tra un tier e l’altro, senza deformare i componenti.
Fase (di)
< – – – – – >
Sviluppo
Fase (di)
Design
In questa fase ho avuto un ruolo da Product Designer affiancando il team di UI: ho favorito l’inserimento dei colleghi nel progetto, condividendo il metodo di lavoro e supportandoli nella comprensione delle modalità di progettazione necessarie per implementare al meglio il design.
Design System
Per non creare equivoci: non mi sono occupato di UI Design: non ho progettato la grafica dell’applicazione, né scelto stile, colori o forme. Di cosa mi sono occupato allora? In due parole: Design System.
Libreria
Ho creato, mantenuto e aggiornato la Libreria del progetto, affiancando gli UI Designer nella creazione dei componenti una volta completato il loro design — una sorta di “ingegnerizzazione” affinché si adattassero al sistema progettato e rispettasse alcune regole di costruzione.
Sistema proporzionale
Un altro aspetto fondamentale da trasferire al Team di UI era come utilizzare il sistema proporzionale costruito attraverso Tier e Flex: ne ho spiegato il funzionamento, le logiche progettuali e il modo corretto di utilizzarlo.
Modello organizzativo
Per trasferire la conoscenza acquisita durante il progetto, ho dovuto risolvere due problemi: trovare un modello organizzativo efficace per il passaggio di informazioni e una modalità di lavoro che permettesse al Team di UI di procedere autonomamente una volta esaurita la curva di apprendimento. Ho scelto un modello organizzativo ispirato a quello centralizzato.
Fase (di)
< – – – – – >
Design
L’applicazione
Due anime: codice ed esperienza. Lo sviluppo del codice e la progettazione dell’esperienza, attraverso il design, si fondono in maniera sinergica senza un’evidente prevalenza dell’una sull’altra ma entrambe pensate e progettate per lavorare insieme verso lo stesso traguardo.
Il risultato finale è un’applicazione visivamente bilanciata e graficamente proporzionata, dove distanze e dimensioni si adattano alla viewport del device utilizzato. Ha una struttura consistente, organizzata gerarchicamente nelle sue aree principali, con un comportamento sempre atteso e coerente rispetto ai livelli di navigazione.
La modalità conversazionale è stata integrata in tutti i flussi dell’applicazione, da quelli dispositivi (come il pagamento di un bollettino) a quelli più semplici, come l’aggiornamento di un’impostazione o il settaggio di un filtro.
Log In
Applicazione della griglia proporzionale.
Fin dalla schermata di Log In i device, anche se con dimensioni delle viewport decisamente diverse tra di loro, presentano visivamente un design bilanciato e armonico grazie applicazione della griglia proporzionale.
Home Conti e Carte
Attuazione della struttura gerarchica
Le schermate di atterraggio delle voci del menu, di primo livello, presentano una struttura di dipendenza gerarchica delle aree di contenuto mentre un (evidente) pulsante è dedicato alle azioni contestuali che è possibili eseguire.
Dispositiva Bonifico e Ricarica
Implementazione della modalità conversazionale
Nell’eseguire un flusso dispositivo, per esempio come quello di un bonifico, la schermata che si presenta all’utente si compone con l’inserimento successivo dei dati necessari e, proprio come in una chat, quelli inseriti precedentemente rimangono visibili con la possibilità di essere modificati in qualsiasi momento.
Questa modalità è stata utilizzata in qualsiasi punto dell’applicazione dove vi fosse la necessità di inserire e/o modificare dei dati.
Le sfide principali e cosa ho imparato
E tutto quello che un progetto porta sempre con se! 🙂
Meno wireframe: un diverso iter progettuale
Avere costruito il Design System fin dalle prime fasi, riducendo il volume di wireframe rispetto al mio approccio tradizionale, mi ha permesso di progettare con una diversa consapevolezza anche grazie a una struttura proporzionale, scalabile, modulare e a un costante scambio tra i team.
Vuoi saperne di più su come realizzo i wireframe in un progetto?
Un ringraziamento
Un grazie speciale a Giuseppe e Gianvito, che mi hanno coinvolto in questo straordinario progetto, dando inizio alla mia avventura in Widiba e offrendomi l’opportunità di applicare e perfezionare le mie competenze. Un progetto che è durato mesi, che ha toccato ogni aspetto della progettazione e che mi ha arricchito immensamente.
Un altro grazie va a Crispy Bacon e a tutto il Team di Sviluppo, per aver reso possibile una sinergia unica tra codice e design, dove il continuo scambio di conoscenze e l’implementazione delle capacità reciproche ha portato alla realizzazione di qualcosa che posso senza dubbio definire “fuori dagli schemi”.