Software & App
Momento – UX Mobile App Design
19 Marzo 2021
•
8 min lettura
Mobile App Design, come progettare la UX di un'App Mobile per iOS e Android
Introduzione
Momento è un’app che mette in contatto gli utenti con i fotografi più adatti a soddisfare le proprie esigenze.
Attraverso l’applicazione gli utenti hanno la possibilità di scoprire differenti servizi e fotografi, scegliere il luogo e il momento migliore ed acquistare un servizio fotografico.
Direttamente all’interno dell’app è inoltre possibile comunicare con i fotografi e ricevere tutti gli scatti realizzati.
L’applicazione permette ai fotografi di creare la propria identità, facendosi riconoscere nel mercato per il proprio stile e le proprie competenze, accogliendo dagli amatoriali ai professionisti.
Cliente
Momento è una startup italiana nata nel 2020 con l’obiettivo di innovare il mercato della fotografia.
La fase iniziale della progettazione è stata condotta dai Founder, che hanno sviluppato un MVP per iniziare a testare offline con la community creata nei mesi precedenti.
Nella successiva sezione Design, analizziamo alcuni Before/After rispetto al MVP iniziale
Obiettivi
Progettare una Mobile Experience unica per entrambi i target utenti.
Durante la progettazione di un’esperienza che ruota interamente attorno ad un’App, sono da considerare numerosi fattori per realizzare un’ottima esperienza di utilizzo.
La Mobile UX comprende l’intera esperienza che un utente ha con un’app mobile, dunque è fondamentale analizzare il comportamento degli utenti durante tutte le diverse fasi di utilizzo dell’App.
Per raggiungere questo obiettivo è stato molto utile condurre test direttamente offline insieme agli utenti durante le giornate “shooting day” organizzate del cliente.
Processo
Per assicurarci di raggiungere gli obiettivi prefissati insieme al team del nostro cliente, ci siamo concentrati su:
- Coinvolgere esperti di dominio: Il settore fotografico non rientra nelle strette conoscenze di Eye Studios, quindi in questi casi è fondamentale assicurarsi di avere tra gli stakeholder un esperto del settore. In questo caso specifico, uno dei co-fondatori della start-up nonché la community dei fotografi a disposizione.
- Adattarsi a modelli esistenti: Lanciando un nuovo prodotto non ancora presente sul mercato, è importante comprendere a cosa gli utenti sono attualmente abituati a rispettare quei modelli durante l’intera progettazione.
Gli utenti mobile sono molto orientati all’obiettivo. Si aspettano di poter ottenere ciò di cui hanno bisogno, immediatamente e alle loro condizioni.
Google and AnswerLab Research
User & Audience
L’audience di riferimento è composta da fotografi amatoriali e professionisti che vogliono ampliare il loro mercato ed affinare le proprie capacità. Privati e aziende che cercano foto di qualità, anche in tempi brevi e, hanno difficoltà ad individuare le risorse più adatte a loro.
Workflow e Flussi di Utilizzo
Durante la fase iniziale del progetto, abbiamo definito insieme al team product del cliente i requisiti principali che dovevano essere raggiunti.
In questi casi, in un buon processo di progettazione della User Experience, bisogna concentrarsi principalmente sugli obiettivi di business derivati dal modello di business dell’azienda.
Quindi non è sempre possibile trarre conclusioni su funzionalità, in quanto molte verranno definite durante la fase di design stessa.
I workflow Principali riguardano i due utenti chiave:
- Utenti che desiderano acquistare un servizio fotografico, definiti di seguito “clienti”
- Utenti fotografi che mettono a disposizione il proprio servizio, definiti di seguito “fornitori”
Il Workflow rappresenta una fase astratta, ma risulta fondamentale per il successo finale dell’applicazione.
Non stiamo più parlando di elementi visibili sullo schermo del dispositivo, ma piuttosto di movimenti e interazioni dell’utente tra varie funzioni.
In questo caso parliamo degli spostamenti che l’utente compie tra un’area e l’altra per raggiungere tutte le funzionalità. A questo stadio, non si definisce ancora l’interfaccia.
É fondamentale occuparsi correttamente del flusso di navigazione perché permette di progettare l’intera esperienza senza focalizzarsi solo sulle singole schermante.
Wireframing low fidelity
Il Wireframing Low Fidelity è essenziale per riuscire a concretizzare in breve tempo le idee di progettazione agli stakeholder.
Questo ci ha permesso di trasformare il workflow in un “WireFlow”, ovvero un primo ibrido che permette di definire le User Stories principali ed identificare le funzionalità necessarie
Utilizziamo sempre un approccio che parte dai Wireframing perché permette di ottenere 3 benefici fondamentali:
- Risparmio di tempo: invece di impiegare troppo tempo per un wireframe avanzato, questo permette di ricevere feedback velocemente e quindi muoversi in maniera nettamente più agile.
- Risparmio di risorse: il tempo non è l’unica preziosa risorsa. Durante la gestione progettuale è fondamentale un coordinamento sulle risorse economiche, per assicurarsi che l’investimento sia ottimizzato per il nostro cliente. Progetti complessi richiedono budget elevati ed un Wireframing di questo tipo ti aiuterà ad evitare di sprecare denaro in idee impossibili o irrealizzabili.
- Allineare tutti gli Stakeholder
Uno dei concetti chiave alla base della UX Design, è proprio quello di costruire un processo di progettazione condiviso da tutti. Questo strumento di facile comprensione e utilizzo, permette a tutti gli stakeholders di comprendere al meglio la direzione scelta.
Durante questa fase ci siamo concentrati sul validare i flussi principali alle base dell’applicazione:
- Home page e Local (discovery)
- Acquisto di un servizio (revenue)
- Profilo (community)
Stories e Funzionalità
Dopo aver validato le funzionalità principali insieme al team product del cliente, siamo passati alla fase di definizione delle bozze di User Stories e Funzionalità principali.
Queste sono poi state raffinate e migliorate dal team di sviluppo, integrandole all’interno del processo di produzione.
Una bozza del backlog della funzionalità, permette di creare sinergia con il team di developers e può inoltre essere molto utile per sapere su quali task concentrarsi durante l’avanzamento del progetto.
Le User Story permettono di definire il prodotto in maniera chiara, permettendo, sia al team che al cliente, di capire come l’utilità e la priorità.
Design
In questa sezione vengono presentate alcune delle scelte di design prese analizzando i dati della UX Research.
Home Page e Discovery
Insight: La pagina principale che l’utente si trovava davanti era simile al noto social network Instagram. Inizialmente sembrava un’ottima soluzione, in quanto rispettavo un’abitudine di utilizzo comune a tutti.
Questo però impediva di compiere lo scopo principale dell’home page: scoprire i fotografi nella tua zona, filtrarli per tipologia di servizio fotografico completando la fase di Discovery
Soluzione: Dopo aver analizzato le principali applicazioni di food delivery, abbiamo notato i pattern comuni del processo di Discovery di un nuovo fornitore (sia esso un ristorante o come nel nostro caso un fotografo).
Questo ha permesso di guidare la progettazione della nuova home page con l’obiettivo primario di suddividere gli fotografi per categorie, per servizio e successivamente guidare ai profili dei singoli utenti.
Acquistare un Servizio
Insight: L’area principale dell’applicazione (acquisto nuovo shooting) non era di facile comprensione a causa della mancanza di informazioni.
Durante il flusso di acquisto di uno Shooting, l’utente non era al corrente dello step in cui fosse.
Soluzione: Dividere in 3 macro aree le azioni richieste all’utente: Servizio, Quando, Luogo. Aggiunto il copy “programma il tuo Shooting” che fa capire l’utente l’attività principale della pagina. Servizio, Quando e Luogo sono 3 step differenti i quali, dopo essere stati impostati, possono essere cambiati singolarmente.
Checkout in-app
Insight: gli utenti hanno la possibilità di acquistare le fotografie scattate durante lo Shooting direttamente all’interno dell’app. Nel MVP realizzato, erano assenti informazioni fondamentali per il check out, come:
- Valore economico delle foto pagate in acconto
- Possibilità di richiudere facilmente il carrello per tornare agli acquisti
Soluzione: Comunicare chiaramente all’utente quale fosse il valore economico dell’acconto da lui versato, mostrando il totale aggiornato e complessivo (evitando inconvenienti o spiacevoli sorprese nelle fasi successive). Inoltre abbiamo adottato un’interazione basata su un elemento “slide up” che permette all’utente di comprendere in quale area si trova e nascondere facilmente il carrello per continuare gli acquisti.
Profilo Utente Fotografo
Insight: Durante la fase di ricerca abbiamo individuato ciò che i clienti cercavano maggiormente quando si informavano su un fotografo.
Le informazioni principali riguardavano il punteggio, e la possibilità di visualizzare i suoi altri profili sui social network ed una rapida scoperta degli scatti precedentemente realizzati.
Soluzione: Abbiamo utilizzato queste informazioni per realizzare il nuovo profilo dell’utente fotografo in grado di soddisfare le esigenze dell’utente clienti. Questo facilita una creazione di fiducia importante nei confronti dei fotografi. È stata inoltre implementata una navigazione per categorie in base agli scatti precedentemente caricati.
Shooting e Prenotazioni Attive
Insight: I problemi sorti durante i test della beta, ci hanno permesso di identificare quali aree necessitavano di particolare importanza. In primis la parola “Ingaggi” non rendeva facilmente comprensibile di quale area si trattasse. Successivamente abbiamo identificato quali stadi del servizio era necessario comunicare agli utenti finali, ovvero:
- In programma (futuro)
- In corso (presente)
- Concluso (passato)
Soluzione: Riorganizzazione dei menu principale, identificando quest’area sotto l’etichetta “Shooting”, permettendo di creare una diretta correlazione con il processo di acquisto (chiamato “programma shooting”).
Inoltre abbiamo realizzato una chiara suddivisione in base agli stadi del servizio, che permettesse all’utente di orientarsi in breve tempo e intraprendere il percorso corretto.
Branding e UI Design
Logo, Naming e Brand identity, sono stati realizzati interamente dal team product della startup.
Ci siamo occupati di collaborare e insieme al responsabile grafico del cliente per tradurre al meglio le loro scelte di brand identity e posizionamento all’interno dell’interfaccia della nuova app.
Questa parte è risultata fondamentale perché ha permesso di tradurre i loro valori e la loro visione, integrandoli con la nuova Experience da noi progettata per creare il prodotto finale migliore.
Font e Colori
Nunito è una famiglia di caratteri sans serif equilibrata, con 2 versioni: Il progetto è iniziato con Nunito, creato da Vernon Adams come un sans serif arrotondato per la tipografia da esposizione.
Jacques Le Bailly lo ha esteso a un set completo, e una versione regolare non arrotondata, Nunito Sans.
Menu e Navigazione
Abbiamo adottato un menu con Tap Bar nella parte inferiore dello schermo.
Queste tipologie di navigazione sono comuni nelle app, in quanto riescono a guidare l’utente in maniera facile nelle aree principali dell’applicazione.
Non sempre questa soluzione è realizzabile, perché nel caso in cui l’applicazione presenti molteplici aree (solitamente più di 5) di eguale importanza, il menù di questa tipologia compromette l’usabilità.
“Lontano dagli occhi è lontano dalla mente”, e se le categorie sono molto diverse è probabile che gli utenti non arrivino a scoprirle tutte.
In questo caso studio, la soluzione è risultata comunque ottimale.
Icon Set
L’utilizzo dell’icone ricopre un ruolo fondamentale nell’ottimizzazione dell’usabilità e dell’accessibilità delle interfacce. Una buona icona può semplificare diversi passaggi per l’utente.
Ciò che rende utile un’icona è il fatto che il suo significato può essere compreso senza leggere un testo.
Abbiamo deciso di adottare icone principali riconosciute comunemente e note agli utenti, la quale è una Best Practice fondamentale.
Spesso capita che durante il processo di progettazione vengano identificate forme estremamente “artistiche” realizzando icone che, seppur affascinanti, non comunicano il messaggio corretto.
È fondamentale usare icone che sono familiari agli utenti, perché la comprensione di un’icona da parte dell’utente si basa sulle sue esperienze precedenti.
Le icone che abbiamo selezionato sono allineate al branding e alle linee guida definite insieme al team product del cliente, in modo da rispettare lo stile comunicativo e visuale del prodotto.
Daniele Lunassi
Design Lead