Interactive Menu for Food and Beverage
The aim of the project was to design a tablet application and web platform for Restaurant and Café owners.
Restaurant and Café owners and its employees will be able to create menu items with ease — manage details like names, descriptions, nutritional information, ingredients, quantities or prices and add photos quickly and easily. Add, edit, or delete menu items and organize them into categories for faster ordering.
Challenges
Our challenge was to create a tablet (iOS and Android) and web applications based on these two models:
Model one (B2C): Due to a wide variety of restaurant clients with different food and beverage categories, we have to ensure that we create a seamless customer experience by anticipating what customers might need to do, what would they order, and ensure that the interface has elements that are easy to access, understand, and use. Our application should cover a wide range of Restaurants and Cafes that will guide the customers through food and beverage categories and menu items. They can browse through a list of menu items, select categories and subcategories to find their favorite meals. Our application should also be able to handle order customization with full pricing flexibility. Customers will be able to see their order summary, and leave feedback to improve service.
Models two (B2B): We have identified two target users mainly Owners and Employees, therefore, the interaction between the said target users and the application should be efficient and allow them to interact quickly with the application. Owners should be able to create/edit categories, offers and item details easily. They can also generate inventory, sales reports and valuable analytics. Employees, on the other hand should be able to take orders fast, able to answer customer’s query on menu items, food information (ingredients, diet or food nutritional), offers promos and be flexible for customer food choices.
Scope
Business analyzes & stakeholder interview.
User research.
User interview.
Personas.
User flow(Guests and employees)
Wireframe & Prototype
UI design
Business Analysis and Stakeholder Interview
Our client had a comprehensive idea for their product, but lacked a clear path on how to convert the idea into a high-quality application which will be accessible in tablet and web.
Since the project is a bit complicated, we worked with our client to understand their needs so we could deliver an efficient and effective application with a user-friendly interface.
We have identified our target users which are mainly Customers and Employees. Therefore, it is imperative to understand the whole restaurant and café process beginning from the user’s perspective.
We conducted interviews with the actual users (Customers and Employees) and monitor the customer’s journey from the time they enter the restaurant until they check out. For restaurant employees, we observe how they’re taking orders from the table, giving them to the kitchen until the customer settles one’s bill.
Customer Journey
Browsing, choosing and ordering food from menu
Persona
We have created a user flow and personas to have a clear vision in understanding our target audience, illustrate data and create solid solution for business and road map for full design process.
Paper Prototype
During the design process, we considered the look and feel and technical requirements to ensure flexibility to edit contents without having a negative effect on the layout design specially for multiple restaurant owners. By doing this, it also helps us create a layout design to support them and will serve as a guideline to ensure the contents will be followed consistently.
During the design process, we focused primarily on these topics:
Navigation
Menu Interface
Ordering Process
Central Screen
Feedback
The customer feedback we have gathered (aesthetic and technical) helped us figure out the best approach for our application. Some of the feedback were:
1- Customers scroll too much to review all items.
2- Huge contrast of contents for each item which affect the layout design.
3- Users should be able to go back and forth to see the food categories.
4-Limitations on contents (ie images) if we add special effect over images as there is a huge variation in images provided by the owners.
After we have collected the feedbacks, we created the high-fidelity prototype to ensure all the feedbacks are covered and pain points are being prioritized and addressed.
High-fidelity designs also present the interaction between each section.
Visual Design
For this part, we challenged ourselves to create a clear visual hierarchy which shows the users both customers and employees what is important on a page, showing contents that are related logically, grouping them together into categories and displaying them in similar visual style, and giving them a sense of how to use the application.
We focused on the aesthetics and strategically implementing typography, iconography, color palette, visual images, and other elements. We have provided style guide for visual reference which will help both designers and developers not to go away from the correct path when doing their work.
Color Palette , Typography and Layout design
Below are some of the final screens designed.
Takeaways
Case study it a excellent tool to show design process and tell us when can enhance our process in future projects and which research methods we should use.
The design process is about designing prototyping and making. when you separates those, I think the final result suffers
Sir Jonathan Ive
