Designing A Digital Menu For Lord Of The Wings

Joseph-Albert Kuuire
GhUXDesign
Published in
5 min readFeb 25, 2017

--

A friend came to town recently and we all went out for dinner with a few of her friends. We went to Lord Of The Wings restauant which is not too far from the American Embassy in Accra.

I have never been to Lord of The Wings. I have driven past there lots of times but never had the chance to grab a bite to eat inside.

The interior of Lord Of The Wings has been designed to resemble the “American Dinner” experience. It has open space, fancy items on the wall, such as license plates.

Lord Of The Wings Restaurant. Image Credit: TimeOut
Great Food. Price? Come with a loaded pocket

First of all, the food was great. Price wise….you better save up if you want to order all the good stuff from the menu.

The menu was your typical menu: Paper cardboard with listings of all the food and drinks. Actually, there were two separate menus for food and drinks. It was a Friday evening so the place was a bit full. At one point, when we were done ordering food, a waiter had to borrow our menus for another table.

It was the next day that I had a thought: Going with the whole American dinner experience, it would have been a cool step up if Lord Of The Wings had tablets at each table with the menu on it. So, in my spare time, I designed a digital menu concept for Lord Of The Wings.

Menu Design

I went straight into Sketch for this design. I could have started off with some wireframes and lo-fidelity screens but I just wanted to sprint through this and see what the output was like. So basically, it’s still a work in progress.

First of, I imagined what a customer would be looking at when they get to a table and see an iPad or tablet resting there.

Start Screen

The start screen is bare bones. It has the time and date, the Lord Of The Wings Logo and a “Start Ordering” button. In the background are some food plates with some delicious stuff on there.

When a customer wants to start ordering, they just hit that button and the menu is displayed.

Menu List

This is still a Work in Progress but I imagine the menu would display menu items including “Drinks”, “Appertizers” and “Starters”.

The side navigation would have the “Menu” button, a “Review Bill” button and a “Help” button.

A customer can start to order drinks by selecting the “Drinks” menu and that takes them to the Drinks menu screen.

Drinks Menu

The drinks menu still has the side navigation and the customer sees the drink menu. At the top is a “list” of type of drinks a customer can order. The above screen displays the list of Mineral Drinks a customer can order. If the customer was to select the “Alcohol” option, a display of Alcoholic drinks would be displayed.

Now, how does the customer order drinks? A “Plus” and “Minus” button is located next to each drink item for customers to add or remove a drink.

Adding Drinks

In the above screen, a customer has added two drinks to their order and that activates the “Review Order” bar. Once a customer is ready to order, all they do is select that “Review Order” button to start ordering their drinks.

Order Summary

In the above screen, a customer has ordered two sprites and two Coke drinks. A plus and minus button is located next to each drink item. This allows the customer to change the number of drinks without going back to the previous screen. Once they’re satisfied, they just hit the “Confirm Order” button to order their drinks.

Order Success Screen

The drink order goes back to the staff for any waiter to pick up the order. The customer gets the above screen notifying them that their drinks are on the way.

Payment Options

So how does a customer pay for their orders from the app? Once customers are done with ordering, they can initiate payment for all their ordered items by selecting the “Review Bill” button.

Review Bill Screen

So apparently, the customers here just wanted drinks. Once they select the “Review Bill” button, they get a summary of the stuff they ordered. They get the price item and total cost of all orders. Customers can still go back to the Menu list and order more items. When they’re ready to pay, they just select the “Make Payment” button.

Payment Option Screen

The customer is given a list of payment options. They can pay with “Cash”, “Credit Card” or “Mobile Money”.

Mobile Money and Credit Card Payment Screen

A Credit Card or Mobile Menu Screen appears depending on which option a customer selects.

If the customers chooses to pay with “Cash”, a waiter will be alerted to pick up the money from the paying customer.

Cash Payment Screen

So that’s it. That’s the digital menu app for Lord Of The Wings. If developed, the mobile app would connect to a backend where staff can view incoming orders and payments.

It would definitely make the food and drink ordering experience more fun than the traditional paper menu.

Digital Menu Walkthrough

I appreciate any comments or thoughts on this concept. Thanks for reading!

Joseph-Albert Kuuire is a UI/UX Designer and currently the Technical Lead at Userhub Africa, a UX Lab in Accra. When he’s not talking technology, he’s honing his writing skills by blogging and writing poetry.

--

--

Joseph-Albert Kuuire
GhUXDesign

My personal writing space. (UX Designer | Blogger | Social Introvert) UX Design writing: josephkuuire.com