All cases

An access management solution: a mobile app with scanning and payment technology for a better on-site experience.

Learn how we created a scanning mobile app for easy access and payments.

Scan&Pay

About the client

The client company provides a service for accessing business lounges of a new format from an official partner of the railway network. After purchasing an electronic certificate, users get full access for 3 hours and everything necessary for comfortable work or a relaxing holiday.

  • Industry: Entertainment

  • Location: Sweden

The client

The client is a Swedish company in the event management segment. They are working with several industries from entertainment to healthcare, and provide both digital and non-digital solutions for on-site events.

Our collaboration

As part of the cooperation, our engineers have developed a whole ecosystem of products:

  • The landing page of the company with a map of business halls
  • Mobile application Scan&Pay for verification or payment of certificates by users
  • Buyer’s personal account for online purchase of a certificate
  • Application for the administrator of the business lounge
  • Design of plates and signboards of the administrator

This time we will talk about the Scan&Pay mobile application, which was created for Android and Apple platforms using the React Native framework.

The product’s purpose explained

At the entrance to the business lounge, visitors are met by the administrator at the counter. Before guests can go inside, the administrator needs to verify the authenticity of the certificate and activate it. To implement this procedure as quickly and simply as possible was our number primary task.

However, not all guests plan their vacation in advance. Some of them make a decision spontaneously, being tired and looking for a comfortable place to wait. In this case, an unexpected obstacle arises: the administrator of the business lounge does not have the right to accept money from the client, so it will not be possible to pay for access on the spot. A certificate, loyalty card, or a higher class ticket is required. Therefore, our task number two was to resolve the issue of payment.

What problem it solves

We needed to answer the following questions to get an idea of how the application should function.

What is the fastest way to check and activate a certificate? – With the help of a QR code, the scanning of which will help to avoid manual entry and lengthy checks.

How do I separate the payment process from the lounge administrator who can’t accept cash or cards? – With the help of online purchase of a certificate, which can be made without leaving the counter.

Which device allows you to scan a QR code and make an online purchase at the same time? – Any smartphone or tablet.

Solution

The analogy of a flight ticket and boarding pass has been used to make the flow easy to follow and clear to the attendees. The QR codes have been emailed as attachments to the corresponding email messages.

The mobile app was written from scratch using React Native, a cross-platform framework with JavaScript roots. The peculiarity of React Native is that it allows you to create applications for both Android and iOS. In our case, the Scan&Pay application is adapted for users of Android and iOS smartphones and tablets.

The following technologies were used in the development process:

  • The landing page of the company with a map of business halls

  • Mobile application Scan&Pay for verification or payment of certificates by users

  • Buyer's personal account for online purchase of a certificate

  • Application for the administrator of the business lounge

  • Design of plates and signboards of the administrator

Application design and structure

The application was implemented as simply as possible: all functionality is hidden behind two buttons. One of them is responsible for scanning an existing certificate, the second is for buying a new one. Hence the name of the application is “Scan&Pay”.

The design of the application was developed in accordance with the landing page design and brand identity. Our UX/UI designer used Figma for designing and prototyping. A great UX and a minimum of distracting elements made the interface design stylish, minimalistic, and intuitive. Large clickable buttons make it easy to navigate through the application sections (and therefore serve customers without a hitch).

Scanning of the certificate in the app

This process is implemented very simply and consists of 1 step – scanning. The guest just needs to select the appropriate item on the main screen and place the QR code of the certificate in front of the tablet’s camera. If for some reason it is impossible to read the QR code, the certificate code can be entered manually.

If the certificate was successfully activated, the system will notify the guest on the tablet screen and the administrator on the computer screen. The timer will also start automatically for 3 hours.

In case, for some reason, the payment did not go through, we provided error screens explaining the reason for the failure, providing all possible options. We not only explain to the user why an error occurred but also suggest how it can be corrected.

Payment function

The purchase function works using integration with the online payment system, which allows you to pay for the certificate in any convenient way: from Google Pay, Apple Pay, digital wallets, and bank cards.

At the same time, the payment scenario is simplified as much as possible and consists of only 3 steps (and even then, one of them is not required):

  • Choosing a bank for payment
  • Entering an e-mail to send a check (can be skipped)
  • Scanning a QR code through the bank application

Payment instantly passes through the payment system, and the administrator receives an automatic confirmation of the purchase on his/her computer. The certificate is activated automatically, which starts a timer for 3 hours. Now the administrator can invite the guest to go to the business lounge.

In case the payment failed for some reason, we have provided error screens explaining the reason for the failure

Outcome

The application was developed from scratch, and by this time branded design elements had previously been implemented in the design of the company’s landing page. The application was not published in the public domain for download, as it is aimed at the managing company administrators – this is the company’s policy. However, in theory, a mobile application is also suitable for passenger self-service.

As a result, we managed to successfully solve both tasks by developing a high-quality mobile application for Android and iOS. It looks simple and clear, which will allow even inexperienced users to easily cope with the purchase or activation process.

Our solution not only helped the organizers to avoid overlays, but also avoid crowding, and see in real time how many people are inside or outside. On-time amendments and monitoring became possible and made the whole conference experience smooth and pleasing.

Curious but not convinced?

If you don’t know where to start, we will be happy to guide you with a free estimate for timeline and price.

QIT software