Keywords

1 Introduction

According to the work of Granollers et al. [1], there is a growing interest in the Latin American software development industry in HCI (Human–Computer Interaction), Usability and UX (User Experience) topics. In this context, in BBVA Peru, a leading bank in that country, in its process of digital transformation and adoption of agile and user-centered technologies and processes, a collaboration was initiated between the ATM application development team and the academic community of HCI, especially with the Pontifical Catholic University of Peru. This collaboration has been reported in works presented as [2,3,4,5] and others in progress.

In this context, in the development team, we proposed an approach that consisted of a series of steps and techniques focused on the user to make the designs and redesigns that were requested. This proposal has been in use since 2017, and it was presented at Interaccion 2017 conference [3].

The need to propose an appropriate approach was due to the lack of formal proposals for methodologies for the design of ATM interfaces, as reported by Aguirre et al. in [5], and due to the tight time tables in software development processes aligned to agile methods where it is expected that the team delivers with shorter delivery periods each time.

The Bank itself has adapted Design Thinking as a process for its specific Design areas, and for all areas in general. However, this methodology in principle involved much more time and a higher level of maturity.

According to the above, and given the maturity of the processes related to the design, the proposal was presented by the development team, in order to align it with Design Thinking and to avoid prescribing specific techniques, but to instead propose and adapt according to the project in execution. Later, this improved proposal was applied in a project entrusted to the team: Redesign the main menu of the ATM application.

Thus, all of the execution of the proposal was carried out with positive results, not only according to the feedback received in the user tests, but also by the internal users and the Bank’s quality assurance personnel.

2 Background

2.1 Design Thinking

According to Lockwood, Design Thinking is “a human-centered innovation process that emphasizes observation, collaboration, fast learning, visualization, and rough prototyping. The objective is to solve not only the stated problem at hand, but the real problems behind the obvious.” [10].

BBVA has adapted Design Thinking based on authors as Lockwood and Tim Brown (IDEO) [11]. In this implementation, four phases are defined: Comprehension, Ideation, Prototyping and Evaluation, as illustrated in Fig. 1.

Fig. 1.
figure 1

(adapted from BBVA)

Phases of design thinking.

Full size image

2.2 Usability

Usability is defined in ISO 9241 (2010) as “The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” [7].

2.3 Usability Test

According to the study performed by Holzinger [8], there are several methods, which are divided into two groups: usability inspection methods and usability testing methods. According to Paz et al. [9], the main difference between them is that in inspection methods, usability problems are detected by specialists, and in testing methods, usability problems are found through the user’s observations while they are using or making comments about the interface of the system.

2.4 Initial Approach

The initial approach proposed by Moquillaza et al. in [3], consisted in seven specific steps for obtaining a ready-to-implement design. Those steps are in Fig. 2.

Fig. 2.
figure 2

Initial approach presented in Moquillaza et al. [3]

Full size image

As we can see, those steps let the team work from requirements until the approval, with steps for proposing ideas and steps for filtering them. In that sense, those steps can be aligned to the phases presented for Design Thinking, adding steps for evaluation. This evaluation step is according to the conclusions and future works described in Moquillaza et al. [3].

Besides, in new iterations, the development team noted that, depending on the nature of the project, they could use additional techniques, or not use some of them. In that sense, some steps must change their names in order to suggest techniques, not prescribe them. Many other techniques can be reviewed in ISO 13407 [6].

2.5 Updated Approach

According to the previous section, the proposed approach was updated to include nine steps, aligned to Design Thinking. Design Thinking is the method used by the BBVA as toolset for any problem or project in the Bank. The updated approach is shown in Fig. 3.

Fig. 3.
figure 3

Updated approach for design of user interfaces for ATM

Full size image

3 Case Study

3.1 Purpose of Study

The purpose of this study was to redesign the main menu of the ATM application by applying the updated approach.

The development team was required to analyze, propose and test a proposal of redesign of the main menu and withdrawal operation in the ATM application.

The project got the participation of stakeholders and had as principal input information of real customers by verbatim quotations [12]. Verbatim quotations are spontaneous opinions of customer that they fulfill in surveys made periodically by quality-control division of the Bank and external institutions. From those verbatim quotations, it was detected that the current main menu had usability problems that negatively affected the user experience.

3.2 Methodology

This requirement was developed following the updated process described in previous sections. Furthermore, the team executed the nine steps since August, 2018, as we describe:

3.3 Requirement

The team received the requirement, and selected two persons from the team to lead the whole design process. Verbatim quotations and survey results were received and analyzed. In addition, stakeholders were identified. The techniques we used in this step were the following: tag cloud, data analysis, and stakeholder identification.

4 Stakeholder Contact

In this step, results were presented to the stakeholders in order to share principal findings and get feedback. The team listened to the stakeholders about all the problems related to the requirement, and explained to them that as result of the analysis, an important group of users found that the current main menu was confusing, and they requested a more simple way to access the functions. Some findings:

  • In all user profiles there are problems with notes availability.

  • Customers between the ages of 18 to 25 request ATM with usable functionalities.

  • Customers between the ages of 26 to 35 express their discomfort with what they perceive as “excessive sale of products”. Customers who make withdrawals and deposits request speed in their operations. They also mention the complexity of the initial options.

  • Customers between the ages of 36 to 45 state that steps have been added to withdrawals and that some of these lead to error. They also mention the difference in experience among ATMs.

  • Customers between the ages of 46 and over consider that there are many icons on the first screen menu and that it would be useful to place instructions. In addition, these customers mention the need to have larger texts and more lit ATMs.

  • In addition, from the analysis of transactions per month, the Pareto principle is applied, and it has been found that four ATM transactions represent 93% of the transactions carried out. These four operations are Withdrawals, Check balances, Query movements, and Deposits.

In that sense, then main conclusion drawn at the meeting is to work in a new taxonomy for the menu. The techniques we used in this step were the following: face-to-face meeting and user profiles.

4.1 Storyboard

The team made some storyboards showing the principal findings of previous steps. This exercise let the rest of the team take contact of the results and state of the project. The techniques we used in this step were the following: Storyboarding and visual thinking.

4.2 Brainstorming

In order to redesign the taxonomy of the current menu, the team could take into account information of other channels of the same Bank, the Bank in other countries, and ATMs of competitor banks. With this data as reference, it was convenient to apply Card sorting with stakeholders in a brainstorming session.

The objective was to identify a taxonomy of the main menu that is simple and clear for customers, giving priority to the most used operations.

The team used 29 cards with the names of the operations that currently exist in ATMs and blank cards to be able to propose new names for existing transactions or new group names. Results of this session can be visualized in Figs. 4 and 5. The techniques we used in this step were the following: Brainstorming, competitor analysis, card sorting.

Fig. 4.
figure 4

Results of Card sorting in brainstorming

Full size image
Fig. 5.
figure 5

Taxonomy proposed from the brainstorming

Full size image

5 Prototyping

In this step, the team prepared some proposals for implementing the new taxonomy. The team based its work in these premises:

  • Simplify steps for withdrawals, deposits and inquiries.

  • Organize better buttons on the result of the previous activity.

  • Do not affect sales flows.

  • Do not affect interactive advertising.

  • Focus on clients’ pain points.

Four proposals were prepared. In Fig. 6, we can see initial menu. In Fig. 7, and Fig. 8, we can see some proposals. The technique we used in this step was the following: Prototyping.

Fig. 6.
figure 6

Initial main menu (touch and buttons)

Full size image
Fig. 7.
figure 7

Proposal No1 (touch and buttons)

Full size image
Fig. 8.
figure 8

Proposal No2 (touch and buttons)

Full size image

6 Filter Session

This session was made with stakeholders in order to get feedback directly. In this session two proposals were discarded and several changes were suggested. The technique we used in this step was the following: Face-to-face meeting.

7 User Session

This session was made in order to keep with the proposal ready-to-development. Proposal No1 was selected, but users asked the team if they could evaluate proposal two in parallel. The technique we used in this step was the following: Face-to-face meeting.

8 Evaluation

For this step, the team completed in a prototyping tool, a complete navigation for two proposals. In that sense, the complete withdrawal could be evaluated.

This step was developed in two parts. In a first part, the team asked feedback to UX team in the Bank. UX team principally attends on web projects, but two assessment-meetings were held and the proposals were updated with this feedback.

In a second part, a heuristic evaluation was made over two proposals. Experts in Usability made Heuristic Evaluation. 19 items were reported, 13 were solved. Besides, user evaluations were made after changes in order to validate the proposals. The techniques we used in this step were the following: Heuristic evaluation, user evaluation and assessment meeting.

9 Approval

In this final step, ready-to-implement interfaces were presented to stakeholders, this session got positive feedback. Stakeholders asked for new requirements of redesign and asked for monitoring the present proposal once implemented and released. Figures 9, 10 and 11 show final proposal ready-to-implement. The techniques we used in this step were the following: Face-to-face meeting.

Fig. 9.
figure 9

Proposal ready-to-implement (part 1)

Full size image
Fig. 10.
figure 10

Proposal ready-to-implement (part 2)

Full size image
Fig. 11.
figure 11

Proposal ready-to-implement (part 3)

Full size image

10 Conclusions and Future Work

At the end of this process, we can conclude that interfaces delivered permit the user more freedom and use of the system with better satisfaction, especially in the main menu and withdrawal operations.

Given the results obtained in all the process, especially from the usability test, we can affirm that the interfaces, which were developed, are adequate for implementing in BBVA ATMs, because of the approach followed and the users acceptance.

In that sense, we conclude that this updated approach is useful and meets its objectives in the process of designing user-centered interfaces. Additional steps permitted to deliver a product with better quality and with better Usability.

The process for ATM design should be the same as it is for any other app. However, ATM applications are different from desktop and mobile apps and it is important for a designer to consider those when applying a user-centered design approach.

Finally, we recommend BBVA that it implements a systematic process of interaction design based on the techniques described in this work.

As future work, we continue maturing this process, and evaluating and comparing with other proposals.