back to latest articles

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design

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

In the digital age, customer 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 banking customer experience are the key to keeping customers satisfied and loyal to your financial service.

Fintech UX / UI guide on TOP 20 tips for mobile banking solutions design

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 mobile banking solutions UI / UX examples from our unique 200+ financial solutions database, that includes BFSI financial products from Europe and the USA.

These 20 Fintech UX / UI tips clearly demonstrate both the dos and don'ts leading to a great banking user 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.

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Smooth login

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 Fintech design

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 design in finance 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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Intuitive navigation

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 Fintech design

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Clear balance

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 Fintech design

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Effortless transfers

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 Fintech design

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Clear feedback

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 Fintech design

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

#1 Checklist for user experience in mobile banking solutions design

This sums up the first five user pain points your financial service can solve quickly and without a huge effort. 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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Checklist 1


6. Security first: make it quick to block the card

Most users spend their money using payment cards, so all operations regarding cards should be easily accessible through every channel. This is especially true when it comes to nerve-wracking security situations in which immediate action is required, such as losing a card or getting robbed.

Struggle

More and more banks allow users to manage their payment cards from the financial app. Here, it's crucial that the scenarios with a huge impact are accessible in an easy way. The card allows direct access to the user's hard-earned money. So, for the customers, it's very important that they are able to manage the security settings.

Imagine the user’s feelings and reactions if the card is stolen. First of all, the user is very anxious about his or her finances: what if somebody accesses their account? What if somebody withdraws all the cash they have? What if somebody makes fake reservations using their card?

In these kinds of cases, the users should have the ability to immediately block the card. Card theft is a very stressful experience, so card blocking should be quick and immediate and not require any additional thinking, since it’s hard to be rational when you’re in an emotional state.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Card block

Image source: Sparkasse Mobile App, 2018 / Mobile App design by UXDA, 2018

In the example on the left, we can see that the bank offers the functionality to lock the card. But, when a user actually wants to accomplish this goal, he or she finds out that it is necessary to call the bank to do that.

We can only imagine the stress this causes the user when he or she was hoping to block the card quickly from the app but now has to wait in order to be connected to the bank through a call.

Solve it with Fintech design

Give the user the ability to manage his or her card freely. If the user can’t block the card quickly, it can have a big impact on the user’s life. Think about how else you can support your user in this unpleasant situation. In the example on the right, we can see that the bank provides the opportunity to choose the reason for blocking. This can be insightful for your financial business to understand how else you can help the customer. For example, if there have been fraudulent transactions, you can ask your user to identify them after the card blocking to facilitate the investigation.

Provide users with the ability to control their credit card settings since it will give the users a powerful sense of being in control of their own finances. Be the ally who supports the users in stressful situations and helps them to regain a sense of peace about their finances.

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

7. Don't overload the dashboard

Our everyday lives are more saturated with information than ever before. On the one hand, this provides us with a wide range of opportunities. On the other hand, navigating oneself in the midst of such information overload can be exhausting and overwhelming. That's why simple and easy to understand financial services are in great demand.

People expect that the digital tools they use will ease their lives and reduce their daily stress and anxiety, not increase it.

If your financial app takes too much effort to understand, the users will reject it and choose a simpler alternative. Nobody wants to waste their time on trying to figure out and analyze complicated information.

The dashboard is the screen most often used, so it is crucial that the user can easily overview the most important information in one glance. Users expect to easily access the summary of their finances, such as available account balance, list of latest transactions, upcoming payments, the performance of savings or investments and debt amount. They also need access to urgent information that the user needs to act upon, such as bills that are due, money requests, automated payments that don’t go through or important announcements from the bank.

Struggle

The main purpose of the dashboard is to quickly check in with the users’ overall financial situation to make sure that everything is under control. Unfortunately, often when users arrive at the dashboard, they are forced to take unnecessary steps to get the information they need.

Typically, the reason for this is that banks want to impress their users with the number of features, options, and products they have, but, in this case, it does the opposite, creating a bad first impression and ensuing frustration. Due to information overload, it's difficult for the user to find the most important information, which results in stress and anger.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Simple dashboard

Image source: My Expenses Mobile App, 2020 / Monzo Bank Mobile App, 2020

In the example on the left, the financial app dashboard is overloaded with information. In a single screen, the user has access to their balance, all the transactions for the last two weeks and some calculations that don’t include any helpful explanation. The user automatically starts to process all of this in his or her mind and seeks to identify and sort out the information he or she is seeking.

In this example, there is no straightforward information about what is happening with the user’s financial situation and no focus on the main element that the user is looking for─their balance. Consequently, the user then needs to find the balance on the screen and analyze all the accessible information to get a sense of the overall situation. This is energy and time-consuming and not something the user would enjoy in light of their fast-paced routine.

Solve it with Fintech design

The urgency to log in to the banking application depends on the situation and the environment. It can be done at home, on public transportation, on the street or in the shop. That's why it's crucial to provide users with the most important information ASAP, right after login.

In the example on the right, you can see that the account balance and the latest transactions are easy to overview without any effort.

This provides the user with a sense of control and eases his or her mind because they can simply review the incoming and outgoing money flow.

Think about contextual insights that could help your users. In the example on the right, you can see that, under the main balance, there is an amount colored in green, as well as the day’s count. This is a sum that the Monzo app calculates by looking at how much of the user's monthly cash is left compared to the number of days remaining in the month. This helps the users keep track of how much they could spend today and still stay on track for the rest of the month.

When it comes to dashboard insights, another great feature is the “Safe-To-Spend” option featured in the Simple app.

screenshot-2020-06-16-at-121102.png

Simple Banking Mobile App, 2020

It can be a real struggle for users to follow up on all the bills and regular payments because they receive them through different channels like e-mail, as well as directly through the bank or biller's system. The due dates also differ. Safe-To-Spend solves this by providing clear insights of how much money will be left after paying all the bills and regular savings each month. This is exactly what customers try to figure out themselves, delivered by the financial app in a clear and easy way. This is a great example of creating a pleasant banking experience from the user's perspective.

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

8. Put yourself on a map and let customers find you

We are moving toward a cashless economy. More and more customers are choosing to pay using a credit card or other technological advancements like Apple Pay because it's simple and quick, and they don't have to worry about carrying wallets stuffed with cash.

Nevertheless, there are still situations in which cash is needed. As banks are trying to reduce the workload of the branches, ATMs can help with that. Users can not only withdraw and deposit cash but also pay the bills or even apply for bank products. As users are often busy and on the go, it's crucial to offer a quick and convenient way for them to reach the nearest ATM right from their location.

Struggle

Unfortunately, many banks still don't provide an option to find ATMs and branches on the financial app. Or, even if the functionality is available, it is not working properly.

It seems ironic to expect the users to call the bank or search its homepage to quickly locate the nearest ATM or branch.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Map

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

In the example on the left, we can see that, to get information about the nearest ATMs, the user has to chat with a chatbot that eventually provides an answer such as “There are no options within 10 km.” The user has spent his time chatting just to get information with no value. Does this solve the user’s request? Most likely no, because the need for an ATM still remains.

This example quite clearly demonstrates how the innovative chat functionality itself is integrated into the financial app, but, at the same time, it does not meet the user’s needs. This same case can be applied to a lot of other functions in many financial applications. This is inefficient, it wastes the user's time and, in the end, doesn't move the customer any closer to his or her goal.

Solve it with Fintech design

Make sure that the user can access the location of your ATM or a bank branch as quickly as possible. That will reduce the workload on your branch and/or call center.

When the user is seeking the nearest location of something, first he or she will need to identify their current location. After that, the mind will start filtering the information about locations in your app and decide which one is the most convenient. To make it effortless and intuitive, provide the user with a map that conveniently displays all locations of your branches and ATMs.

Often a long list of street names does not prove to be helpful, especially if the user is out of town or abroad and isn’t familiar with the region.

For people, it's much easier for the brain to perceive visual objects than text. When it comes to actual navigation, this is especially important.

Also add up-to-date ATM/branch details so the user won't find themselves in a situation in which he or she finds an ATM but there is no ability to cash in or the ATM is available only during specific hours, for example.

For the user, it is important to know the details about the specific ATM/branch, including the name, address, operational features, working hours (especially during holidays), and other information that's relevant for your users.

Accessing the bank in an easy way via any channel instills trust in your financial company. As we know, trustworthiness is crucial when it comes to the financial sector. Make sure to provide your clients with reasons to trust you, even in the smallest details.

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

9. Be there for your users with accessible support

Often, financial companies hide their contact information or provide just a single contact option in order to avoid incoming message overload. If only a phone number is provided, often the user isn't able to send any attachments like screenshots, or he's not able to talk at that moment and would prefer chatting. Moreover, often the phone operators are so busy that the user has to wait quite a while to reach support. All of this results in a combination of negative emotions and feelings toward the financial service.

Even if you create the most user-friendly app, there still needs to be an option to contact the financial service. Providing quick and easy access to a live person at the other end definitely increases reliability and a feeling of reassurance that the user will know that he or she will always be able to contact the bank almost immediately whenever a problem arises.

Struggle

Almost anyone can remember a situation in which there was no way to contact the financial company. This gets nerve-wracking as people have entrusted the financial service with their money, and it's impossible to reach them when in need.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Support

Image source: Sbanken Mobile App, 2018 // Saifu Mobile App, 2020

In the example on the left, we can see that there is a chat option provided to the user. Overall, this might be a convenient way to quickly solve a problem that is not complex.

14-chat-with-a-bank-1.gif

Sbanken Mobile App, 2018

In the example, we see that a user has written his message in the chat, but, instead of being connected to an operator, he's placed in the queue. This might not be anything unusual as there are often quite long queues to contact the bank either by phone or through the app, but, if we look at it from the user perspective, this struggle damages the overall experience quite badly.

In this case, as with a phone chat, the app notes that there are already 6 people waiting in the queue. It's good to know how many people are in front of the user, but it's difficult to calculate the approximate time it would take to move up to the first place and get to chat with the support person.

It would be helpful if the app calculated an approximate waiting time. If the problem is urgent, most likely the user will look for their phone number and call the bank.

As a result, chat functionality is not valuable in many important and critical user situations, for example, to block the card (if this function is not available for the users themselves).

There are many financial institutions that believe they can call themselves digitalized and user-friendly simply because they offer a modern-looking app design.

Customer support plays a very big role in the overall experience. In situations like this, in which it’s almost impossible for the user to find the contact and then has to wait a long time to be served, frustrations ensue and damage the user experience.

We should also pay attention to the confusing design of this screen. When the user starts the chat, it opens an additional window in the app and changes the location on the screen when the user starts to type. Also, the chat window is so small that the user can only view part of the message and needs to keep scrolling.

Solve it with Fintech design

In the example on the right, the mobile banking app is immediately generating a message to find out the topic of the conversation. If you know the most common questions the users ask, you can offer them the appropriate option to select. That will make it faster for the support specialist to understand what they will be discussing.

If your bank is mid-sized or large, you may not be able to provide an opportunity for the support specialist to join the chat immediately. In that case, offer an understanding of the status of the user’s message, such as whether it has been received or seen. Secondly, let them know the approximate time it will take to get an answer.

It is also important that, as in the example on the right, there is a friendly message, greeting the user by name, that gives personalized communication and a friendly attitude.

The user will have the feeling that the bank cares about their financial situation, and they can trust that the bank will always be there to help him.

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

10. Make it easy to view and copy credit card details

In the digital age, people make online purchases almost every day. To execute this common scenario, the user usually needs to enter the payment card details every time. The bank card number consists of 16 digits, which is typically not an easy combination to memorize. Add to that the expiration date and CVC code. If a user has to get up from his or her comfortable sofa to look for his wallet with the credit card information every time they want to buy something online, it can get quite annoying.

Users typically have mobile phones by their sides 24/7, so this information should be easily looked up in the financial app with no need to retrieve a physical card.

Struggle

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Copy details

Image source: Swedbank Mobile App, 2020 // Revolut Mobile App, 2020

In the example on the left, we can see that there is no option for the user to view the bank card details, such as full card number and CVC code. Every time a user makes an online payment and applies for online subscriptions, he or she has to find the physical bank card. The users have stated that they definitely expect their financial app to offer such an option to avoid this time-consuming and frustrating task.

Even if the bank allows you to view the card details, there might be no option to copy them. If the user is making a purchase on their mobile device, there could be a situation in which the user must switch between apps to fill in all the card details. This results in a manual task that is inconvenient and very annoying, especially in an age in which everything is automated.

Solve it with Fintech design

In the example on the right, the user is able to view the full card details, including card number and CVC, so there is no need to look for a physical card. Also, the app provides an opportunity to copy the card number, so the user can paste it in whenever needed.

The Revolut app has also considered security as all of this private information is available only on request and after the user is identified.

Offer your users the most convenient way to use their payment cards. It seems to be a trivial detail, but the users will feel that the bank cares about them, which results in large rewards for the bank.

financial-ux-design-for-mobile-banking-card-details-S.jpg

#2 Checklist for user experience in mobile banking solutions design

This sums up the next user pain points your financial service can solve quickly and without huge effort. 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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Checklist 2

11. 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.

Struggle

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Search transactions

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 Fintech design

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.

Takeaway - Fintech Design Tips: How to Improve Mobile Banking Solution 1

12. 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.

Struggle

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Recurring payments

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.

19-recurring-payments-1.gif

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 digital banking customer 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 Fintech design

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.

Takeaway - Fintech Design Tips: How to Improve Mobile Banking Solution 2

13. 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.

Struggle

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Terms and conditions

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.

11_Impossible_to_read_Terms_and_conditions.gif

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 Fintech design

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.

Takeaway - Fintech Design Tips: How to Improve Mobile Banking Solution 3

14. 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.

Struggle

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Button placement

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 banking CX 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 banking CX 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 Fintech design

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.

Takeaway Fintech Design Tips: How to Improve Mobile Banking Solution 4

15. 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 digital customer experience in banking.

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.

Struggle

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Full functionality

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 Fintech design

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 digital banking CX 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 banking CX to the next level by making it even more pleasant.

Quote - Fintech Design Tips: How to Improve Mobile Banking Solutions

#3 Checklist for user experience in mobile banking solutions design

So far, we have explored 15 user pain points your financial service can solve quickly and without huge effort. 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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Checklist 3

16. 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.

Struggle

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Savings

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 Fintech design

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.

vault-1.gif

Revolut Mobile App, 2020

From a banking CX 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 digital banking customer experience 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.

financial-ux-design-mobile-banking-savings-1.jpg

17. 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.

Struggle

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Account details

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 Fintech design

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.

financial-ux-design-mobile-banking-account-details-2.jpg

18. 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.

Struggle

It can cause a lot of negative emotions if the customers can't review their scheduled payments quickly.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Scheduled payments

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 Fintech design

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.

financial-ux-design-mobile-banking-scheduled-payments-3.jpg

19. 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 banking CX perspective and, as a result, the customers tend to avoid it.

Struggle

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Budgeting

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 Fintech design

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.

financial-ux-design-mobile-banking-budgeting-4.jpg

20. 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 banking CX.

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?

Struggle

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.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Apply to products

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 Fintech design

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-design-mobile-banking-products-5.jpg

#4 Checklist for user experience in mobile banking solutions design

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 banking UX of your digital service. For your convenience, it's also available in PDF format to print out and share with your colleagues.

Fintech UX / UI Guide: TOP 20 Tips to Improve Mobile Banking Solutions Design - Checklist 4

Get UXDA research-based white paper "How to win the hearts of digital customers":

soul_banner-1651211407.png

Did you enjoy this article? Share your thoughts!

If you are seeking your financial product SOUL and also an exceptional competitive advantage in the digital age, contact us. With the power of financial UX design, we can help you turn your business into a beloved financial brand that has a strong emotional connection with your clients, resulting in success, demand and long-term customer loyalty.

Share:

Listen to our podcast:

More from our blog

🎧 Five banking CX Insights to Design Better Digital Products

80% of CEOs believe they deliver a superior experience, while only 8% of customers agree with that. What could be the exact CX/UX strategy and tactics to adopt a “digital-first” business approach and become a leading CX/UX financial brand that gets 3x greater return?

CX Strategy for the Digital Transformation in Banking Industry

How can digital banking gain a significantly greater competitive advantage from the banking CX strategy?

UXDA Wins Gold at the MUSE Creative Awards 2021

The app, designed by our financial UX design agency UXDA, was awarded along with apps for Ikea and Adidas and became the first mobile banking app to win Gold at the MUSE Creative Awards 2021.

UX Design Success Story: Shaping the business mentality

UX Design Success Story: Shaping the business mentality

UXDA review by ITTI Digital for which UXDA delivered a UX transformation of a 15-year old core banking solution.

The banking app that playfully teaches kids to save money in order to save their future

Half of the parents don't know how to discuss finances with kids in an understandable and enjoyable way, besides, this leads to conflicts that ruin family relationships. Most banks do not have special products suitable for children's needs and expectations.

10 Powerful Design Thinking Quotes To Shake The Banking Industry

Embrace the essence of design and customer-centered thinking in the form of a brilliant quotes collection.

Banking Innovation Ideas VS Experience: Blockchain, Open Banking and AI

Finance has always been quite conservative but it hasn’t missed out on technological progress. Due to the development of technologies, banks are becoming separated from their customers. According to research, 40% of American bank customers don’t go to...

UX / CX Checklist for Bank Digital Strategy Implementation

We have all experienced the moment when we understand that the time for change has come. Often these changes are associated with personal challenges. Most of the time we want to implement them as soon as possible and in the easiest way. This also...

Banking CX Checklist: Is Your Business User-Centered?

It has never before been so critical for financial product success to deliver according to customers’ needs and wants. How is your banking doing at tackling the challenges of the experience age?

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, Lead UX Architect & Consultant

Inese embodies a powerful fusion of two passions: finance and UX design. Her experience in trade finance, AML and wealth management provides her with exceptional expertise to always find the best solutions for the users. Her unique talent to find value in every product has resulted in countless success stories for our clients.

Tamara
Tamara, UX Architect & Consultant

Tamara is dedicated to always reaching the best possible result while paying close attention to detail. Her 12-year long experience in banking working with card issuance, acquiring and eCommerce allows her to have a deep understanding of the financial service specifics and provide the best experience for users.