How to create a mobile banking app UX design

To reach our main goal of transforming the complicated online financial world into something far better for users I challenged ourselves to build the simplest, most delightful and enjoyable digital banking design ever experienced. I strove to prove that it's achievable without losing any of the wide variety of banking functions.

I invite you to explore my journey to a new strategy of designing financial products that is unlike anything you have ever seen before. This mobile banking UX design concept, does not try to be the ’perfect’ banking solution. Instead, its goal is to present a completely different approach to financial services design. It's about creating a click-less banking interface by using gesture interactions.

Mobile banking app design

1. Careful assistant research

Create a use case matrix that will help you identify why users are interacting with the device. What is their primary mode of interaction? What is secondary? What is a nice-to-have interaction mode and what is essential?

ACME Product use cases

You can create a use case matrix for each mode of interaction. When applied to voice interaction, the matrix will help you understand how your users currently use or want to use voice to interact with the product — including where they would use the voice assistant:

People use voice assistant

Now that we’ve explored our constraints, dependencies, and use cases, we can start to dive a little deeper into the actual voice UX. First, we’ll explore how devices know when to listen to us.
For some added context, this diagram below illustrates a basic voice UX flow:

Voice interaction flow chart

DISCLOSURE: This post may contain affiliate links, meaning when you click the links and make a purchase, we receive a commission.

UX Design certificate by Google

2. Finding personas for my story

By conducting multiple interviews, collecting openly accessible data, and setting up different surveys on social media we created the key user personas as possible customers of the Techcombank app.  Based on the results of our research, the personas were a student, a office and an entrepreneur.

The main characters were generally described as :

1. Discoverers - energetic people who keep up with the current trends and consider traditional banking apps to be complicated and tedious.
2. Lovers of beauty - enthusiasts of good-looking, authentic solutions and modern novelties, eager to maintain their appreciation of beauty in their lives.

After discovering these values in our customers, we realized that our mobile banking design had to be:

1. mind-blowing,
2. emotionally engaging,
3. delightful,
4. easy to use,
5. innovative.

In other words, our end product needed to be cutting-edge, visually appealing, and emerge as one of the top banking apps in the market.

3. Open your heart to your users’ feelings

Next, for each of the personas, we built an Empathy Map. It compiled what would become the main paths of usage, based on their importance. By doing this we were able to have a better understanding of our heroes’ emotional aspects.

When creating the Empathy Map, I discovered a lot of pain points and dissatisfaction in regards to my personas experiences when they used other common banking services. The main issues included difficulty understanding the out-of-date designs of the service. To improve this, we had to gain a better understanding of our customers, their expectations and needs.

My characters were eager to use non-banking types of solutions. They were also advised to try alternative options by their friends, who were already using these kind of products.

Mobile app prototyping

Interaction Design Foundation 25% OFF

4. Create a map of mobile bank journey

During this phase, we merged the observations collected in the earlier stages into a document called Customer Journey Map (CJM). It's based on Business, User, Product and is specifically tailored for the development of financial solutions.

Our goal was to learn about the essence of what exactly the users were expecting from the banking app, what kind of feelings they would experience when they used it, and their main usage paths, along with business objectives, KPI's and an action plan. Being able to see the whole picture helped us to create a detailed step-by-step product experience that would satisfy the needs of both the users and the business in the best possible way.

During this stage, we determined exactly what the most crucial action points would be from the users’ emotional point of view.

Mobile app wireframing

The banking's Customer Journey Map consisted of 5 stages, 17 touchpoints and 346 bullets. For more complicated banking platforms there can be more than 100 touchpoints and up to 2,000 bullets. Take a look at this explanation of a Customer Journey Map to gain a better understanding of how this works.

Let's say that the aim of a touchpoint ’Top up account’ is to quickly and securely increase the amount of money held in a user’s Techcombank account by transferring funds from another bank account. In this case, the main tasks consist of:

    Transfer in Techcombank
    Instant transfer 24/7
    Payment services

By doing these tasks, a person can sense different feelings such as impatience and excitement. Also, at this step, the user might have some questions, such as:

    How can I quickly access my Techcombank account?
    What information is required from me?
    Is this secure?
    How long will this process take?

If we talk about the possible pain points a user could have, one of them would definitely be their obligation to enter the payment data repeatedly, every time, when performing a top-up function to add money to their Techcombank account.

From the perspective of a business, the most important goals of this touchpoint could be the frequency of top-ups and amount of money being topped up by the users.

Furthermore, the KPI's (Key Performance Indicators) could be determined by:

    the percentage of transactions with or without errors;
    the average amount of time spent to complete a transaction;
    the average amount of transactions.

Also, it is crucial that the users consider the process of adding money to the account to be simple, easy to understand and as safe as possible. At this particular stage, the banking app can state the benefit to the users as ‘top-up your account in seconds’.

After learning about the customers and the businesses, we were able to determine what was necessary at each step of the user’s interaction with the app. This allowed us to prepare a list of functional requirements for the project, create a Red Route Map Analysis, and identify ‘power’ user scenarios.

5. Create Information Architecture for mobile banking app UX design

Next, we were able to prepare the structure of the banking app’s design based on the mental models of user perception, so that they can easily understand the structure and principle of operations in our product. After creating the architecture of the information we were able to learn everything about the conceptual service model, which was created from fundamental sections of data along with a thesaurus. To achieve this, it was beneficial to use a practice called ‘Card Sorting’, in which potential users are asked to arrange components of a product according to the specifics of their mental model.

What will the workflow of a voice assistant in the challenger bank design look like? Suppose you want a personal loan; tap a mic icon and voice your request. Banking careful assistant identifies your request and offers a choice of available options. In this particular digital banking case study, one of the offers has already been prepared and approved according to your credit score. All that remains is to tap “Confirm,” and the money will appear on your balance in seconds.

This is one of the basic principles of the future bank user experience — proactivity instead of reactivity. Future banks won’t have to wait for a request from a user. Financial careful assistant will automatically prepare and approve a proposal for the maximum number of services using big data-based predictive analytics. This will significantly enhance the banking customer experience and provide instant service.

6. Transform user scenarios into screen flows

After gathering all of the information about the main usage scenarios and creating the information architecture, the strategic part of our banking UX design was ready.

These maps are made to establish the right order for the essential user scenarios that have been determined in the earlier phases. It helps to design and adapt the actions that users have to take in order to achieve their goals.

Mobile app wireframing

7. Proof of concept

My Goal was to prepare a concept of a banking design displaying the implementation of the most and basic user scenarios. Design screens were prepared and integrated in to a clickable invision prototype. Also, a motion design video was created.

Mobile app POC

UX Design Process - Tom Agency

Mobile app Design process

About Author

Le Duc hung
Founder / CEO / UX Strategist at Tom Agency 

Interaction Design Foundation 25% OFF


Post a Comment

Popular Posts