Perche questo redesign?
Alla base di questo redesign vi è la voglia di migliorare un'applicazione che è di quotidiano uso da parte del sottoscritto, nonostante sia un redesign ridotto alla schermata principale, non avendo dati alla mano ho cercato di ridurre agli errori da me reputati importanti le modifiche e i miglioramenti. Nella versione attuale dell'app, come avrai occasione di vedere sono presenti diversi errori e divergenze che potrebbero inficiare molto sull'esperienza utente, è stato quindi un mio grande piacere migliorarne l'esperienza utente e la user interface
Features n1
Ognuno di noi è ormai abituato ad una presenza sempre più costante di quelle che sono le possibilità di abbonamenti diretti sul proprio conto bancario, questo, per chi possiede una quantità di abbonamenti non indifferenti comporta un certo costo. Onde evitare imprevisti come una disponibilità del saldo non sufficiente per l'addebito o ancor più importante, un'abbonamento di cui si ci era dimenticati a disdire, è stato un punto cruciale del mio redesign creare una funzione che possa riunire e risolvere possibili quesiti e necessità dell'utente oltre che tenerlo fortemente informato di ciò che sta succedendo o sta per succedere al suo conto.
Le scelte compiute
La feature è stata progettata per fornire all'utente una prima serie di informazioni con cui poter interagire in modo dinamico e semplice, lasciando la possibilità di approfondire ulteriormente, qualora lo desideri. Nonostante lo spazio limitato, sono riuscito a inserire in modo adeguato e consapevole tutte le informazioni relative agli abbonamenti attivi. Nella card sono presenti: il titolo dell'abbonamento, il giorno e il mese di addebito, il costo, una CTA che reindirizza a un calendario completo e, infine, un carosello che mostra quali abbonamenti verranno addebitati nei prossimi 15 giorni, offrendo così una visione chiara e completa.
Il carosello è stato progettato per mostrare 5 container alla volta, ognuno dei quali rappresenta un giorno. L'aspetto di ciascun container varia in base alla presenza o meno di un rinnovo di abbonamento per quel giorno. Quando non ci sono addebiti previsti, il container non sarà cliccabile e avrà un contrasto più leggero, in modo da indicare visivamente la mancanza di dati rilevanti per quel giorno. Al contrario, i container che rappresentano giorni con addebiti previsti sono visivamente più prominenti: sono in rilievo grazie a una drop shadow, contengono il logo dell'azienda verso cui verrà effettuato l'addebito e, in caso di addebiti multipli, mostrano anche un avviso con il numero di addebiti oltre al logo.
L'utente può scorrere lungo il carosello e cliccare su ogni container che contiene un abbonamento. Per rendere immediatamente visibile il container selezionato, ho scelto di contrassegnarlo in rosso, trasmettendo così l'idea di un'uscita di denaro dal conto.
Errori e correzioni
Comprensione delle azioni all'interno dell'interfaccia:
Ci sono errori nel posizionamento delle icone all'interno dell’interfaccia. Ad esempio, l'icona dell'occhio in alto a destra, che dovrebbe oscurare le cifre del conto, per la sua posizione attuale può indurre l'utente a pensare che censuri tutte le cifre della schermata. In realtà, oscura solo i dati relativi a saldo, entrate e uscite, voci che non sono collegate visivamente né raggruppate tra loro. La mia soluzione mira a migliorare la visibilità e ottimizzare lo spazio, rendendo più chiara l'azione disponibile: ho raggruppato la sezione "Radar" all'interno della card del saldo attuale e spostato l'icona dell'occhio all’interno della stessa card, rendendo chiaro che solo le cifre in quella sezione saranno oscurate. Inoltre, ho reso più visiva la sezione "Radar", creando una barra colorata che rappresenta il rapporto tra entrate e uscite in modo percentuale.
Confusione nelle voci:
Ho notato che gli utenti trovano confusione tra le due CTA presenti nella card precedente: una porta all'IBAN del conto e l'altra alla carta. Essendo questa una carta associata a un conto bancario, potrebbe non essere subito chiaro agli utenti dove trovare specifiche informazioni, causando perdita di tempo. Inoltre, è un’occasione mancata in termini di ottimizzazione dello spazio, fondamentale soprattutto sui piccoli schermi. Ho quindi unito le voci "Il tuo IBAN" e "La tua carta" in un unico bottone che contiene tutte le informazioni bancarie, eliminando la necessità di passare da una sezione all'altra dell'app.
Ricarica conto:
Unendo le due voci precedenti, si è liberato uno spazio che ho potuto valorizzare con un'azione utile per l’utente. Analizzando l'uso comune della carta e le preferenze del target, ho notato che molti utenti, data la giovane età e i servizi per minori associati, preferiscono spesso ricaricare manualmente il conto anziché accreditare direttamente lo stipendio. Ho quindi inserito un bottone per la ricarica conto, rendendolo l'azione primaria della schermata corrente, dato il suo utilizzo frequente e l’importanza per il target di riferimento.
UI e design:
Ho rinnovato l'interfaccia grafica, correggendo errori come spaziature incoerenti e migliorando l'intero design system. Ho ottimizzato gli spazi e organizzato meglio le sezioni, attualmente un po' confusionarie, correggendo errori nelle ombre che potevano portare l’utente a fare scelte errate. Ho inoltre aggiornato le icone e alleggerito la navbar, aumentando l’engagement visivo ed evidenziando i bottoni e gli elementi di interazione più utili. Infine, ho inserito l'intestazione all’interno delle card, posizionando il bottone di approfondimento accanto ad essa per una migliore ottimizzazione degli spazi, rendendo l'interfaccia complessivamente più piacevole e intuitiva.
Feature n.2
Per la seconda feature, ho voluto offrire agli utenti la possibilità di svolgere task che normalmente richiederebbero diversi click, rendendoli invece immediatamente accessibili. Infatti, attraverso uno scroll dall’alto verso il basso, la dynamic island si attiva, mostrando in overlay 4 attività principali usate frequentemente.