Please enable JS

INTERACTIVE RESTAURANT TABLES

PROJECT DETAILS

Developed 2019
Class Interaction Design II (UX330)
Status Presented to Professor
Roles / Responsibilities User Experience Design
User Interface Design
User Research
Documentation
Platforms Interactive Digital Restaurant Tables
Tools Optimal Sort (Card Sorting)
Sketch (Prototyping)
Group Members Joel Schellenberger
Mikayla Ferraro
Noah Lach
Cedric Zheng

PROJECT DESCRIPTION

"How might we improve the pleasure, satisfaction, ease-of-use, and accessibility of interactive digital dining tables in order to better augment and enhance customer experience?”

As a group, our main focus for this project was to analyze and enhance the experience related to interactive digital tables, predominantly used in restaurant settings. These tables serve as a unique blend of an analogue and digital design, presumably created to enhance the dining experience. These tables establish a digital touch-point with restaurant-goers and providing unique opportunities to engage with their potential menu options and express creativity through the use of interactive games and activities.

The core functionality of this digital touch-point appeared upon inception of this project to be to provide users an opportunity to order their food without the need for a server, as well as augmenting the traditional server/menu experience with digital resources such as high-quality videos and detailed descriptions potential orders. Additional functionality of these tables engages users in game and activity applications while waiting for their food order to be served.

Interactive Restaurant Tables (Process: Timeline)
IRTs Figure 1.1: Project Timeline

For the purposes of our study, we identified our key target users as restaurant patrons in the 15-50 age range who have some prior experience with multi-touch interfaces such as smartphones (and consequently an understanding of typical interface gesture controls).

Although this technology is not used in a widespread capacity at this time, it is already available for customer use in some restaurants in my area. For example, in cities close to myself such as Waterloo these Interactive Restaurant Tables (IRTs) are available at a restaurant and marketplace called Graffiti Market. Through our group’s personal use and other publicly available customer feedback our group established that there is room for design improvements to not only enhance the information architecture and interaction design, but also to address some accessibility concerns.

Discoverability

Information Architecture, Gestures

  • What sort of changes to the information architecture (such as enhanced labeling, taxonomy and hierarchy) of this digital touch-point can be made to enhance the discoverability and ease-of-use?
  • Are the proprietary gesture controls currently used by these tables more difficult for users to understand than a generalized set of controls typically utilized by other digital devices such as smartphones? How could gesture controls be better utilized?

Accessibility

Considering Key Potential Users

  • What efforts are being made to address the accessibility of these digital features for users with visual or auditory impairments?
  • Could the information architecture adjustments that help with discoverability also improve the potential accessibility of the services provided by this touch-point?
  • What sort of feedback mechanisms (visual or otherwise) could be enabled to better support users through their exploration of an unfamiliar type of interface?

With these preliminary concerns in mind, we conducted a site visit to further evaluate some user needs and take inventory of our project space and it's constraints.

Research Phase / User Study

Interactive Restaurant Tables (Item Selection) IRTs Figure 2.1: Current App Selection Interface
Interactive Restaurant Tables (Current Menu Categorization) IRTs Figure 2.2: Current Menu Categorization
Interactive Restaurant Tables (Order Variations / Confirmation) IRTs Figure 2.3: Order Variations / Confirmation
Interactive Restaurant Tables (Upon Food Reciept) IRTs Figure 2.4: Table (Upon Food Reciept)

We took some key things away from our visit to Graffiti Market in Waterloo; we left with ideas for how to better take advantage of this tech. On our visit, we collected information on our own experiences individually while I tested my peers (who were having their first experiences with the tables) with a pre-determined set of tasks. This is a very rudimentary usability study (and ideally with more time and budget, would be carried out with users who aren't also our design team), but the study definitely provided a framework to build upon when addressing some interaction design challenges these tables currently have. With a larger amount of resources available for the completion of our project, this study would've been expanded on to include individuals such as restaurant patrons, service staff, and more. We proposed a testing framework for this expanded study built on ethnographic, observational research methods as well as user interviews.

Interactive Restaurant Tables (Item Selection) IRTs Figure 2.5: Current Item Selection Process

Some important confirmations for our initial assumptions and additional feedback from the experience included the following:

  • The ordering process did not properly adhere to users traditional mental model of restaurant-going, as comparing menu items when choosing what to order was tumultuous due to the lack of item density (hindering user potential for direct comparison).
  • The experience lacked familiarity; proprietary gestures for key actions such as closing an app (holding and swiping down on an app icon) proved confusing for users.
  • There are little to no non-visual feedback mechanisms such as haptics, text to speech screenreading, or even clear status messages throughout the ordering process.
  • Despite a predominantly digital experience, a user is bottlenecked by the need for human intervention in multiple points in the process, failing to utilize potential optimizations of the tech.
Design Priorities (as identified in study):

Adhere to Familiar Mental Models

Redefine Information Architecture

Address Accessibility

Better Utilize Technology

Card Sorting Exercises

Now that we understood the priorities of our users, our group moved forward to conduct card sorting activities with the hope of understanding some of the troubles users experienced with the information architecture; specifically, regarding the classification and categorization schemes.

As mentioned previously, our sample restaurant that employs the tables being evaluated for this project is Graffiti Market in Waterloo, Ontario. As part of the restaurant's branding efforts, the labelling for the menu consisted entirely of hip-hop references for the category and dish names. This naturally created some confusion from the first-time users observed in our studies, and contributed to the feelings users expressed of choice overload and an apparent lack of ability to directly compare menu items. By having no traditional frame of reference to call on to hold menu items and their qualities in working memory, users are forced to seek out this information again by referencing the item again in the singular-item menu view. This is an issue of density at scale with regards to the table, and of labelling in regards to this specific instance of an interactive restaurant table.

Interactive Restaurant Tables (Cart Sorting Screenshot) IRTs Figure 2.6: Cart Sorting Activity Screenshot
We conducted separate card sorting activities at separate stages of the research and design phases; one during our research and planning phase, to identify how users sorted the menu items as presented currently, and one during our design phase to validate our assumptions about categorization.* Being able to navigate the various categories of a menu is a major point in the user journey of ordering at a restaurant, and so clear categorization (or at very least a clear naming scheme) is something we felt would help address that gap between a user’s traditional mental model and the table’s expected behaviour.

*It should be noted that addressing this restaurant’s specific naming scheme is a proprietary issue not inherently a part of the experience using an Interactive Restaurant Table.

Prototyping

Once our card sorting activities were completed, we moved into our prototyping stage with a strong foundation to make some key design decisions that addressed the previously established user needs found in our research phase. I personally developed all of the high-fidelity "table" screen mockups that our group presented to our professor and peers at the conclusion of the term. I used Sketch to create a prototype that allowed for a functional demo to be conducted on "stage;" you can click here to view the clickable prototype for yourself.

Interactive Restaurant Tables (Refined Menu Categorization / Labelling) IRTs Figure 3.1: Refined Menu Labelling
Interactive Restaurant Tables (Refined Labelling, Explained) IRTs Figure 3.2: Refined Labelling, Explained
Interactive Restaurant Tables (Refined Labelling, Explained) IRTs Figure 3.3: Viewing Item User Flow

You'll see 'Figure 3.3: Viewing Item User Flow' above. While building out this flow and addressing issues we found in our research around item comparison and decision making, we made some key refinements. Some of the highlights:

  • Adding sub-labels for categories, and subtitles for menu items to help create a menu structure that is much easier-to-understand for users.
  • Creating a more dense grid-style view for menu items to promote direct comparison of menu items and closer adhere to mental models of menus. Also maintained or added key information to each item card such as price and a short item description.
  • Maintained some of the features unique to a digital menu, including large-scale visuals of menu items and gesture-based navigation.
Interactive Restaurant Tables (Refined Labelling, Explained) IRTs Figure 3.4: Confirm Order User Flow

Further, in the above figure (Figure 3.4: Confirm Order User Flow), we were working to avoid the dependency on service staff intervention during the order confirmation process. Adding some intentional friction here was important to ensure users were not mistakenly adding items to their order or mistakenly ordering the correct item with the wrong options. Some highlights of the decisions we made for this flow:

  • Maintaining a consistent gesture for progression with the menu, Swipe To Add To Your Order, used across the entire table.
  • Displaying signifiers with more clarity for the status of order modifications including sides.
  • Informing the user clearly that swiping to add to their order is not the same as confirming their order with the kitchen, and guiding them to do so underneath the confirmation message.
Interactive Restaurant Tables (Refined Labelling, Explained) IRTs Figure 3.5: On-Table Payment User Flow

The user flow displayed in Figure 3.5 was built with the goal of better taking advantage of technology. By implementing contactless payment in the table directly (as well as a printer for customer reciepts), we create another point in the process that is unique to these digital interfaces (when compared to analogue tables) while also reducing the frequency of required interventions from the service staff.

Some other design decisions suggested when presenting our solution that weren't shown in the previous flows or mockups included:

  • Utilizing screen reading technology and haptic feedback options to better augment the visual elements of the interface [furthers our design priority to address accessibility].
  • Mapping the 'Home' page icon layout in a grid format, in line with most gestural interfaces [furthers our design priority to adhere to familiar mental models].
  • Refining gestures for actions such as closing applications [futhers our design priotity to adhere to familiar mental models].
  • Implementing an OLED display and AirPlay 2 functionality so that users are not required to download a specific app to beam content to the table [furthers our design priotity to adhere to familiar mental models, and to better utilize available technology].

In Closing

You can scroll back up to this page to view the high-fidelity mockups in their full-resolution glory, or click here to check out the functional prototype on Sketch Cloud.

I'd like to take this opportunity to thank professor Umair Rehman for his continued guidance and teaching throughout the duration of this project, as well as my peers Noah Lach, Mikayla Ferraro, and Cedric Zheng for their hard work and support while working through this project as a team.

We recieved 99 out of a possible 100 points for our work on this project.

Food images courtesty of Unsplash, iconography courtesy of FlatIcon.com. Mastercard, Visa, Interac and Apple Pay trademarks are all property of their respective owners.

RELATED PROJECTS

WCCD
Redesigned a dashboard enabling users to compare dense data sets in a variety of subjects with ease and clarity.
Developed         2019
Client World Council on City Data (Coursework)
Roles UX Design, UI Design
Status Presented to Client
wluUX
Designed a networking application for students to give and receive feedback with peers, alumni and industry professionals.
Developed         2018
Client Coursework
Roles UX Design, UI Design
Status Completed Proposal
concourse-dashboard
Designed a web dashboard interface for university recruiters to connect with and compare international applicants.
Developed         2018
Client Concourse Global
Roles UX Design, UI Design
Status Launched
client

Have a design problem of your own?

I encourage you to get in touch; I'd love to chat about what your solution could look like.