Can you improve the customer experience of your financial app in just a few days? In our four-article series, we guide you through 20 examples that demonstrate how it's possible to quickly improve the customer experience of your financial product using the power of financial UX design.
This is the final part of this series. Here's a list of all the previous parts, if you haven't read them yet:
- (Part 1) TOP 20 Financial UX Dos and Don'ts: Boost the Customer Experience Instantly
- (Part 2) TOP 20 Financial UX Dos and Don'ts: Boost the Customer Experience Instantly
- (Part 3) TOP 20 Financial UX Dos and Don'ts: Boost the Customer Experience Instantly
All of these parts combined cover the 20 examples that clearly demonstrate the dos and don'ts leading to a great financial customer experience. We have added a detailed description of each of these examples, so you can understand where the problem lies and what exact steps you need to take in order to simplify this pain and turn your financial product design into a pleasant experience for your users.
These 20 of the most interesting UI banking app examples were extracted from UXDA's unique 200+ financial solutions database, which includes BFSI financial products from Europe and the US.
After reading each of the four articles, you can check in with your financial app and evaluate what user experience improvements can be made. To make it even more convenient for you, we have included a UX checklist at the end of this article.
1. Help your customers increase their savings
Savings are an essential part of almost every person’s life. Many are saving for rainy days or their future, such as sending kids to college or buying a car or a house.
Some people are savers by nature, but most of us are not, which creates a pain point.
On one hand, it's important to have savings; however, human nature is more oriented toward instant gratification, which is why it's often so difficult to set money aside.
Here is where the financial products can offer an effortless way to help people save money easily, making it almost unnoticeable and eliminating any frustration.
Unfortunately, most retail banks don't do that. Instead, they offer their users the option to open a savings account or term deposit to which they can make payments from their current account. There's only one problem: the customer has to figure it all out and also execute it him/herself. It's not intuitive, easy or effortless. So, why would a person who is already struggling with his/her finances choose such a path?
In the meantime, challenger banks have gotten ahead of the traditional players by offering their customers convenient ways to save.
The Fintechs are changing people's perception of savings as something dreadful. They are making this feature fun and motivational, encouraging people to start saving with seemingly tiny amounts of money.
As we know, saving means dedicating a part of the user's income for some long-term goal, which is often accompanied by a dilemma─choosing between instant gratification and long-term benefits. A difficult decision, right?
Many banks promote the importance of savings, but, at the same, often this service is difficult for the users to set up and manage on their own.
The users have to be quite self-motivated to start saving and adding money to their savings accounts on a regular basis. They have to explore how a savings account works and what features it has.
It's also important to take into account that users have different needs depending on the amount available to them to start saving. Some want to deposit a large sum, while others are interested in saving up gradually by adding a small amount each month. Some banks offer only the deposit function without the ability to add money regularly or create a separate savings account for this purpose, which can cause struggle if the user intends to save small amounts at a time.
When it comes to savings and/or deposit accounts, even more problems arise, such as potential restrictions on the movement of money. For example, the users can't withdraw money immediately without a fee, or they might have to request a money withdrawal 7-10 days in advance in order to avoid a fee.
On the one hand, this could be good as it might motivate the customer not to spend his/her money. On the other hand, this can get quite unpleasant if the users know that they can't instantly access and control all of their money or have to pay an additional fee to do so.
Also, setting up a savings account is a feature that's often only available on the desktop version and not on the financial app. In the previous article of this series, we already covered why it's so important to have a multichannel strategy so as not to damage the customer experience.
All of the aforementioned factors might create quite a lot of difficulties. This is the reason why many customers choose the option to simply create another standard account and dedicate it to savings. We can see such a case in the example on the left. The only aspect that differentiates the current account from a savings account is its name.
Image source: Luminor Mobile App, 2020 / Revolut Mobile App, 2020
In this case, first the user needs to go through the process of opening a new account (let's keep in mind that the process is still not simple and quick in many banks) and transfer money to this account. Secondly, the priorities might change in the user’s life, and there may no longer be a need for the additional current account to save money. What happens then? The users don't use this account anymore and aren't even aware that if the account is not used for a longer period of time, the bank applies a fee for the inactive account administration.
How are the users informed about that? Sadly, they usually aren’t. It can be a very unpleasant surprise to suddenly be charged by the bank, which results in negative feelings toward their financial institution.
To avoid such disappointing situations, think about how easy it is to close the account in your financial application. And, how many inactive accounts do you have? Inform users about the applicable fee and provide guidelines about any potential actions with the account. The users will feel cared for and supported and appreciate this kind of support from their financial institution.
Solve it with financial UX
Have you followed up on how regularly your users add money to their savings accounts?
Can they easily find this option in the application? These are some of the questions you should ask yourself to discover the pattern of how your customers are using the saving option on your financial product.
Knowing that most humans, in general, are not good at saving their money, how can you remind them about savings? And, even more, how can you encourage and motivate your users to start saving?
Your financial app has the power to provide your customers with a feeling of satisfaction in managing their money. Use it, and the customers will reward you with loyalty.
Just imagine the feelings of your users when, thanks to the help of your financial app, they have saved money to fulfill their dreams: buy a family house or afford a great university for their children. They will experience pride and happiness with your application in hand. This is how financial services can improve people's lives.
Provide the ability to create a savings account quickly and easily for different savings goals. On the Revolut app, for instance, users can create a savings vault with only a few clicks. The customer has to state the name of the goal, and then the app guides him/her through the features related to the vault.
Think about the reason why customers use the product. Are they interested in depositing a large sum instantly, or is it important for them to set aside smaller amounts regularly? There should be an ability to add money to the savings account if that's the main reason why the customer is creating it.
As you can see in the example on the right, the Revolut app offers regular transfers with a fixed amount and frequency from the current account, as well as an option to save the spare change from each credit card purchase.
Revolut Mobile App, 2020
From a UX perspective, saving money using the spare change option is a good strategy for those users who have difficulties saving. It might be painful to consciously set aside some part of their monthly income, but, by using spare change, it becomes almost unnoticeable. By using the option to accelerate the difference two, three, five, times, the savings amount increases exponentially. The users get a pleasant surprise after they see that these small amounts combined actually move them closer to their goals much quicker than they had hoped.
Locating the savings account separately from the current accounts list makes it easy to find and manage. Make it intuitive to add or withdraw money from the savings account as these are the main actions in this scenario. In the example on the right, you can see that the Revolut app offers actions related to the savings in the view screen, such as fund, withdraw and enable/disable regular transfers.
If the savings account is displayed together with the current accounts, make sure you differentiate the two accounts by using visual elements to demonstrate the purpose of the account.
Another motivational element is the progress bar that displays how close the user is to reaching his/her goal. This provides a quick insight about how quickly the user is moving toward the goal and creates an additional motivation to reach it.
From the UX perspective, it's always a good idea to add emotions and personalization to the financial products. In the Revolut example, there's an opportunity for the user to add a picture of their choice to the vault.
The visual aspect is very important as it stimulates the user's imagination of already having the goal achieved. This increases their motivation to make their dreams come true, turning the process of saving into something exciting.
2. Provide the option to view and copy account details
Viewing and copying the account details is a common pain point for users. There are often situations in which we need to quickly provide our details to receive a payment, or we need the details for a contract or an invoice. But, to the surprise of many users, the option to view the details often isn't available, not even talking about the possibility to copy it.
The first struggle arises already when a user tries to find the account number. In some cases, this results in a huge disappointment because, after a period of intense searches, the customer discovers that there's no such option. In a slightly better scenario, the user would finally find it but end up disappointed anyway, as there's no ability to copy the details.
Just think about how this scenario looks like: the user has his/her phone in one hand and a paper and pen in the other to manually write down the numbers and then type them in wherever they are needed. This really doesn't reflect the era of social media and digitization, right?
Even worse, if the account details aren't available on the app, OR if those are hidden like a very precious gem and impossible to find, the user will have to turn on his PC and login to the desktop version to access the necessary information. Just think about how many inconveniences this causes for the customer and how much unnecessary effort and time is dedicated to finding such basic information.
Image source: Luminor Mobile App, 2020 / Bank of Jordan Mobile App, 2019
In the example on the left, there is no ability to view or copy the account number. In some cases, it gets even worse if there's no option to name an account. Then the user has to distinguish his accounts only by their balances or by remembering the account number, which is definitely not a user-friendly solution!
Solve it with financial UX
Provide your users with the essential information about the products they own. Account numbers and bank details should be visible to the user so he/she is able to navigate the account freely and easily.
If the user has multiple accounts, in addition to displaying the account number, the users should have an option to name each of the accounts. This makes it much easier to quickly distinguish them.
In the example on the right, under the information about the account, there's a “share” button next to the user's account and IBAN number. By clicking on that button, the customer can easily copy the account details and share them via multiple channels. Here, the financial app has considered the “job” for which the users have “hired” this option. If the customer seeks the account details, then most probably he/she wants to share them with someone. This creates positive emotions to the users as they can quickly and easily send the account details through Airdrop, messages or social media.
3. Make it clear how to review the scheduled payments
One of the pain points that the customers often cite is that they feel anxious about all of the regular payments they have to make every month. As there are many utility bills received through different channels, as well as other regular payments, they worry that they might accidentally miss some of these or are afraid that something could go wrong, and the scheduled payment wouldn't go through. This anxiety is normal, as a delayed regular payment can result in a fine or, in the worst case scenario, lead to the heat, electricity or phone being disconnected.
To feel in control and gain a sense of calmness, the user wants to know that everything is in order: the payments are scheduled, and it's easy to review which ones are already safely paid and which ones are in the queue for payment.
By providing such an option, the financial service offers the users a feeling of relief and satisfaction that it's all taken care of, and the customer doesn't have to worry about it.
Unfortunately, many banks offer the option to review the scheduled payments, but it’s only available on the desktop version. As we know, having all functionality easily accessible from the mobile device is crucial to ensure a great user experience, especially in a scenario that has so many emotions attached to it.
Another problem that arises is, even if the financial app provides a list of scheduled payments, it is often not intuitive and is difficult to read and understand, providing little value to the customer.
It can cause a lot of negative emotions if the customers can't review their scheduled payments quickly.
Image source: On Stride Financial Mobile App, 2017 / Klarna Mobile App, 2020
As you can see in the example on the left, there is a list of scheduled payments, but the users need to click on each payment to get information about the recipient. This is a time-consuming and annoying process, especially if the users have many payments on the list. Don't hide essential information like the recipient's name; show it instantly and eliminate unnecessary steps to find it.
Also, don't confuse your users with information that's totally unnecessary for them. In the example above, all of the payments are named “Contractual Payments,” which doesn't provide any value to the user whatsoever. Instead, the name of the recipient would provide instant insight. In this case, it's good that the financial app at least displays the date of when the scheduled payment would be sent out.
Solve it with financial UX
Help your users save time by clearly displaying the most important information about scheduled payments: name of recipient, amount and date when the payment will be made.
In the example on the right, a correct structure of the information allows the user to quickly scan the list for the most important information. The recipient’s name is accompanied by their logo, which makes it even easier to distinguish between the recipients and also makes the list more visually appealing.
Think about prioritizing the information. For example, emphasize the payments that are about to be paid shortly. Also, provide the ability to pay instantly, before the payment date. The users should have more flexibility in payment planning and gain control over their financial situation without being tied to a specific date.
Provide the user with an easy overview of both the payments that have already been made and the scheduled ones, like Klarna has done in their financial app. Show the most recent payments and provide the option to view the full list. This is a great way to display the most essential information and not clutter up the screen, at the same time providing easy access to the full list, whenever the user needs it.
4. Create a convenient budgeting and spending feature
Amid the growing number of different budgeting apps, more and more banks are starting to create their own budgeting features. This is a wonderful plan as it can really provide value and improve the customers' overall financial health. Sadly, however, often this great intent lacks a proper realization from the UX perspective and, as a result, the customers tend to avoid it.
The customer will choose to use the budgeting feature if it won't take much time and effort to enter all of the data, and if they feel that the insights gained are beneficial. After all, the main goal of this feature is to help ease the users’ lives.
Accurate budgeting and spending analytics is the bank's responsibility. If the insights prove to be inaccurate, the customer might very quickly lose trust in the financial institution. Even worse, getting the wrong overview of the customer's financial situation might lead to harsh consequences, such as overspending on fun and entertainment and coming short on utility bills.
Image source: Weekly Budget Mobile App, 2020 / Mint Mobile App, 2020
In the example on the left, the user is provided with an option to review all of their expenditures by week, even if the month has started in the middle of the week. There's no ability to view the spent money in another time period, for example, the total per month. Also, there is no option to review total spending amounts in the current month.
If you provide users the ability to review their expenditures, think about what kind of insights could be valuable for them. In the given example, there is only the total amount of weekly expenditures displayed, which gives the user no valuable information to understand, analyze and learn from the financial situation.
Another painful aspect of many budgeting services is that the customer has to enter all of his/her expenses manually. The app doesn't calculate the user’s spendings, so he/she must go through all the spendings by him/herself.
In the example on the left, the table displayed on the screen is difficult to perceive and read. There is no visual representation of the overall situation. The customer must put in a lot of effort to analyze the data and extract any insights by him/herself.
Solve it with financial UX
If you provide your users with a budgeting and spending analysis option, make sure that it really helps to improve their financial life rather than causing additional work and stress, which is sure to lead to harmful decisions. Digital products are tools that are supposed to ease people's lives, not complicate them.
In the example on the right, we can see that the Mint financial app provides several options for how the user can track their budget. First, the user can set the amount that he/she prefers to spend in a specific category during the current month. Users can also see a progress bar that provides immediate insights into how close the users are to reaching their goals. For progress bars, color coding is typically used so the user can get a sense of the overall situation by color. For instance, red usually indicates that the user is very close to overspending the maximum amount of money that was planned for a specific category.
For each category, the user sees the spent amount and the amount that is still left. Here, many inconvenient budgeting features provide only information about the budget goal amount. Think about the main goal of the user who has opened this budgeting screen. It is important for a customer to understand how much money is available for spending in a specific category. If the financial app provides only the total goal amount, the user must put in additional effort to calculate the budget that is left.
Another feature that the Mint financial app offers is automatic categorization of all expenditures. Therefore, the user gets information not only about the progress toward monthly budget goals, but also has an understanding of how the money has been spent.
Here, it's important to view this contextually; the users should have the ability to edit a specific transaction category. For example, if the user buys bottled water at a gas station, the app will probably automatically place this transaction into the category “Auto/Transport” or “Gas/Fuel”. This increases the accuracy and trustworthiness of the budgeting feature.
Many financial apps display spending categories separately from budgeting goals. This is not bad practice, but, if you think from the user’s perspective, then often much more insights could be gained if these two features were combined. Remember that every function of your financial app should meet the user’s expectations and goals according to the specific scenario.
If you provide budgeting and spending options to your users, update your customers about their progress. If the user is close to overspending, send a notification about that so they will be prepared. Inform about possible upcoming financial issues before they occur. The users will feel that their financial health is important not only to them, but also to the bank that they use. As a result, the user will see that it is not just a financial application, but a financial health advisor and companion.
5. Make it easy to apply to products
In the digital world in which we live, the user requires that everything happens immediately, on the go without any additional effort. This is a precondition for creating a delightful financial UX.
If such a scenario applied to banking products can be executed only through the bank's desktop version or, even worse, only by physically going to the banking branch, it wouldn't be accurate for the financial institution to refer to themselves as “user centered.”
There's a single question you can ask yourself right away to find out whether your financial company meets the requirements of the customer expectations in the digital age. Does your financial institution offer the ability to apply for products right from the app?
Every bank wants their customers to use as many banking products as possible so the customer can feel the full banking experience. But, have you ever thought about the way you provide this opportunity to your customers? Many banks still do not offer the ability to utilize products right from their apps, or, if they do, there are limited products available or the application process is so complicated that the user decides not to go through with it.
If the app doesn't offer a list of products that the user can apply for, then, in most cases, the only option for the user is to contact the bank. And, as we have already mentioned in the previous articles of this series, not all banks offer a convenient way to reach them and get support for any questions.
Some banks provide message templates in their apps to apply for the product. On the one hand, the bank tries to ease the application for new products, but, on the other hand, if this process is too complicated, the user won't proceed with it anyway. Besides, there are still quite a few banks that don't provide the opportunity to utilize these features right from the app at all.
Image source: BlueOrange Mobile App, 2020 / Bank of Jordan Mobile App, 2019
Another struggle is that often there is no information about the full list of available banking products. Since the most popular channel nowadays is mobile, then the customers can't even have an overview of all the product types the bank offers. For example, a family might think that it would be convenient to get a payment card for their children. As they can't find this option in the app, it might seem that the bank doesn't offer this type of service, while, in fact, the bank might offer this option, but only in the desktop version or only at the branch.
The difficulty of signing up for the products decreases the chances of people actually choosing them. If the bank stepped forward and made the process quick and simple for the customer, or even created a personalized offer, the chances of people choosing the bank's products could increase significantly.
Solve it with financial UX
Give the customer the ability to experience the full range of banking products. Try to provide more information about each product so that the user can be sure which one to choose and then guide them through the journey to get it.
In the example on the right, you can see that the user not only has the ability to apply for the product, but also has answers to the most common user questions about the product. By providing such information, you significantly increase the possibility that the user will apply for the product.
If you offer a form to fill out to apply for the products, make sure that users don't have to duplicate personal information. For example, don't make the users fill in data such as name and birth date if the banking app already has this information and can display it automatically.
If the option of applying for products can't be easily added to your app, or it is required to visit the branch, you can still give your clients clues on how to do that from the app.
Provide your users with insightful information about your products, so that the customers can already evaluate which product is right for them and prepare the needed data and documents to accelerate the process.
Make sure the bank's contact information with phone number and branch locations, as well as their working hours, is easy to find, so that the user can contact support with any additional questions regarding the product or book an appointment at the branch.
Financial UX checklist
This was the fourth and final part in the TOP Financial UX Dos and Don'ts series. In these 4 articles, we have identified 20 user pain points your financial service can solve quickly and without huge effort.
Please fill out this checklist to find out the areas in which you could improve the UX of your financial service. For your convenience, it's also available in PDF format to print out and share with your colleagues.