2023
Mobile Banking Application
Project Overview
Initially, my task was simply to explore Google's then-new Material Design 3 and try to implement my ideas for using the innovations of this design system. However, at the research stage, the main goal became the creation of a simple and convenient application for easy use.
Project goal
The goal of this project is to improve the user experience in the most important aspects of banking services and to add new functionality that is beneficial to users.
Design Process
The approach to this stage was simple. Since I have a common design system, Material Design 3, all I had to do was adapt it to the needs of the application without creating a mess of colours and maintaining a clear interface hierarchy.
Research
To create a user-friendly app that would retain users and keep them using the company's products, I needed to understand how most people use banking apps, what functionality is essential for them, and how to improve their experience.
To do this, I used the Kano model, which helped me differentiate functionality by its importance and impact on the user experience. In addition, I interviewed several users to learn about their experience with banking apps and find features that improve their experience.
User Centric Surveys
I surveyed different people, with different professions and different activities to understand their:
- Daily usage pattern - this information was used to build the Kano model.
- To find out useful features that improved their user experience, or features they consider missing in the application
Summarize Interviews
• Customizable home screen
Users would like to be able to customize their home screen with ability to add quick actions and display additional information
• Transaction history across cards
Users would like a single history of all their cards' transactions, with the ability to specify periods and amounts.
• Transfer templates
Users like that the app creates transfer templates, making it easier to make future transfers
• Personal goals, Moneybox feature
Users would like to be able to create moneyboxes where they can save money and see the results of their goals
Kano Model
The Kano model has served me as a tool for classifying the main aspects of banking services of different significance and priority. This systematic approach allows us to clearly distinguish between core functionality and possible key selling points.
Performance Features
The better the performance, the more satisfied the user
• Responsive Interface: Fast, smooth experience with minimal load times
• Transaction History: Convenient and easy way to navigate transaction history and conveniently operate transactions
• Customers expect the ability to customize app according to their needs and preferences, personalized recommendations.
• Simple and convenient transfer process and invoice creation.
Basic Features
Essential functions that users expect. The absence of these frustrates users, also the quality of implementation has less impact on satisfaction.
• Account Management: Balance display, transaction history, and settings management.
• Fund Transfers: Clear and intuitive money transfer screens.
• Security: Password protection, secure login.
• ATM Locator: Nearby ATM and bank branch locations.
• Secure login (e.g., biometric authentication, 2FA)
Excitement features
These features are not essential to the application and their presence can greatly improve the user experience
• Card Customization: Personalize card design for digital wallets.
• Unified Transaction History: Search transactions across all cards.
• Creating Transfer Templates for faster transactions.
• Deep customisation of the home screen and the information displayed.
• Loyalty program or cashback rewards, savings features
Negative parameters
Negative aspects are features or aspects of the application that impair the user experience
• Delayed Updates: Slow transaction history updates.
• Overloaded Services screen with a large number of unclear functions/lack of clear categorization
• Unclear, inconvenient and inconsistent design across different screens
• Bad Support service
Adaptive Theming
The biggest change in the visual design is the use of the Material Design 3 design conception when the colour scheme of the interface adapts to the user. However, in my opinion, it would be much more consistent if the design adapted to the content in the app.
This provides an additional level of personalisation of the banking application and allows you to distinguish cards even by the colour of the interface
Main & Card screens
Home Screen
The home screen is the first and most frequently visited screen by users. And honestly, I am disappointed with the implementation of this screen. Using various banking applications, I noticed that the potential of the home screen is not even half realised
The main screen of most applications looks like this: Account name and balance, 3-4 quick actions, and recent transactions.
There is no way to customise this place to your own needs
Home screen Key changes
Full quick action customization:
Users can customize the home screen for each card based on their preferences and needs. They can select which shortcuts to access for each card, with no limit on the number of shortcuts.Widgets on your home screen:
Widgets are a logical evolution of quick actions. It is also a response to the users' request to see different specific information. There are a variety of widgets for all needs. Users can customise their home screen precisely to their needs and wishes.Card style: (This feature is adapted from PrivatBank)
Users can choose card images for easy identification of their cards, and new card images will also be displayed in digital wallets.Card names:
Users can give additional names to their cards to help them distinguish between them.Balance info:
Users can turn on the advanced display of their own and credit funds. Or you can hide the account balance display on the home screen.
Card screen
The card page displays detailed information about the card: Owner, unhidden card number, and other detailed information about the card balance. Here you can also view the transaction history of this particular card, as well as usage statistics. Information about the payment of credit funds, if any, is also displayed here.
By pressing the settings button, you can change the card settings, its style, name, change the pin code, and block it.
Card screen Key changes
Appearance:
Change the appearance of the card and its name.Limits and money:
Users can change limits for online payments, cash withdrawals, and transfers to other cards. Also, here user can view all the templates saved for this card, as well as enable double conversion.Info & Security:
Here users can view detailed information, as well as security information, such as CVV2 code. Also here users can change the pin code, or block the card.
History & Services Screens
History Screen
The transaction history screen is arguably one of the most crucial components of a banking app. Therefore, ensuring its convenience is paramount. One of the key enhancements I introduced was displaying a general history of all cards. Here's what I've implemented:
Home screen Key changes
Full quick action customization:
Users can customize the home screen for each card based on their preferences and needs. They can select which shortcuts to access for each card, with no limit on the number of shortcuts.Widgets on your home screen:
Widgets are a logical evolution of quick actions. It is also a response to the users' request to see specific information. There are a variety of widgets for different needs. Users can customise their home screen precisely to their needs and wishes.Card style: (This feature is adapted from PrivatBank)
Users can choose card images for easy identification of their cards, and new card images will also be displayed in digital wallets.Card names:
Users can give additional names to their cards to help them distinguish between them.Balance info:
Users can turn on the advanced display of their own and credit funds. Or you can hide the account balance display on the home screen.
Search in History
Search filters:
A manual and simple filter selection menu can make a huge difference to the user experience. It's also important to allow the user to customize filters flexibly, but also to present them in a clear interface.Quick filters:
Quick filters also appear in the search, in this case, they offer to switch between card credits and payments.Search by amount:
Another basic feature is the search by amount, which makes it much easier to find the transaction user needs.
In addition, immediately after the search, the application allows the user to specify the search by expenses or income.
Services screen
The services screen is a page that the user will definitely visit at some point. It is very important to make this page convenient and easy to navigate.
By analysing several applications of large banks, I tried to identify the main flaws of service pages. And then create the most effective solution for building this screen.
General problems
Inconsistent
To my surprise, some bank apps had incredibly inconveniently arranged services.
For instance, the IKO banking app had two different pages for services: «My Products» which included a list of cards, insurance, Moneybox, investments, tickets, etc.
The «More» page contained other services, some of which were duplicated on the previous page.Overloaded interface
They also often use a conventional grid of icons, which seems simple, but is actually quite overloaded and difficult for our brain to scan.No search
The lack of search for functions or services is a very big mistake, and I was surprised to see this mistake in the applications of large banks.
Here are a few options I considered for the services screen.
Final decision
So, in the end, I decided to divide all the services into appropriate categories and present them as a regular list of items.
I also created two sub-lists: 1) a list with only the names of the groups, and 2) a list with the names and a short description.
Although the second option looks more informative, I believe that the additional description may be not useful enough but at the same time creates interface noise and distracts users.
The only way to determine the best option is to conduct A/B testing on a large sample of people. Unfortunately, I don't have a large enough sample of people to exclude the possibility of distortion of the results
Transfers
Transfers are one of the most frequently used functions of banking apps. The transfer process has long been perfected, with nothing more than the essentials.
There is no point in changing the process, firstly, it will confuse users, and secondly, as I said, the user flow that is used now is perfect.
However, I did change a few things:
The first is that I allowed users to choose the type of transfer right on the transfer screen. That is, now the user does not need to search for the desired type of transfer, he just needs to click the transfer button, and inside the transfer screen, the user can choose the type of transfer (by phone number, by account number, by card number.
The second change is templates. Users can save transfers to templates, so the next time they don't have to enter all the details again, they can simply select a template and adjust it if necessary.
Temlates
Templates are a feature I borrowed from a private bank app. However, after analysing this function, I realised that its implementation was not convenient enough.
The reason is that the application automatically saves all transactions to templates, and the user cannot choose whether to save a transaction to templates or not. This leads to the next problem, the templates list will be filled with a large number of one-time transactions since the app is saving them to templates as well, and users will have to look for the required template among tens of useless ones.
So my solution was to add a ‘Save to templates’ button to the screen that the user sees when the transaction is successful. Only by clicking this button will the user create a template.
I also added a question mark button so that the user can always read what templates are.
Finally, after creating the template, the user will receive a small message that the template has been saved and where it can be viewed.
Conclusion
In conclusion, the design of a mobile banking application goes beyond aesthetics; it is about creating a seamless, intuitive experience that meets both user needs and goals.
By focusing on user-centred design, thorough research and thoughtful implementation, I built a product that not only addresses essential needs but also delights users with innovative features.
This case study demonstrates how design choices, from the transfer process to personalization, contribute to overall user satisfaction and set the foundation for long-term success.
Thank you for your attention.