Self-service kiosk app for a restaurant chain

Self-service kiosk app for a restaurant chain

We developed a feature-rich kiosk app that was successfully launched on 3,000+ devices in 500+ restaurants. The app improved restaurant operational efficiency and benefitted both clients and restaurant staff.

Table of contents

Context

Our customer, a 24/7 restaurant chain, wanted to speed up the ordering process, so they introduced kiosks that enabled their clients to make orders and payments quicker and reduced the company’s management efforts. Over time, the customer encountered such challenges with their self-service kiosks as:

  1. Performance
    When kiosks were idle, they couldn’t refresh the page particularly when displaying complex animations or large amounts of data.
  2. Connectivity
    Payment terminals were connected to kiosks over a network. This caused lower connection speed and stability of payments through the kiosk application, especially during rush hours.

The company was searching for a technology partner to increase the speed of order delivery and improve client satisfaction. In the end, they chose Itransition because we had successfully delivered and supported several solutions for HoReCa and possessed diverse app development expertise.

 

Solution

Audit

Itransition’s team began by conducting an audit of the customer’s kiosk app. We checked its code, analyzed its architecture and requirements, and conducted quality reviews. The customer granted us access to the source code, so we could investigate the solution’s state deeper. We also scanned the app's codebase for syntax errors, code smells, unused variables, and noncompliance with coding best practices. We also studied the app's architecture and requirements documentation to identify potential architectural flaws, scalability concerns, and gaps between the app's current and desired states. 

Itransition presented the first evaluation results in 1 week, having identified the following identified problems:

  • Data leakage
    Due to insecure data storage and network communication (RabbitMQ), the memory usage was constantly growing until it froze the application after 1 or 2 days of continuous running.
  • Slow UI rendering
    Complex animations slowed UI rendering, and the average response time was up to 10 seconds.
  • Poor video/audio quality
    The app provided modules for playing video and audio, but playback quality was affected by various factors, including device capabilities, network conditions, and improper implementation.

The issues were mainly caused by poor React Native-based code quality. Troubleshooting these issues required 2x much time for specific debugging and investigation as developing a new kiosk app from scratch. Moreover, bug fixing didn't guarantee high product and UX quality and compatibility with hardware.

Kiosk development

To define all project specifics and choose optimal technologies, our team collaborated closely with the restaurant’s management team. Together with the customer, we also identified such kiosk app characteristics as custom settings (e.g., using kiosks as banners during active recruiting or marketing campaigns), loyalty program integration, and kiosk management automation (e.g., orders return directly from the kiosk).

We suggested native kiosk app development as the most cost-effective option. The decision to develop an Android-based kiosk app was driven by the need for superior performance, compatibility with Android kiosk devices, and an optimized user experience.

Solution architecture

We proposed a clean architecture with a strict division into layers to reduce dependencies between the app’s UI and business logic. Layers would ensure the app’s stability and easier troubleshooting, as well as flexibility, scalability, code reusability, and future-proofing. These features contributed to a robust, reliable, and adaptable application that met the changing needs of users and the business. 

To ensure uninterrupted app operation, all data was cached in the database. We also used different data models for each layer. Thus, when kiosk devices cannot access the network, users can still browse the content, which resulted in faster data access and better app performance. As a local database, we used the Room library.

Kiosk app architecture

Payments

To ensure seamless interaction between kiosks and payment terminals, we developed an SDK, which allows the kiosk app to communicate transparently to terminals via USB. The SDK acts as an intermediary between the kiosk app and the issuing bank, handling the authorization, encryption, and routing of payment data. 

Once the payment is authorized, the kiosk app completes the transaction, updating the order status and generating a payment confirmation or a receipt for the client. This confirmation can be displayed on the kiosk screen, emailed to the client, or printed on a receipt printer connected to the kiosk. 

We also ensured end-to-end payment data encryption. Now the app encrypts the payment message on payment terminals and decrypts it on our payment platform when the terminal sends it for authorization to the issuing bank. Throughout payment processing, the kiosk app employs secure connections and compliance with Payment Card Industry Data Security Standard (PCI DSS) guidelines to protect sensitive payment information and ensure secure transactions. 

To address the critical data leak concerns, we implemented a series of best practices to safeguard the integrity and privacy of user information. Additionally, we employed Esper MDM (Mobile Device Management), which provided an additional layer of visibility and control over all kiosk devices. By leveraging Esper, the customer gained the ability to deploy, lockdown, update, remotely monitor, and manage their kiosks from a centralized location. 

We also utilized Kotlin coroutines to prevent resource leaks and efficiently manage asynchronous operations as coroutines follow the principle of structured concurrency. We analyzed the app for any potential memory leaks, which could lead to the consumption of excess memory resources and compromise the device’s stability. By examining the code and actively monitoring memory usage, we were able to identify and fix any memory leaks that occurred during the application's runtime. This approach ensured the app efficiently utilizes memory and promptly clears resources, reducing the likelihood of crashes or data leakage due to memory-related issues.

Furthermore, we implemented several payment methods to ensure the best possible customer experience. End clients can choose a standard card payment terminal, as well as options with a QR code. The app has a loyalty module that allows end clients to accumulate and redeem points. The loyalty program is seamlessly integrated into the ordering process of the kiosk app. After each order, the app immediately updates the client's loyalty points balance and offers personalized rewards based on their purchase history. The app also communicates with the loyalty program’s backend to synchronize customer data, update loyalty point balances, and retrieve relevant information, such as available rewards or program changes.

Maintenance module

We developed a specialized module integrated with the customer’s internal CRM for the maintenance personnel. It allows for order cancellation and refund and has the following functionality:

Kiosk activation 

Maintenance personnel needs to activate each kiosk before it starts working to prevent unauthorized users and cybercriminals from accessing sensitive information. To ensure data security, kiosks should be activated by entering a secret key unique for each restaurant that is generated in their internal CRM and accessible only to maintenance personnel. 

The app also includes a remote support feature that allows maintenance personnel to revoke the key remotely in case of any suspicious activity. The app also enables maintenance personnel to lock/unlock kiosks and troubleshoot issues remotely. This feature reduces the need for on-site visits and minimizes kiosk downtime. 

End-of-day reconciliation 

At the end of each day, the customer should balance each payment terminal's totals. To automate this process, we created a restaurant end-of-day reconciliation functionality that allows managers to quickly check the total value of all purchases, refunds, cash out, and surcharge transactions and print the report for reconciliation. Since payment terminals are connected directly to kiosk devices, managers can perform in one click the end-of-day reconciliation of cash registers and terminals through one of the kiosk devices.

Advertising management 

The kiosk app has an advertising management module that allows the customer to deactivate the menu and ordering displays and use the kiosk as a banner during active recruiting and/or marketing campaigns. We leveraged ExoPlayer, an application-level media player for Android, for playing audio and video from the local storage as well as uploaded from the internet. When the kiosk is idle, it displays interactive promotional slow-motion videos of how the food is prepared and what’s on offer, generating potential purchase opportunities.

UX

We created an intuitive menu design, prioritizing an efficient checkout process and easy food customization. We also provided designs for different payment and receipt-receiving options. Additionally, we designed maintenance screens to assist staff when replacing orders or end-of-day reconciliation and banners for their recruiting and/or marketing campaigns. Our team worked closely with the customer’s design team and together conducted focus group interviews on kiosk usage throughout the UX-improving process. We even conducted A/B testing for certain elements (e.g., personalized recommendations placement).

Kiosk app

QA

Throughout the development process, Itransition conducted rigorous testing to identify and resolve any bugs or usability issues. Our QA team tested the released functionality in a test environment, where the setup was built with the hardware used in production to ensure as many similarities as possible between the test setup and the app developed. This also made it easier to measure the performance tests against each other. For the solution’s QA, we relied on a combination of manual and automation testing. 

Our QA team carried out the following activities: 

  • Performance testing to prevent memory leaks or problems with hardware and servers and ensure its full readiness for real-life operation
  • Penetration testing to exploit vulnerabilities by simulating an attacker's activities
  • Regression testing to ensure changes or updates in the app won’t disrupt the solution’s stability and performance

Results

Itransition developed an Android-based self-service kiosk application compatible with the customer’s kiosk devices and payment terminals. The delivered kiosk app was successfully launched on 3k+ kiosk devices in 500+ restaurants and helped the restaurant chain ensure high product quality and seamless user experience. Additionally, the app helped the customer achieve the following results: 

  • 85% of all orders are made through kiosks 
  • 20% increase in average order value 
  • 30% faster order processing 
  • 10x average response time increase from 8-10 to 0.9-1 seconds