Ripensare l’esperienza del trading online

Il problema

Molte offerte di home banking prevedono un servizio online per la compravendita dei titoli finanziari, dando così all’utente che lo richiede la possibilità di operare in autonomia rispetto ai canali tradizionali, in maniera non dissimile dalle piattaforme dedicate al trading. Caratteristiche salienti di questo servizio sono la complessità dell’informazione (tabelle dati, grafici, news, etc.) e i vincoli tecnici e normativi della negoziazione online. Questo si traduce in due diversi bisogni per l’utente: seguire l’andamento dei mercati e monitorare la propria posizione finanziaria in maniera semplice e chiara; avere la certezza di concludere le operazioni di negoziazione in tempi brevi e in totale sicurezza. 

All’interno dell’offerta bancaria BNL, la piattaforma trading è stata oggetto di un lavoro di restyiling, con l’obiettivo di rimuovere le criticità e inefficienze della UX e trovare le soluzioni per un’interfaccia grafica ottimizzata.

Cliente

BNL – Gruppo BNP Paribas (Italia)

Attività

  • User persona
  • User flow
  • Architettura dell’informazione
  • Wireframe e prototipo ad alta definizione
  • Interfaccia grafica

Strumenti

Sketch  Principle

Approccio e soluzione

Nella prima fase del progetto, si è cercato di identificare il profilo dell’utente: a tal scopo sono state condotte interviste dirette assieme all’analisi di profilazione dei clienti BNL. Da quest’attività sono emersi due persona con comportamenti e bisogni differenti:

  • un “power trader” con alta disponibilità e propensione ad investire, interessato a ricevere risposte tempestive e aggiornamenti sulle proprie operazioni;
  • un “basic trader”, meno attivo nella negoziazione e più interessato alla propria posizione finanziaria e all’andamento del mercato.

Il feedback degli utenti, insieme all’analisi dell’usabilità e alla simulazione cognitiva, hanno rivelato alcune criticità principali:

  1. I link non sono evidenziati correttamente
  2. Manca un focus sul contenuto
  3. I servizi principali (ricerca, portafoglio, ordini) non sono in evidenza
  4. Non c’è una panoramica degli asset in portafoglio
  5. Il sito non è reattivo e i testi non sono ben leggibili
  6. L’interazione è ostacolata dall’incoerenza dei componenti UI e dalla mancanza di un feedback chiaro e tempestivo
  7. L’uso eccessivo di grafici e tabelle complesse non facilita l’interpretazione dei dati
  8. Guide online e tutorial non sono adeguatamente evidenziati

 

Per trovare un riscontro quantitativo, sono stati analizzati i principali indicatori di utilizzo della piattaforma ovvero le pagine più visitate, la frequenza di rimbalzo e i percorsi di uscita. Questo ha confermato alcuni bisogni e criticità tra cui l’accesso non immediato ai servizi principali (Ricerca, Portafoglio e lista Ordini) e l’assenza di un’anteprima dei propri investimenti.

Successivamente attraverso interviste e sessioni di team brainstorming con i product owner sono state isolati i requisiti di business e i rispettivi indicatori di performance con i quali valutare l’efficacia della soluzione proposta.

 

Poichè una delle principali criticità riguardava l’organizzazione e fruibilità dei contenuti, si è deciso di rivedere l’architettura dell’informazione e sottoporla a verifica con un tree testing. Le percentuali non alte di completamento di alcune attività – negoziazione dei titoli e consultazione delle news – hanno suggerito una diversa denominazione e articolazione delle relative voci del menu di navigazione.

I dati empirici sin qui emersi sono serviti per elaborare i wireframe ad alta definizione che, dopo varie iterazioni, sono stati approvati dai product owner e stakeholder. Sulla base di questi wireframe si è giunti quindi a un prototipo interattivo.

 

Punti chiave

La proposta di redesign prevede un layout fluido e responsive per adattarsi alle diverse risoluzioni. I contenuti sono stati riorganizzati e semplificati senza l’uso di iframe per facilitarne la fruizione ed eliminare il problema di aderenza al layout.

  • Menu di navigazione
    I servizi principali sono accessibili da una sidebar laterale per dare focus ai contenuti della pagina. I link di ogni singola sezione sono sempre visibili ed evidenziati.
  • Dashboard
    L’utente ha un vista d’insieme aggiornata della propria posizione (patrimonio, investimenti, portafoglio titoli, watchlist, ordini) e dell’andamento del mercato.
    I dati sono aggiornati in base al profilo finanziario mentre un menu contestuale permette di accedere al dettaglio del titolo o di effettuare un ordine.
    Alert, banner e notifiche sono integrati nella dashboard. Un tutorial guida l’utente sulle principali funzionalità.
  • Toolbar e motore di ricerca
    Il motore di ricerca interno è persistente allo scorrimento della pagina.
    Un elenco di risultati ordinati in base alla tipologia facilita l’accesso ai contenuti.
    I principali indicatori di mercato sono visualizzati in una toolbar fissa espandibile, aggiornati in tempo reale e filtrati in base alla tipologia.

  • Portafoglio titoli
    L’utente ha un riepilogo della propria posizione e della performance dei titoli.
    Per ciascun titolo in portafoglio sono evidenziati i dati principali e l’andamento e una navigazione a pannelli permette di visualizzarne il dettaglio.
  • Modulo d’ordine
    E’ possibile visualizzare il saldo e la disponibilità di ciascun deposito titoli.
    I componenti UI sono stati ridisegnati per garantirne uniformità e accessibilità.
    Aiuti visivi contestuali prevengono errori e ripetizioni nell’inserimento dell’ordine.