Digital Menu

In a Human Computer Interaction course at the University of Calgary, I had the opportunity to transform low fidelity prototypes into a working high fidelity prototype for the very first time. Our group decided to design a digital menu through a Task Centred System Design process. Instead of using traditional paper menus, customers would have a tablet to browse and order items from the kitchen from the comfort of their table.

Each member of the group initially sketched their own rough prototypes for the menu. As my tool of choice, I used Pages to create early sketches of my two initial ideas. A black background was used throughout both designs to minimize the amount of bright light displayed in a low-light restaurant environment.

The first idea involved a tile interface, similar to the Windows 8 style start menu screen.

The user is greeted with a welcoming title page, similar to a physical menu. They have the ability to flip the page or use one of the icons in the upper right corner to search for an item, call a server for assistance, or get tips on using the menu.

Once flipping past the Start Page, the customer is brought to a tile-like interface to browse the restaurant’s menu options. At the top of the screen, a navigation bar allows the user to filter for various food types as they browse, or use the same tools available on the start screen for assistance.

Other tile layouts could be used as well.

A third tile layout.

Once the customer selects an item in the menu, they are able to view a description of the item and select various toppings.

When the user selects the “Add a Special Request” option, they may write a special request with their finger to send to the kitchen.

When tapping the add button in the bottom right corner of the screen, a confirmation message will appear for a couple of seconds before fading away.

Once the customer chooses all of the items they would like to order, they can tap the “My Order” button to review and edit the items they have chosen. Once everything is set, they may send the order to the kitchen by tapping the “Place Order” button in the bottom right corner.

The second idea was more experimental using a card-like interface to drag menu items into their appropriate spaces.

The customer is invited to explore various categories at the bottom of the screen, and has a clearly marked space to add starters, meals, and desserts for their order. In the upper right corner of the screen the customer can search for specific items, call a server for assistance, or get help tips on using the menu.

Once selecting a food category, the customer can scroll through various menu options along the bottom of the screen. Indicators in each item’s card may mark meals as vegetarian or spicy.

Tapping on a card brings up details about the dish and customization options.

Once all customization options have been chosen, the customer can drag their order into one of the three spaces above.

A full order may look something like this. Once the user is done creating their order, they may tap the “Order” button with the arrow to proceed to the checkout screen.

This screen breaks down dishes previously selected and allows for the cards to be edited and moved in between different sections. Once the customer is confident in their decision they may tap the “Place Order” button on the right hand side of the screen.

After each group member presented their ideas to each other,  we provided specific feedback on each prototype and merged the best aspects of each sketch into one model. As a group we found it easier to sketch ideas on paper before translating our work into a digital copy. After many iterations and debates on features,  we came up with our first combined menu.

The start screen is similar to the initial tile prototype I created and invites the customer to begin browsing.

The tiles were also kept from my initial tile prototype as they provided a visual way to display various food categories.

Once a category is selected, the user has the ability to scroll through various menu items along the left hand side of the screen. When an item is selected, the right hand side of the screen is updated with a detailed description and customization options. The tile interface was taken out of this area since it would take too many screen taps to navigate back and forth between pages.

Various cutouts were created for our low fidelity prototype, including an order customization screen on the left.

Once the user is done choosing items to order, they can tap the “My Order” button in the top right corner of the screen. Each of the group member’s initial prototypes contained a page similar to this as it is important to have a checkout area before actually placing the order.

After we had our initial concept, I created a digital version of the prototype in Adobe Illustrator. Some of the assets and icons created were imported into our final prototype.

Once the initial design work was done and a heuristic evaluation was performed, the group got to work on creating a horizontal prototype in code. We used WPF and C# in Microsoft Visual Studio and Blend. One notable difference between the final prototype and earlier versions is the lack of a start screen. This page was determined to be redundant and was removed. After each screen was created we connected the pages through the top navigation bar and ended up with a fully functional vertical prototype. The prototype is filled with menu items from one of our favourite restaurants in Calgary, JOEY.