Improving the User Experience of Adding a Bank Account in a P2P Payment App in Hong Kong
I previously worked on a mobile tutorial project for PayMe App in Hong Kong. The goal of the project was to address one of the major feedback that we gathered from its users. We found that a lot of people couldn’t add their bank accounts as a top-up source in this mobile payment app.
During a short span of time, I had the opportunity of working on the user interface before PayMe 2.0 was released last August 2019. I was quite happy that some of my designs were included in the released version.
Before PayMe 2.0 was released, the app could only handle HSBC bank accounts. HSBC details were pre-filled such as the bank name and the bank code, there was also a tutorial below the input field. For PayMe 2.0, the new feature enabled people add other bank accounts as their top-up source. Since banks have their own formats and conventions, people were not sure where or how to find their branch codes. This made it difficult for people to add their bank accounts. Hence, it made a strong case to address this problem, before more users experience the same issue.
When PayMe 2.0 was released:
Back to when I was working on this project, I encountered several unexpected hurdles, some of which I will share below.
Learnings
Bank account formats
I was not familiar with the banking account formats in Hong Kong. I realized that it was hard to find other references other than my own ATM cards and banking app accounts. I was able to get help from some of my teammates, but I still had to find other references for other banks on my own.
It took a while, but after coordinating with my teammates, I also learned that:
Bank account numbers = Branch code + Account Number
Assumptions
I made an assumption that most people probably get their bank account numbers from their ATM cards. I discovered that not all banks give ATM cards, some give debit cards as their ATM cards. Also, not all ATM cards display the account numbers (e.g., Citibank). However, there are other options that serve as references such as e-statements.
Scope of the Project
The scope of the project was focused on supplementing the users with education about bank account numbers, so that they would be able to add their bank accounts as a top-up source. It was in the right direction when it showed just-in-time help through the tutorial found below the input field. However, supplementary instructions do not necessarily make it easier for people to complete their task. In retrospect, I should have focused in enabling people to add bank account details.
“Whenever possible, spend your resources making the design better, not pairing it with an instruction manual.” — Alita Joyce (NN/g)
In this case, the tutorial contains critical information for users to complete the task of adding branch codes and account number. Hence, it is important to always show this while a user is trying to add a bank account. It would be interesting to perform a usability test with and without the tutorial near the input fields. If test participants take a long time to add a bank account and/or success rates turns out to be low, even with the tutorial, then this design needs to be further improved.
Here is the latest update in the design. I’m happy that the design has been improved by reducing information pollution in the half modal. After choosing a certain bank and clicking the tooltips, it shows relevant information to complete the task.
I’m happy to have been a part of this project that has aimed to provide better user experience for people using PayMe App for consumers.
Here is one of the public resources I found that showed a list of bank accounts in Hong Kong, it includes the virtual banks as well:
https://www.wfsfaa.gov.hk/sfo/pdf/common/Form/tsfs/bank_code.pdf
Thanks for reading! 💗
