Screen Shot 2021-04-26 at 7.03.15 PM.png

Open Table Plus

Prototype 1:  Storyboard and Wireframes

CHALLENGE

Design a system that fully automates the restaurant dining experience. organizations worldwide.

CONCEPT

OpenTable+ lets restaurant-goers have complete control of their experience when they dine out. Inspired by OpenTable, an app that makes booking a reservation online a breeze, our team of designers envisioned a fully automated restaurant experience from making reservations to paying the check. OpenTable+ offers full integration with in-house systems to support ownership and staff in delivering superior service more efficiently.

BRAINSTORM

We used the results from our brainwriting session to organize the tasks involved in dining out into an affinity map. Four categories stood out: Reservations, Check-in, Ordering, and Check-out. Within these categories, we identified the emerging themes. We used these themes to determine our priorities and specifications.

Brainstorm.jpg

USER FLOW DIAGRAM

With the insights from our affinity map, we created two sets of user flows to demonstrate and differentiate the frontend guest-side and backend service-side of the OpenTable+ system.

STORYBOARD

In our user flow, we envisioned users would make the reservation and pay the check from their phones but would order from a tablet at the table. We used this structure to inform our storyboarding process. Before proceeding with drafting the storyboard, we first identified a persona and scenario. This allowed us to focus on telling the story of a single user’s path and ultimately decide on the direction we wanted to take with our wireframes.

Persona: Charlie, one-half of a couple in their late 20s.

Scenario: Charlie & Sam would like to go on a date. Charlie decides to make a reservation at a new restaurant, Lot 17, using OpenTable+.

We used a basic storyboard template to quickly make a rough outline of the steps Charlie would take, noting both actions and emotions. This exercise helped us determine what things might be unnecessary, anything we skipped over, or if something looked out of place.

To refine the rough outline into a fleshed-out, low-fidelity storyboard, we sketched out each frame on paper with dialog and captions to provide context.

Screen Shot 2021-04-19 at 2.21.51 PM.png

FEEDBACK

When we walked through our storyboards with a potential user, we found that they had a few concerns about the tablet. They had concerns over waiting for each individual to pass around a tablet to order. That also may put pressure on users to order faster if others are waiting. Overall, they felt the tablet was somewhat unnecessary and expressed they would rather order from their phone.

WIREFRAMES

We used the insights gained from the storyboard feedback and user flows to drive our wireframe series. Our chosen creative process was to parallel prototype separately and then build out wireframes together. The wireframes are a coalescence of everyone’s design ingenuity. 

We built the first set of wireframes to represent the reservation-making process. The OpenTable+ system is fully integrated and communicates with any restaurant's in-house system. The wireframes show that users are provided real-time table availability to make a reservation, select a table (or skip if the user doesn’t mind random table selection), share the reservations with others, and order menu items ahead of time. The reservation screen will initially populate the next available times, but also lets the user customize another time and date if needed. From there, the restaurant's system will be alerted of the reservation and any pre-ordered menu items. 

The second set of wireframes displays the ordering process when the user gets to the restaurant. To create a more intuitive experience, we decided to implement a QR code on the in-house tablet, allowing each guest to order from their phone simultaneously. Since OpenTable+ users would already be actively using the app on their smartphone, we chose to focus our design on the mobile view. 

The app will let users order items under their name, let the server know where to deliver the food they order, browse menu items, and send their selections to the kitchen one at a time or all at once. The user will also be able to view their check and see the progress of the items they’ve sent to the kitchen. We also gave the user the ability to customize each item to their exact specifications. The kitchen will also be notified of any food allergies.

RESERVATION WIREFRAME

5b46aae8-717e-4b5f-bccc-a9c5730f79e4.jpg

MENU WIREFRA,