Back to Projects

Bite&Byte

Bite&Bite is a holistic European bistro in a lively area of the city where many tech-centered companies are based. The cafe offers an innovative approach to ordering food, which takes into account not only your food preferences but also your mood.
Data
08 Jun 2021
Client
Appticore
Duration
7 month
Deliverables
iOS & Android application
Duration
7 month
Technology Stack
#Sketch #Swift #ReactNative #Python #Stripe #AWS #typescript

About Project

About the Product

Our team was brought on board to create a user interface for a food-ordering app that allows guests to choose menu items tailored to their mood and unique individuality.

Samuel Pokorny
CEO, Appticore

The team has employed promising results that have undergone initial testings and flow stories. Tino Digital Agency utilizes effective communication tools in providing updates and collecting feedback from their client. Their responsiveness and attention to detail also stand out in this partnership.

01 Challenge & Goals

Our goal was to create a new concept for dining-in or placing a to-go order, where people could order fully customizable meals and drinks that match their mood and dietary preferences. The main challenge we took up was to create a visually appealing and intuitive way to incorporate a comprehensive set of menu filters. In addition, it was important to our team to present the customization results clearly, including conveniently displaying the new order total of a customized order.

02 Solutions & Result

After thoroughly researching successful solutions in the e-commerce and food service industry and familiarizing ourselves with the client's preferences and lifestyle, we carefully crafted the user design that optimized the process of placing a food order and put a new spin on it.

Overview

Our design team has crafted a modern and inclusive design concept that promotes a positive co-working atmosphere and reflects the restaurant's holistic approach and environmentally conscious ideology. We tailored the user experience to active and purpose-driven customers who are interested in ordering special healthy meals and drinks.

Easy navigate

The customer has the Mood Menu view selected by default and can easily switch to the Traditional Menu view. Some examples of the Mood Menu categories include Mood Booster, Easy Morning, After Workout, Brain Focus, and Gossip with Friends. Traditional Menu features Breakfast, Salads, Burgers, Sandwiches, Coffee, Desserts, etc. Each category is accompanied by an easily identifiable image that helps the user select their preferred "food playlist."

All info you need

When the client chooses a menu item from any category, its detailed description with customization options appears on the screen. Along with an image of the selected food item and its brief description, the customer learns about its weight, caloric content, nutritional value, contained allergens, and food intolerance compatibility. Available customization options are shown below with an appetizing image, short descriptor, and price. In addition, the client can fully customize their meal by adding or removing certain ingredients with a click of a button.

Rate your order

To build customer relationships, it was important to incorporate an intuitive rating system. The clients are asked to provide feedback after each order by rating their experience. They can choose an emoji that best represents their satisfaction level with the service they received and the quality of their meal.

Rewards

Reward system encourages loyal customers with special offers after they have accumulated enough points by frequenting Bite&Bite. The number of points that can be collected by ordering each item is displayed in the description along with its nutritional information.

Categories for you mood

Bite&Bite offers a novel concept of ordering food that provides an alternative to standard food categories. Clients can easily navigate between the traditional menu and the mood-based menu. Mood menu categories, which can be thought of as "food playlists", include Mood Booster, Easy Morning, After Workout, Brain Focus, Gossip with Friends, Not Hungry but Hungry, Tough Day, Simply Chill, Leave me Alone, Beast Mode, Surprise me, Feel Healthy, Spa for my Body, Evening Romance, Serious Business, Weekend Vibes, and Party Starters. Our team illustrated each mood category with easily identifiable and very relatable photos of actual people.

Considering your dietary

When clients first register on the app, they can state their food intolerances and choose from 14 dietary preferences. In addition, they can specify allergens that will be excluded from their meals. Every menu item is tagged using the 14 food preference choices so that the customers could search the menu using these keywords. Our team carefully crafted custom-made icons for all food preference options, paying special attention to their unified look and overall clarity. Since one menu item might have as many as 4 or 5 food preference tags, it was helpful to accompany each tag with an intuitive descriptive name, such as "gluten free", "low histamine", or "dairy free".

Delete or add what you like

Use to delete and to add :) That’s easy!

Design Process

01 Research

Our team researched successful solutions in both the e-commerce and food service industries. To make the process of searching for menu items and placing an order effortless and efficient for the client, we identified and implemented the most successful standards in each dimension.

02 Sitemap

We created a comprehensive sitemap that described the structure of the app and saved time in the process of wireframe design and development.

03 UX Wireframes

In the next stage, we created wireframes for every screen and every user flow of the interface. Based on the feedback we received from the client, we added additional functionality and streamlined the final UX prototype.

Carefully looking at every step of the user journey at this stage helped to visualize the user experience and made sure a smooth transition from design to development.

04 UI Design

The branding concept was provided by the client. Warm earthy tones that were used match the restaurant's health-conscious ideology and inclusivity.

Design Concept

Using the color scheme provided by the client, we focused on creating a visually appealing and efficient design for each screen. For example, we explored several ways to display a food item and its pertinent nutritional information on the screen to make it easier for the customer to perceive information and place an order.

Illustrations

Our team carefully crafted illustrations and icons to help the clients easily navigate through each step and provide additional context for specific features of the app.

Overall, the app is designed to create a modern and sophisticated look and a sense of being welcomed and included.

The Floor plan

One of the illustrations included mapping out a detailed floor plan so that the clients could choose a specific table while placing the order.

Branding

Typography

Recoleta is a font that communicates a familiar atmosphere of your favorite restaurant as well as the modern and novel concept of reenvisioning gastronomy that Bite&Bite stands for.

Recoleta Recoleta
Recoleta Recoleta
Recoleta Recoleta
Recoleta Recoleta
Recoleta Regular
Recoleta Medium
Recoleta SemiBold
Recoleta Bold
Recoleta Regular
Recoleta Medium
Recoleta SemiBold
Recoleta Bold
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
01
02
03
04
05
06
07
08
09

03 Colors

Blue Purple, Maya Blue, and Mikado Yellow in the primary color scheme were used to create a modern and elegant design that naturally helps the customer to relax in the middle of the day and feel valued and nurtured.

#AB97F3
Blue Purple
#7BC3F6
Maya Blue
#FFC200
Mikado Yellow

Conclusion

Our team was very grateful for the opportunity to co-create a novel approach to ordering food that takes into account not only your dietary preferences but also your mood. We enjoyed being part of a team that prioritizes inclusion and works hard every day to make their clients' lives a little better.

Looking for help with your app?

Do you have an idea for a great app? We’ll help you to turn your concept into a full-fledged mobile app in record time

Schedule a Consultation
Next Project
Cleaner

Let's talk about your project

[email protected]
Filter