Sketching, Personas, Workflows & mechanics, & Figma Designs
Storyboarding & Wireframing
Contactless Dining
As COVID-19 restrictions eased, restaurants adapted to new guidelines by implementing contactless dining. We developed a contactless dining experience using a storyboard and wireframes for a local restaurant.
Design Specifications
We were given a list specifications for the design:
Diners can find/see vacant tables and reserve or occupy them
Diners can browse the menu and enter their order at any time throughout their visit
Cooks receive orders
Servers deliver orders when complete
Diners can signal a need for help at any point in the process
Diners can pay for their order using different options
Staff are alerted to tables that need bussing
Other relevant features
Storyboards
Analog & Digital Story BoardING
Pencil & Paper Sketching:
It's good for us all to step outside of our comfort zone, so one of our group members wanted to take the paper sketching idea by the horns. Her background is in video production, and she has a background in storyboarding. We tried to capture the experience of a scenario with a virtually contactless workflow.
Application-based Storyboarding:
We synthesized the pencil and paper storyboard into a digital format using Procreate during this phase. We essentially emulated the script developed by the original sketch artist. This phase was done by a team member not involved in the analog sketch storyboard.
Prototype Design
Workflow & Mechanics
Application Workflow:
After reviewing the storyboards, we had to brainstorm ways the web app would actually flow. We segregated the experience into sections. As you can see, some sections are purely the patron's experience, and others are of the kitchen and the waitstaff. From here, we had to choose two areas to wireframe specifically. From there, we decided on the mechanics.
Application Mechanics:
Patrons scan a QR code before or upon entering the restaurant (either the QR card is on the door or perhaps immediately as they enter).
Upon scanning the QR code, the patron's mobile device opens the mobile web app, and they are asked for their party size.
Once their party size is selected, they are taken to the table selection area of the web app.
Once the table is selected, the patron is instructed to go to their table with their party.
Once seated, patrons scan a unique QR code at the table to retrieve the menu and begin ordering.
While ordering, the wait staff receives a notification that a new party has been seated, and they bring the appropriate table service.
Once their orders are placed, they are sent to the kitchen with their table number. The kitchen prepares the patrons' items, and the wait staff delivers the meals when they are completed.
While dining at the establishment, patrons may tap the service menu icon and request what they need from a list of items.
The dining experience may end at any time and is handled individually. Patrons can complete the dining service by pressing the "I'M DONE" button.
Wireframing
FIGMA WIREFRAME DESIGNS
Wireframe Workflow 1: Table Selection & CHeck-In
Wireframe Workflow 2: Ordering, Server Assistance, & Checkout
Final THoughts
We did not storyboard or wireframe the waitstaff or kitchen side of the prototype. This demonstrates that all stakeholders in the entire dining workflow experience different sides of the prototype. For instance, there may be a mechanic for wait staff to know what orders are outstanding for tables to mitigate any kitchen errors (e.g., a situation where an order ticket gets "lost," and the patron never receives their order).
Upon reflecting on the color choices of the mid-fidelity wireframe, we realize that different contrasting colors should've been chosen. The green and orange combination makes it difficult to view certain elements, especially the menu bar at the bottom.