Scenario
Joe, Jane, John, and Julie, seniors at Dininghall College, are going on a double-date to a nice Italian restaurant, Mama Mia, on a Saturday night to celebrate Valentine’s Day. They arrive at Mama Mia and check in to their reservation, so they are seated immediately by the host at a lovely table set for four.
Task 1: Ordering Food & Drinks
They notice that the host has grabbed four tablets instead of menus. They are informed by the host that Mama Mia uses a new touch-screen device called OpenMenu that allows for electronic ordering and paying. The four friends have never used this system before, but they are intrigued and are excited to try the device. After each friend receives a device, they are immediately able to order beverages. Joe exclaims, “Wow, I can order my peach tea right now since I’m so thirsty!” Joe, being tech-savvy, proceeds to browse the many items on Mama Mia’s menu with simple swipes of his fingers and is able to view the images with no difficulty at all. John, who is not as tech savvy, is able to follow the simple on screen prompts to navigate the menu.
Task 2: Compare Foods & Filtering
Jane and Julie, who both love seafood, are able to only look at the seafood items by a quick filter and able to compare items that they like side by side with helpful information like ingredients and nutritional facts. The party of four is able to quickly order with ease and the order is sent electronically, with assurance that they’ll get exactly what they ordered.
Task 4: Games & Entertainment
In the meantime, Joe challenges his friends to a quick game of Scrabble that he has discovered on the device. The four friends enjoying their time together when the food finally arrives. Joe is thrilled that his rib-eye has been prepared exactly as he specified, a rare juicy steak with all the trimmings. John’s Shrimp Fettuccine Alfredo is laden with extra mozzarella cheese as he requested. Jane and Julie’s salmon radiates a delicious aroma with a beautiful full color. The party is extremely pleased with their dishes, and after finishing their meals, they are stuffed and ready for the check. Jane realized that she wanted to try a new drink they have and uses the tablet to add it to their orders. Minutes later, the waiter arrives at the table to check how everyone is enjoying their food and hands Jane her new drink. They all stuff themselves, and finish there meals in an hour.
Task 3: View & Pay Bill
Because of the new device, they are not stuck waiting for their bill but instead are able to pay using the device at their leisure. Joe and Jane are paying together by a credit card, while John and Julie use cash. The entire process only takes a few minutes, even while splitting the bill and using different forms of payment. The four friends have enjoyed a lovely dinner, with no hassle what-so-ever, leaving Mama Mia very satisfied.
Storyboard Designs
Design 1: Using Menu as an Analogy
Welcoming Screen
This is the initial screen that the use will see. It will display a tutorial of how to use the tablet on the left and side, and a picture of the main menu of the restaurant. There is a little animation of a page flip for an experienced user to recognize that in order to open the menu, the user can swipe and "flip" open the menu.
Within the Scenario
Joe thinks that this tablet will be easy to learn so he wants to skip over the tutorial. Everyone else decides not to listen to Joe and quickly skims the tutorial.
Viewing and Ordering Food Screen
After opening the menu from the welcoming screen, the application will go straight into the menu part of the application. It will attempt to mimic a typical menu with all products separated by pages.
For each item, there is a description, image, compare button, and an add button. When the use clicks on the image, it enlarges. The user can compare items but clicked on the compare button for multiple items and then clicking the "Compare" icon at the bottom, to open the comparing screen. The user can add items to the menu by clicking on the add button, which would prompt a popup for quantity, size, preferences, and any notes he/she would like.
The user can filter which items are displayed on the pages by using the filter tools at the top.
Within the Scenario
Joe uses the menu to quickly order his drink and orders drinks for the rest of the crew. Jane and Julie are choosing which items to compare and using the filtering tools to narrow all the items down to seafood products.
Comparing Foods & Drinks
When the user clicks on the compare icon at the bottom of the viewing screen, a popup open that allows the user to view all of the products and its fact in a table. If there are too many items, the window would scroll horizontally to view the rest of the items. From there, he or she can click to add to the order or close the prompt.
Within the Scenario
Jane and Julie are deciding which seafood dish they want to order. Jane wants something cheaper whereas Julie wants one with less fat.
Sending Order
Once all of the users want to send in the order, then can click on the View Order at the bottom on the viewing screen. This prompt would pop up with would give a summary of what is being send to the waitress and how much they have ordered so far. This is like a verification screen. They can remove products from here also, if they choose not to order something anymore.
Within the Scenario
When everyone has chosen what they wanted to eat and drink, they click send!
Playing Games and Other Entertainment
When the user clicks on the Games and Entertainment icon on the viewing screen, users would be able to choose to play a game or browse the internet. The games will be group games such as trivia, iSpy, Scrabble, etc.
Within the Scenario
John get really bored as the girls were talking to each other and asks Joe if he wants to play some trivia since John loves movies. The girls realized that the guys are having too much fun and join them.
Paying Order
From the View order screen, the user can select to finalize their meal and pay for it. It will display a dynamic receipt on the left hand side and a tip calculator on the right hand side. It can split the bill and each member can pay but credit card and/or cash.
Within the Scenario
After everybody has gotten stuffed, Joe clicks on the pay button and decides that he'll pay for everyone's meal since he just won the lottery and tips the waitress 31.415% using the calculator.
Design 2: Stage-Based Menu System
The second design we had was one where we split the ordering into stages, with the stages being drinks, food, Entertainment, and then lastly, the bill. The user is given the option of viewing a quick tutorial of the menu.
Viewing and Ordering Drinks Screen
The first stage is drink ordering. There is a list of drinks with pictures, pricing, and other information about each drink. There is a checkbox next to each drink to allow the user to pick what drink they want. There are buttons at the bottom of the screen that allows the user to compare drinks and send in their drink order. At the top of the screen, the user is allowed to filter and search drinks.
Within the scenario
After receiving their menus, John, Jane, Joe, and Julie can order their drinks without waiting for their order to come over.
Usability Analysis
Viewing and ordering drinks is very simple. It's very easy to pick up on the scrolling and viewing items. In addition, the user can quickly see and scroll through a large amount of items.
Viewing and Ordering Food Screen
After they order their drinks, the food menu pops up. It is split into categories, such as Appetizers, Soups, and so on. It is very similar in terms of the design to the drink menu in terms of layout. Each food product is listed as well as the picture, pricing, and other pertinent information. Like the drink menu, there are options to filter and search the menu and there are buttons at the bottom of the screen to compare and send in the order.
Within the scenario
John, Jane, Joe, and Julie are able to browse through the menu quickly and select what they want. When they check on an item, they are allowed to provide special instructions so Joe can specify his steak to be prepared medium-well for example. Jane and Julie are able to filter the menu to only display seafood, and then compare seafood items side-by-side to determine what they want.
Comparing Foods & Drinks
Users are able to compare two items side-by-side and compare each item’s ingredients, pricing, pictures, and other relevant information. There is a back button to go back to the menu to allow the user to select which item they prefer.
Within the scenario
When John, Jane, Joe, or Julie have a hard time deciding which of two or three or more items they want, they can click the compare button at the bottom of the menu and it will bring up a comparison page. This will allow them to make their decisions easier and faster.
Playing Games and Other Entertainment
The next stage is the entertainment stage, where the user will be able to browse the web or play a social game amongst the people at the table. The main view will be two icons, web and games. The web option will open a browser while the game option will open a tile view of games available.
Within the scenario
The four friends decide to play a social word game called Scrabble while they wait for their food.
Paying the Bill
The last stage is the payment stage, where the user will see a list of the items they ordered, along with the price and the subtotal, tax, and total amount. On the side, there is a helpful menu with the amount of money 10%, 15%, and 20% tip is. They are given the option to add tip to their bill and the option to split the bill. At the bottom of the page, they can choose their payment form. Paying by credit would allow the user to simply swipe their card while paying by cash will signal the waiter/waitress to come over.
Within the scenario
On this screen, Joe and John want to split their check by couple and can easily do so with the split options. They will also be able to simply calculate the tip based on their input. Joe easily uses his credit card while John chooses to pay by cash.
Design 3: Using a Tab-Based System
The third design we developed is based on a tab system, with the main tabs being Menu, Order, Payment, and Entertainment. The main screen will simply be an image that the restaurant wants to use as a cover screen. Quick arrows and notes will be serve as tutorials on each individual tab.
Menu Tab 
The menu tab is where the user will actually view, select, and compare the items on the menu. The items on the menu will be divided into subcategories. Upon selecting the subcategory, the items will appear in a horizontal scroll pane, with some basic information and its image displayed. Users will be able to use the drop-down filters to restrict the items they can view or use search for an exact item. When a user sees an item they like, they can check the box of the item. All checked items will be put into the compare selections box on the bottom of the screen, which will also be a horizontal scroll pane. Within this box, the user can quickly and easily compare items, pressing the “add to order” button if they like an item.
Within the Scenario
After Joe, Jane, John, and Julie sit down, they will use the device to look for items they want. Joe can instantly understand the scrolling, filters, search, and compare features and can quickly select what he wants. John, Jane, and Julie will follow the tutorial of arrows and notes and will quickly learn how the system works. Jane and Julie, since they only want fish, will utilize the filter feature to narrow the items they have to look through.
Order Tab
The order tab is where the user will be able to review the items they have decided on and also add preparation notes or special requests. The order can be sent by pressing “send my order.”
Within the Scenario
The four friends will simply look over this page to make sure it is what they ordered, adding preparation notes as they wish. They will press the send button to place their order.
Payment Tab
The payment tab is where the user will be able to pay for their meal. First, an itemized list of their items along with their prices will be displayed. Next, the split and tip can be calculated based on user input in the fields. Finally, the user can choose which type of payment they would like to use, either credit or cash. Paying by credit would allow the user to simply swipe their card while paying by cash will signal the waiter/waitress to come over.
Within the Scenario
On this screen, Joe and John want to split their check by couple and can easily do so with the split options. They will also be able to simply calculate the tip based on their input. Joe easily uses his credit card while John chooses to pay by cash.
Entertainment Tab
The entertainment tab is where the user will be able to browse the web or play a social game amongst the people at the table. The main view will be two icons, web and games. The web option will open a browser while the game option will open a tiled view of games available.
Within the Scenario
The four friends decide to play a social word game called Scrabble while they wait for their food.