The Grove

THE PROBLEM

The Grove in Auckland, a top-rated restaurant, has approached you with a customer problem. Recent research found that the most time-consuming part of a customer's experience is splitting the bill between the meat-eaters food from the vegetarians.
The owner believes that this process adds unnecessary time to a customer's experience and staff.
THE PROPOSED SOLUTION

My idea is to colour code each menu item - red for meat items, green for vegetarian items. This will help the users clearly visualise what category each item belongs to. The idea of dragging and dropping items into each bill will save time. This app is for anyone to use - very easy and accessible.
Wireframe
MOCK UP

After received feedback, there are a few changes to make. Instead of having a diagram of the table layouts, it would be easier to type in the table number. I have also added in a field to let the server type their name. I have also taken out the date/time field, the app will automatically show the date/time once an order has been placed.
I have also come up with an idea to add a field for the number of bills, so then when the customers go up and pay, the server can simply drag and drop items into each bill. Having the meat and vegetable dishes colour coded will help with sorting out the bill at the end.
The Home screen will consist of 3 links:
New Order – This will be the process where the server will take the orders from the customers. They firstly have to fill out the table number, number of guests and select their name from the drop-down menu. Next step is to add the customer’s orders. Lastly, a page with a review of the selected order will come up for the server to double check with the customer that it is correct. Once this is done, the server will click ‘place order’. This moves the whole order to the ‘current orders’ page.
Current Orders – When the customers are finished and are ready to pay, the server will need to go to ‘current orders’ page. From here, a list of table numbers will be shown. The server will select one and it will move to the next step of reviewing the order. The customer confirms and the server can select payment. This leads to splitting the bill. There is an option at the top where it creates as many bills as desired. The server will then drag in items into each bill. When this is completed, the final page is to pay the bills.
Completed Orders – These are a list of completed orders that have been processed and paid. These will be sorted by date and time.
On the last page of paying the bills, there is a button “complete order” which only becomes active when all the bills are paid. This button will move the order to the completed orders category. The user will be back on the home page as well.
PROTOTYPE

After receiving some feedback, I have decided to remove the menu item descriptions, as the server should know that already. I have also increased the size of the text and separated each item with horizontal lines to clearly define each item.
I have delved more into the specifics of the menu. I have taken the menu items off The Grove’s website and implemented into the app.
I have created drop down menus. When the user taps on the degustation course, a drop down menu lists all the courses included. This will give the app a cleaner look.
I have been looking for inspiration from Wilson Wings’ Instagram. This has resulted in redesigning the pages to be more simple, less cluttered and overall a better user experience.
Order Scenario:
Table 5 has seated with a number of 2 guests being served by Jessica. They order off the a la carte menu. They place an order with the server: two starters, two desserts. The server places their order, this screen gives the date and time.
Table 5 is ready to pay. The server clicks into the current order page and selects table 5. Jessica runs through the order with the customers double checking everything is correct. They confirm and will like to split the bill with one paying for all meals with meat and the other will pay the rest. Jessica drags each item into their corresponding bills. Each pay their bill and the order is complete.
iPhone Mockup - https://www.freepik.com/free-psd/phone-screen-ui-ux-app-presentation-mockup_12782487.htm#&position=2&from_view=detail#&position=2&from_view=detail
FINAL

From Miguel's feedback, I have amended the colours to have more of a contrast. This creates a better experience for the user.

iPhone Mockup - https://www.freepik.com/free-psd/phone-screen-ui-ux-app-presentation-mockup_12782462.htm
↑Back to Top