Debet Credit mobile banking app
UI/UX Design case study
Duration: 2 months
Project overview
Introduction
Product
A private bank called Debt Credit (DC) specializes in offering services to private customers and business owners. A cutting-edge application called DC Banking was designed for current users and to entice new clients to the bank. The software offers a variety of tools for managing money, including the ability to pay bills, track account balances and transactions, and move money between wallets using a proprietary protocol.
Problem
Many financial programs fail to attract and retain customers because to poor user experiences, such as difficulties navigating the interface, processing transactions quickly, or getting access to the information users need to manage their money well. Although mobile banking applications are helpful, many users still find them difficult to use. This is especially true for elderly and less tech-savvy people.
Goal
Create a fluid, intuitive, user-friendly, and aesthetically pleasing mobile banking app that will improve the efficiency and convenience of customers' banking transactions and money management, while boosting user happiness and engagement.
Project overview
Introduction
My role
UI/UX designer leading the app. User research, strategy, usability testing, prototyping, visual design and branding from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
User research
Project summary
A mobile banking app should offer tailored solutions that put simplicity, usability, and internal security first, according to research comments. According to the preliminary survey results, the majority of respondents are interested in keeping track of their funds and having rapid access to their transaction history.
The poll also showed that customers want to be able to conduct rapid and secure transactions, schedule automated bill payments, and get real-time alerts for significant account activity.
Pain points
First impact
1
Accessibility
Users may experience navigational issues on the interface, which could result in app rejection.
2
Alerts
Users desire real-time notifications for suspicious account activity and to validate transactions.
3
Finances
Users have trouble successfully tracking their expenditures and managing their budgets.
User Personas
Persona 1
John frequently travels for business, so he requires a system that enables him to access his account information conveniently and securely, transfer money, pay bills, set up recurring payments, and receive transaction notifications.
User Personas
Persona 2
Amy needs a solution that enables her to quickly keep organized and access her account information as a busy student who is just beginning to manage her finances. She wants to be able to interface with university payment systems or student loan providers, and remotely deposit checks.
Ideation
Paper wireframes
I started outlining my ideas using the well-known design ideation exercise Crazy Eights to start the design process.
Ideation
Digital wireframes
I came up with the initial iterations of the banking app after some consideration and paper wireframing. Users have easy access to spendings data from the main screen, which can be displayed as a graph or a pie chart. I made it easier to view transaction history, which is now displayed right away on the home screen.
Prototype
Low-Fidelity Prototype
I created a low-fidelity prototype where the user could exchange currencies, view the history of their transactions, and view data on profit and loss in the form of graphs and a pie chart.
Iteration
Mockups
Based on the input from usability testing, I have made various design modifications. For simplicity of usage, I first added two cards to the main panel that can be swiped through. Second, I made a distinct page for each card's management. Users may utilize the slider beneath each card to get a fast menu for sending money, topping up their cards, and more.
I also included easy access to the DC key, expenditure schedules, and settings to increase use.
Iteration
Mockups
<span data-metadata="">Additionally, spending categories have been added to the spending page, allowing users to filter and view detailed data for each category.
UI Kit
Typeface
UI Kit
Color & Icons
UI Kit
Components
Prototype
High-Fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Project overview
Conclusion
Impact
According to users' feedback, the Debit Credit (DC) banking app provides necessary tools to manage their accounts and streamlines their regular tasks, such as sending money, making online payments, and discovering local ATMs. Users are able to swiftly and effectively address their difficulties because to the app's prioritization of the vital features.
My learnings
I found that despite the complexity of the problem I was trying to solve, meticulously following each step of the design process and concentrating on particular user needs helped me to come up with solutions that were both practical and helpful.
Next steps
Action plan
1
Guidelines
Give new users a more complete onboarding process by using instructional videos to help them understand the features and how the app works.
2
User testing
Conduct additional user testing to validate the effectiveness of the proposed solutions and gather further feedback.