Keywords

1 Introduction

In the current competitive market, final users are more concerned about quality attributes than the functionality a product could have [1]. In the financial sector, it is critical to design usable banking software; for the user, final interfaces are the product and frustrating experiences could harm the institutional brand [2].

Self-Service Technologies (SST) and Automated Teller Machines (or ATM) are becoming ubiquitous [3]. Therefore, ATM transactions have become a common activity in everyone’s daily life [4].

The existing ATM is based on a system that employs four-digit PINs and physical cards that are read to identify and authenticate a user [4]. However, studies and surveys confirmed that at least 52.8% cardholders share their bank cards and PIN with at least one friend or relative, introducing the risk of fraud and loss of privacy [5].

According to Maqua et al. [6], a criminal has several devices to skim or scam different areas on an ATM, such as fake card readers or an overlaid skimmer plate over the existing keypad. Added to this is the fact that when a cardholder loses a physical card, there is no quick way to use the ATM and get cash since a replacement card requires hours or even days to be emitted [5].

Several companies and studies had proposed different methods to not force the customer to make use of his card nor the ATM pin pad by using his smartphone in combination with QR codes to withdraw money [6]. For instance, NCR company developed back in 2012 a Smart ATM that reduced transaction time to ten seconds by using the smartphones cameras to scan a QR displayed at the ATM interface [7]. More recently, Bank of India implemented QR withdrawal within its Unified Payment Interface or UPI, which keeps the transaction secure by two-factor authentication; however, this cardless withdrawal has limitations on the withdrawable amount by now [8].

The interest in the use of QR visual tags is a natural consequence of the evolution of mobile phones, and it has been used also to enhanced baking authentication security [9]. Tandon et al. [10] considered that the QR code itself is advantageous for customers in terms of security, and for vendors in terms of efficiency.

Subpratatsavee and Kuacharoen [11] proposed a scheme where QR code is used as a transaction authentication that prevents online phishing attacks, eavesdropping, and message modification; however, it is scoped only for mobile and internet banking. According to Malathi et al. [12], a better approach to avoid internet banking’s own problems is that the ATM contains a QR code and the smartphone decodes it with a mobile application.

Even though several proposals for cardless withdrawal are reported in the literature, the problem of the user experience and usability persists. Ruslan et al. [13] consider that QR on Mobile Banking is still not perfect and needs to be improved to be integrated with ATM. Besides, Alhothaily et al. [5] and Malathi et al. [12], left the usability for future works and investigations.

In that sense, BBVA Perú, a leading bank in Perú, summed up to the cardless operations trend and wanted to develop a cash withdrawal system based on mobile banking and QR scanning. This Case Study focuses on the design phase of this project, where the authors applied the user-centered design framework for ATM interfaces proposed by Aguirre et al. in previous works. This paper is structured as follows. In Sect. 2, we described the methods employed from the mentioned ATM design framework. In Sect. 3, the process conducted in the Case Study is carefully described. In Sect. 4, we show the ATM interfaces obtained from the application of the framework and its mobile complement that integrates with the whole cardless withdrawal system. Conclusions close the paper, where we expose principal learned lessons from the whole presented experience.

2 User-Centered Design Framework for ATM Interfaces

In the ATM domain, there is little evidence on how to apply design of usability guidelines to the ATM interfaces [14]. As a consequence, the low consideration for the needs of the final user in the design of these interfaces affected negatively the user experience when employing a self-service technology such as ATM [15].

In 2019, the authors proposed a user-centered design framework for the design of usable ATM interfaces based on methods reported in the literature and validated by ATM and usability experts [2]. This framework includes four processes that would fit in a determinate context of a team. Figure 1 shows the framework at a high level.

Fig. 1.
figure 1

UCD Framework for the design of usable ATM interfaces [2].

Full size image

Each subprocess, the simple one, the fast one, the low-cost one, and the optimal one was diagrammed as a process, in order to define a real workflow [2]. The methods employed in each phase of the framework are described in Subsect. 2.1.

2.1 Methods Employed

In real-life projects, when a team decides to follow a user-centered approach, there are still fundamental questions about how to conduct the methods selected, how to manage them and even how long will they take [2].

The UCD Framework proposes three sub-processes, so the BBVA Perú ATM developer team could select the most suitable methods for its context. The team started the process with the fast methods that are described in Table 1.

Table 1. Fast methods for the design of ATM interfaces.
Full size table

Aguirre et al. also describes the approach that ATM developers would follow [2]. This serves as a starting point for the team, which has little experience in UCD approaches.

  • Identify Stakeholders: List all users and stakeholders of the system. If possible, a meeting with the project manager and representative users.

  • Field Study/Observation: Establish objectives and type of events. The observer must take notes of the performance of the user.

  • Competitor Analysis: Compare through evaluations of the systems that own the competitors.

  • Scenario of Use: Define scenarios with images and explanations.

  • Persona: Specify typical user profiles, detailing their motivations and activities in a context.

  • Parallel Design: Two or more groups design at the same time multiple ideas. After a meeting, a unique design is elaborated from all the ideas.

  • Controlled User Testing: Representative users or experts in the process and workflow try the new design and try to find design errors while completing guided tasks.

  • Satisfaction Questionnaire: An expert elaborates a questionnaire with representative questions. Between 8 and 10 is an ideal number to consider the sample representative.

3 Design of QR Withdrawal

The BBVA Perú, a leading bank in the country, proposed a challenge to its ATM department. The objective was to deliver a solution that simplifies and optimizes the cash withdrawal without the use or a physical card, without losing security.

To achieve the goal of the challenge, the ATM team had to find the pain points and problems that users present while performing other cardless withdrawal transactions that the bank already has. For this, the three phases UCD process shown in Fig. 2 were conducted.

Fig. 2.
figure 2

The three phases of the UCD Framework proposed by Aguirre et al. [2].

Full size image

3.1 Context

Identify Stakeholders.

In this activity, developers met regularly with the stakeholders, so they could understand the problem from their point of view. In addition, it was the first attempt for them to think in the final user as the center of the project. We explained with detail each identified stakeholder in the following list.

  • External User or Final Client. It is the actual user of an ATM who is hard to define with little information. It is because the ATM is widely used by different people with different profiles.

  • Internal User o Developing Stakeholders. This user is responsible for the project and leads its development. It is a crucial member and aids with communication between the ATM developer team and other internal stakeholders.

  • Internal-Support User. This internal user monitors the proper functioning of ATM in the whole country. It is the first one to notice or be informed about incidents occurred with the ATM or any impact on them.

  • Architecture User. It is the one who provides the facilities for the infrastructure needed for the correct development and integration of the systems. Also, this user cooperates in the design of the back-end applications and services.

  • Business User. This user is the one with knowledge about historical final client preference over the products offered by the bank. Also, is one of the most interested users, because its main function is to ensure the business goals.

  • Owner of the mobile channel. This user is responsible for the mobile banking app and its participation is crucial to seek options for cardless authentication using this channel. Solutions that integrate mobile banking and SMS already exist; for instance, SMS withdrawal.

Field Study/Observation.

For the observation and field study, the ATM team established to observe clients who performed withdrawals in a lapse of one hour at ATM of a centric office located at a business district of Lima, the capital of Perú.

A total of six people performed withdrawals in that lapse of time but using a physical card. Because of that, the team decided to complement the observation with a small survey. The survey focused on three main topics: the experiences with existing cardless withdrawals, the preference for cardless withdrawals and the security perception of this kind of withdrawal measured with a one-to-five Likert scale.

Two of them were women and all the participants were between twenty and forty years old. From the total, only 33% had performed cardless withdrawals for themselves, the other 67% had done these operations but not for themselves. However, all of them were interested or had a clear inclination for cardless withdrawals. The perception of security was 3.83 on average due to misinformation about the existing cardless withdrawal operations (the need for additional physical tags, SMS, or wait times).

In addition, this information was complemented with small semi-structured interviews performed with workers of the bank office and another seven representative final clients.

The office hostess indicated that frequently she helps from three to five people to complete their cardless operations that involved a secret password sent from a mobile banking app called “efectivo móvil” or mobile cash. The security guard claimed that over 20 of these transactions are withdrawn daily.

Finally, from the other seven representative final clients interviewed, three of them had never done cardless withdrawals. From the other four, half of them stop doing this kind of transaction due to fees charged when the withdrawal was for another person. The other half stated that it was a bother to wait ten minutes in order to withdraw their “efectivo movil”. The three participants that have never used the existing cardless withdrawals claimed that it was because of unfriendly workflows and the loss of their withdraw passcode.

Conclusions from the Analysis of the Context of Use.

From the analysis of the context of use, the team and the stakeholders agreed in developing a QR-based solution. This would improve the current cardless solutions that the ATM has and optimize the time a user spends in front of one by reducing the interaction with the aid of a smartphone app.

The bank provided the infrastructure and the technology for the development of back-end applications and services; however, the interfaces were an important question for everybody. Not only the ATM interfaces but how these would interact with and complement the smartphone app interfaces.

In that sense, the team continued with the next phases to design a possible solution.

3.2 Requirements Specification

Competitor Analysis.

BBVA Perú is a leading bank in Perú, so its direct competitors are other leading banks in the country. For this activity, the team selected the other top three banks. The systems they own are diverse. For instance, they have solutions similar to “efectivo móvil”, which uses their corresponding mobile banking app. Also, they promote cardless operations (such as money transfer and cardless payments) by using QR-code scanning but only in the mobile app. Figure 3 shows the products they own classified according to their functionality and if they are integrated with the ATM.

Fig. 3.
figure 3

Analysis of the competitor’s cardless solutions.

Full size image

The first column refers to only mobile app QR payments and cashless transactions. These solutions are widely used because the final clients are more pressed for time and are seeking convenient channels such as self-service and mobile banking, which fits their needs very well [16]. However, the client couldn’t get cash with these solutions due to the lack of integration with ATM. The other two columns refer to cardless withdrawal solutions that use a passcode or and special tag for authentication. As the interviewed participants said in the last phase, this passcode is easily lost, and the workflow seems unfriendly.

The team took the time to evaluate the workflow of the solutions that were integrated with ATM that need a passcode authentication. What they observed was that, despite the fact that the interaction with the ATM was reduced, the interfaces were unfriendly. Figure 4 shows the ATM interfaces of the last competitor and Fig. 5 shows the interfaces of BBVA current solutions.

Fig. 4.
figure 4

ATM interfaces of the last competitor cardless withdrawal solution.

Full size image
Fig. 5.
figure 5

ATM interfaces of the BBVA cardless withdrawal solution.

Full size image

The competitor analysis was not limited to national competitors, the team expand the scope to foreign solutions and found some interesting solutions that are described in the following list.

  • NCR proposed in 2012 a QR-based withdrawal system which allowed people to withdraw cash with only an android app. With this solution, they eliminated the need for a passcode and attested that users would soon be able to perform that kind of transaction [17]. They were not wrong.

  • The Standard Chartered Bank in Hong Kong [18] presented a similar solution for cardless withdrawal. The promise of this solution was to get cash as fast as possible. This solution successfully integrates ATM and Mobile Banking app with just four steps to be done at the ATM.

  • BMO Harris Bank reduced the ATM instructions to just two steps. Almost all the workflow is made in their mobile banking app and the user just need to select the cardless withdraw option and scan a QR-code store in the ATM. With this, the bank reduced the withdrawal operation time from 45 s to 15 s [19].

In addition to these cardless withdrawal options, the team found interesting cardless authentication systems based on NFC, virtual cards and Face Recognition. However, these solutions are not used for the withdrawal of cash. The workflow of the operation is still the same as using a physical card.

Persona and Scenario of Use.

For this activity, the team defined three users “Persona” based on the observation conducted in the Analysis of the Context of Use phase. Two young people and one middle-aged adult. Their profiles were described in the activity, detailing their daily activities and their motivations to use cardless operations.

These Personas defined were associated with their respective scenarios of use where the whole activity of performing an “efectivo móvil” or other cardless withdrawal options was ideated. This exercise helped the team to empathize with the final client and know the limitations that different profiles could encounter; for example, not basic knowledge of how to operate mobile banking or QR scanning.

List of User Requirements.

With all the information gathered and new knowledge acquired, the team specified the following user requirements for the ATM interfaces.

  • The interfaces should be few enough to reduce time at the ATM.

  • The ATM interfaces should not ask for authentication.

  • The ATM interfaces must notify the user to previously authenticate themselves using the mobile banking app.

  • The functionality name must coincide with the module presented to the user in the mobile app for a correct association.

  • All the lettering and messages used in the ATM interfaces must be the same in meaning and style with the mobile module.

  • The error messages must be displayed in a friendly way and must be associated with the error messages presented in the mobile app.

3.3 Design of Prototypes

Brainstorming.

Despite the fact Brainstorming was not part of the fast methods selected for this Case of Study, the team decided to use it because of their lack of experience with design methods. According to Aguirre et al. [2], the framework allows the team to select any method that better fits the context of the project, so adding brainstorming is therefore allowed.

This activity was held with three members of the team who gathered in a meeting and proposed various ideas to initiate the next activity, Parallel Design. Figure 6 shows the board after the brainstorming with optimistic and pessimistic ideas.

Fig. 6.
figure 6

Brainstorming held with the team.

Full size image

Parallel Design.

After putting on paper all the ideas, the team divided in three design groups. Each group made its best to deliver some prototypes design using paper prototyping. A meeting was held to show the different proposals and made a consensus about a definitive prototype that was prototyped in high fidelity after the Parallel Design.

Figure 7, Fig. 8, and Fig. 9 show the three different paper prototypes resultant of this activity.

Fig. 7.
figure 7

Paper prototype 1.

Full size image
Fig. 8.
figure 8

Paper prototype 2.

Full size image
Fig. 9.
figure 9

Paper prototype 3.

Full size image

Interactive Prototypes.

For the ATM workflow, the interfaces were reduced to four including the main menu, were a button for the new functionality was added. This menu could be reached without inserting a physical card for authentication. Figure 10 shows how to access to the cardless options and how to select QR withdrawal, while Fig. 11 shows the actual QR withdrawal process.

Fig. 10.
figure 10

Accessing the cardless transactions and QR withdrawal.

Full size image
Fig. 11.
figure 11

Actual QR withdrawal workflow.

Full size image

Figure 12 shows the message that the ATM displays in case of any error during the QR withdrawal.

Fig. 12.
figure 12

Message showed by the ATM in case of error.

Full size image

3.4 Evaluation

The evaluation was held at the ATM laboratory of the BBVA Perú. Seven participants were recruited for the user testing evaluation. This test consisted in performing a QR withdrawal simulation using the prototypes of the mobile app in combination with the ATM prototypes designed in the previous phase.

A survey was elaborated to complement the observed in the user testing. This helped to measure the perceptions about ease of use and security in a one-to-five Likert scale. Table 2 shows the punctuation given to each question by the seven participants. The last column shows the average punctuation given. From these results, the team could identify the necessity of a better integration between the mobile app and the ATM.

Table 2. Results of the user test held with seven users in the ATM lab.
Full size table

After analyzing the results of the test, the team found doubts and improvements from the users that were taken into consideration in the following design iteration. Some of these findings were about the available bills and if it was possible for the user of the QR withdrawal to select the denominations from the mobile app, about the wait and expiration time, and instructions of how to scan the code.

There were also findings about the mobile app, this might be due to the fact that the workflow starts at the mobile app, where the clients authenticate themselves using their mobile banking accounts.

The new designs improved the first prototypes by adding the available bills in the mobile app interfaces, so the user could know if the ATM has the preferred denominations. A complete screen is dedicated to the QR in both, the ATM and the mobile app. At the ATM we tell the user to follow the instructions mentioned in the mobile app, while in the mobile app, the instructions are shown while the camera is ready to scan the code. The wait time that is present in “efectivo móvil” operations was removed, while the expiration time of this transaction was kept, so the withdrawal could have a pending status.

This approach also helped to reduce the interactions with the ATM and reduce time when using it, but the integration between the two technologies could still be improved.

4 Final Proposal

With the information obtained in the Evaluation phase, a new design iteration was conducted, but this time it was focused on resolving the conflicts found by the users. The redesigned interfaces were tested again to validate the correctness of them. In the next subsections, the final interfaces of the ATM are shown in Fig. 13 and Fig. 14, while Fig. 15 and Fig. 16 show the integration between ATM and Mobile App where the status must match.

Fig. 13.
figure 13

Final QR withdrawal interfaces.

Full size image
Fig. 14.
figure 14

QR withdrawal successful operation screen.

Full size image
Fig. 15.
figure 15

Mobile app QR withdrawal proposed interfaces.

Full size image
Fig. 16.
figure 16

Error message and success message matching in app and ATM.

Full size image

4.1 ATM Interfaces

4.2 Mobile Interfaces

5 Conclusions

From this Case Study, the team could design from scratch the interfaces for a QR withdrawal system at ATM. Performing a structured design process with established phases helped the team to understand the real context of the actual cardless solutions that are available on the market. In the first two phases, the analysis of the context and the requirements specification allowed the team to empathize with the final client and discover some pain points such as waiting times in the current cardless withdrawal authorizations and loss of the passcode for cardless authentications.

These new activities performed, and the information gathered after performing them helped to reach an agreement faster than before with all the stakeholders. A QR-based withdrawal system was the ideal solution to improve the current cardless withdrawal and satisfy (and relieve some points of pain) the final user requirements, which is the center of this process.

Through the evaluation phases, the team realized the importance of matching the status between the Mobile App and the ATM during the operation in order to improve the perception of security. Also, this phase allowed the team to find possible improvements in the initial designs.

The framework is specific for the design of ATM interfaces and not intended to be used in the design of mobile graphics interfaces; however, taking into consideration the Mobile App interfaces was mandatory due to the nature of the ideated system. The resultant mobile interfaces could be taken as an input for the mobile channel stakeholders in a future design that uses specific mobile design methods.

By the application of this framework, the development team could interact with stakeholders and final users, and could empathize with user needs and become aware of the importance of the user’s needs and their satisfaction as the main objective of the design process.

In addition, the participation of the development team in design tasks allowed them to learn new skills and get involved with the end-to-end process, in addition to allowing them to prepare more and better test cases for the future implementation of the proposed.

According to the previous information presented, the feedback of final user, the feedback of stakeholders, and the proper feedback of the development team, we are able to conclude that the application of this framework let the team to reach the design objectives. In this sense, we recommend to the ATM team, keep using this framework for present and future projects.