Is it possible to improve the customer experience of a financial app in just a few days? We continue our four-article series to guide you through 20 examples that demonstrate how you can skyrocket the customer experience of your financial product using the power of financial UX design.
Approximately 80% of customers use only 20% of all the functionality a financial app offers. It means that improving key user scenarios can offer a rapid, significant increase in overall user satisfaction. Moreover, this can be done in considerably less time using fewer financial resources.
What you need to do is identify scenarios that cause struggles and simplify them with the help of UX design.
To guide you through real-life examples, our UX architects extracted 20 of the most interesting UI banking app examples from our unique 200+ financial solutions database, which includes BFSI financial products from Europe and the US.
These 20 examples 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.
In our four-article series, we guide you through these 20 examples. After reading each of these 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. Make it easy to filter and search transactions
The transaction overview is one of the most popular user scenarios. The information about the transactions is very important for the customer because it provides an overview of where the money has gone.
Transactions that are easy to access and manage increase the trust level of the user in his/her financial app. That's why it's crucial to make this step simple to review and understand.
Image source: HSBC Mobile App, 2018 / Famacash Mobile App, 2019
In the example on the left, there is a transaction list that gives all the necessary information. But what can the user do with it and what insights can be gained?
By a quick look at the screen, there is no clear differentiation between the incoming and outgoing transactions. The user must study each of the transactions carefully to extract at least some insights.
The user also has no option to search the transactions by entering a keyword or using a filter. If there is a need to find a specific transaction, the customer has to scroll through the transaction list. Imagine what effort it would take if the transaction was made a year ago….
Solve it with financial UX
It's crucial to provide your users not only with self-evident facts like a long list of transactions but also valuable insights that this information can provide. After all, that's the main reason they have chosen your app.
Make the transaction list easy to review and manage. Let the user gain insights about incoming and outgoing transactions from just a quick glance at the transactions, using color accents. Also, visual grouping by day will help you quickly navigate.
Since we want to increase the user’s positive emotions, highlight the incoming amount very subtlely and keep the outgoing transactions in your current design style. Most often, incoming transactions are fewer in count compared to the outgoing, so you probably won't have a transaction list on which all transactions will be accented.
Provide your users with an ability to search specific transactions by a keyword or filter. We have all had a situation in which we are looking for a specific transaction; it is critical that this common scenario is easy to execute.
Make sure that you don't disappoint your users by providing a list of only the recent transactions. It's crucial that the customers can access the full history of transactions right from the financial app, without the need to visit the desktop version.
2. Ease the setup of recurring payments
In our intense everyday lives, every user is thankful for services and tools that help to ease their lives. When it comes to financial services and banking, a feature that often reduces the user’s anxiety is recurring payments, as it makes it easier to manage their monthly bills.
Unfortunately, in some cases, due to the feature being complex and not user-friendly, this can cause users additional problems instead of helping to solve them.
Image source: HSBC Mobile App, 2018 / Mobile Banking App design by UXDA, 2018
In the example on the left, it's a long and complex journey to even get to the recurring payment form.
Swedbank Mobile App, 2020
Moreover, the app redirects the user to the mobile responsive version out of the application. This creates fragmentation that breaks the experience, because the human brain perceives the whole process as a continuous flow. When a user is redirected, the flow is broken, which causes confusion. In this article you can read more about why it's so important to eliminate fragmentation and substitute it with flow.
When the user gets to the mobile responsive form, he/she has to go through several screens filled with information and long descriptions about the product. Why would the user need all of this information if they have already decided that they just want to quickly set up a recurring payment?
Instead of instant access to the recurring payment form, the user has to carefully study multiple colorful call-to-action (CTA) buttons, pictures and bullet points displayed on the screen, analyzing where they should click to reach their goal.
When the customer finally figures out where to set up the recurring payment, he/she is presented with a lengthy form that requires a lot of information. The form has many different elements that consume the user’s attention, such as inputs, dropdowns, radio buttons and CTA buttons.
There is also a progress bar at the top of the screen showing that the user is only on the first step. This also creates a feeling that the recurring payment setup is a long process.
Often, in a situation like this, the users decide to give up and come back to this later when they have more time. As we all are so busy, this often never happens.
This is a clear example of how easy it is to disappoint the customer when they look to a financial app to help, but it seems to make his/her life even harder instead.
Solve it with financial UX
If you offer any kind of functionality in your financial app, make sure that the user can access it quickly and easily. Provide an option to fill in all the details first and maintain the ability to read additional information after that.
Often, a user will choose the recurring option for a payment already made in the past. To avoid frustration, all the previous payment details should be easily accessible. For example, when the user starts to type in the beneficiary, the app finds corresponding payments that have previously been made using a smart search feature.
If the user fills in all the details from scratch, try to simplify the form. In the Revolut example on the right, we can see that the recurring payment set-up process is split into several logical steps. The user only has to pay attention to one action in each step, which makes the process easier since it doesn’t split his/her attention. It is also quicker and easier to navigate than a long form filled with many confusing fields to input.
Before the confirmation of the recurring payment, allow the user to review all the main details of the payment in one screen.
3. Don't make the Terms and Conditions look like the Chinese alphabet
Every bank has different Terms and Conditions for each of their products. We all know that, in most cases, people are not reading them properly due to lengthy, unreadable text. Taking that into account, the bank should provide an easy way to review the Terms and Conditions to avoid any misunderstanding between the bank and the user.
Usually, the Terms and Conditions contain a lot of information. If it is possible to reduce it to fewer words, that's where you should start. Unfortunately, often this is not the case as there are many products and regulations that have to be outlined. If this isn't possible, we can still ease the pain by making it much easier to read.
Image source: Cashplus Mobile App, 2018 / CR2 Mobile App, 2018
In the example on the left, the user sees a document filled with a ton of information that is not readable.
Comdirect Mobile App, 2018
First, the user needs to figure out a way to technically access this text. After a few tries, the customer usually figures out that it's possible to read all the information by zooming in on the screen. However, that seems like quite a bit of struggle that will make the user doubt the decision to read through it all. At this point, the customer will probably decide to leave this for later (most likely, never) when he/she has more time for it.
Solve it with financial UX
Provide your users with the ability to easily access information that is important for them. Avoid using third-party solutions, such as a PDF, to add Terms and Conditions to your app .
In the example on the right, you can see that the Terms and Conditions are integrated into the app. The user is able to see all of the text without any additional effort, and all that is required from him/her is to simply scroll down.
Another way to reduce the huge amount of information is to divide the content into categories. Usually, the Terms and Conditions are already split into logical categories. In this way, users are not overwhelmed by a large amount of text and can also go directly to the category that's relevant to them.
4. Don't mislead your users with incorrect button placement
By analyzing different financial services, we often see that the financial company isn't even aware of the scenarios that cause real headaches for their users.
The wrong use of design accents and CTA buttons is one example that usually goes unnoticed but tends to cause quite a lot of trouble, not only for the users but for the financial company as well since the number of support calls increase.
Here, we can see the painful user journey of making a payment when the placement of CTA buttons is counter-intuitive and leads to a lot of trouble.
The wrong CTA button can lead to harmful consequences for both the user and the financial company. When making a payment, the user focuses on the details of the payment (e.g., the beneficiary, amount, etc.) All the options on the screen in this process should be very intuitive, leading the user to his/her goal.
Image source: Comdirect Mobile App, 2018 / Saifu Mobile App, 2020
The example on the left shows a payment form that is already filled out. Users intuitively assume that the button that leads to the next phase of the payment process is located right under the payment form, and they expect it to be highlighted.
In this example, the highlighted button on the screen is “Delete order,” which will cancel all the fields that the user has already filled in. From the user experience perspective, this is illogical and can cause immense frustration.
In this case, the user is likely to automatically click on the highlighted button without any thought, thinking that this will logically take them to the next step of the payment. But, to their surprise, all carefully filled information on the payment form will be lost. We can just imagine the user's feelings and attitude toward the financial app in a situation like this because they have to restart the whole process, wasting their time and energy.
You can probably recall a similar situation in which you just pressed a button that seemed to have an obvious meaning but, instead, something totally different happened.
The worst part is that the button placement is so counter-intuitive that there's no guarantee that the user won't end up with the same result the next time! This is also likely to recur if the user doesn't make the payments very often and forgets that this screen needs extra attention.
People quickly scan the screens instead of carefully reading all of the information provided. Our perception is selective; otherwise, we couldn't process the mega amount of information that floods our brain every day.
In the example on the left, if we look really carefully, we notice that the “send” button is actually located in the right upper corner in a small font. To spot it, the user has to intentionally search for it.
From the UX perspective, this is not the right way to go, as it requires additional effort from the user, instead of providing an easy and intuitive solution.
Another thing in the example on the left that can confuse the user is that there are two very similar (probably the same) options─“Cancel” and “Delete order”. Once again, the user must stop for a while and think, If I don't want to make this payment, which button should I click?
This causes excess cognitive load as the user tries to discern the difference between these two options and the consequences each would have. That's why it's so important to reevaluate all the features provided and select only one option if they both have the same functionality.
These kinds of UX mishaps often drive the customers crazy, leading to lost time, energy and negative emotions. The good news is that it doesn't demand a lot of effort to change this scenario and rework it to be easily understandable for the user.
Solve it with financial UX
Don't mislead the users with confusing button placement. Place the button that leads to the next step intuitively, right after the payment form. Remember that the user fills in the payment form from the top down, and it's logical that, after the last input, he/she expects to find an easy way to move forward. Highlight the main button of the screen, and make it easy to find it as you can see in the example on the right.
Keep the secondary scenarios in mind, such as canceling the payment. Don't provide multiple options with the same meaning. In the example on the right, you can see that the primary option “Next” is emphasized, but there are two secondary options─ the ability to go back to the previous screen and the option to close the payment (with the “x” in the right upper corner).
This is an intuitive and common placement of the “exit” function, which, in this case, means “cancel the payment.” Here, it's very important to make sure that the user doesn't click the “close” button by accident. To avoid that, always provide the user with a confirmation message to make sure that he/she really wants to cancel the payment.
5. Ensure full functionality on every channel
Very often, financial apps exclude functionality that's accessible via the desktop version of online banking. In the digital age, it's critical that a customer can get everything done right from their mobile devices.
If something is still only available on the desktop version of your financial product, you should pay serious attention to this matter as it's a huge red flag when it comes to a great customer experience.
It can be a very big pain if the financial app doesn't offer the same functionality as the desktop version. An example is the option to review the account statement, which is often unavailable through the app. A few years ago, it was not a big problem. The customers were used to accessing this scenario from the desktop version, but times have changed in the digital age.
Account statements are often required as an official document to prove financial stability, for example, when a user applies for a Visa card or when a user wants to rent an apartment in another country.
As there are so many financial app alternatives on the market, users are becoming more demanding. That's why it's so important that the mobile application ensures the same functionality and convenience as the desktop version. This might require some deeper-level improvements, but there are steps you can take right now to improve this scenario.
Often, the users aren't able to access account statements through the app, which can result in much frustration. First, the user might waste a lot of time searching the app for this feature, only to find out that there's no such option. Or, the user might, in fact, find the option and make several more clicks to access the statement just to discover the unpleasant news that he/she has to visit the branch in order to get this done.
Image source: Sparkasse Mobile App, 2018 / Monese Mobile App, 2020
This can lead the users to very negative emotions like anger and frustration because they feel they were misled. The example on the left demonstrates it quite clearly. The user needs to take several steps to find this option, then some more clicks just to end up with an announcement that this request cannot be fulfilled, and they have to visit the branch to complete this task. You can only imagine what kind of emotions are going through the user’s mind.
Solve it with financial UX
To provide the best possible banking experience for your customers, implement an omnichannel strategy. Create an exceptional financial service experience connected across all digital banking ecosystems used by your customers.
Don't make your customers waste their time by exploring both the desktop version and the app in order to know which functionalities are available on each of the channels.
If your financial app already provides this option, guide users to the function that they are seeking. In this case, the account statement contains a transaction list, so we understand that, intuitively, the user will look for this option somewhere near the transactions. Provide users with the opportunity to do it with a few simple clicks.
First, the user can use filters to include only the needed information, then provide the customer with a statement preview, and, finally, let the user decide in what format he or she wants to export it according to their own preferences.
You can add additional value for your users by offering an option to send the statement right from the app via messaging, WhatsApp or email. Remember that users don't want an account statement; they probably just want to make sure that it will be received by the person who asked for it.
This is actually a great tip from the UX perspective - always try to explore the user's goal for any action on your financial app. In this way, you can get a lot of additional ideas on how to take the user experience to the next level by making it even more pleasant.
Financial UX checklist
This was the third part in the TOP Financial UX Dos and Don'ts series. Together with the first two articles, we have explored 15 user pain points your financial service can solve quickly and without huge effort. Stay tuned for the fourth and the last article in this series.
Meanwhile, please fill in 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.