How to Build a Fast-Food Restaurant Self-Service Ordering Kiosk and Payment System

Long wait times and long lines can make restaurants unbearable. To address these challenges, some restaurants use self-service food ordering kiosks. While working on one of our recent projects, Can Tho, we gained invaluable knowledge about how to build a self-ordering kiosk system.

If you’re a restaurant owner looking into automating ordering and payments through a self-service ordering kiosk, you’re in the right place. Read on to discover the technology stack behind touchscreen ordering kiosks, the milestones of developing one, how they work, and when to choose custom development over off-the-shelf solutions.

SOURCE: DRIBBBLE.COM BY BEN BRECKLERThe story of Can Tho, or how to create value with your restaurant self-ordering kiosk

The story of the Can Tho kiosk began when Damien Toulouse, the owner of Can Tho, a Vietnamese restaurant in Brussels, started thinking about how to reduce the long lines in his restaurant. As he was looking for a solution, he noticed how McDonald’s implemented self-service food ordering kiosks and thought that maybe such kiosks could be a solution for his problem too.

To build a self-ordering kiosk, Damien and his team started with defining their customers’ needs and the core value of their service.

Steelkiwi advice: To build a product, first start with defining your core value and target customers. You need to understand their pains and needs and how you can address them with your solution. Everything else? UX strategy, UI design, and functionality? should be built based on your core value.

To visualize and systematize your core value proposition, you can benefit from a value proposition canvas. It consists of two parts: a value proposition map and a customer profile, each consisting of three building blocks. Begin with the customer profile and then move to the value proposition part.

SOURCE: B2BINTERNATIONAL.COMCUSTOMER PROFILEVALUE PROPOSITIONCustomer jobs: What tasks are customers trying to complete? What needs are they trying to address? What problems do they want to solve?Product(s) and service(s): What product(s) or service(s) do you offer your customers to accomplish these tasks?Pains: What annoys customers while doing these jobs?Pain relievers: How can your product(s) alleviate your customers’ pain points?Gains: What are the positive outcomes and benefits your customers expect and require?Gain creators: What are the positive outcomes and benefits that your product creates for your customer?

Below is an example of Can Tho’s value proposition canvas:

CUSTOMER PROFILEVALUE PROPOSITION

Customer jobs:

• Order
• Pay for an order
• Customize dishes

Products:

• Five self-ordering kiosks each consisting of a tablet, Valina payment terminal, and wireless printer

Pains:

• Long wait times

Pain relievers:

• Five self-ordering kiosks that eliminate lines

Gains:

• Save time when ordering
• Pay easily and securely

Gain creators:

• Check out the menu, order, customize dishes, and pay in one place
• Get Help and How It Works buttons
• Pay with a card or use a contactless payment method
• Get a receipt

Milestones of developing a self-ordering kiosk

There are multiple stages to creating self-ordering kiosk software, and there are many decisions to make before and during the development of a self-ordering kiosk system.

User experience design of a food ordering kiosk

Customers want a seamless experience. To achieve this, you should look into who your target customers are, what they need, and how you can address those needs with your kiosk. Below are the features of the Can Tho kiosk and some explanations of what prompted us to create the user journey the way we did.

Choose a language

Since the official languages in Brussels are French and Dutch, Damien decided to include both of them in the Can Tho app. The team also opted for English, as Brussels attracts lots of foreign tourists who might know neither French nor Dutch.

Get help

If users have challenges interacting with the kiosk, they can click the Get Help button, which is displayed on every screen, or they can learn how to use the Can Tho kiosk by clicking the How It Works button.

Eat in or take away

Diners can order takeaway, eat in, or eat in and order takeaway. We gave users the possibility to choose from all three options.

Customize dishes

At Can Tho, they believe that while their chefs are in charge of making authentic and tasty dishes, their customers should be in charge of the finishing touch. We enabled users to customize their dishes by adding or removing ingredients.

Pay

Once customers are done ordering, they proceed to checkout and payment. Customers can pay by card using a pin, EMV chip, or magstripe, or can make contactless payments via NFC.

Here’s what the user journey looks like:

SOURCE: STEELKIWI.COMUser testing

It’s crucial to validate the user journey of your application and ask for real feedback. Before Can Tho was made available to everyone, it had been operating for relatives and friends only for nearly ten days. This helped the Can Tho team test their kiosk and prove that the user journey was a success.

User interface design

When it comes to the UI design, you need to define the style of your application, including fonts, colors, and graphical elements. Damien had another design team create the UI design for Can Tho. Our job was to implement that design into the Can Tho app.

Have a look at the UI design for Can Tho:

SOURCE: STEELKIWI.COMAPI for kiosks

The Can Tho application is connected to a cloud server that stores the menu in a database and handles customers’ requests. An API allows the Can Tho app to communicate with the server. Here’s what it looks like:

SOURCE: STEELKIWI.COM

Let’s explain this using an example. Say that a visitor wants to order something to drink, so they tap the Drinks button to learn what’s on the menu. In response, the Can Tho app sends a request to the server along the lines of What’s on the drink menu? The server processes the request and sends a detailed list of drinks along with their descriptions and prices. The same goes for other requests. Every time a customer requests something, the server processes the request and sends an answer. The API is what makes this communication possible.

SOURCE: STEELKIWI.COMPoint of sale (PoS) system

To accept payments, you need a restaurant point of sale system. Building and licensing such functionality on your own would take too long and be too expensive, so we suggest that you integrate whatever existing PoS system is best suited to your needs. Take into consideration the setup costs, features that your business requires, and compatibility with your existing hardware.

To ensure an easy payment flow in Can Tho, we integrated the Lightspeed PoS. This allowed the system to calculate prices correctly with taxes included.

Read more - https://steelkiwi.com/blog/restaurant-self-ordering-kiosk/

Full-cycle Web & Mobile applications development https://steelkiwi.com/blog/flutter-vs-react-native-vs-xamarin-for-cross-platform-development/