Due to the COVID pandemic, consumers want a contactless way of dining-in.

How might we enable customers to dine-in in a contactless way? Due to covid, restaurants are short on staff because they had to lay off big chunk of their staff.

Black.png

01. Company

Heartland Restaurant is a Restaurant Management Point of Sale Software

Restaurateurs use Heartland Restaurant to add items, sell items, manage employee hours, display kitchen items, print receipts, and much more.

Heartland-restaurant-info.png

A big concern for this project is that if we build off of Online Ordering architecture, there is only a 1-way communication between the POS and Online Ordering. With dining-in, we need 2-way communication. 

02. Overview

From Online Ordering to Ordering from at the Table

Online ordering was first launched designed and developed by engineers in April 2020 due to COVID. Restaurant owners had no choice other than to sell their food online. Even after covid, the Heartland Restaurant team had the vision to enable dining-in customers to order, discover, get recommendations, and pay through a mobile device.

before-dining-in.png

Current online order screen (web). Designed and developed by engineers.

03. Discovery

Getting Started

To align and understand who I was going to design for, technical, business constraints, I kicked-off a meeting with dev, PM, QA, and business stakeholders. 

Human Problem

Restaurant owners are short-staffed on waiters which causes slower table turn and decreases customer satisfaction. Sitdown restaurant customers are waiting too long for their servers to start taking their order.

High Level Goal

Design ways to help sitdown restaurant customers to order food while at their table from their phones while keeping the restaurant's brand.

User Groups

Restaurant Staff

  • Helps customers take orders.

  • Communicates with cooks.

  • Memorize orders then fire items for kitchen staff to start cooking.

  • Gives recommendations to customers.

Dining-in Customers

  • Usually comes in groups of 2 or more

  • Comes to restaurant with their friends or family members

  • Some times struggles with what to order

Sitdown Restaurants, Counter ordering restaurants

  • Customers order at the bar or counter then find a seat to food arrival

  • Traditional sit-down restaurants

  • Outdoor and indoor seating

04. Research

Digging Deeper

I wanted to learn more about the biggest pain points when eating at a sit-down restaurant. I wanted to know where people feel like the most time-consuming part about eating at a restaurant.

Dining-in - Time consuming_frustrating (

Online Survey Goals

  1. Find out what dining-in customer's biggest frustrations when dining-in.

  2. Get some actionable data go to work off of.

1:1 interviews Goals

  1. Figure the why behind dining-in customer's biggest pain points.

  2. Understand dining-in customer's entire sit-down restaurant journey.

Research Highlights out of 39 participants

Waiting for server to help (Ordering, refilling)

Payment, waiting for check

Waiting for food/drinks

Waiting to be seated

Order being wrong/Food not good

Service being 'rude'

Confusing Ordering

59%

38%

36%

33%

21%

18%

15%

05. Define

Pain Points, Metrics & More

The next step is to compile all the different customer pain points to find patterns so that I can prioritize which pain points to target first.

Top Pain Points

The top pain points of the current sit-down restaurant experience: The time servers took to take orders and in-between states (refills, getting checks, ordering more, etc.)

The top pain points for ordering at the counter: Customers losing a table that is open before other people can sit. 

Needs

Design ways to help dining-in customers easily order food, drinks, and other items without leaving their seats.

Success Metrics

  1. 📉 Decrease table turn time

  2. 😊 Easy to use tableside ordering platform

  3. 📈 Increase average ticket size

06. Ideation

Ideating and Narrowing Down

At this point, I had a thousand ideas on how to solve this problem. At this point, it was time to narrow all the ideas down and identify which features should exist that aligned with the team's goals and the user's needs.

Menu Information Architecture

I worked with QA & engineering to understand the current menu/item information architecture.

Menu architecture.png

Menu Examples

I looked through real restaurant menus across different traditional sitdown restaurants and "Order at the counter, we will bring to where you are sitting" spots.

menu4.jpg
menu3.jpg
menu2.jpg
menu1.jpg

Customer User Flow

These high-level user flows highlight critical user flows of the application and break down processes the user would use to achieve certain tasks.

userflow-dinein.png

Design / Ideate / Communicate

Throughout my process, I filled my notepad page with sketches and notes.

Competitive Analysis

I looked through competitive screens after the initial sketches to eliminate biases that I might have from competitors.

Wireframes

Worked through different iterations and ideas for each core step.

  1. Start order

  2. Item discovery (Filtering, scrolling items)

  3. My tab (Viewing items)

  4. Payment

wireframe-startorder.png

There are many ways to start off the tableside ordering process. However, we narrowed down to 3 ideas based on technical constraints.

1. Scan a QR code > tap on link >  enter info > start ordering

2. Type in URL > start ordering

3. Text a number to recieve URL

wireframe-dinein.png

Iterating on the menu view, item details view, and filtering.

Information hierarchy:

Menu (Lunch Menu) > Sections (Burger, Pizza) > Item (Classic Burger, Cheese Pizza)

wireframe-itemsend.png

The checkout screen was re-used from a different project (Scan to Pay) that got a lot of good feedback around ease of use.

The biggest hurdle in this section is if people understood the "Tab" concept. People can keep ordering and receive items before a dining-in customer have to checkout.

07. Solution

Final Visual Design

When this project was being designed, Heartland did not have a centralized design system. During the process of this project, the Heartland design system was being designed. To save time, I used Google's material design system as a baseline because of the built-in accessibility and great documentation for developers and designers.

Hres-item-discovery.gif

Menu Item Discovery

Easy access to menu items that dine-in customers can view quickly.

Enable dine-in customers to filter item from a long list of items

 
 
 
 
 
 
 

My Tab / Sending Items

Be able to send items without closing the tab. Resemble a traditional restaurant experience when customers are ordering, paying, and eating at the table.

Hres-mytab.gif
Hres-payment.gif

Payment

View all of the items, quantities, and total cost. Pay and review and leave a tip for the server before you leave.

Web View

The web experience. Even though dine-in wasn't going to be used on the web, we wanted to take designs from tableside ordering and port it over to the take out experience so that we can re-use designs to save on development and design costs.

Hres-scan2order-web.png

08. Conclusion

Next Steps: Development

This project is currently being tested with a handful of restaurants and pending results once it is released to the public.

 

The biggest risk was having a "tab" concept. For dine-in customers to get food, they have to send items. The current habit with the online ordering experience is that they have to pay before they receive items.

During the initial discovery phase, we had the vision to add a "call server" button so that servers can help tables since our solution couldn't handle every edge case (Food not great, table not comfortable, etc..)