back to latest articles

(Part 1) TOP 20 Financial UX Dos and Don'ts: Boost the Customer Experience Instantly

(Part 1) TOP 20 Financial UX Dos and Don'ts: Boost the Customer Experience Instantly

Is it possible to improve the customer experience of a financial app in just a few days? Many believe it requires a significant amount of time and financial investment. But that's not true. You can instantly increase the overall user satisfaction by easing their most common struggles. In fact, by reading this article, you can detect improvement points using the power of the financial UX design, thus achieving great results with little effort.

In the digital age, user experience is what differentiates successful businesses from failures. That's why it's so important to focus on making the most out of customer interactions with your financial app.

By using Pareto law, we can say that approximately 80% of customers use only 20% of all the functionality a financial app offers.

It means that improving key user scenarios can give you 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 those with the help of UX design.

This instantly boosts the overall experience of the digital financial product and awards you with customer loyalty.

The global crisis we are currently experiencing clearly demonstrates how important it is to adapt and create significant improvements in a short time without excessive resources.

For those businesses who weren't able to do that, this time turned out to be very cruel because customers in crisis are not ready to forgive shortcomings and wait patiently for their elimination. They need a perfect solution right away, or they will simply switch to another alternative that delivers to their expectations. The same rules apply to the digital age in which we all live.

Improving the 20% doesn't mean that we should ignore the other 80%. In the short term, focusing on the crucial 20% scenario allows you to achieve the sweet results you want very quickly. This motivates both you, as a financial service, to keep on working on the customer experience improvements on a deeper level, as well as your clients because they see that you care.

However, you should keep in mind that long-term, ongoing improvements in the customer experience are the key to keeping them satisfied and loyal to your financial service.

TOP financial app UX/UI struggles and how to rapidly fix them

In order to get to work on this, we have to identify what struggles the users face. But, rest easy, we have done the work for you.

Over the last five years, our team of UX architects has collected thousands of financial flow examples about the different kinds of struggles users face.

To guide you through real-life examples, our UX architects extracted 20 of the most interesting banking app UI examples from our unique 200+ financial solutions database, that includes BFSI financial products from Europe and the USA.

These 20 examples clearly demonstrate both 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 it into a pleasant experience in your own financial product design.

We will guide you through these 20 examples in our four-article series. 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 created a UX checklist that you can find at the end of this article.

1. Ensure a quick and smooth login

Customers can get extremely annoyed when they want to quickly check their balance or transfer money, but accessing the financial app is such a struggle that they give up and decide to come back later when they have more time. This certainly is not a way to bond with the customers. They might put up with it in the short term, but eventually users will probably switch to a financial app that provides a quick and smooth login.

From the UX perspective, it is critical that the login is effortless and allows simple access, while keeping security in mind.

From the user’s point of view, biometrics is the best and quickest way to log in, but, unfortunately, not all banks are able to provide this option. Nevertheless, it's possible to ease the login process by applying UX knowledge and a few simple UI features.

financial-ux-design-for-financial-app-login.png

Image source: Cashplus Mobile App, 2018 / Bank of Jordan Mobile App, 2019

Struggle

If you take a look at the example shown in the left graphic above, you can see quite a wide range of options. Some still believe this is the right way to win the users’ loyalty. But, the truth is too many options and features confuse the users, causing cognitive overload for the human brain. The user automatically analyzes all of the options available on the screen and seeks the one that will help to accomplish the goal. This takes quite a lot of effort, time and energy.

In the example on the left, the first thing that the user sees is the button “Credit card.” Is this really the main reason the user opened the financial app? For most users, the main goal at this stage is to access the app, so they are looking for information and functionality that allows that.

Another aspect that can confuse the user in this example is that there are two very similar options for new customers. The user has to choose whether to click on “Not registered” or “Apply for a Business Current Account/Personal Current Account.” The creators of this app probably didn't even imagine that this could actually confuse the users and make them ask, “which option should I choose?” “are those the same or different?” “what will happen if I click on one of them?” etc. That's why it is so important to make it absolutely clear and transparent for the customers to know exactly what to do depending on the specific scenario.

Solve it with financial UX

Don't make your users think; give them all the answers before they start to search for them. Too many options cause decision paralysis, and, in the end, nothing gets done.

The design should emphasize the main scenarios that have led the user to a specific screen. Ask yourself, why has the user arrived at this screen? What's the main goal? Ideally, one screen should answer one main question. If you take a look at the example on the right, the UX transformation UXDA accomplished for the Bank of Jordan, you can see the main goal on the screen itself, which is to log in to the service. So, the design emphasis must be on login input fields and the button that gets you there.

Take a look at your financial product through the eyes of the user. Is it easy to log in? Are the correct elements emphasized? What could confuse your users?

When you have defined the primary scenario on the screen, it's also important to pay attention to the secondary scenarios. For what other reason than to log in might the customer arrive at this screen? What struggles may arise for which the customer might need immediate help? Features addressing these questions should also be included on this screen.

Though it's important to ensure that the emphasis is still on the login, it is also critical that you provide your users simple access to support, as well as offering new customers the option to join the financial service. Think about the most important functionality for the user on this screen instead of all the possible options. For example, provide one option to access “Help/Support” instead of cluttering the screen with all the possible options to get help, such as phone numbers and a list of branches.

These simple steps can make a huge difference. You can easily review your current login screen and answer all the questions mentioned above.

financial-ux-design-for-mobile-banking-login-takeaway.jpg

2. Make navigation clear and intuitive

There are some financial apps that the users compare to a jungle. They have to break through a thick “forest” of dozens of functions to reach their destination. This is not a quick or pleasant journey to take.

One of the main goals of the user experience is to help your customers achieve their goals as quickly and effortlessly as possible. Here, it's important to evaluate whether your financial app might remind users of a jungle. If so, a careful UX audit and evaluation of all the functionality should take place.

Often, it turns out that the users actually only use one-third of all the functionality available. Removing the unnecessary functions transforms the service's experience into a much more pleasant one.

But, as we are talking about smart changes that can be done quickly and have a great impact, you should focus on at least guiding the users through the jungle with helpful navigation.

financial-ux-design-financial-app-navigation-markswebb.png

Image source:  Danske Bank Mobile App, 2018 / Buddy - Easy Budgeting Mobile App, 2020

Struggle

It can get very annoying for users when they can't find the needed information in just a few seconds. Often, the navigation of the financial app is so confusing that getting through it is like trying to solve a puzzle.

Don't overcomplicate the task; keep the main navigation menu easy to access and simple to understand.

In the example on the left, it looks like there has been a good intention to make the navigation stand out and excite the users. Unfortunately, the end result is difficult for the user to understand.

The navigation is reminiscent of a fortune wheel. From a UX perspective, it is wrong that the text is upside down and only readable if the user turns the wheel or the mobile device.

2-navigation-problems-2.gif

Danske Bank Mobile App Menu, 2018

As this is the first screen of the app, it should meet the user expectations and provide the main information the customer is looking for, at this point, being the balance. Also, the main design emphasis is put on the button inside the circle, which urges the user to log out of the app, though this is illogical as the customer has just logged in.

Solve it with financial UX

An effective UI design requires interesting design elements, but think twice if you are considering an atypical navigation solution. Let the user explore your financial app without any effort, resulting in more positive emotions and motivating the customer to use the app more often.

Make sure that your navigation is easy to access. At the same time, it shouldn't be intrusive. The users should feel that the main menu is always there to guide them without requiring a lot of their attention.

Also, make sure that the navigation menu titles are formatted correctly and are easy to understand. When the users read them, their mind automatically generates possible functionalities under those titles, so it's important that they meet the customer expectations.

financial-ux-design-for-mobile-banking-S-2.jpg

3. Don't bury the balance!

For many users, the most important purpose of a financial app is to check the balance. This allows them to feel in control of how much money they have left and make decisions about future spending.

Often, the balance needs to be accessed ASAP, such as while a user is waiting in line at a shop and wondering what they can afford. Nevertheless, there are many financial applications that have made this critical scenario unnecessarily difficult. Users aren't able to access their balance quickly, resulting in a lot of frustration and even anger.

Psychologically, it triggers uncertainty about how much money is available and concern about getting embarrassed at checkout when their card is denied.

Another common pain point for the users is that often the balance is not only hard to find but also confusing. The user needs to quickly find out how much money is available for spending. Unfortunately, many banks show the balance with the credit limit and reserved amount, which can make it really difficult to understand how much is available for spending and how much is the borrowed amount.

Struggle

The information that is most important and commonly used should be accessible in just seconds; the users expect to find their balance right after login.

financial-ux-design-for-financial-app-balance.png

Image source: Commerzbank Mobile App, 2018 / Unbank Mobile App, 2019

In the example on the left, we can see the first screen after the login. The user needs to select an account and press the call-to-action button “Konto auswählen" or "Choose an account". Only then will the balance be displayed. In this case, in which there is only one account, the steps of selecting the account and accepting this choice with the button are totally unnecessary.

3_Balance_problems_main_scenario_is_hidden.gif

Commerzbank Mobile App, 2018

Most users view their account balance every day, often multiple times a day. If gaining valuable and frequently used information takes effort and time through unnecessary clicks, it makes the whole app experience feel complicated and unpleasant.

Solve it with financial UX

Provide users with the most important information as quickly as possible. Don't hide the balance and make your users click through unnecessary screens to see it.

In the example on the right, you can see the first screen after login on which the user is able to see all the main information regarding the account. Often, this exact screen is the reason why users login to their bank at all. Make sure that the customers can find out how much money they have in an instant and also provide a simple overview of their recent transactions.

Other information displayed on this screen can vary according to the specifics of your financial product. Here, it's important to do thorough user research to find out the most important information that they need to access the quickest.

If your users have several accounts, be sure to show the balances of all those accounts on the dashboard. There is also an option to sum up all the balances and show a total amount, all based on the unique needs of your users.

Make a small audit of your financial app's first screen after login. Does it provide insights about the user's finances? Do the users immediately understand how much they can spend? Does it meet the user’s expectations about this crucial scenario and not make them frustrated by complicating the access?
financial-ux-design-for-mobile-banking-balance-takeaway.jpg

4. Make sure the money transfers are effortless

One of the most important functionalities in financial apps is the ability to transfer money. This is one of the key scenarios that determine whether the users will stick with your financial application or choose another one. That's why it's crucial to make it as simple and effortless as possible.

Users expect to execute these kinds of common scenarios in just a few seconds. They are definitely not going to be forgiving if it is complicated to make a payment and consumes a lot of their time and energy. The less time your users will have to think about it, the more thankful they will be to your financial service.

Struggle

Creating a payment is a task of high responsibility. When the user decides to make a payment, he or she already knows who the beneficiary will be and what amount of money they will send. These are the two most important elements that the user expects to see when they want to transfer money.

financial-ux-design-for-financial-app-M-7.png

Image source: BBVA Mobile App, 2018 / Saifu Mobile App, 2019

In the example on the left, there are 27 options provided under the section, “Select a transaction.” Moreover, most of these functions do not even match the title and apply to totally different categories of functionality like “block the card” or “edit limits.” This puts an extra cognitive load on the users. First, they get overwhelmed with all the information they see on the screen, and then they are required to sort through all the options to find the right one.

7_too_many_payment_options.gif

BBVA Mobile App, 2018

In this example, the first option is “Transfer.” It would seem universal as all kinds of payments could be considered Transfers, and the user could probably decide to choose this one. The second option is “International transfer,” and here starts the confusion. If the user really needs to make an international transfer, he or she could select the first option as well. Here, the customers start to wonder whether it’s valuable to read all the options on the screen because they already experienced disappointment in their own decision at the beginning. This takes quite a lot of time and effort while the user expected to make only a few clicks to accomplish the task.

Solve it with financial UX

Many different payment options demonstrate that a bank wants to provide a wide range of functionality to its users, believing it is doing their users a favor. But, instead of the value that banks intend to offer, the user gets very confused and impatient when presented with a list of too many options.

Don't just display all of the options on one screen as this causes confusion for the user. Think about the possibility of removing this step, ensuring simplicity.

Acknowledge all the payment options that your bank offers to the user and try to find common features. For example, both domestic and international payments require an account number or IBAN (depending on region). Why make the user have to decide whether it's a domestic payment or international? The user just wants to transfer the money, and it really doesn't matter to them what kind of payment this is.

How can you solve this? Ask the user to fill in the account number, and, based on that, provide the ability to fill in additional fields that are required based on the transfer type.

Also, if the current screen is dedicated to conducting the transactions, don't confuse your users with functionality that doesn't apply to their situation. For example, keep options like “Transfer” and “Edit limits” in separate categories. If the users navigate to the “Transfers” section, they are looking for transfers not editing limits or something else.

financial-ux-design-for-mobile-banking-S-7.jpg

5. Provide clear feedback after the payment

When making a payment, users have a feeling of responsibility and also a bit of anxiety about whether they will send the right amount to the right person. If everything goes as planned, the user is relieved. If, for some reason, it wasn't possible to make the payment, the user's anxiety rises. Here, the financial app should definitely reassure the user and guide them through any problem that might potentially arise.

Take a moment to think about the last step of the payment process that you provide to your users. Is it reassuring?

Struggle

The first thing the user expects to see after making a payment is approval from the financial app that it has been successful. That is the point when customers feel like they have achieved their goal.

financial-ux-design-for-financial-app-M-8.png

Image source: Comdirect Mobile App, 2018 / Banking Mobile App design by UXDA, 2019

In the example on the left, we can see that the payment confirmation is presented in the form of an alert. When a user sees it, the first thought that comes to mind is, what's wrong?!

To understand that this is actually great news and stop worrying, the user has to read through the information. As you can see in the example, the information in the alert contains incomprehensible numbers that are irrelevant to the user and offers no value. It doesn't demonstrate the exact purpose, so the user can't intuitively link it to the payment without careful reading.

However, this may not even be the biggest problem. Often, the users are busy, and they neglect to read all the text that appears. Instead, they scan the screen to try to find any clues as to what the message is about. If there is no easy way to perceive the message that the payment has been successful, then the user might think something went wrong and try to make the same payment again. This leads not only to frustration but also financial losses and troubles for both the user and the financial business.

Solve it with financial UX

Allow your users to relax after they have made a payment by providing straightforward feedback about the process and avoid making it look like an error. Whether or not the payment status is successful puts a design emphasis on it. Also, provide context for the feedback: display information about what exactly has been successful or unsuccessful by providing a short summary about the payment.

Try to think several steps ahead and provide your user with the options they will need in advance. If the payment processing has been successful, provide the user with the next possible move on this screen - either “go to the dashboard” or “make another payment.” This depends on your user research; it could be some other action that is important for your users once they have made the payment.

If the payment processing wasn't successful, provide more details about it. The user will always search for the reason why. Clear feedback about what went wrong relieves the user’s anxiety. Provide a clear action plan; otherwise, the user will look for your support team and ask for the information you could have provided right in the app.

financial-ux-design-for-mobile-banking-S-8.jpg

Financial UX checklist

This sums up the first five user pain points your financial service can solve quickly and without a huge effort. Stay tuned for the next articles in this series. Meanwhile, fill in this checklist to find out in what areas 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.

financial-ux-design-financial-app-do-dont-checklist-1.jpg

Share:

Listen to our podcast:

ABOUT THE AUTHOR

Alex
Alex, Founder/ CEO/ UX Strategist

Alex has dedicated half of his life to studying human psychology, as well as business success, developing 100+ digital projects and 30+ startups. He spent 10 years researching UX and finance to create UXDA's methodology. Alex is a passionate visionary who's capable of solving any challenge to improve the financial industry.

Inese
Inese, Senior UX Architect/ UX Consultant

Inese embodies a powerful fusion of two passions: finance and UX design. Her five-year long experience in trade finance, AML and wealth management provides her with exceptional expertise to always find the best solutions for the users regardless of the complexity of the core banking product.

Monika
Monika, Financial Inspiration Officer

Monika is our voice - able to reach the other side of the world with the power of inspiration. Her remarkable experience as a TV and radio personality in the leading media makes her the strongest communicator of UXDA's mission. Monika's biggest joy is to see thousands of people getting inspired by our ideas.

More from our blog

🎧 Banking Digital Transformation Fails Without User Experience Transformation

To ensure a successful digital transformation in banking, the primary focus should be switched from digital to experience transformation.

TOP10 Misconceptions about Financial UX Design (2020)

Thousands of digital financial services do not achieve their goals. This is partly due to the design or, specifically, to the financial UX design misconceptions.

Banking Future is in Digital Channels and UX Strategy, Not in Marketing

We need to remember that banking future depends on digital channels and UX strategy, not on marketing.