smontare un’esperienza fidelity per ricostruirla

una ricerca utente fatta sul campo (letteralmente)

percorso inverso: dall'osservazione alla progettazione

La ricerca UX (esperienza utente) non sempre nasce da interviste programmate, a volte basta osservare – come quando fai birdwatching.

In un contesto reale a diretto contatto con i clienti, ho assistito ogni giorno alla stessa scena: persone che abbandonano la registrazione per frustrazione,  altre che ci riescono solo dopo diversi tentativi rimanendo comunque confuse. Un problema di interazione con un costo reale per il business.

C’è un principio di Don Norman (teorico del design e autore della bibbia del design The Design of Everyday Things) che ritorna in mente in questi momenti: quando un utente non riesce a completare un’azione, la colpa se la prende su di sé, ma  il problema è quasi sempre nel design. Da lì la domanda: come eliminare quegli attriti a monte?

Il sistema attuale esiste solo su web. Lho riprogettato come app nativa per sfruttare l’accesso memorizzato, le notifiche push per punti e premi, e la lettura OCR (riconoscimento ottico dei caratteri) degli scontrini tramite fotocamera, trasformando un processo frammentato in un flusso immediato.

Ho lavorato su wireframe anonimizzati per questioni di diritti sul brand, concentrandomi su flussi e logiche di interazione, mentre il set UI (interfaccia utente) è calibrato unicamente per testare l’efficacia dei flussi.

Schermata di benvenuto dell'app fidelity MyStyle Lounge con call to action per l'autenticazione.
Mock-up mobile dell''app fidelity: schermata di conferma punti accumulati con opzioni per giocare o caricare un nuovo scontrino.

ottimizzare il login

La schermata di accesso fallisce in modo diverso a seconda di chi la usa. I clienti con vecchia tessera inseriscono l’email e si bloccano su una password che non hanno mai impostato: l’unica via d’uscita è cliccare “Password dimenticata” per attivare il profilo. Intuitivo, no?

nuovi utenti confondono invece i campi login con il modulo di registrazione, inseriscono i dati, ricevono un errore generico e abbandonano senza capire il motivo.

Il redesign separa chiaramente i due percorsi e aggiunge l’accesso social come alternativa ben visibile ma non prioritaria, perché la maggior parte degli utenti storici ha già un account email attivo.

analisi dell’attuale interfaccia –
WELCOME PAGE / LOGIN

Wireframe dell'interfaccia di login originale con distinzione poco chiara tra i campi di accesso e di registrazione.

la nuova proposta progettuale –
WELCOME PAGE

Analisi della nuova landing screen dell’app, progettata per distinguere l’accesso e la registrazione e mantenere un percorso dedicato agli utenti con la vecchia tessera.

la nuova proposta progettuale –
LOGIN

Nuovo flusso di login dell’app fidelity, con la schermata di accesso riprogettata.
Nuovo flusso di login dell’app fidelity, con schermata di accesso riprogettata e gestione ottimizzata dei campi per l’autenticazione dell’utente.

semplificare l'iscrizione

Gli utenti si registrano spesso in coda alla cassa, con pochi minuti a disposizione. Il flusso attuale prevede 4 passaggi, di cui uno dedicato esclusivamente ai consensi marketing.

Ho ridotto gli step a 2, spostando i dati secondari a un momento successivo in cambio di punti extra, con l’accesso social in primo piano per chi vuole autocompilare i campi con un clic.

Due problemi specifici sono stati affrontati nel processo:

  • Il selettore della data di nascita si apre sul giorno corrente e molti utenti confermano senza guardare, generando un errore di sistema (d’altronde, se sei nato oggi è difficile che tu stia facendo shopping). Inoltre, cambiare l’anno richiede decine di clic perché la selezione diretta è nascosta.
    Ho sostituito quindi il calendario con un campo numerico guidato con controllo automatico della maggiore età, cosicché gli utenti siano al corrente di cosa stanno compilando e quali sono le limitazioni. 
  • I requisiti password, invece, compaiono in un blocco di testo che quasi nessuno legge, con errori che arrivano a sorpresa. Li ho quindi   riprogettati come una checklist visiva che si aggiorna in tempo reale. L’icona dell’occhio e la doppia digitazione rimangono: in coda con persone intorno, la privacy conta.

analisi dell’attuale interfaccia –
REGISTRAZIONE

Wireframe del flusso di registrazione attuale dell’app, con evidenza delle criticità e dei punti di attrito nell’impostazione della password e nell’inserimento della data di nascita.
Wireframe del flusso di registrazione attuale dell'app, con evidenziate le criticità e i punti di attrito nella selezione della password.

la nuova proposta progettuale –
REGISTRAZIONE 

Proposta di redesign del processo di registrazione che mostra la gestione di un errore relativo ai requisiti della password.
Proposta di redesign del processo di registrazione, con anteprima di un errore relativo ai requisiti per l’impostazione della password.
Proposta di redesign per la registrazione utente con anteprima della check-list dei requisiti per la password.

la nuova proposta progettuale –
DASHBOARD

Proposta di redesign della dashboard utente per facilitare l’accesso alla carta fedeltà digitale, allo score level e al saldo punti.
Proposta della dashboard utente con note UX: schermate per visualizzare la carta fedeltà digitale con codice a barre e lo score level con il saldo punti.

il caricamento scontrino: l'inferno dell'OCR

Per i negozi non integrati nel circuito principale, l’utente deve caricare manualmente la foto dello scontrino entro 24 ore, altrimenti perde punti e concorsi. Il processo richiede 4 passaggi , ma il problema vero arriva dopo: se l’OCR (riconoscimento ottico dei caratteri) estrae dati errati i campi non sono modificabili, il tasto di conferma si disattiva, e l’unica via d’uscita (la richiesta di verifica manuale) ha una  grafica che la fa sembrare un pulsante disabilitato. L’utente inizia a cliccare ovunque a caso, sperando in un miracolo.

Il redesign dimezza il processo a 2 passaggi unendo caricamento e verifica, rende i dati estratti modificabili direttamente e mantiene sempre visibile lo stato della richiesta.

analisi dell’attuale interfaccia –
CARICAMENTO SCONTRINO

Wireframe del flusso attuale di caricamento dello scontrino, con evidenza delle principali criticità e dei passaggi più complessi per l’utente.
Wireframe del flusso di caricamento scontrino attuale con il campo caricamento foto.
Wireframe del flusso attuale di caricamento dello scontrino, con il secondo step dedicato alla conferma dell’immagine e il terzo all’inserimento del punto vendita..
Wireframe del flusso di caricamento scontrino attuale

la nuova proposta progettuale –
CARICAMENTO SCONTRINO

Proposta di redesign per la fase di caricamento scontrino: sequenza di passaggi dall'inserimento dell'immagine fino alla schermata di caricamento e analisi pre-lettura OCR.
Proposta di redesign del flusso di caricamento dello scontrino, dalla selezione dell’immagine alla fase di caricamento e analisi preliminare tramite OCR.

cosa succede dopo l'invio?

Per le spese che superano una determinata soglia, c’è la possibilità di vincere delle gift card. Il sistema attuale gestisce tutto via email: prima il codice da giocare, poi se si vince, un secondo messaggio per il ritiro del premio. Dispersivo per l’utente e difficile da tracciare.

Ho progettato un flusso post-invio che gestisce due scenari nell’app:

  • Se i punti vengono accreditati subito e la spesa supera la soglia, l’app porta direttamente alla sezione concorsi per la gestione delle giocate e delle vincite;

  • Se la verifica è ancora in corso una schermata informa che la richiesta è presa in carico, con stato monitorabile in tempo reale nella cronologia scontrini .

la nuova proposta progettuale –
CONFERMA / MODIFICA SCONTRINO

Nuova proposta progettuale dell'app fidelity: flusso con dati dello scontrino corretti e schermata di successo caricamento punti istantaneo.
Nuova proposta progettuale dell'app fidelity: flusso con dati dello scontrino corretti e schermata di successo caricamento punti istantaneo.
Nuovo concept di design per la schermata di verifica dello scontrino, con possibilità di modificare i dati e confermare l’invio alla revisione manuale.
Nuovo concept di design dell’app per la schermata di verifica dello scontrino, con conferma dell’invio alla revisione manuale.
Nuova proposta progettuale dell'app fidelity: flusso con dati dello scontrino caricati e schermata finale di caricamento punti istantaneo.

work in progress e conclusioni

Sto definendo le schermate di errore per timeout di rete, immagini non conformi e lo scenario dello “scontrino già caricato”. Quest’ultimo merita attenzione: l’OCR può confondere i caratteri e segnalare come duplicato uno scontrino perfettamente valido: bloccare l’invio a priori potrebbe quindi penalizzare utenti innocenti.

La soluzione prevede che l’app permetta comunque di procedere: il numero scontrino viene evidenziato come potenziale duplicato, ma  il campo rimane modificabile . L’utente può correggere l’errore o procedere lo stesso, generando una revisione manuale in background.

Ridurre l’attrito in un sistema fidelity non migliora solo l’esperienza di chi fa shopping, ma alleggerisce il lavoro del personale e tutela il business da quegli abbandoni silenziosi che raramente tornano indietro.

Momento trasparenza: in questo progetto l’Intelligenza Artificiale mi ha dato una mano a rivedere i testi, per forma e struttura. I contenuti, l’idea, lo sviluppo e tutta la natura del progetto restano opera mia. 🙂

errore: Content is protected !!