Restaurant Design Exploration

MY ROLE: UX DESIGNER | TEAM: Linh-Chi Nguyen, Laala MAri Jawara | OCT 2021

Overview

With aspects of the restaurant sector moving towards a digitized service model, our team wanted to understand how the dining experience for both patrons and staff at the Italian restaurant, Limoncello, can be reimagined. In a collaborative effort by a three-person team, we started off by envisioning how patrons and staff would be interacting with a non-traditional dining experience. In a short two-week time window, our team created storyboards, acquired feedback from potential users, and explored solutions that would create a seamless, efficient, and user-friendly digital dining experience. Below is a step-by-step story of how we designed an interactive and host-free check-in process, an automated seating system, an interactive table menu, and a robust system to support the human-human interactions that are lost when automating the dining experience. The end result was two mid-fidelity wireframes that best reflect the culmination of our design journey.

Process

Step 1: User Flow Diagram

At the start of the design process, we wanted to conceptualize what patrons would encounter once they entered Limoncello. For this step, we identified key aspects of the dining experience that could be “easily” automated into a digitized interaction and developed a user flow diagram.

Step 2: Storyboarding

Using the user flow diagram, we created a storyboard using traditional pencil, paper, and the iOS application Procreate. We wanted the storyboard to capture at a high level what Limoncello’s digital dining experience would look like. Below is our storyboard, which begins when a couple, “Sally and David”, enters the restaurant and is presented with a touch-screen tablet to complete the check-in process. Once seated, the two order from an interactive menu that is integrated into the table. The order then gets sent relevant stations in the kitchen, where kitchen staff can view orders on a dashboard. If Sally or David forget something, they are able to notify waitstaff by requesting help using the interactive table. At the end of their meal, payment is submitted through the interactive table, and a weight detector system then notifies waitstaff to clean the table.

Feedback on Storyboards

Before proceeding further, we gathered feedback from family and friends by walking them through our initial storyboard. By doing so, our team was able to identify important aspects of our design that were overlooked. The following themes emerged from the user feedback: 

1. Some technical and business aspects relevant to the system should be considered, including:

• When a patron pays in cash, how would change be disbursed? 

• If there is a waitlist, what is the process for patrons to be notified when a table is ready?  

• Consider a different option besides weighing the chairs to notify staff when a table needs bussing (e.g., “Done and leaving” option). The current design is can lead to “awkward situations”, such as when the chair glitches or when patrons get up to take a call for more than five minutes. 

• The kitchen dashboard could be more automated. For example, the head chef does not need to be allocating tasks as the system would be smart enough to distribute the order to the right place, while the head chef oversees operations. 

2. Digitalizing the dining experience may not adequately support patrons more familiar with a traditional experience:

• Some may find this system difficult to embrace, especially during the check-in process.  

• Lack of support (e.g., request for help, troubleshooting technical issues) for patrons who are not tech-savvy. 

• “It would be important to ensure people from different demographics are able to navigate this [system]. It would be especially important at the first initial experience—right when entering a restaurant. You want to avoid frustration from the VERY beginning.”  

3. Automating a traditional experience into a digital interaction may cause some important dining interactions to be lost:

• How are questions directed, such as when there are questions about the bill? What if patrons needed a drink refill?  

• “What if I had questions about the menu? This seems to work only in an ideal world where I know exactly what I’m ordering.” 

Step 3: Wireframe Exploration

After discussing the feedback as a team, we selected two user journeys that we wanted to tackle. The first was the check-in process, and the second, the signaling for help process. Using Figma to create a user flow diagram, we outlined how these two interactions would unfold.

Step 4: Wireframing

After brainstorming and collaborating on potential solutions to the feedback, our team moved on to creating mid-fidelity prototypes for the two user flows in Figma.

Wireframe 1: Checking In | Prototype Link Wireframe 1

Patrons start by either clicking ‘Check In’ or entering their mobile number if they had previously been to the restaurant and saved their information (see fig. 4). After clicking ‘Check In’, they will be prompted to enter the number of people in their party, if applicable (see fig. 5). This will trigger the system to either show available seats that are open (Flow 1), or prompt them continue putting in information to wait for a table (Flow 2).

Flow 1

If a patron were to click on a party of two, they would be shown a map of the open tables available at the restaurant. The instructions indicate to choose one of the open tables, which shows details of the type of table and number of people that can sit there. After choosing an open table, a dialog box will pop up to confirm the seat selection. If the patron clicks ‘Yes’, they will receive instructions to go and sit at the chosen table.  

In this design, we ensured that patrons would have access to ‘help’ at any point in the interaction along with a way to ‘Go Back’ to a previous screen. Using the feedback for a check-in process that is streamlined and easy to operate, we placed one action per page and did not distract the patron with unnecessary information.  

Flow 1: Open tables

Flow 2 

If a patron were to click on the number ‘6’, they would need to put in information to be placed on a waiting list in the event there are no available tables. The system would first pop-up with an estimated wait time to inform the patron. Then proceed to ask if they would like a call or text, and a number they can be reached at. The last step is entering in a name for the reservation and clicking ‘Done’ after confirming all the information was correct. At the end, the patron can click on the checkbox to save their name and number for the next visit to the restaurant in order to speed up the process.  

This design addresses the feedback we received by developing a waitlist process that indicates to the patron they will be called or texted once a table is available, and then shown an estimated wait time. Additionally, there is always a ‘Help’ button located on the screen and a way to undo actions by clicking ‘Go Back’. 

Flow 2: No open tables

Wireframe 2: Signaling for Help | Prototype Link Wireframe 2

Once patrons are seated, they will be able to start their order or swipe up for help using the interactive table. Based on the feedback, we included a ‘Swipe Up For Help’ tab on the main landing screen to provide immediate support.

Flow 1

When patrons swipe up on the interactive table, they’ll be prompted with six different options. They will be able to select the most relevant to their needs. Once an item is chosen, the waitstaff gets notified on their digital watch.

Flow 1: Finding Help

Flow 2

As seen in Flow 1, once the patron selects ‘Missing Items’, they will be able to view their entire order and then select the items missing from their order. After, they can submit the request to their waitstaff, which is then shown on their digital watch.

Due to the small screen size of the digital watch, we decided to keep the information concise for easy understanding. The waitstaff will be able to view their request and mark it as seen, which will then be displayed on the patron’s screen.

Flow 2: Finding Help

Flow 3

Finally, once the waitstaff marks the request as seen, the patron’s screen will be updated to reflect that their request is being worked on, providing them with an estimated wait time for their request completion. Even when a request is submitted, the patron is still able to cancel the request within a given response time. After the request has been completed, waitstaff will then mark the request as complete on their digital watch.

In adopting a digital dining experience, it was important for us to make patrons feel supported even when they cannot physically interact with the waitstaff. Adding an estimated completion time allow patrons to sense that waitstaff are present throughout their dining experience.

Flow 3: In Progress

Design Justification

Design decisions. The dining experience we imagined for Limoncello was a seamless interactive experience. This meant moving from traditional human-to-staff interactions that contained several checkpoints (e.g., check-in, seating, placing/receiving orders, requesting help, payment, and bussing) into a mostly digital interface. We decided that all restaurant staff would be equipped with a digital watch that receives tasks from all digital interfaces (i.e., check-in tablet, interactive table, and kitchen monitor). We also decided that each table would have a completely interactive menu that is fully integrated into the design of the table. Here, patrons can add menu items directly into their cart after confirming their order, it gets automatically distributed to relevant departments in the kitchen. Overall, our design ensures potential patrons and staff are supported at each step along the journey, beginning with the first step into the restaurant.

Reflecting on the design process. At the start of the design process, our team identified key checkpoints of the dining experience that could be “easily” automated into a digitized interaction. For each, we began with conceptualizing what patrons would likely encounter when faced with a digitalized design. Throughout the journey, our team came across a few bottlenecks and constraints in our design, but we were able to quickly put our heads together and brainstorm solutions. Additionally, we did not want to constrain ourselves to solutions that we thought were outlandish or impossible, such as the weight detector system that notified waitstaff when patrons completed their visit. Since we were still in the early stages of the design, we wanted to gauge initial reactions before investing additional time and emotional effort into the design. Because our overarching goal was to provide an easy, user-friendly, and seamless experience, we were more than willing to forgo our ideas as well as reinforce others.  When creating the user flow diagrams and wireframes, we wanted to keep the user experience as simple as possible, without adding features that were not pertinent to the user journey. By consistently keeping an open mind throughout the design process, our team was able to ensure that the final deliverable was optimized to provide a seamless interactive dining experience. 

 Reflecting on the user feedback. Most crucial to our design process was the user feedback that we gained from potential diners and staff. For this stage, we created an open environment in which critiques were encouraged. Overall, feedback on our storyboard yielded insights that we would have otherwise missed. We met as a team to discuss the feedback, synthesized the results into common themes, and then outlined a list of priorities that we wanted to address in the two wireframes. Some insights led us to completely forgo an idea based on the potential negative impact it can have on the patron’s experience (e.g., the weight detection system), while others remained, such as the interactive table. For the two selected wireframes, we made extra care to focus on the initial user experience of checking-in since that was seen as a significant interaction. And lastly, because there were concerns that our digitalized dining experience may exclude others (e.g, the less “tech-savvy”) from a positive and seamless experience, we made sure to embed help and accessibility options in the final design.  

Back to all projects