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