Foome

Web Design

Tipo progetto

Concept

Titolo

TakeMeHome

Tipo progetto

Concept

Ruolo

UX/UI Designer

Anno

2024

  • Il progetto in breve โ€“

Ho guidato la progettazione end-to-end di TakeMeHome, il servizio che permette di prenotare un autista per guidare la propria auto al posto proprio, superando i costi e i vincoli di taxi e NCC. Come unico UX Designer, ho applicato il validated learning per validare sul campo un'esperienza d'uso rapida e trasparente, azzerando i rischi di mettersi al volante stanchi o alterati e trasformando il veicolo privato in una risorsa sicura.

Problema

Many home cooks abandoned recipes mid-preparation due to unclear instructions, lack of timing guidance, or overwhelming ingredient lists. Existing apps failed to provide real-time, interactive support, leading to frustration and wasted meals.

Ruolo

The app was designed to offer step-by-step voice commands, built-in timers, and adjustable portion sizes. By integrating smart kitchen tech, Foome aimed to reduce user errors and boost confidence in amateur chefs.

Soluzione

With over 1 million monthly recipe completions, Foome improved cooking success rates and user retention. Its interactive approach made meal prep more approachable, earning features in top culinary publications.

Vuoi vedere direttamente il
risultato finale?

Vuoi vedere direttamente il
risultato finale?

Analisi dei competitor

Ho analizzato tre competitor: CiaoAldo, Dryver e ItTaxi. Emerge che in Italia funziona solo la commissione diretta, non l'abbonamento, e che trasparenza, risparmio e sicurezza sono leve di differenziazione ancora inespresse.

  • Piano di ricercaโ€“

Recipe platforms were often static, requiring users to juggle multiple tabs or scroll endlessly. Foome recognized the need for a hands-free, guided cooking experience that adapted to different skill levels and kitchen setups.

Campione:

20 utenti

Metodologia:

Interviste e questionari

Mappa delle affinitร 

Organizzo i dati delle interviste in una mappa di affinitร , raggruppando le risposte in sette categorie: pain point, rischio, aspettative sul servizio, friction, pricing, profilo utente e spunti. Da questi pattern individuo i bisogni reali su cui costruire le persona.

    1. Pain Point

    1. Gestione del rischio

    1. Aspettative sul servizio

    1. Friction

    1. Pricing e business model

    1. Profilo dell'utente target

    1. Spunti e suggerimenti

User Personas

Dai pattern dell'affinity map costruisco tre user persona, Gianfranco, Nicola e Lorenzo, che rappresentano segmenti diversi di utenti con bisogni, frustrazioni e abitudini distinte. Assegno a ciascuno un punteggio di business affinity per stabilire le prioritร  di design.

Customer Journey

Per ogni persona costruisco una customer journey map che segue il percorso emotivo dall'attivazione alla recensione finale, evidenziando picchi di soddisfazione e cali di fiducia lungo ogni touchpoint. Individuo cosรฌ i momenti critici su cui intervenire con soluzioni mirate.

  • Sitemapโ€“

Per TakeMeHome ho progettato l'architettura dell'informazione mappando ogni flusso utente in una sitemap strutturata. Ho organizzato gerarchicamente le schermate per Passeggeri, autisti e Business, definendo i cross-link contestuali per garantire una navigazione fluida e intuitiva.

User Flow

Per TakeMeHome ho disegnato lo user flow ottimizzando ogni punto di contatto tra passeggeri e conducenti. Ho tracciato percorsi chiari e lineari per la prenotazione e la gestione delle corse, riducendo le frizioni visive e guidando l'utente verso l'obiettivo.

Wireframe Hi-Fiโ€“

Dallo user flow realizzo il wireframe dei percorsi principali dell'app, facili da validare perchรฉ concentrati su layout e interazioni piuttosto che sul visual. Solo dopo aver verificato la coerenza dei flussi passo alla versione ad alta fedeltร , con componenti riutilizzabili pronti per l'handoff.

Usability Test

Testo onboarding, prenotazione, modifica ed eliminazione corsa. Emergono tre criticitร : tasto indietro troppo piccolo, tasto modifica difficile da trovare, dubbi sul perchรฉ servano tanti dati. Ridimensiono il tasto indietro, rendo il modifica piรน visibile e ridondante, aggiungo un'intro informativa e rivedo il copy della modal.

Testo onboarding, prenotazione, modifica ed eliminazione corsa. Emergono tre criticitร : tasto indietro troppo piccolo, tasto modifica difficile da trovare, dubbi sul perchรฉ servano tanti dati. Ridimensiono il tasto indietro, rendo il modifica piรน visibile e ridondante, aggiungo un'intro informativa e rivedo il copy della modal.

Sezione viaggia

Nei test, 3 utenti su 5 faticavano a trovare โ€œModificaโ€. Ho reso visibili le azioni principali nella scheda della corsa e le ho aggiunte nel dettaglio della prenotazione, dove gli utenti si aspettavano di trovarle.

Flusso di prenotazione

Nei test ho rilevato poca chiarezza sul motivo dei dati richiesti. Ho introdotto un passaggio dedicato prima della compilazione e reso piรน evidente lโ€™avviso nel modulo, per spiegare a cosa servono quei dati.

Visual Style

Ho definito un Visual Style basato su un blu profondo che comunica sicurezza e affidabilitร . Ho poi integrato il glassmorphism: la trasparenza del vetro simboleggia la chiarezza del servizio, garantendo un'interfaccia moderna e protetta.

Main Color

HEX:

#0F244D

HEX:

#071227

Darker

Darker

HEX:

#214C9F

Lighter

Lighter

HEX:

#E7EDF9

Subtle

Subtle

Branding Gradient

HEX 1:

#071227

HEX 2:

#0F244D

HEX3:

#214C9F

HEX 4:

#071227

Gradient

HEX 1:

#071227

HEX 2:

#0F244D

HEX3:

#214C9F

HEX 4:

#071227

Dark 1

HEX:

#3A3A3C

Dark 2

HEX:

#6B7588

Dark 3

HEX:

#8F90A6

Dark 4

HEX:

#C7C9D9

Light 1

HEX:

#3A3A3C

Light 2

HEX:

#3A3A3C

Light 3

HEX:

#3A3A3C

Light 4

HEX:

#3A3A3C

Aa

Stack Sans

Notch

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789! @$*-=\:'",./?โ‚ฌ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789! @$*-=\:'",./?โ‚ฌ

Viaggia

Attivitร 

Supporto

Account

Home

Display 1

40 Extralight

Heading 1

32 Bold

Heading 2

28 Bold

Heading 3

24 Bold

Heading 4

20 Bold

Body Medium

18 Regular

Body Normal

16 Regular

Body Small

14 Regular

Body XS

12 Regular

Body XXS

10 Medium

Display 1

40 Extralight

Heading 1

32 Bold

Heading 2

28 Bold

Heading 3

24 Bold

Heading 4

20 Bold

Body Medium

18 Regular

Body Normal

16 Regular

Body Small

14 Regular

Body XS

12 Regular

Body XXS

10 Medium

Ui Kit

Ho creato un UI Kit unificato definendo le componenti principali con tutte le relative varianti. Ho strutturato i diversi stati d'interazione per ciascun elemento e bottone, garantendo coerenza visiva al sistema e scalabilitร  per futuri sviluppi.

Aggiungi unโ€™ora a 10 โ‚ฌ

Prolunga la prenotazione e approfitta di questa offerta.

Aggiungi 1 ora

โœฆ

-o -floating card -aggiungi ora

2 Varianti

+

Main Hub

Il flusso di prenotazione in home risponde ai pattern comportamentali emersi nella ricerca utenti: un'esperienza in pochi clic progettata per la User Persona Gianfranco, che risponde alle esigenze di chi ha poco tempo. Offre la stima dei costi in tempo reale e consente la programmazione anticipata fino a un anno, garantendo massima efficienza e flessibilitร .

Il flusso di prenotazione in home risponde ai pattern comportamentali emersi nella ricerca utenti: un'esperienza in pochi clic progettata per la User Persona Gianfranco, che risponde alle esigenze di chi ha poco tempo. Offre la stima dei costi in tempo reale e consente la programmazione anticipata fino a un anno, garantendo massima efficienza e flessibilitร .

Il checkout si completa in 5-6 clic. L'accordion attivo si evidenzia in automatico per ridurre il carico cognitivo.

Navigazione da bottom bar

Selezione tipo di viaggio

Ingresso nel flusso focus

  • Sezione Viaggia โ€“

La sezione Viaggia garantisce il controllo totale delle prenotazioni permettendo il filtraggio tra attive e in pendenza. Risolve i problemi emersi nei test evidenziando i tasti di modifica, la funzione "aggiungi ore" e il download rapido dei documenti tramite un pratico floating menu.

Filtra i viaggi

Filtra in un tap le corse attive e quelle ancora in attesa.

Gestisci corsa

Modifica i dati oppure elimina il viaggio in pochi clic.

Dettagli e file.

Visualizza i dettagli del viaggio e scarica i documenti.

Il Prototipo

Traduco i wireframe in un prototipo interattivo cliccabile, testato con utenti reali su registrazione, prenotazione e gestione dei viaggi. Dagli usability test emergono frizioni che risolvo con modifiche mirate, come rendere piรน visibile il tasto "Modifica" e aggiungere lo stato delle notifiche nella card viaggio.

Cosa farei diversamente

Inizierei da un profilo utente provvisorio per formulare le mie ipotesi iniziali. Userei poi la ricerca, l'analisi dei concorrenti e le indagini sul campo per convalidarle gradualmente.


Eviterei di raccogliere troppi dati nella fase iniziale. In questo modo ridurrei i tempi di sintesi e manterrei il processo di progettazione agile e continuo.

Prossimi passi

Svilupperรฒ le altre funzionalitร  del prodotto minimo funzionante