Many banks have realized the importance of mobile usage in daily lives and started allowing their customers to perform online banking via smartphones using their mobile app. In recent years, CIMB group, the 2nd largest bank in Malaysia and 5th largest in Indonesia, introduced their mobile apps named CIMB Clicks (Malaysia) and Go Mobile (Indonesia) apps for their users.

tumblr_inline_nvixksuw2f1t6xj23_500

 

Despite the fact that both CIMB Clicks and Go Mobile app have similar rating on Play Store, both apps have completely different user interface and user journey. It is also interesting to learn that the Go Mobile app has more usability issues as compared to CIMB Clicks. Let us dive deeper into the usability of some important functions in banking apps, especially on bank transfer and bill payment.

First Impression & Overall Design

Upon launching the application, users are presented with the flash page. We have seen this as a trend across mobile banking applications, where users are not directly prompted to log in, but have the options to look up bank information such as the ATM and Branch Locator.

The main difference between is that Go Mobile allows users to switch between English and Bahasa language, whereas CIMB Clicks uses only English across the app, which is something common, as most major banks in Malaysia use English for their sites. Other than that, CIMB Clicks has a copyright description at the bottom of the app, which is something uncommon to appear on mobile apps since mobile screen are already limited in space.

tumblr_inline_nviwk4le3q1t6xj23_500

Upon launching the application, users are presented with the flash page. We have seen this as a trend across mobile banking applications, where users are not directly prompted to log in, but have the options to look up bank information such as the ATM and Branch Locator.

The main difference between is that Go Mobile allows users to switch between English and Bahasa language, whereas CIMB Clicks uses only English across the app, which is something common, as most major banks in Malaysia use English for their sites. Other than that, CIMB Clicks has a copyright description at the bottom of the app, which is something uncommon to appear on mobile apps since mobile screen are already limited in space.

 

Fund Transfer 

Transfer Option:

The landing screen for bank transfer is pretty straightforward for both apps, users can easily identify and choose the transfer type of their choice. However, Go Mobile does slightly smarter by having a ‘Transfer To’ title on top and lists down the transfer option below it.

tumblr_inline_nviwmjyXSV1t6xj23_500

It might be unnecessary for CIMB Clicks to include ‘To..’ for each payment option. Although ‘Transfer’ section is highlighted at the bottom for both apps, Go Mobile is better in alerting users that they are currently on a ‘Transfer’ page.

Account Selection:

The arrow icon on Go Mobile inform users to click on any of the accounts to proceed. Take a look at CIMB Clicks, if there is only one account available (as shown in image), user might not know that theaccount is a clickable.  Other than that, it would be great to show the amount of money in the account section (like GO Mobile), as many users do not remember the lengthy bank account number.

tumblr_inline_nviwnbPimw1t6xj23_500

Although Go Mobile does better in terms of discoverability for account selection, the word ‘Select Source A/C’ can be amended to ‘Select Source Account’, or ‘Transfer From’.

Confusing Account Details:

The selected Source Account is visible on the first section.

What appears to be the account number is underlined and in blue. When this is tapped, the user is prompted to call it as a phone number.

We found this odd and since it is designed as a link, user may expect that they will be able to look at the rest of the details of the account.

tumblr_inline_nviwo4sQMV1t6xj23_250

Transfer Amount Selection:

While inserting fund amount for transfer on Go Mobile, there is a currency dropdown selection, however, there is only one available option which IDR. There is no indicator or hint whether in other cases there will be other currencies. In order to proceed, user had to scroll to top to click on the submit button located at top right. Unlike CIMB Clicks, a ‘Continue’ button is conveniently placed right after the ‘Payment Details’ input section.

tumblr_inline_nviwqyzOYz1t6xj23_500

Error Message:

There was an error message that occurred when we tried to confirm fund transfer using Go Mobile.

tumblr_inline_nviwtcobq61t6xj23_500

This error message is vague and titling it as ‘Error’ can be perceived as something wrong on the bank side, the app or on the user’s mobile phone (app or hardware error). Another problem is that the user has no options than to tap “Okay”. This forces the user to agree with the error without having enough information or being offered a solution to fix the problem.

A solution to this would be informing the user any transfer limit on earlier step, instead of having the user invest their time to go into next step to find out that they have entered amount outside of the range permitted.

CIMB Clicks instead provide a clear and meaningful error message “Minimum Amount is RM1.00”, at the right time. It allows users to make correction very quickly without hassle.

Requesting TAC (Transaction Authorization Code):

Requesting TAC is one of the most common ways to authorize an online banking function such as bill payment or money transfer. We found that users might face difficulty in requesting TAC code using CIMB Clicks app. Take a look at the image below.

tumblr_inline_nviwu9mEHb1t6xj23_500

Did you see any button here? The ‘Request TAC’ is a clickable button that doesn’t look like one. One of our invited users stopped here and waited for TAC but failed, he didn’t realize that he had to click on ‘Request TAC’ button to request TAC. He is a CIMB customer who downloaded the CIMB Clicks app before but uninstalled it long time ago, because he thought he was unable to perform fund transfer.

Recurring Transfer:

The option for ‘repeating’ transfer is pretty straightforward. However, for users who are not familiar or have not tried recurring payment or transfer, they might be confused with the ‘Repeat’ function.

Thus, it is recommended to have a short description about ‘Repeat’, the description will then disappear when user tick on it.

tumblr_inline_nviwv2hRaG1t6xj23_500

Bill Payment

Inconsistent Transition:

On Go Mobile, after choosing the credit card option on ‘Pay Bills’ page, user goes to the page labelled ‘Bill Payment – Credit Card’, which is inconsistent to the label used in the previous page (‘Pay Bills’). It would be better to keep the label consistent as “Pay Bills – Credit Card” to make the transition smoother.

There are two options below the page title: ‘Pay Bills’ and ‘My Favourite’. Since the user is already in the Pay Bills page, these options can be misleading. Changing the label to ‘Enter Details’ or ‘Load from Favourite’ would represent the actions better.

tumblr_inline_nviwvuNiFY1t6xj23_500

Lastly, user has to tap ‘Submit’ on top right to proceed to next step. The button should be changed to ‘Next’, as users might expect to submit payment when they see ‘submit’ button.

Biller Code:

The biller code can be confusing, especially for first time user. Although the app does inform users to enter either Biller Code or Biller Name, it can be easy for users to miss out this statement.

Users who’ve tried out this app (especially on money transfer) will understand that ‘Please key in’ indicates compulsory input, hence, users might thought that both Biller Code and Biller Name are compulsory to be keyed in.

image

Payment Confirmation:

In order to confirm bill payment on Go Mobile, user is prompted to enter the 1st and 3rd digit of the Mobile Banking PIN. This instruction is confusing, and there is no example or information on how to get these details, especially for first time users.

Unlike in “Transfer”, there is also no indication on how many steps user needs to go through to complete the bill payment process.

image

More Details:

Looking at the description ‘For more details, go to CIMB Clicks > Internet Banking > Bill Payment” , users might expect to see the relevant information about ‘Biller Code’ or ‘Account No.’ from the app itself, since the app itself is named CIMB Clicks, even the logo appears all the time.

However, we found that the app doesn’t have such section named ‘Internet Banking’. Likely, it was referring the CIMB Clicks website and should be stated clearly to avoid confusion.  Yet, we were unable to find the relevant information about Biller Code on the CIMB Clicks website too.

Should the app is able to provide relevant and useful details about Bill Payment, a direct link can be displayed directly. Of course, users have to be warned about exiting the app (and abandoning the bill payment process) if they agree to visit the specific site on browser.

image

Recap

From the study above, it is learned that both apps have space for improvement to be a more user-friendly app. There are several key points that we can learn from these apps to create a better app.

Overall Design

  • Adequate button size and sufficient space between buttons.
  • Smooth transition between steps/pages.

Fund Transfer

  • Provide timely feedback to reduce user cognitive thinking (e.g. error message).
  • Clear title and avoid unnecessary content.
  • Keep affordances in mind: Design things that are clickable to look like they are clickable.

Bill Payment

  • Prevent confusing instruction
  • Provide simple guide, especially for first time users.

This is a collaborative project by Somia Customer Experience & Netizen eXperience

Authors:

Larisa Sitorus & Francisca Ayrhes Yensi are UX consultants at Somia Customer Experience (Indonesia).
Alvin Chai and Soon Aik are UX consultants at Netizen eXperience (Malaysia).