The Problem:
I've faced challenges with the user experience of online banking beneficiary forms having a mild form of dyslexia. This raised the question: Are the current forms the best solution for all users?
The Solution:
By enabling users to import beneficiary details with a single click, we eliminated the need for manual form filling, enhancing efficiency, accuracy and making the process that much more pleasant.
My Role:
I conducted user interviews and usability testing, gathering insights from clients of four banks: ABSA, Capitec, FNB, and Discovery. Leveraging the knowledge acquired from Schalk Venter's workshop, Everyday Form Footguns, I collaborated with Anel Button, a software engineer, whose inspired idea of the "beneficiary card" further refined the solution. I designed a prototype for the beneficiary card and the new user experience flow.
User Expectations and Flows in Online Banking
Understanding user journey and expectations is vital for effective design. Through interviews and testing, it's evident that all users expect the same payment process, regardless of their bank. The expected process of creating a beneficiary and making the payment is the following :
1. Get account details for payment
2. Log in
3. Navigate to pay new beneficiary
4. Fill in beneficiary form
5. Pay beneficiary
Similarly, the users anticipated the beneficiary form's flow to remain uniform:
1. Account holder name
2. Bank and branch code
3. Account number
4. Amount
5. Proof of payment
Comparing Current UI Designs in Online Banking
I had a look at how consistent is the current UI designs of online banking are with the users' mental model.
ABSA's beneficiary form puts the payment amount first, contrary to users' usual expectation of finding it at the end. This difference can disorient users, making them search for the expected information longer than necessary.
The ABSA user noted an excessive number of windows and frequent scrolling. The screenshot illustrates that the side pop-up window design doesn't efficiently utilise screen space, leading to the need for scrolling in each window. Breaking forms into segments can improve the process of filling them out, making it less burdensome when approached intuitively. However, in the case of ABSA's beneficiary form, the way sections are divided and the utilisation of screen space actually further extend an already frustrating process.
Users took longer to create a beneficiary and make a payment when the form was broken up compared to when the entire form was visible on one page. I am not entirely convinced that the breakdown of beneficiary details and payment details makes sense, as users perceive creating a beneficiary as one process with multiple fields to fill in, rather than separate sections with required fields.
Discovery employed a straightforward approach throughout the process, likely contributing to the significant time difference between the discovery user and others. The discovery user navigated the process confidently without hesitation or rushing to complete the task. This direct approach is also reflected in the style of their error message.
The Capitec user experienced frustration with the feedback message when the wrong account number was inserted. The error message was not prominently displayed on the screen and indicated that the issue could be related to either the account number and/or branch code. In contrast, the Discovery user instantly identified the problem as the error message clearly stated "Account number invalid" with an attention-grabbing pop-up window.
Creating a great forms:
Schalk Venter explained in his workshop "Everyday Form Footguns" that designing the optimal form is not as straightforward as it may appear. He emphasized that when creating a form, you're inevitably setting yourself up for potential pitfalls. Therefore, it's beneficial to approach form design with a strategic mindset and to comprehend the underlying mental model of a form. One should ask, "Is this necessary?" and then make decisions whether to "keep, cut, or postpone it." Additionally, recognise when you need to clarify to the user why certain information is being requested.
Is a form necessary to add a beneficiary?
I asked myself: Is it necessary to fill in a form for beneficiary creation? Picture a scenario where information can be automatically loaded via any file format, using OCR (optical character recognition) to autofill the form within their banking app or browser.
Anel Button, a software engineer, proposed an even more intuitive method: Imagine being able to transmit your bank details as a beneficiary card, which you can store directly in your banking app or browser. With just one click, you can add verified banking details, eliminating the need for copying and pasting, verifying account information, or exerting effort to fill in reoccurring forms.
Anel Button, a software engineer, proposed an even more intuitive method: Imagine being able to transmit your bank details as a beneficiary card, which you can store directly in your banking app or browser. With just one click, you can add verified banking details, eliminating the need for copying and pasting, verifying account information, or exerting effort to fill in reoccurring forms.
This solution still relies on a form for entering variable data such as the bank account for payment, the payment reference, and the amount. However, the introduction of a beneficiary card now streamlines the process by autofilling four form fields: Account Name, Account Number, Bank, and proof of payment. During usability testing, users unanimously praised the convenience of the auto-populated branch code, expressing relief at no longer needing to find and input the information manually. If they were excited about one autofilled form field, just imagine their delight with four!
It is already possible to share your bank details via whatsapp. Yet, a user would still need to add the information manually. Importing the details in a seamless way in one intuitive process, that is game changer.
Beneficiary Card: The Seamless Solution
User A transmits their banking details to User B via their banking app, using WhatsApp or another mobile messenger platform. User B simply clicks "add" to create the beneficiary card, launching their banking app to automatically generate the beneficiary within the app or browser. User B then proceeds to initiate payment to User A, entering the amount and payment reference as required for the specific transaction. The proof of payment method is already integrated into the beneficiary card, and once the payment is completed, the proof of payment is automatically sent.
Conclusion:
The beneficiary card is a transformative solution that refines existing technological processes for online banking and sets a new standard for user experience. By autofilling four essential form fields, it significantly reduces the possibility of human error while enhancing convenience and efficiency. By embracing automation, we've liberated users from the burden of manual data entry, allowing them to focus on what truly matters: navigating financial transactions with ease and confidence.
