Overview: Cordiallo is a mobile application that reinvents the food ordering and bill splitting experience for diners. Traditionally, the bill splitting process offers a poor experience where the issue is to figure out how to split the final bill without creating frustration and awkward social friction among diners who visit in groups. Moreover, waiting for the server to take the food order and help the diners when needed also frustrates them while they are at the restaurant.
To solve this problem, we designed Cordiallo that minimizes server interaction and gives diners a complete control to order the food, split and pay bill however they want to.
Discipline: UX/UI Design, User Research, Interaction Design, Prototyping, Project Management
Design Tools: Adobe XD, Balsamiq
Research Methods: User Interviews, User Testing, Survey, Competitive Analysis
Duration: Fall 2019, 6 weeks
How might we improve the food ordering and bill splitting experience of diners at sit-down restaurants?
We mapped out an end-to-end journey of a diner to visualize the pain points (highlighted in red). After analyzing the dining experience, we came up with four initial research areas that we had to focus on: Ordering, Bill Payment, Bill Splitting and Restaurant Staff.
Now that we had a clear idea of what the pain points of a diner are, it was now time to gain a deeper understanding of their needs, in-restaurant experience, behavior, and expectations.
From our research, we wanted to learn the following:
Our target audience for the research was very broad and open-ended - All kind of diners
To understand the problem scope and the dining experience, we conducted 8 semi-structured interviews and created an online survey that got 54 responses. For the purpose of data analysis, we recorded the voices of the users while conducting interviews. On the other hand, our strategy to gather responses to the survey was very straightforward - circulating the survey to friends and family.
After conducting the user research, we analyzed all the data that was gathered. We performed the analysis by doing affinity mapping.
After analyzing the interview data, the following insights were learned:
A lot of times, the servers try to memorize the dishes with the menu item number and diners have had a bad ordering experience because of this.
"The server wrote a different menu item number than what we had ordered." - Participant of User Research
Diners who have used kiosk/tablets at restaurants like Olive Garden/Chilli’s to order food have always received poor feedback in terms of order confirmation.
"Ordered the drink but didn’t know whether the order went through. We had to call the server to confirm." - Participant of User Research
Majority of the participants claimed that during peak hours they have to wait a lot during the bill payment process. Each server is assigned a minimum of 3 tables at a mid-sized restaurant so it becomes difficult for them to manage each an every table without any delay.
"Sometimes I have spent a lot of time waiting for my check if the restaurant is busy." - Participant of User Research
We observed other mobile applications that help users order, pay and split the bill at restaurants. None of the apps address the entire ordering and billing process and allow payments to the restaurant. I also did some on-field analysis. I personally went to Chilli's Bar and Grill to use their table ordering tablets. They are called Ziosk - a table ordering tablet for casual dining restaurants developed by TableTop Media.
Cordiallo is an application that can be integrated within any restaurant setting and can be customized as per their brand guidelines. It basically allows diners to order food and access their billing data on their phone, make payments to the restaurant, and split the bill with other diners instantly. We decided to leverage the point-of-sales (POS) system at the restaurant to let users access the billing data on their phone. The main idea of the application is to minimize diner's interaction with the server. This will help them in saving time while ordering and payment. We also want to streamline their bill splitting experience and make their in-restaurant experience a memorable one.
Once we identified the key attributes of our solution, we split off to start sketching ideas for our application and brainstormed on what flows were most suitable for our MVP.
The team came back with some sketches of the ideas they had in their head. Our process for narrowing down our ideas consisted of us sketching individually, presenting our sketches to each other, providing feedback, making changes, and then doing the process over again.
After sketching the ideas we, as a team, created low fidelity prototypes that demonstrated the key user flow. Balsamiq prototypes allowed us to brainstorm on main features without expending too many resources. We iterated on our wireframe by conducting guerrilla usability testing with the low-fidelity prototypes. With a total of 5 participants and 5 tasks each, we aimed at validating the solution concept, clarity on components, and user efficiency.
With the motive of testing our solution concept, clarity of components, and user efficiency, we conducted guerrilla usability testing with 5 participants. We requested the users to think-aloud while they were performing the tasks.
Overall, users gave us a positive response while testing our prototypes, but they also pointed out some minor improvements in the interface that helped us in making the application more user-centric and visually appealing.
Though we had to iterate on some of our concepts and components, we still received a lot of positive feedback from the users. It was an encouragement that we were moving in the right direction.
We started designing high fidelity prototypes by creating a style guide for the user interface and determining major screens of the application. We used Adobe XD for UI and motion design.
Here is an interactive prototype of our solution -
You recently downloaded Cordiallo on your mobile device. After downloading, you have been on-boarded as the user. You have set up all the allergies, payment method, and other necessary details. Now, you are going to the Olive Garden for dinner with your friends Naman and Sanchit.
You enter the restaurant and open the Cordiallo mobile app. It will ask you to scan the QR code on your table. This way the application gets to know the restaurant you are in and this will also link you to the restaurant’s POS system. You can enter the QR code number manually also.
Once you are registered with the restaurant's POS, you then add friends to your table. From your contact list, you select the friends who are with you for dinner. Once you add them, they get an invitation. After accepting the invitation, all the diners on the table will be able to access the food menu and bill details via Cordiallo app.
You had a quick question regarding the menu so you decided to call the server. After that, all three of you decided to order fried mozzarella and Naman and Sanchit also ordered chicken and shrimp.
After having dinner, all three of you decide to split the bill by share.
Everyone decides to split the bill by share and pay a 20% tip. You decide to take the initiative and split for everyone. After that everyone confirms their individual share and the payment goes through everyone's individual bank accounts.
Cordiallo is all about getting together, without a lot of tech in between. We had to somehow streamline the application to minimize screen time during the meal. It required a lot of logical considerations. Also, we made sure that food ordering remains a simple process for the diners because splitting and payment is a complicated process. This way I think we have made a right balance throughout the application.
If I had more time, I would develop the flow on the restaurant’s side, since this application communicates two-ways. Also, I would run additional usability testing in a group setting to catch any confusion in complicated group situations. I'm sure there are other situations that we missed because bill splitting is complicated!