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.
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.
As we compared both flash screens side by side, CIMB Clicks clearly does better in utilizing the space optimally by having a bigger button design and allocating sufficient space between buttons. As for Go Mobile, having slim buttons sticking closely to each other and located at the top of the page can make it difficult for users to click on the right button, especially on a smaller phone screen size.
The button designs (shown above) are similar across different sections of the respective apps.
See the octopus there? The eyes are blinking from time to time!
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.
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 informs 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 the account 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.
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.
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.
Error Message:
There was an error message that occurred when we tried to confirm fund transfer using Go Mobile.
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.
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 longtime ago, because he thought he was unable to perform fund transfer
Based on our past research experience, many users faced difficulty in online payment transaction using mobile because of the TAC issue, as they would exit the app and terminate the transaction progress when they try to view TAC via SMS function.
This is a good move by CIMB Clicks to remind the users not to exit the app, instead, utilizing the notification bar to read TAC code via SMS.
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 ticks on it.
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.
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.
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 a user needs to go through to complete the bill payment process.
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.
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 bySomia Customer Experience & Netizen eXperience
Authors:
- Alvin Chai and Soon Aik are UX consultants at Netizen eXperience (Malaysia).
- Larisa Sitorus & Francisca Ayrhes Yensi are UX consultants at Somia Customer Experience (Indonesia).
For any queries please contact: support@netizenexperience.com
