Case study
Inflight
Un'app di fatturazione per una società di spedizioni con i droni: chiara, senza vicoli ciechi. Il mio primo progetto seguito dall'inizio alla fine, dalla ricerca all'interfaccia.
- Ruolo
- UX/UI Designer
- Periodo
- Lug 2023 – Gen 2024
- Contesto
- Google UX Certificate
- Tipo
- App di fatturazione (spedizioni con droni)
- Strumenti
- Figma
La sfida
Le app di fatturazione confondono. Questa non doveva.
Iscritto al Google UX Design Certificate, mi è stato chiesto di progettare un'app di fatturazione per una società che spedisce con i droni. Un dominio nuovo, un brief netto: niente vicoli ciechi, niente passaggi che confondono.
L'ho preso come l'occasione per guidare un prodotto dall'inizio alla fine, e dimostrare (a me stesso per primo) di saperlo fare.
Il mio ruolo
L'unico designer, dall'inizio alla fine.
Ho posseduto ogni fase: ricerca, definizione, design e test. Ecco cosa ho fatto in concreto.
- RicercaInterviste e sintesi
- PersonasPersonas e journey map
- ArchitetturaIA e flussi dell'app
- DesignWireframe, prototipi, UI
- TestDue studi di usabilità
Ricerca
Ho parlato con due tipi di utenti e ho ascoltato le stesse frustrazioni.
Giovani con poco tempo e adulti con carriere avviate: gruppi diversi, stessi ostacoli. Dalle interviste sono emersi quattro pain point ricorrenti.
Struttura confusa
Menu che si avvitano su sé stessi e vicoli ciechi: l'utente si perde.
Troppi passaggi
Anche un'azione semplice come emettere una fattura richiede troppi tap.
Stato poco chiaro
Inviata? Pagata? In sospeso? Non si capisce a colpo d'occhio.
Leggibilità scarsa
Testo piccolo e contrasto basso rendono la scansione faticosa.
Personas
Due persone per cui progettare
Alex Ortega
24 · Freelance creativo
Si destreggia tra più clienti. Vuole archiviare la fatturazione in pochi minuti e tornare al lavoro che ama.
Obiettivi
- Emettere una fattura in pochi tap
- Vedere chi ha pagato a colpo d'occhio
- Nessuna curva di apprendimento
Frustrazioni
- Dashboard affollate
- Non sapere se la fattura è partita
Eva Muller
46 · Responsabile operativa
Gestisce la fatturazione di un team impegnato. Ha bisogno di affidabilità e chiarezza, senza sorprese.
Obiettivi
- Una panoramica chiara e leggibile
Journey map
Dove si accumulava l'attrito
Mappando il percorso dell'emissione di una fattura, il punto critico è emerso chiaro.
- 01
Innesco
Una spedizione è consegnata: è ora di fatturare.
Neutro - 02
Trova il cliente
Cerca il cliente giusto tra molti.
Neutro - 03
Crea la fattura
Qui il vecchio flusso si inceppava: troppi campi, troppi passaggi.
Attrito - 04
Rivedi e invia
Controlla e invia, sperando che parta davvero.
Attrito - 05
Traccia il pagamento
Con uno stato chiaro, finalmente tranquillità.
Sollievo
Processo
Dalla ricerca all'interfaccia
- 01
Empatia
Interviste con i due gruppi di utenti.
- 02
Definizione
Personas, journey map e il problema da risolvere.
- 03
Ideazione
Cinque wireframe su carta per schermata, poi fusi nel migliore.
- 04
Prototipo
Da wireframe digitali a mockup in alta fedeltà.
- 05
Test
Due studi di usabilità, iterando a ogni round.
- 06
Consegna
UI finale e decisioni di design documentate.
Per i wireframe ho disegnato cinque varianti per ogni schermata principale, scelto da ognuna i pezzi migliori e fusi in un'unica direzione, così gli sviluppatori (e me stesso) partivano da basi solide.
Test di usabilità
Due round, ogni volta più chiaro
Studio 1
6 partecipanti · 30–60 anni · 2 con tecnologie assistive
Tasso di completamento · Tempo sul task · Soddisfazione
- 1Rendere più chiari i filtri
- 2Esporre il dettaglio del grafico con più leggibilità
- 3Rivedere il flusso “aggiungi fattura”
Studio 2
6 nuovi partecipanti · focus sull'aggiunta fatture
Flusso principale · esperienza complessiva
- 1Il pulsante “Aggiungi” era ambiguo e si sovrapponeva
- 2Non si potevano creare fatture dal profilo cliente
- 3Servivano menu a tendina per separare le sezioni
Design visivo
Calmo, leggibile, di cui fidarsi
Tipografia
Aa
Visby: costruzione aperta e ariosa, ottima leggibilità. Gerarchia secondo il Material Design 3.
Colore
Il verde per la sua natura rassicurante; forme più scure per un tono professionale.
Accessibilità
Contrasto AA, scala tipografica e spaziatura pensate per la lettura. Testato anche con partecipanti che usano tecnologie assistive.
Le schermate
Il risultato
Gli schermi reali, impilati come carte: passaci sopra per sfogliarli, clicca per aprirli affiancati.
In conclusione
È stata la prima volta che ho guidato qualcosa dall'inizio alla fine, dalla ricerca fino all'UI. Portarlo per l'intera distanza è ciò che mi ha dimostrato di potercela fare.
Galleria
Tutte le schermate
