Montana – Water Delivery Mobile App

Introduzione

Montana Water è un Brand di acqua minerale delle Alpi italiane, distribuito in aree dell’Arabia Saudita e paesi limitrofi.  

Il servizio di consegna a domicilio permette un acquisto sette giorni su sette, con consegna il giorno stesso nelle città di Jeddah, Riyadh e Dammam, ed altre città in corso di apertura.

Cliente

Mohammed Abdullah Sharbatly Co. Ltd e associati, da oltre 60 anni si dedicano a fornire prodotti di eccellente qualità al M. Oriente e ai mercati internazionali, forti di una solida struttura logistica e di moderne celle frigorifere che ne garantiscono il successo.

In linea con la stessa filosofia, l’azienda ha recentemente introdotto “Montana” un’acqua minerale molto leggera proveniente dalle Alpi italiane.

Nella successiva sezione Design, analizziamo alcuni Before/After rispetto al sito precedente

Scope del Progetto

A seguito della fase di analisi dell’applicazione mobile attuale con un UX Audit,  sono state individuate le problematiche presentate dall’app.

L’obiettivo principale non era quello di progettare da zero l’intera applicazione, ma quello di apportare piccole modifiche a grande impatto sull’esperienza finale.

Questa prima fase del progetto prevede di risolvere i problemi individuati durante le analisi.

Realizzare una nuova versione migliorata dell’esperienza utente che abbia un impatto diretto sull’usabilità e sull’accessibilità dell’applicazione, con un intervento mirato sui problemi individuati.

Il Cliente aveva bisogno di risolvere in poco tempo i problemi principali, per poter lanciare l’app nella nuova versione e contenere i costi di sviluppo software.

Il nostro team ha quindi identificato le aree principali con priorità elevata, ed ha preparato una roadmap di implementazioni focalizzate su queste aree.

Durante le analisi condotte sono stati evidenziati diversi problemi che riguardano l’usabilità e l’accessibilità, in quanto non sono state rispettate diverse best practice in fase di progettazione dell’attuale versione dell’app. 

Nelle fasi di analisi si è evinto che il sistema attuale non presenta caratteristiche per renderlo sostenibile/scalabile, dunque in futuro l’app può rappresentare il veicolo principale per la scalabilità. 

Obiettivi e necessità degli Utenti

L’applicazione ha il compito principale di essere il canale di vendita più rapido e semplice a cui gli utenti possono accedere.

Gli utenti hanno dimostrato di essere abituati ad effettuare acquisti ricorrenti e spesso con consegna presso lo stesso indirizzo, dunque il flusso di acquisto deve essere rapido e efficiente.

Scenario precedente As-is

La situazione di partenza che il nostro team ha trovato è rappresentata dalla schermata sopra riportata.

Le opportunità identificate per un miglioramento dell’esperienza sono state:

• Creare un sistema di gerarchie tra gli elementi dell’interfaccia
• Realizzare una nuova tapbar presente su tutte le schermate dell’app
• Mantenere il carrello nella tapbar per velocizzare la navigazione durante un acquisto multi-prodotto
• Unire “Past order” ed “Incoming order” in un’unica area dedicata agli ordini effettuati
• Realizzare le nuove card prodotto
• Inserire label ed elementi segnaposto nei diversi form
• Considerata la lunghezza dei nomi di persona nella aree geografiche del Medio Oriente, rendere i campi dei form adatti a questa tipologia di dato.

Problematiche ricorrenti identificate

Il flusso di acquisto principale presentava diversi ostacoli che rallentavano la navigazione o impedivano il compimento rapido dell’azione.

L’utente per raggiungere il suo obiettivo doveva compiere più passaggi rispetto a quelli strettamente necessari.

Mancato rispetto delle euristiche di usabilità e delle best practice di accessibilità.

Scenario successivo To-be

Vengono di seguito presentate le scelte di progettazione prese su alcune aree dell’applicazione.

Problema

Nella situazione precedente l’elemento testuale dell’indirizzo di consegna, non comunicava all’utente la possibilità di essere modificabile, in quanto non sottolineato, di colore grigio chiaro dunque di scarsa leggibilità e senza un’icona che indicasse all’utente l’azione da eseguire.

Le card prodotto presentavano gli elementi molto vicini tra loro rendendo difficile toccare il tasto “add to cart”.

All’interno della card il prezzo era posizionato in alto a destra con la stessa UI di una CTA, facendo intendere erroneamente all’utente che quell’elemento fosse selezionabile.

Soluzione

Riposizionare gli elementi nella parte alta della schermata, creando gerarchie chiare per renderli distinguibili.

L’indirizzo stesso è diventato cliccabile, distinguendolo in quanto di colore blu e sottolineato con a fianco una freccia che richiama l’apertura della modale di modifica.

Le card prodotto sono state ridimensionate, riposizionando il prezzo all’interno della card vicino alla CTA.

La call to action è diventata un elemento centrale di ogni card con importanza molto maggiore rispetto a prima, per facilitare il click e l’interazione.

Considerata l’assenza della pagina prodotto dedicata, la CTA stessa diventa un range picker che permette di selezionare la quantità di prodotto che si intende aggiungere al carrello.

---

Problema

Il problema ricorrente dell’assenza di gerarchie ha reso l’interfaccia del carrello molto difficile da comprendere.

Inoltre la stessa schermata svolgeva contemporaneamente sia il ruolo di Carrello che di Checkout, il che comportava un ulteriore aumento di elementi presenti.

I prodotti all’interno del carrello presentavano inoltre le seguenti problematiche:

• Scarsa leggibilità del nome del prodotto a causa della dimensione e del colore;
• Complessità nel selezionare elementi vicini, ad esempio i tasti “+” e “-” per modificare le quantità;
• I tasti “+” e “-” hanno la stessa interfaccia del numero statico al centro. Questo complica la distinzione tra CTA ed elementi non cliccabili;
• A destra di ogni prodotto era presente una “X” di colore rosso altamente difficile da selezionare, il cui scopo era rimuovere articoli dal carrello.

Inoltre il prezzo totale del carrello è posizionato alla fine della pagina, obbligando l’utente a numerosi “scroll verticali” in casi di una elevata presenza di elementi.

Soluzione

La scelta principale che ha aiutato a rendere l’interfaccia più leggibile, è stata quella di dividere Carrello e Checkout in due fasi differenti.

Oltre a migliorare accessibilità ed usabilità, permette anche di allineare la UX di acquisto alle altre app che gli utenti sono soliti ad utilizzare.

Inoltre sono state apportare migliorie alla UI dei singoli elementi nel carrello come:

• Mantenere il nome del prodotto per esteso e leggibile, come l’utente era abituato a vedere sulla pagina di acquisto listing;
• L’interfaccia dei tasti “+” e “-” per modificare le quantità di ogni prodotto è stata riprogettata, distinguendola dal numero rappresentate il totale;
• La “X” presenta alla destra di ogni prodotto è stata rimossa, implementando l’utilizzo della dinamiche di sistema basate sulle gestures di sistema.

Inoltre il prezzo totale del carrello è stato riportato in primo piano su una modale in hover insieme alla CTA “Procedi al pagamento”.

In questo modo l’utente ha sempre visibilità del totale anche in presenza di numerosi elementi, al contrario della situazione precedente dove, nella vecchia interfaccia, il totale poteva essere visualizzato solo alla fine della lista.

---

Problema

Come evidenziato nella problematica precedente, la stessa schermata svolgeva contemporaneamente sia il ruolo di Carrello che di Checkout, il che comportava un ulteriore aumento di elementi presenti.

Soluzione

L’area di pagamento è ora una modale che si sovrappone al Carrello per permettere all’utente un pagamento fluido senza dover abbandonare l’area dell’app in cui si trova.

Inoltre questo permette un’interazione più rapida nel momento in cui l’utente abbia necessità di chiudere momentaneamente la modale per modificare il numero di prodotti che sta acquistando.

Al termine del pagamento l’utente viene portato direttamente sulla pagina degli ordini effettuati.

---

Problema

Nella versione precedente il campo del form contenente la data di consegna era pre compilato indicando la data odierna. I problemi di questa interfaccia erano principalmente:

• Il campo, non avendo un placeholder o una label, non dichiara a cosa si riferisce quel valore;
• L’icona del calendario diventava blu solo dopo averla selezionata una volta, rendendo difficile per l’utente la comprensione del ruolo dell’icona (aprire un date picker);
• Le fasce orarie (cd. “Time Slot”) erano colorate di grigio chiaro rendendo difficile la leggibilità ed inoltre, dato il colore, sembravano elementi disattivati.

Soluzione

Adottare la logica basata su finestre modali che rendono più rapida l’interazione in aree in cui l’utente deve compiere azioni secondarie alla schermata principale.

• Il campo ha un placeholder che dichiara la selezione della data nella diretta prossimità, ed il copy è stato cambiato in “Today” per rendere più facile all’utente la comprensione.
• L’icona del calendario ha assunto uno stile più simile alla CTA principali, per trasmettere all’utente l’azione che si sarebbe verificata al click.
• Le fasce orarie (cd. “Time Slot”) sono diventate una lista con selezione multipla

Conclusioni

Se ti è piaciuto il caso studio e vuoi lavorare con il nostro team per migliorare la tua App, Sito Web o Software, richiedi subito un Audit GRATIS qui sotto ⬇️