An interface design concept of a waiting tablet

As part of my university studies for the Interface Design and Interactions module. I produced a user interface (UI) design concept for a portable waiting device. The UI aimed to help waiting staff take orders and payments in a restaurant environment. Staff members would use the new UI on a handheld touchscreen device.

Removing the need for the traditional pen and paper setup. The new UI would be able to send orders straight through to the kitchen staff, via wifi. Adding efficiency to the process by lowering the probability of lost and/or slow orders. As the kitchen staff would receive an order, as soon as it had been placed. Staff members would also be able to spend more time with their customers. As they no longer had to go back and forth between the kitchen and the seating area. Increasing customer satisfaction.

The waiting staff at a typical restaurant are the chosen end-users of the new UI. As they will be best placed to trial the device. To determine if it would enhance their productivity without hindering their duties. At this stage, it is also important to consider the ethical issues that could arise with this device. Staff members could be monitored on their performance. For example to see how many sales they are making per hour. This, in turn, could cause them to feel pressured in doing their job.

The login screen

The login screen with an onboard keyboard

The main dashboard

The ‘Take Order’ screen

The ‘Starters’ menu screen

The ‘Starters’ menu screen with related information

The ‘Menu’ Screen

The ‘Tables’ screen

Selecting the order on the ‘Payment’ screen

The ‘Payment’ Screen

Choosing the payment screen

The payment processing screen

The ‘Receipt’ Screen

Printing the receipt screen

Printing the receipt screen

The low battery warning

Show remaining images 6Hide images

My Vision Statement for the Interface design

Ordering food has never been this much fun.

In the future, the device will revolutionise the catering industry. By allowing a more efficient and effective service to customers. It will allow the waiter/waitress to take the customer’s order and send it straight to the kitchen. Without the need to move from the serving area. It will have the ability for the user sign-in so that store managers can keep track of sales.

The login screen

The login screen

The login screen has a clean background image that is not distracting to the user. It contains user inputs and a login button to allow the user to advance to the next screen. The information bar at the bottom of the screen shows the battery status, both as an icon and a percentage. The wireless signal indicator follows the same format. There is also a button to allow the user to bring up the on-screen keyboard. This allows the user to enter their credentials and log-in to the device.

The login screen with an onboard keyboard

The login screen with an onboard keyboard

This image shows the login screen with the on-screen keyboard enabled. The keys on the keyboard are a reasonable size and have enough spacing to avoid the user pressing the wrong key. Also, although the keyboard is transparent, the keys are opaque enough to be seen. By long-pressing on the top of the keyboard, its position on screen can be moved. For example to avoid blocking other elements

The main dashboard

The main dashboard

After logging in, the user is presented with the main dashboard. In the top left corner, the users name is shown. Next, a row of five large buttons are displayed, each with colour coding for easy recognition. Clear icons have been used to help the user identify where each button will take them. There is also a scrolling list of information to inform the user of key pieces of information. Such as what orders are ready, the payments that have been processed and any items that have run out of stock. There is also a notification panel to the right to inform the user of the order that has been waiting the longest. This is to ensure that orders are not forgotten or left for a long time.

The ‘Take Order’ screen

The ‘Take Order’ screen

When the user selects the ‘Take Order’ button they are presented with another row of buttons. Here the order process is broken down into four sections of the menu. There is also a back button so that the user can go back to the previous screen. If for example the button was accidentally pressed.

The ‘Starters’ menu screen

The ‘Starters’ section

When the user presses one of the buttons, such as ‘Starters’, they are shown the following screen. On the left-hand side, there is a list of menu items that are available as part of the starter menu. the user can select any of the options and then select the quantity. This will then add the item to the customers’ order, also showing it on the right-hand side of the screen. Once all the starters have been added, the ‘confirm starters’ button will need to be clicked. This will then allow the user to continue back to the selection screen. From here the user can move on to either the drinks, main course or deserts section. The user also has the option to amend any orders. This is in case of accidental addition to the order or if a customer changes their mind.

The ‘Starters’ menu screen with related information

Menu items, related information

At this stage, if the customer queries an item on the menu while ordering. The user can quickly bring up related information. Such as price, ingredients and any other dietary information. Such as suitability for vegetarians, etc.

The ‘Menu’ Screen

The ‘Menu’ Screen

The next screen on the list is the menu screen. The user can use the menu to show their customers the available items. Or in case the customers query any of the items. The user can scroll up and down the list, and also change lists by selecting different buttons. which correspond to different categories.

The ‘Tables’ screen

The ‘Tables’ Screen

The user can also look at the restaurant table layout if they wish. Tables that are waiting on orders to be delivered are shown in red. whilst tables waiting to be served are shown in amber. The tables that have been served are green. This quickly allows the user to see the remaining free tables.

The ‘Payment’ Screen

The ‘Payment’ Screen

Taking payment from the customer is as simple as pressing on the payment button from the home screen. The user can choose the customer’s order from the drop-down list. Next, they can select the payment method that the customer wishes to use.

Selecting the order on the ‘Payment’ screen

Selecting the order

When the drop-down list is selected it shows the order number and the table number. The user then selects the correct option from the list. The order appears on the list on the right-hand side and the total auto-updates. If the customer wants to pay by cash they are directed to the till.

Choosing the payment screen

Choosing a payment option

If the customer wishes to pay by their bankcard, this option is selected from the payment screen. The user is then provided with a selection of accepted cards that can be used. The user is then able to select the card that the customer wishes to use.

The payment processing screen

Payment processing…

Once the customers card has been used, they are taken through the chip and pin process. Once the card is processing, a loading screen will be shown to the user, to give a visual indication of the time left.

The ‘Receipt’ Screen

The ‘Receipt’ Screen

Next, once the payment is complete the user is taken to a receipt page. From here, they can select the order and print the corresponding receipt at one of the tills. It’s important to notice that this screen is also accessible from the main screen. this is in-case the customer requires duplicate receipts, or if a receipt is required at a later stage.

Printing the receipt screen

Printing the receipt screen

Printing the receipt…

The user is shown a visual indication whilst the receipt is printing. This is to ensure that they are alerted once the receipt has printed so that it can be collected.

The low battery warning

Other error message screens

Above are two error screens that could be presented to the user during use of the system. The first one is a reminder to the user that the battery is low. This warning would typically be presented to the user when the battery is at 15%, 10% and 5%. This would allow the user ample time to replace the battery in the system. The other error is there to inform the user that the device has lost its wireless connection. This is important, as the device would not be able to function without an active connection. A new connection would need to be re-established as soon as possible. They are given the option to keep retrying until it is reconnected.