Fluid Specialty Coffee

Web app for takeaway and skip the line orders, for the new idea of ​​a café in Florence.

Front and Back-end development, with no-code Bubble platform, for an evolved reality of food and beverage, which supports its sales strategy with an online channel. With the new desktop and mobile web apps, Fluid offers customers the possibility to order products online to take away or to consume them directly in the cafeteria.

Fluid inaugurated the first café dedicated to specialty coffees in the city of Florence in May. A rebrand and positioning project that lasted 24 months and focused on the quality of the product, the variety of the proposal as well as the desire to offer innovative environment and services for customers and their own collaborators.

For the development of all touchpoints, web apps and administrative back offices we adopted Bubble, a no-code development environment that allows both front-end and back-end design.

Contribution

UX/UI design
Front End development
Back End development

Technologies

Figma
Bubble

Team Rawfish

Length

Work in progress

Published

August 2022

The first FLUID café in Florence, inaugurated in May 2022.

UI UX design and development of touch points

To meet the needs of the three main cathegories of users (Customer, Collaborator and Store Admin), three respective applications have been developed.
The responsive customer web app has an interface that includes graphics and a bright colour palette, in tune with the tone of voice of the brand. The web app for cafeteria employees allows users to manage orders and reservations and respond to messages via chat.
The last touch point, the back office, is designated to manage the menu. It allows us to update / modify the public menu and all the editorial and promotional contents of the site (blogs, news, promotions).

PRIMARY
SECONDARY

(B2B, SETTINGS)

TERTIARY

(CONTRAST CTA)

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

The user app

The user browses the app contents organized into 5 sections: Home, Fluid, Order, Chat, Profile.
In addition to the possibility of consulting the menu, the home contains an overview of the Fluid world. From the home you can reach the news at a glance, the educational section with video and text content that convey the culture of specialty coffee.

Home: menu, news,educational, culture

When programmed in the home, promotional banners are visible to communicate promos, discounts, etc.

Menu

The menu is presented with a horizontal scrolling navigation to optimize the vertical dimensions and allow the choice of the category at a glance, always having it available at the top.

Fluid: Stories of coffee, news and culture

The Fluid section is where the company introduces the world of coffee to its customers at 360°, including news, glossary, coffee school guides and much more. Essential content to understand the mission behind the Fluid project and stay updated on its development.

Ecosystem development with Bubble

Bubble allowed us to immediately offer a lean, high-performance and fast platform for the development of the FLUID ecosystem. All platforms (client app, staff app and back office) were built with the single page app mode, which speeds up browsing enormously. Despite the simplicity of development, we have included very complex logics, such as the calculation of special discounts in the case of purchases of product packages. Furthermore, through the integration of third-party plugins, such as Stripe and OneSignal, we were able to offer advanced features such as payments and in-browser notifications with an extremely low development effort and optimal performance. We can say that the final result gives the user the feeling of interacting with a mobile app, also thanks to UI elements such as the navigation drawer.

"Bubble allowed us to immediately offer a lean, high-performance and fast platform for the development of the Fluid ecosystem"

Stefano

Bubble Developer

Take away order

The possibilities offered to customers are twofold.
Order online and pick up at the point of sale or at the table. Or booking a table from home via chat.

Order summary

Once the order has been completed, the app reports the estimated time for collection at the same time as the list of drinks / food ordered, before making the payment.

Book a table

The reservation of a table is performed from the dedicated view that allows us to choose day, hour and number of people. Once the request is sent to the cafeteria, it is handled via chat between the merchant and the customer.

Chat

Communications between the customer and the store can take place via chat.
The user can choose from the frequently asked questions or proceed with another request.

Profile

The user profile collects the order history, user data, preferences and personal data entered.
It also presents the balance loaded in the app and the Fluid Points earned, which can be spent on rewards dedicated to Customers.

The merchant app

The app was developed with the focus on daily operations by employees in the store. The three sections allow you to manage individual chats with customers, orders and booking requests.

Management of orders and reservations

Overview and management of pending and completed orders.
Management of incoming reservations with the possibility of approving or rejecting them.

The merchant Backoffice

The content management panel is the third touchpoint dedicated to the administrator user.
The area allows us to update the product menu, analyse the analytical data of visits, sales, etc., create promotions and manage the educational and news section.

“We framed the emotion of the target user to elevate it into an extroverted but orderly design system, which capitalized on existing branding for an engaging and humanizing UX.”

Ernesto

UI UX Designer