back to latest articles

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

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

Is it possible to improve the digital banking experience in just a few days? You can instantly increase the overall user satisfaction by easing their most common struggles. In our four-article series, we guide you through 20 examples that demonstrate how you can detect improvement points using the power of financial UX design, and achieve great results with little effort.

This is the second part of this series. Here's the first part of TOP Financial UX Dos and Don'ts, if you haven't read it yet.

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 digital banking 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 them with the help of UX design.

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

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

These 20 examples clearly demonstrate the dos and don'ts leading to a great financial customer experience. We have added a detailed description of each of these examples so you can understand where the problem lies and what exact steps you need to take in order to simplify this pain and turn it into a pleasant experience in your own financial product design.

In our four-article series, we will guide you through these 20 examples of how to improve digital banking. After reading each of these articles, you can check in with your financial app and evaluate what user experience improvements can be made. To make it even more convenient for you, we have included a UX checklist at the end of this article.

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

1-financial-ux-design-for-financial-app-m-1.png

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 financial UX

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

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

financial-ux-design-for-financial-app-m-2-overloaded-dashboard.png

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 financial UX

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

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

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

financial-ux-design-for-financial-app-m-3-map.png

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 financial UX

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

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

financial-ux-design-for-financial-app-m-4-support.png

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

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 financial UX

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

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

financial-ux-design-for-financial-app-m-5-card-block.png

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 financial UX

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

Financial UX checklist on how to improve digital banking

Together with the first part in this article series, this sums up the 10 user pain points your financial service can solve quickly and without huge effort. Stay tuned for the next articles in this series. Meanwhile, please fill in this checklist to find out the areas in which you could improve the UX of your financial service. For your convenience, it's also available in PDF format to print out and share with your colleagues.

financial-ux-design-financial-app-do-dont-hero-s-2.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

To Survive, Financial Industry Has to Adapt Design Thinking in Banking

Design Thinking is needed to adapt banking services to the new world. In a human-centered economy your service has to be user-centered.

How to Implement Design Thinking in Banking (Updated 2019)

Find out what is the definition of the Design Thinking in banking, what steps the process includes and how to implement Design Thinking to overcome challenges.

UXDA's Journey Through FinovateEurope 2019

UXDA stepped on the Finovate Europe 2019 stage in London beside other world's leading finance innovators and influencers to demonstrate which direction the financial industry is heading to.