Fluid Specialty Coffee

Web app per ordini take away e saltafila, per la nuova idea di caffetteria a Firenze.

Sviluppo Front e Back-end, con piattaforma no-code Bubble, per una realtà evoluta del food and beverage, che affianca alla sua strategia di vendita il canale online. Con la nuova web app desktop e mobile, Fluid offre alla clientela la possibilità di ordinare online i prodotti per il ritiro o per consumarli senza attesa direttamente in caffetteria.

Fluid ha inaugurato a maggio, nella città di Firenze, la prima caffetteria dedicata agli specialty coffee. Un progetto di rebrand e posizionamento durato 24 mesi che ha messo al centro la qualità del prodotto, la varietà della proposta oltre alla volontà di offrire un ambiente e dei servizi innovativi per la clientela e i propri collaborati.

Per lo sviluppo di tutti i touchpoint, web app e backoffice amministrativo abbiamo adottato Bubble, ambiente di sviluppo no-code che permette la progettazione sia di front-end che back-end.

Ci siamo occupati di

UX/UI design
Front End development
Back End development

Tecnologie

Figma
Bubble

Team Rawfish

Durata

Work in progress

Pubblicata

Agosto 2022

La prima caffetteria FLUID a Firenza, inaugurata a maggio 2022.

Progettazione UI UX e sviluppo dei touch point

Per soddisfare le esigenze delle tre principali utenze: Cliente, Collaboratore e Admin punto vendita, sono state sviluppate tre applicativi rispettivi.
La web app responsive cliente gode di una interfaccia che include elementi grafici e una palette colori vivaci, in sintonia con il tone of voice del brand. La web app per i collaboratori della caffetteria, permette di gestire ordini e prenotazioni da parte degli utenti e rispondere ai messaggi via chat.
L’ultimo touch point, il backoffice, è deputato alla gestione del menù. Esso permette di aggiornare/modificare il menù pubblico e tutti i contenuti editoriali e promozionali del sito (blog, news, promozioni).

PRIMARY
SECONDARY

(B2B, SETTINGS)

TERTIARY

(CONTRAST CTA)

SUCCESS
ALERT
HIGHLIGHTING
PRIMARY BG
SECONDARY BG
LINES & DIVIDERS
INACTIVE ITEMS
GREY TEXT
BODY TEXT & TITLES

L’app utente

L’utente naviga i contenuti dell’app organizzati in 5 sezioni: Home, Fluid, Ordina, Chat, Profilo.
La home racchiude oltre alla possibilità di consultare il menù, una panoramica sul mondo Fluid. Dalla home si raggiungono a colpo d’occhio le news, la sezione educational con contenuti video e testuali che veicolano la cultura dello specialty coffee.

Home: menù, news,educational, cultura

Quando programmati in home sono visibili banner promozionali per comunicare promo, sconti, ecc.

Menù

Il menù si presenta con una navigazione orizzontale a scorrimento per ottimizzare l’ingombro verticale e permettere la scelta della categoria a colpo d’occhio avendolo sempre a disposizione in alto.

Fluid: Storie di caffè, news e cultura

Fluid è la sezione dove l’azienda comunica ai suoi Clienti il mondo del caffè a 360°, includendo news, glossario, guide la coffe school e molto altro. 
Contenuti indispensabili per capire la mission dietro al progetto Fluid e restare aggiornati sul suo percorso.

Sviluppo dell’ecosistema con Bubble

Bubble ci ha permesso di offrire da subito una piattaforma snella, performante e veloce per lo sviluppo dell’ecosistema FLUID. Tutte le piattaforme (app cliente, app staff e backoffice) sono state costruite con la modalità single page app, che velocizza enormemente la navigazione. Nonostante la semplicità di sviluppo, abbiamo inserito delle logiche decisamente complesse, come ad esempio il calcolo di scontistiche speciali in caso di acquisti di pacchetti di prodotti. Tramite l’integrazione di plugin di terze parti inoltre, come ad esempio Stripe e OneSignal, abbiamo potuto offrire funzionalità evolute come i pagamenti e le notifiche in-browser con un effort di sviluppo estremamente contenuto e una resa ottimale. Possiamo affermare che il risultato finale trasmette all’utente la sensazione di interagire con un’app mobile, anche grazie ad elementi di UI come il drawer di navigazione.

“Bubble ci ha permesso di offrire da subito una piattaforma snella, performante e veloce per lo sviluppo dell’ecosistema Fluid”

Stefano

Bubble Developer

Ordine take away

Le possibilità offerte alla clientela sono duplici.
Ordine online e ritiro nel punto vendita o al tavolo. Oppure prenotazione del tavolo da casa tramite chat.

Riepilogo dell’ordine

Eseguito l’ordine, l’app riporta il tempo stimato per il ritiro contestuale alla lista di bevande/cibo ordinati, prima di eseguire il pagamento.

Prenota un tavolo

La prenotazione di un tavolo viene eseguita dalla vista dedicata che permette di scegLiere giorno ora e numero di persone. Inviata la richiesta alla caffetteria, viene gestita via chat tra esercente e Cliente.

Chat

Le comunicazioni tra Cliente e punto vendita possono avvenire via chat.
L’utente può scegliere tra le domande frequenti o procedere con un’altra richiesta.

Profilo

Il profilo utente raccoglie lo storico ordini, i dati utente, le preferenze e i dati personali inseriti.
Presenta inoltre il saldo caricato in app e i Punti Fluid guadagnati, spendibili nei premi dedicati ai Clienti.

L’app esercente

L’app è stata sviluppata con il focus sull’operatività quotidiana da parte dei collaboratori nel punto vendita. Le tre sezioni permettono di gestire le chat individuali con i Clienti, gli ordini e le richieste di prenotazioni.

Gestione ordini e prenotazioni

Panoramica e gestione degli ordini in attesa e completati.
Gestione delle prenotazioni in entrata con la possibiLità di approvarle o rigettarle.

Il Backoffice esercente

Il pannello di gestione dei contenuti è il terzo touchpoint dedicato all’utente amministratore.
L’area permette di aggiornare il menù prodotti, analizzare i dati analitici delle visite, del venduto, ecc, creare promozioni e gestire la sezione educational, news.

“Abbiamo inquadrato l'emozione dell'utente target per elevarla in un sistema di design estroverso ma ordinato, che capitalizzasse sul branding esistente per una UX coinvolgente ed umanizzante.”

Ernesto

UI UX Designer