By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Self check-in kiosk

Overview

Abbiamo progettato un’applicazione per self check-in all’ingresso dei centri termali di un noto brand di terme leader in Italia.
Il mio team ed io abbiamo seguito tutte le fasi del progetto, dalla creazione del flowchart riguardante la user journey, fino alla creazione di un prototipo dell’app che riproducesse tutti i flussi possibili al suo interno.

Risultati

Tempi di check-in dimezzati, soprattutto per gruppi numerosi, e riduzione di code alle casse

cliente

Noto brand di terme

anno

2022-2023

settore

SPA & Wellness

tool usati

Figma, Figjam

risultati

-100% tempo di check-in

Obiettivo

Creare un’applicazione da inserire in un totem posizionato all’ingresso dei centri termali per velocizzare il processo di check-in e ridurre la coda alle casse, questo era il nostro obiettivo.
I requisiti e i constraints erano molti, infatti la difficoltà principale è stata quella di creare un’interfaccia il più intuitiva possibile, rimanendo all’interno di queste barriere (per lo più tecniche).

Il processo

Ricerca iniziale
Service blueprint
Wireframes e design
Revisioni col cliente
Delivery

Fase di ricerca

Abbiamo iniziato con una fase di ricerca sulle principali best practices riguardo al mondo della applicazioni su kiosk (ad esempio il totem per l’ordinazione che si trova da McDonald’s) ed ai principi generali di usabilità riguardo questo tipo di interfacce.
È incredibile la poca quantità di esempi che si trovano online a riguardo, e come la maggior parte abbia una UX povera ed un’interfaccia ancora peggiore.

UX research

Service blueprint

Il primo compito è stato quello di tradurre le richieste del cliente riguardo al funzionamento dell’app in un service blueprint: in questo modo avremmo avuto chiaro quali fossero tutti i passaggi della journey e il funzionamento generale dell’app.
Si è rivelato un lavoro più difficile del previsto in quanto neanche il cliente aveva le idee ben chiare, ma è stato nostro compito anche quello di aiutarlo a far luce sulle problematiche presenti e su come risolverle al meglio.

Takeaways

Abbiamo tradotto il blueprint in wireframes, creando una prima struttura dell’app, lavorando sula disposizione degli elementi.
Le feature da inserire erano molte, ma allo stesso tempo non volevamo che le schermate fossero troppo piene e che le azioni da compiere fossero ben definite, così da guidare il più possibile l’utente anche in quei casi in cui l’azione richiesta non era troppo intuitiva.

Una UI pulita e un’app user friendly

Siamo rimasti fedeli alle le linee guida già presenti sul loro sito web, riadattando alcuni elementi - e creandone di nuovi - in modo che il risultato fosse adatto allo schermo del totem (circa 23”).
Il cliente è stato più che soddisfatto, dicendoci che era la prima volta che approvava una UI senza nessuna obiezione. Un vanto che ci teniamo a sottolineare.

Schermata iniziale

Per prima cosa l’utente deve scannerizzare tramite QR code il codice della prenotazione effettuata online.

Inizio check-in

Vengono mostrate le persone all’interno della prenotazione. L’utente dovrà effettuare un check-in alla volta, associando i servizi prenotati online.

Step 1 check-in: associazione servizi

L’utente deve selezionare i servizi prenotati online in fase di acquisto: selezionando il servizio, questo comparirà nel mini-cart sulla sinistra.
Questo step è stato reso necessario dalla mancanza di questa feature durante la prenotazione online.

Step 2 check-in: aggiunta extra

Allo stesso modo è possibile aggiungere servizi extra, non selezionati in fase di prenotazione

Step 3 check-in: revisione e conferma

Infine si presenta il recap della selezione con la possibilità di aggiungere una promozione prima di effettuare il checkout, o procedere con il check-in di un altro ospite

Pagamento

Una volta effettuato il check-in, si passa al pagamento attraverso le diverse modalità disponibili

Schermata finale

Il processo finisce con una schermata in cui viene presentata la mappa della struttura con i servizi principali ben evidenziati, inoltre è possibile scannerizzare un QR code che permetterà di avere la mappa sullo smartphone

100%

Riduzione tempo di check-in

Il risultato

Il risultato ha soddisfatto le aspettative, sia nostre che del cliente.
I tempi di check-in sono stati dimezzati, in particolare per i gruppi di tante persone, con una conseguente diminuzione delle code alle casse.
Conoscendo il lavoro e le innumerevoli interazioni, è stata una gioia vedere finalmente l’applicazione funzionare sul grande schermo.

Rework dell’ultimo momento

Le obiezioni non hanno tardato ad arrivare, soprattutto sotto il fronte delle funzionalità e della user journey.
Sia per problemi tecnici emersi durante lo sviluppo del back-end, che per idee non chiare da parte del cliente, abbiamo dovuto rivedere più volte parte dei flussi e delle funzionalità dopo la presentazione della UI e del relativo prototipo.
È stato frustrante dover ripensare da capo a molti microflussi, devo ammetterlo, ma ho colto l’occasione per migliorare (se non imparare) le mie skills di relazione col cliente.
E ne è valsa la pena!

gif difficoltà
Noi mentre presentiamo l’ennesima revisione della UJ al cliente

Traiamo le conclusioni

Cerco sempre di trarre una lezione da quello che mi capita e riflettere a posteriori sui miei comportamenti, e questa volta mi sono reso conto di aver davvero imparato molto sul fronte delle relazioni professionali.
Come sempre sta a noi scegliere da che parte stare e come reagire a ciò che ci capita.

FACCIAMO PRENDERE VITA
ALLE TUE IDEE

Iniziamo un nuovo progetto insieme
mettiamoci in contatto