Il cliente

ZKB è una banca che fa della mutualità il proprio principio base. Il suo fine è quello di soddisfare i bisogni finanziari dei suoi soci e clienti promuovendo soluzioni personalizzate adatte ad ogni tipo di richiesta.

Obiettivi del cliente

La necessità di ZKB era quella di rivedere il layout di alcune pagine del sito per fare in modo di aumentare le conversioni degli utenti.
In particolare abbiamo individuato (in accordo con il cliente) 3 pagine su cui focalizzarci: “Homepage”, “Conto corrente” e “Mutuo casa”.

L’approccio Delex Digital

Abbiamo sviluppato il progetto in diverse fasi:

  • Analisi dei dati di Analytics del sito ZKB
  • Analisi Benchmark sui competitors
  • Analisi qualitativa di UI e UX del sito ZKB
  • Proposte delle ottimizzazioni UI e UX del sito ZKB
  • Monitoraggio dei risultati
Analisi dei dati di analytics

Abbiamo indagato i pattern di comportamento principali degli utenti: attraverso quali canali entrano sul sito, quali pagine visitano di più e quali di meno, che azioni portano termine senza difficoltà, dove si presentano i “colli di bottiglia”.

Benchmark competitors

Abbiamo considerato e i siti delle banche simili a livello di posizionamento e servizi offerti, analizzando con particolare interesse i dettagli di UX e UI.
Inoltre abbiamo simulato i flow di azioni che l’utente medio segue durante la navigazione online e di conseguenza l’UX, in modo da avere maggiori feedback sulla fattibilità delle potenziali migliorie al sito di ZKB.

Analisi UI e UX

Poiché il sito di ZKB è strutturato su un framework condiviso con altre banche dello stesso gruppo, è stato necessario fare un’analisi approfondita della UI (mobile, tablet e desktop) per essere sicuri di poter applicare le ottimizzazioni senza effettuare interventi ad hoc a livello frontend e quindi mantenere uniforme i layout e i vari dettagli con le altre pagine dell’intero sito.

Al tempo stesso, abbiamo sviscerato tutti i problemi più frustranti lato UX presenti nelle pagine interessate.

Ottimizzazioni UI e UX

La “Homepage”, avendo un layout diverso rispetto alle pagine “Conto corrente” e “Mutuo casa” presentava problematiche peculiari data l’ovvia funzione di raccoglitore.

Homepage

Problemi

Sostanzialmente mancavano dei link che portassero alle pagine chiave, di conseguenza l’utente non le poteva raggiungere facilmente. Inoltre in una sezione venivano proposte 2 call to action scollegate tra loro, il che portava a una confusione di navigazione.

Soluzioni

Abbiamo deciso di inserire 2 nuove sezioni vicine all’ above the fold della pagina, ciascuna contenente un link che porti alla pagina relativa.

È stata eliminata la call to action meno importante, rendendo la sezione con un’unica funzione.

Conto corrente

Problemi

I primi 2 problemi riguardavano il form: questo si trovava in fondo alla pagina ed era troppo lungo e complesso da compilare, il tutto si traduceva in una perdita consistente  di conversioni.
Inoltre erano presenti delle icone non ben contestualizzate per descrivere i vantaggi del conto corrente e il micro copy era assai piatto e monotono, con la conseguenza che l’utente non prestava la giusta attenzione.

Soluzioni

Abbiamo inserito diverse call to action nella pagina (al top e nel mezzo) con la funzione di àncora che porta alla sezione dedicata al form.

Abbiamo sfoltito il form ai soli campi necessari. Inoltre era presente una sezione molto corposa inerente alla privacy, la quale è stata collassata a una sola checkbox contenente un link al documento relativo.
Infine la label del bottone di invio del form non era semanticamente corretta ed è stata sostituita con una più pertinente.

Abbiamo rivisto l’intera sezione relativa alle icone.
Grazie all’analisi della UI fatta in precedenza, sono state riprese delle card presenti in altre pagine del sito, contestualizzandole alla pagina del mutuo con delle icone e micro copy molto più pertinenti.

La descrizione, che era gestita in un unico campo di testo, è stata spacchettata in più sezioni separate da immagini e call to action al form, in modo da alleggerire la lettura da parte dell’utente.
Al contempo, abbiamo reso il testo più comprensibile adottando l’uso di punti elenco e tabelle oltre che gestendo gerarchie visive diverse tra titoli, sottotitoli, corpo del testo e didascalie.

Mutuo casa

Problemi

Abbiamo riscontrato le stesse problematiche in cui siamo incappati nella pagina “Conto corrente”: il form, le icone e la descrizione.

Per quest’ultima però il testo doveva illustrare all’utente 2 diverse casistiche di applicazione del mutuo (a tasso variabile o fisso), includendo specifiche e dettagli non indifferenti e che non si potevano ridurre in quantità.

Soluzioni

Sono state applicate le stesse soluzioni precedenti, adottando in più un nuovo elemento presente in altre pagine del sito: l’accordion.
Questo ci ha permesso di accorciare la lunghezza della pagina collassando tutte le informazioni specifiche all’interno di un blocco cliccabile dall’utente per espanderlo poi a suo piacimento.

Cliente

Settore
  • Finance
Aree di intervento
  • User Experience
  • User Interface
  • Data analysis
Periodo
  • Primavera 2020

Take away

Analisi, insight, empatia. Questi sono gli ingredienti per una buona UX.

Cosa abbiamo ottenuto

Le proposte di ottimizzazione UI e UX sono state tutte approvate. La maggior parte di queste sono state in seguito applicate, eccetto per quanto riguarda la conversione del blocco di testo per l’informativa sulla privacy all’interno del form, poiché (a livello legislativo per le banche) è assolutamente necessario che questo sia esplicito e in chiaro.

A livello di perfomance, non sono mancati gli indicatori positivi.

Sulle pagine oggetto delle modifiche, la frequenza di rimbalzo è diminuita del 16%, mentre il tasso di conversione è aumentato del 2,6%.

Altro dato interessante, rileviamo un +30% di traffico sulle pagine strategiche mutui e conti corrente; un dato che si è poi tradotto anche in un aumento di contatti offline rilevati dal cliente.

-16

FREQUENZA RIMBALZO

3

INCREMENTO TASSI DI CONVERSIONE

+30

TRAFFICO SU PAGINE MUTUO E CONTO CORRENTE