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.
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.
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.
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.
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.
Helps customers take orders.
Communicates with cooks.
Memorize orders then fire items for kitchen staff to start cooking.
Gives recommendations to 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
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'
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.
Design ways to help dining-in customers easily order food, drinks, and other items without leaving their seats.
📉 Decrease table turn time
😊 Easy to use tableside ordering platform
📈 Increase average ticket size
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.
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.
I looked through competitive screens after the initial sketches to eliminate biases that I might have from competitors.
Worked through different iterations and ideas for each core step.
Item discovery (Filtering, scrolling items)
My tab (Viewing items)
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.
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.
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
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.
View all of the items, quantities, and total cost. Pay and review and leave a tip for the server before you leave.
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.