Bite&Byte: Food delivery App.
08 Jun 2021
Bite&Byte is a holistic European bistro in a lively area of the city where many tech-centered companies are based.
Appticore
Client
Tech Stack
Services
#Research
#Product Strategy
#UI/UX Design
#Branding Extension
#Product Development
#Ongoing Production Support
About project
Client and idea
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.
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.
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.
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.
6
x
Revenue in the First Year
2.4
x
Increased conversion
4.7
Average App Rating
project Overview
Main app features
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&Byte. 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&Byte 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!
to delete and to add :) That’s easy!
Design process
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.
Sitemap
Design process
We created a comprehensive sitemap that described the structure of the app and saved time in the process of wireframe design and development.
Design process
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.
Design process
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&Byte stands for.
Recoleta
RegularMediumSemiboldBold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
010203040506070809
Branding
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.
#273E5B
Blue Purple
#97A3A8
Emerald Green
#D7D4CE
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.
Cases
