How to build a fast-food restaurant self-service ordering kiosk and payment system

25 Jun 2019

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.

how_to_build_a_fast_food_restaurant_self_ordering_kioskand_payment_solution_image_1.png.930x0_q90

Source: dribbble.com by Ben Breckler

The 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.

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.

how_to_build_a_fast_food_restaurant_self_ordering_kioskand_payment_solution_image_2.png.930x0_q90

Source: b2binternational.com

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

Milestones of developing a restaurant self service 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 kiosk ordering 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:

how_to_build_a_fast_food_restaurant_self_ordering_kioskand_payment_solution_image_3.png.930x0_q90

User 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:

how_to_build_a_fast_food_restaurant_self_ordering_kioskand_payment_solution_image_4.png.930x0_q90

API 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:

how_to_build_a_fast_food_restaurant_self_ordering_kioskand_payment_solution_image_5.png.930x0_q90

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.

how_to_build_a_fast_food_restaurant_self_ordering_kioskand_payment_solution_image_6.png.930x0_q90

Point 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.

Payment terminal

To accept payments at the kiosk, you’ll have to choose a payment terminal. Your choice can be based on the types of credit card payments you want to enable (magstripe, EMV, contactless), the price of the payment terminal, and whether you need a standard or wireless terminal. For Can Tho, we opted for a Valina terminal to satisfy the vast majority of customers. With the Valina terminal, customers are able to make both contactless and card payments.

Admin dashboard

An admin dashboard is a must-have for a restaurant ordering kiosk. There are a lot of features you can implement for your dashboard. In the Can Tho dashboard, admins can:

Set prices and VAT for eat-in and takeaway
Confirm orders
Resolve returns
Add new menu items

Integrations

Your application will also need integrations to automate some processes, streamline the workflow, and provide better customer service. Apart from the Lightspeed PoS, we also integrated a Xiaomi smart lightbulb that lights up whenever a customer presses the Get Help button so the restaurant’s staff can react quickly. We also integrated Uber Eats and plan to integrate Deliveroo.

The technology stack behind self order kiosk software

Your choice of technology stack greatly depends on the functionality you implement and the hardware you choose. For example, if you want to create an iOS-powered kiosk, you should consider using the Swift programming language. Yet in this case, you’re likely to pay more for tablets, as iPads are quite more expensive than Android tablets. Also, it’s impossible to have large touchscreen TVs run iOS, and the largest Apple tablet available as of 2019 is the 12.9-inch iPad Pro. That’s why lots of restaurant owners decide to go with Android-powered kiosks. For an Android app, you should consider developing the app in Kotlin or Java. For backend development, you may want to consider Python, PHP, and Ruby, but make sure you know their strengths and weaknesses.

For Can Tho, we developed the backend using Python and Django for the server side. We used the Django REST framework to let kiosks interact with the backend and used PostgreSQL as a database. We built a Django admin site using Django JET, a plugin for the Django admin interface, so that an administrator can manage the Can Tho menu and orders. We also made the app available in English, Dutch, and French.

We built the Android app using Kotlin. We chose Clean Architecture patterns to divide price calculations and business logic into separate modules. By doing so, we improved reliability and maintainability so that the Can Tho app performs all functions as required, maintains high performance under the expected data volume and load, and, if necessary, can be modified for new use cases and complemented with new features.

Develop a self ordering kiosk system using ready-made solutions or from scratch

Above, we described the technology stack behind a custom self-ordering kiosk. Yet there’s another way to build a self-service system: using an off-the-shelf solution. Read on to discover the advantages and disadvantages of each approach.

Off-the-shelf development

If you’re short on time and money, you can benefit from an off-the-shelf solution. With off-the-shelf development, you won’t have to spend on prototyping, UI/UX design, and quality assurance. Therefore, you’ll pay less compared to building from scratch. On the other hand, you won’t be able to craft a unique application with all the necessary features and your own unique design. Plus, if you’re looking into integrating specific third-party systems, you’ll most likely require customization. You’ll have to hire a software engineer to help you build a kiosk with an off-the-shelf platform if you don’t have coding skills.

Custom development

At Globaldev, we believe there isn’t a one-size-fits-all solution when it comes to automating business operations. With custom development, you’re free to decide on features and a design and align them to your business needs. In addition, custom apps are highly secure against cyber attacks, are easier to maintain and upgrade, and are scalable so they can grow together with your business. As for Can Tho, development from scratch was a necessity since the idea required flexibility and customization in terms of design and functionality.

Key takeaways about how to build a self-service ordering kiosk

There’s nothing more valuable than real-world lessons. Below, we share what we learned while developing Can Tho.

#1 Be clear on your core value and target audience.

#2 Every decision you make on UI/UX design, features, and a payment terminal should be guided by your core value and target customers.

#3 Test your app idea and gather real-world feedback.

If you have any questions on how to build self-service technology or want to start building your restaurant self ordering system with Globaldev, don’t hesitate to contact our tech advisors.