Corporate Banking
To help the Corporate Banking customers in managing their business finances, Current Accounts, Fixed Deposits, Cash flows, Loans, Payments to Vendors, and Payroll management from a single platform.
Compatibility:
Mobile, Tablet, Desktop
Client:
Bank
Year:
2022
The Team
As a UI/UX designer I got the opportunity to work with Hong Leong Bank's team to update an existing application to a new engaging application for the Business Banking customers.
UI/UX Designers:
One Pax
Design Manager:
One pax
Product Owner:
One Pax
The Solution
Discovery
User Survey
During the interview, 10 respondents with different responsibilities, such as checker, maker, and authoriser, were interviewed to know more about their behaviour while using the application.
-
Which kind of transactions do they perform most ?
-
How do they check transaction status?
-
What kind of actions they perform the most?
-
Which devices they use the most?
-
Tell me about a time you had difficulty in using ConnectFirst?
Single Transaction
2-3 Mins
Bulk Transaction/Payroll
12-20 Mins
Avg Time spent
5-8 Mins
Finding Information
Difficulties while navigating the application, struggling to find essential information like loans, payment statuses, and account statements.
Banking Terminology
Users face difficulty understanding certain terminologies in the application due to the outdated usage of technical jargon as the application was built a long time ago
Responsive
Design
The current application lacks mobile support, forcing customers to use laptops to perform basic tasks like checking account balances and transaction statuses.
Performing Transactions
Transaction process is not straightforward, causing customers frustration and confusion. Simple transactions like sending money needs multiple clicks and is hidden within the menu, making it challenging to access. As a result, customers opt to use other banks for their daily transactions.
Side Menu
A side menu was designed using layman terms. By incorporating simple and user-friendly language, the menu ensures that users can easily comprehend and navigate the application's features without encountering technical jargon.
This user-centric approach enhances the overall user experience, making it more intuitive and convenient for customers to conduct their banking transactions with ease
Personalization
In addition to dark and light themes, we introduced customizable shortcuts on the menu bar. Users can add their favourite transaction types for easy access, offering a convenient and personalized banking experience.
Easy Search
We incorporated a persistent quick search bar at the top of the application, taking into consideration our users' navigation challenges. This search bar remains fixed, allowing users to swiftly locate their desired payment methods or any other relevant features within the system.
So How We Got There
Define
The user survey results revealed that users encountered difficulties when navigating the application, facing challenges in locating crucial information such as loans, payment statuses, and even basic buttons. The presence of redundant elements further exacerbated the struggle of users to find what they needed. The abundance of information to remember contributed to their frustration, ultimately resulting in a less than satisfactory user experience.
Information architecture
Given the expansive scope of this project, we chose to implement a waterfall approach. Several teams were actively involved from different banking background Loans, FD team, FTT, and others.
By employing the card sorting technique in conjunction with the survey results, we commenced the procedure of systematically organizing the information. These initial steps proved instrumental in comprehending how to streamline navigation and also in devising our approach to responsive design. These were two significant challenges that our users were currently grappling with.
Wireframe & Prototyping
To begin, I crafted several design variations for the overall look and feel of the application, experimenting with diverse menu placements. Once we had settled on the desired presentation, a high-fidelity mock-up was created for A/B testing purposes.
Option A: The ultimate version that has received approval from stakeholders, the business, and other teams to proceed.
Option B: Another version of home, but a different layout and menu placements.
When creating the high-fidelity mock-up, we explored diverse design variations encompassing elements such as color schemes, fonts, and menu placements. This process was aimed at arriving at the definitive choice for the final design.
Design variations
Approved Layout for A/B Testing
Developer Hand-Off
Along with sharing the XD link to offer a more visual approach to the developers, I created micro-interactions that encompassed hover effects and button animations. This proved highly beneficial for the developers in gaining a visual understanding of the application's appearance and behavior as it is being developed.
