Instead of a thousand cards: how we designed a contactless payment app

Everything about how our client (the project is under NDA) decided to develop its own digital payment service, and we helped design it. 

Challenge: to create a solution for convenient and secure shopping

Since Android devices have an NFC module, the bank first of all wanted to transfer the functionality of the web version of its service to the Android app.

"We already had a successful experience developing a web service with the red_mad_robot team, so we came up with a request for a modern mobile app to help take our existing payment solution to the next level", — Bank Executive Director

Globally, the client was challenged to provide customers with a convenient contactless payment option for offline purchases. The client approached our team with a request for research and development of the application design.

From a "home" service to a multifunctional app

In March 2022, the Bank launched a web version of a payment service for online purchases. In order to scale the payment solution, it was necessary to develop a mobile app and transfer the functions of the web version there.

"When we started working on the service, we wanted to make a high-quality "home" payment service that would help pay conveniently and securely at different websites of the holding company. But in the end, the service became in demand among more people and was developed outside the holding company", — Product Owner of the payment service

The team was tasked with conducting competitor research, developing a design concept, and testing it to bring a beautiful and user-friendly product to the market.

How to anticipate multiple key scenarios

At first we tried to understand what the home screen should look like: we worked out different options for the layout of the cards and eventually settled on a carousel.

Tokenization is the process of exchanging confidential card data for a special token. A tokenized card can be used to pay for purchases contactlessly.

But simply adding a card is not enough. It needs to be tokenized to enable contactless payment. Therefore, in order not to complicate the user experience, we abandoned segmented control and left a regular list with three sections of cards on the screen:

1. "Contactless payment enabled" — tokenized cards.

2. "Available for connection" — non-tokenized cards.

3. "Online payments only" — cards of other payment systems.

We also provided a screen for users with devices that do not support contactless payment: we left one section for them — "Online payments only".

The main problem was a large number of edge scenarios: the card could be non-tokenized but available for contactless payment connection, the user could disable the NFC module in the phone, the bank could revoke tokenization, our payment service might not be installed as a default, etc. All these scenarios had to be worked out and made in such a way that the user would not get confused and the application would remain convenient and beautiful.

As long as the card is not tokenized, we cannot add its actual skin into the app, but we can identify the bank and payment system by its number. That's why we took 15 banks that cover 90% of the market in the client's country and drew their card skins and logos. This way, users quickly understand which card to choose, and the appearance of the app becomes consistent.

In all projects, we strive to become a partner to the client, rather than a mere executor of technical specifications from which we cannot deviate. This was the case with the bank. Together with the product team, it was important for us to create a convenient service.

Therefore, despite the fact that the bank already had a ready-made UI kit and we had to follow it, we tried to generate non-standard ideas. As a result, we settled on solutions within the framework of the design system proposed by the client, but passed on the developments that can be used in the future to the client's team.

External and internal testing

The Bank conducted tests on the external market — they assessed how clear and convenient the service turned out to be, its attractiveness and users' difficulties. Based on the results of the tests, decisions were made about the user journey, how the home screen and other application details would look.

It was also necessary to identify difficulties in user interaction with the service:

• during registration,
• on the home screen,
• while adding a card,
• at the moment of payment via wallet,
• while deleting a card.

Even though our team was only involved in the app design, it was important for us to test different hypotheses to make the interface user-friendly. For example, we tested the hypothesis that we didn't need to display all the cards on the home screen on users who had previously paid with Apple Pay and Google Pay.

We assembled two prototypes: in one, all cards were displayed on the home screen, and in the other — only tokenized cards for quick access to payment at the checkout. The hypothesis was confirmed — a large number of cards on the main screen confused users.

Release and Results

In December 2021, the service launched in test mode, in 2022 the official release of the web version of the service took place, and in the fall of 2023, the app for contactless payment appeared in stores.

In 3.5 months we designed the service, which was later developed by the bank's team, and also analyzed the payment services market, created many scenarios for displaying cards in the app and chose the best approach to payment using external and internal tests. The app now allows contactless payments for offline purchases using a smartphone with Android OS.

1.5 million users have made payments using the web service and the app. Including paying taxes in your personal account on the tax service website, buying tickets to museums, theaters and sports matches, paying fines, insurance and vouchers.

The product team plans to develop an iOS app, make the service the main payment method and add all the necessary functions to the app that will allow users to completely abandon physical wallets.