sBank.
Enhancing User Experience in Web Banking
My Role:
Product design ∣ Research ∣ UX writing
Tools:
Figma ∣ FigJam ∣ Balsamiq ∣ Notion
In the digital era, banks are continually striving to provide seamless and secure online experiences to their customers. Banking applications have become indispensable tools for both financial institutions and consumers, offering convenience, accessibility, and enhanced services.
. Introduction
This concept case study delves into the design process of a web based banking application aimed at providing seamless user experience and user interface to provide customers with a more intuitive and efficient way to manage their finances while ensuring security measures to stay competitive in the market and with industry standards.
- . User Friendly Interface
Ensure the application has an intuitive and easy to use interface for customers to navigate through various banking services effortlessly. - . Account Management
Provide customers with convenient account management functionalities, including viewing account balances, transaction history, transferring funds between accounts, and setting up automatic payments. - . Real Time Transactions
Enable real time processing for transactions, including transfers, recieving money, and bill payments, to provide customers with immediate access to their funds and timely financial updates. - . Customer Support
Offer comprehensive customer support channels, including live chat, chatbot, email support, and a knowledge base, to assist customers with inquiries, technical issues, and account related concerns - . Security and Privacy
Implement security measures to safeguard personal and financial information, including encryption and multi–factor authentication.
. Research
My initial destination was the Google Play store and Apple store, where I delved into customer feedback regarding the competitors’ app user experience. I picked the ones with most downloads. I read through hunderds of reviews. Those reviews provided me with valuable insights into users’ perspectives and their areas of concern. It was quite an eye opener.
To validate my assupmtions from reading hundreds of user reviews of different bank applications, I have conducted an online survey to collect quantitative data directly from users. Reading users reviews helped me to discover specific pain points and craft more targeted questions. The survey was distributed to a diverse sample of users of various online banking platforms. Participants were asked to provide feedback through a series of structured questions with open–ended and closed–ended prompts. The survey covered topics such as ease of use, security measures, transaction processing, customer support, and preferences for new features.
- . Difficulty navigating complex menus and options.
- . Lack of clarity in account statements and transaction histories.
- . Inadequate Customer Support
- . Lack of personalization options
- . Inconsistencies in the web interface experiences.
- . Lack of budgeting or expense tracking features in traditional online banking applications.
Drawing from research findings, I’ve opted to enhance the application by integrating additional features, including a Budgeting tool, Chatbot, Knowledge base, and customizable Dashboard option, allowing users to personalize their experience. These new functions will initially be treated as MVPs.
. Ideation
With all the information I have, I crafted a task board with ideas, features, functions and challenges to address in the upcoming app design.
User flows help me to map out the paths users take within the app. By visualizing the steps users take to accomplish tasks or reach specific goals, I can gain a comprehensive understanding of their journey.
. Lo–fi wireframes
I have used Balsamiq for crafting low fidelity wireframes, which helped me to refine my concept. Through multiple iterations, I fine tuned the designs until achieving satisfaction with the result. My design decisions were supported by insights from user feedback, market and industry research, ensuring the wireframes aligned with user needs and industry standards.
. Style guide
. Prototype
Dashboard serves as a centralized hub for users to access various financial services and information. Users can decide and control what they want to see on their dashboard thanks to customization feature. In a default view I have added quick actions as Transfer funds, Receive funds and Create a budget. Following with Account and Card overview, Transaction history and Current balance with Income and Expense overview.
Allows users to view detailed transaction history for each account, including transfers and payments. Users can filter and search transactions based on various criteria such as name, date range, transaction type. Statements can be downloaded in PDF or CSV.
Users can enter into transfer from Dashboard, thanks to Quick actions or from menu selection. Transfer funds enables users to move funds between their accounts, or across financial institutions to different bank accounts.
Users start by selecting the accounts they want to transfer money from, specify recipients’ account, enter amount of money they want to transfer. User can set up a recurring payment or one–off payment. Before completing the transfer, the bank application will prompt user to verify the details of the transaction and confirm their authorization using a secure SMS code authentication method, or user can use their sBank mobile application to confirm the transfer.
This feature enables users to effortlessly receive money from other individuals or entities directly into their bank accounts. Users can conveniently access the Request Funds feature directly from the Dashboard, either through Quick Actions or by selecting it from the menu.
To initiate the process, users simply generate a payment request specifying the desired amount of money and any relevant transaction details, such as a description or invoice number. They then specify the recipient by manually adding their phone number or email address, or by selecting a recipient from their existing contacts list.
Once the payment request is generated, users share the payment details with the intended recipient. This includes providing them with a unique payment link necessary to initiate the transfer. Recipients are promptly notified via phone or email by the system.
Users can enter into Budgets from Dashboard, thanks to Quick actions or from menu selection. A budgeting tool is a feature designed to help users manage their finances more effectively by setting budgets for specific categories and tracking spending. Option of creating a budgets empowers users to take control of their finances. Users can easily see where their money are going and identify areas where they can cut back or adjust their spending.
The tool offer customizable alerts to notify users when they are approaching or exceeding their budget limits for specific categories. These alerts can help users avoid overspending and stay within their financial goals.
Users to customize various aspects of their banking experience, manage account preferences, and control security settings, privacy, how bank can communicate with user. Provides users with flexibility and control over their banking experience, allowing them to customize settings according to their preferences, enhance security, and manage their accounts more effectively.
This section contains answers to common queries related to account management, transactions, security, and other banking related topics, guides and tutorials that explain how to use various features of the banking app, set up account preferences, make transfers, and more.
Users can find direct contact details such as phone numbers, live chat or can find a branch options for reaching customer support representatives for further assistance. On every step in the application users have availability to open chat with banks’ chatbot to resolve any kind of issue. Chatbot can be a very helpful tool in navigating users to achieve their goal.
. What I would do next?
To ensure that the app meets the highest standards of quality, security, and usability, providing users with a positive experience and maintaining reputation of the bank, the next phase would be testing, testing and some more testing:
- . Alpha testing
the application would be tested internally by the development team. This testing would focus on identifying and fixing any major issues or bugs in the functionality of the app. - . Beta testing
After the alpha testing phase, the application would be released to a limited group of external users. Beta testers provide feedback on the usability, performance, and functionality. This feedback would be used to make further improvements and refinements to the application. - . Usability testing
Usability testing involves evaluating the user interface and experience to ensure that it is intuitive and easy to use. This testing may involve conducting surveys, interviews, or observational studies with representative users to identify any usability issues or pain points. - . Performace testing
Performance testing is conducted to assess the speed, responsiveness, and stability under various conditions, such as heavy user loads or network congestion. This testing helps ensure that the application can handle the expected volume of users without experiencing slowdowns or crashes. - . User Acceptance Testing
Implement security measures to safeguard users' personal and financial information, including encryption, multi-factor authentication, and monitoring for suspicious activities.
