Salta al contenuto
Tutti i progetti

Wonderail

un viaggio, una sola app

Un’app che mette in un unico posto treni, alloggi, visite ed esperienze, per chi attraversa l’Europa a tappe. È il progetto finale del corso di UX/UI del Master: ricerca, interfaccia, identità e campagna di lancio, a partire da un brief simulato.

La ricerca dei treni nell’app Wonderail: da Roma Termini a Firenze Santa Maria Novella, con il calendario
La schermata «I tuoi viaggi» con i viaggi in programma e quelli passati
La guida del Colosseo: indirizzo, orari, mappa e informazioni
Progetto
Progetto del Master, su un brief simulato (Airbnb come cliente)
Anno
Anno accademico 2023/24
Il mio ruolo
Ricerca UX, UI design, brand identity, campagna
Con chi
Progetto individuale, seguito dai docenti Ilaria Bonanno e Giacomo Boffo

Contesto

Al Master in Art Direction del Quasar Institute, il corso di UX/UI partiva da un brief simulato: Airbnb vuole un’app che aggiunga il treno, sul modello Interrail, alla sua offerta di alloggi. L’idea è spostarsi da casa a un alloggio, o da un alloggio all’altro, in tutta Europa, senza cambiare servizio.

Il mio ruolo

Ho seguito il progetto dall’inizio alla fine: questionari e analisi dei concorrenti, persone e user journey, architettura e interfaccia dell’app, logo e palette, fino alla campagna di lancio. È stato anche il mio primo progetto in Figma, imparato strada facendo.

La ricerca

cosa ho chiesto, cosa ho trovato

Sono partita dal design thinking: questionari a chi viaggia (quali app usi, quante, per cosa), tre persone tipo, l’analisi di tre app concorrenti e una user journey per capire dove il viaggio si inceppa.

  • Insight 01

    Un viaggio, troppe app.

    Un’app per il treno, una per l’alloggio, una per i luoghi da vedere, altre per visite e attrazioni. Dai questionari il viaggio esce come un percorso a ostacoli, con un passaggio in più a ogni tappa.

  • Insight 02

    A tappe, i piani cambiano.

    Chi gira l’Europa in treno teme di non riuscire a organizzare bene gli spostamenti e di trovare prezzi alti all’ultimo momento. Servono itinerari facili da modificare e tutto a portata di mano durante il viaggio.

  • Insight 03

    Ognuno fa una cosa sola.

    Eurail pianifica l’Interrail ma offre pochi servizi; Sygic organizza tappe e alloggi ma non vende biglietti; Trainline vende biglietti e basta. Nessuno accompagna il viaggio intero.

Per chi

tre persone tipo, tre modi di viaggiare

  • Emma

    25 anni · studentessa

    Viaggia tra un semestre e l’altro, con pochi amici.

    Cerca: Un modo economico e sostenibile per prenotare i treni, informarsi sulle mete, esperienze locali autentiche.

    Teme: Non riuscire a organizzare bene gli spostamenti.

  • Giovanni

    31 anni · fotografo

    Viaggiare è il suo lavoro: crea contenuti di viaggio.

    Cerca: Treni e alloggi affidabili, luoghi suggestivi poco conosciuti.

    Teme: I prezzi alti all’ultimo minuto, restare senza internet in treno.

  • Francesca

    49 anni · docente di storia

    Viaggia con il marito e i due figli, tra mete culturali e convegni.

    Cerca: Prenotare in fretta per tutta la famiglia e vedere più posti possibile.

    Teme: Un viaggio che non va bene per tutti, figli che si annoiano.

Il posizionamento

tre app concorrenti, e dove si colloca Wonderail

Ogni app offre servizi singoli

Eurail
Pianifica l’Interrail, ma offre pochi servizi e la community è fuori dall’app.
Sygic Travel
Organizza tappe e alloggi, ma quasi tutto è a pagamento e non vende treni.
Trainline
Vende biglietti di treni e bus, e si ferma lì.

Nella matrice Wonderail sta sul lato accessibile e sperimentale, vicino ad Airbnb.

Il concept

l’idea da cui è partito tutto

Non un’altra app di acquisto: un contenitore che accompagna tutto il viaggio, dalla prima ricerca al ritorno.

Wonderail si collega ai servizi che chi viaggia usa già (Airbnb e Booking per gli alloggi, treni, voli, visite) e li riunisce in un solo posto. Estende a tutto il percorso la logica delle “Esperienze” di Airbnb, aggiunge mini guide ai luoghi da visitare e un programma a punti: ogni tappa raggiunta vale sconti su treni e alloggi.

Il viaggio con Wonderail

la user journey, dal bisogno di partire al ritorno

Una journey in sei fasi, dal bisogno di partire al ritorno. Il punto più basso è la ricerca: tante app, nessuna completa. Da quando il viaggiatore trova Wonderail la curva risale.

La user journey di Wonderail, fase per fase
BisognoRicercaSceltaPianificazioneAcquistoViaggio
Esperienza

Vuole fare un bel viaggio

Cerca come comprare il pass Interrail e organizzare le tappe

Cerca siti e app

Confronta le app per capire qual è la più conveniente, per prezzo e facilità d’uso

Trova Wonderail

Scopre nell’app i consigli sul percorso

Aggiunge tutte le mete che vuole visitare

Compra i biglietti, prenota alloggi e visite

Prende tutti i treni e raggiunge le mete senza problemi

Con le tappe visitate accumula punti: sconto sul prossimo viaggio

Aspettative

Sarà un bel viaggio

Alte aspettative; vuole che sia un bel viaggio senza intoppi

Scettico: possibile che un’app abbia tutto?

Sorpreso da quanto è semplice

Più facile del previsto

Quasi troppo facile: arriverà qualche problema?

Soddisfatto: la userà ancora e la consiglierà

Touchpoint

Ricerca su Google

App Store

Consigli e pagina di acquisto dei biglietti

Funzioni di scelta e pianificazione

Funzioni di acquisto e prenotazione

L’app durante il viaggio

Pain point

Non sa quale itinerario scegliere

Tantissime scelte, ma nessuna davvero completa

È indeciso tra diverse app

—

Avrebbe voluto pianificare più mete

—

Soluzioni

Itinerari consigliati da altri utenti

Tutte le funzioni per organizzare il viaggio in una sola app

Un’app che si distingue per funzioni e interfaccia

—

Con l’uso prende confidenza e sfrutta meglio l’app

—

  1. 01 · Bisogno

    felice

    Esperienza

    Vuole fare un bel viaggio

    Aspettative

    Sarà un bel viaggio

    Touchpoint

    Ricerca su Google

    Pain point

    Non sa quale itinerario scegliere

    Soluzioni

    Itinerari consigliati da altri utenti

  2. 02 · Ricerca

    insoddisfatto

    Esperienza

    Cerca come comprare il pass Interrail e organizzare le tappe. Cerca siti e app

    Aspettative

    Alte aspettative; vuole che sia un bel viaggio senza intoppi

    Touchpoint

    App Store

    Pain point

    Tantissime scelte, ma nessuna davvero completa

    Soluzioni

    Tutte le funzioni per organizzare il viaggio in una sola app

  3. 03 · Scelta

    neutro

    Esperienza

    Confronta le app per capire qual è la più conveniente, per prezzo e facilità d’uso. Trova Wonderail

    Aspettative

    Scettico: possibile che un’app abbia tutto?

    Touchpoint

    Consigli e pagina di acquisto dei biglietti

    Pain point

    È indeciso tra diverse app

    Soluzioni

    Un’app che si distingue per funzioni e interfaccia

  4. 04 · Pianificazione

    felice

    Esperienza

    Scopre nell’app i consigli sul percorso. Aggiunge tutte le mete che vuole visitare

    Aspettative

    Sorpreso da quanto è semplice

    Touchpoint

    Funzioni di scelta e pianificazione

  5. 05 · Acquisto

    felice

    Esperienza

    Compra i biglietti, prenota alloggi e visite

    Aspettative

    Più facile del previsto. Quasi troppo facile: arriverà qualche problema?

    Touchpoint

    Funzioni di acquisto e prenotazione

    Pain point

    Avrebbe voluto pianificare più mete

    Soluzioni

    Con l’uso prende confidenza e sfrutta meglio l’app

  6. 06 · Viaggio

    felice

    Esperienza

    Prende tutti i treni e raggiunge le mete senza problemi. Con le tappe visitate accumula punti: sconto sul prossimo viaggio

    Aspettative

    Soddisfatto: la userà ancora e la consiglierà

    Touchpoint

    L’app durante il viaggio

Identità

un segno riconoscibile

Icona

Le iniziali in un solo tratto

W e R legate in una linea continua e arrotondata. Funziona anche da sola, come icona dell’app sullo smartphone.

Logotipo

Minuscolo e morbido

Un logotipo tutto minuscolo, con le stesse curve dell’icona, nel verde dell’interfaccia: amichevole e facile da leggere anche in piccolo.

  • Verde notte

    #014E47 · testi e titoli

  • Verde bosco

    #017168 · titoli su fondo chiaro

  • Verde acqua

    #009489 · bottoni e elementi attivi

  • Turchese

    #3ECABF · icone e dettagli

  • Acqua chiara

    #8FFFF6 · fondi di schede e filtri

Cinque toni presi dalla scala, dal più scuro al più chiaro: ognuno ha un compito preciso nell’app e nella campagna.

La scala completa

Dodici verdi acqua

Un solo colore per app e campagna, dal più scuro al più chiaro: richiama la mobilità green a cui guarda il target. I toni scuri reggono testi e titoli, quelli medi bottoni ed elementi attivi, quelli chiari fanno da fondo a schede e filtri.

  • #014E47
  • #016057
  • #02665C
  • #017168
  • #008378
  • #009489
  • #00A699
  • #1FB8AC
  • #3ECABF
  • #5DDBD1
  • #7CEDE4
  • #8FFFF6

Un solo carattere, per tutto

Urbanist

Regular SemiBold Bold

Geometrico e arrotondato; Bold per i titoli, SemiBold per bottoni ed etichette, Regular per i testi.

La guida del Colosseo nell’app: tutti i testi sono in Urbanist
Urbanist nell’app

L’app

cinque sezioni, dall’inizio alla fine del viaggio

Ho diviso le funzioni in cinque sezioni, una per ogni voce del menù. Per ciascuna ho disegnato prima il flusso, poi le schermate in Figma: scegli una sezione per vederle insieme.

La ricerca sulla mappa: attrazioni, trasporti e luoghi di Firenze

Cerca

Treni, attrazioni ed esperienze in una sola ricerca, anche sulla mappa. Dalla ricerca si arriva all’acquisto senza uscire dall’app.

Il flusso

  • Cerca
    • Treni
      • Dove si va?
        • Quando?
          • Chi?
            • Visualizza treni
              • Scegli treno
                • Visualizza dettagli treno
    • Esperienze
      • Dove si va?
        • Quando?
          • Tipo di attività
            • Prezzo
              • Visualizza esperienze
                • Visualizza dettagli esperienze
                  • Scegli esperienze
    • Mappa
      • Cerca
Un viaggio in Italia, Svizzera, Francia e Belgio con le sue tappe e i biglietti

Viaggi

Ogni viaggio con le sue tappe: per ognuna biglietti del treno, prenotazioni ed esperienze, e la guida della città.

Il flusso

  • Viaggi
    • Visualizza viaggi
      • Viaggio 1
        • Visualizza esperienze
          • Visualizza dettagli esperienze
            • Biglietto treno
            • Prenotazioni
            • Esperienze
      • Viaggio 2
        • Visualizza esperienze
          • Visualizza dettagli esperienze
            • Biglietto treno
            • Prenotazioni
              • Guida turistica
            • Esperienze
La guida del Colosseo: indirizzo, orari, mappa e informazioni

Guida

Storia e curiosità dei luoghi da visitare, tappa per tappa: destinazioni popolari, attrazioni, ricerca libera.

Il flusso

  • Guida
    • Cerca
      • Visualizza ricerca
        • Seleziona
          • Visualizza dettagli ricerca
    • Destinazioni popolari
      • Roma
    • Attrazioni
      • Colosseo
La community: domande popolari e itinerari consigliati

Community

Itinerari, consigli e domande di chi è già partito, divisi per gruppi e argomenti.

Altre schermate della community: gruppi e itinerari consigliati
Il profilo: le mie esperienze, i gruppi e gli argomenti

Profilo

Il proprio profilo con foto, esperienze e gruppi, e i punti raccolti raggiungendo le tappe.

Il flusso

  • Profilo
    • Visualizza profilo
      • Foto e video
      • Le mie esperienze
      • I miei gruppi
      • Argomenti
      • Preferiti

L’acquisto del biglietto

dalla ricerca al biglietto del treno

  1. Cerca
  2. Dove, quando, chi
  3. Scegli il treno
  4. Classe e posto
  5. Biglietto
  1. La ricerca del treno: dove, quando, chi

    Tre domande, nell’ordine in cui le pensa chi viaggia. Le tappe si aggiungono con un tasto, per i viaggi in più città.

  2. L’elenco dei treni con orari, cambi e prezzi

    Orari e cambi in colonna, il prezzo allineato a destra: si confronta a colpo d’occhio.

  3. La scelta della classe e del posto sul treno

    Classi come schede da scorrere e mappa dei posti: si sceglie guardando, non leggendo.

  4. Il biglietto del treno con il codice QR e i servizi a bordo

    Il biglietto resta in Viaggi con il QR pronto, insieme ai servizi a bordo.

La campagna

un collage per ogni viaggio

Per il lancio ho immaginato l’app come un diario di viaggio. I visual sono collage di luoghi naturali e culturali, come un moodboard o una raccolta di foto o uno scrapbook, sotto il claim “Travel Simplified, Wonders Amplified”.

Manifesti 300 × 135 cm nelle stazioni e nelle metro delle principali città europee.

Annunci a pagina singola A4 su riviste di lifestyle e di viaggio.

Campagna di lancio su Instagram: post, storie e reel.

Il post di Wonderail nel feed di Instagram
Una storia di Wonderail su Instagram

Cosa è stato realizzato

  • questionari
  • persone e user journey
  • analisi dei concorrenti
  • user flow
  • interfaccia dell’app
  • logo e icona
  • palette e carattere
  • affissioni e stampa
  • campagna Instagram

Cosa ho imparato

È stato il mio primo progetto di UX e il mio primo progetto in Figma. Da viaggiatrice facevo parte del target, e questo mi ha aiutata a leggere i questionari. Ho imparato a partire dai problemi delle persone prima di disegnare, e che un’interfaccia si costruisce provando e sbagliando: molte schermate le ho rifatte più di una volta.

Il prototipo navigabile è stato testato per l’esame: è stato il primo confronto con qualcuno che usava davvero un’interfaccia progettata da me.

Prossimo progetto

continua a guardare

Tutti i progetti

Contatti

lavoriamo insieme?

Che si tratti di un ruolo nel tuo team o di un singolo progetto, scrivimi via email o dal modulo.

Città
Roma, Italia

Manda un messaggio

Uso i tuoi dati solo per risponderti. Informativa privacy