top of page
Heartland Restaurant • 2020
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.
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.
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.
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.
Online Survey Goals
-
Find out what dining-in customer's biggest frustrations when dining-in.
-
Get some actionable data go to work off of.
1:1 interviews Goals
-
Figure the why behind dining-in customer's biggest pain points.
-
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
-
📉 Decrease table turn time
-
😊 Easy to use tableside ordering platform
-
📈 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 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.
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.
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.
-
Start order
-
Item discovery (Filtering, scrolling items)
-
My tab (Viewing items)
-
Payment
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
Iterating on the menu view, item details view, and filtering.
​
Information hierarchy:
Menu (Lunch Menu) > Sections (Burger, Pizza) > Item (Classic Burger, Cheese Pizza)
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.
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
Overview
Discovery
Define
Company
Research
Ideation
Solution
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.
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.
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..). I thought this call server had US cultural challenges since it is seemed rude to waive down a server.
Conclusion
bottom of page