How to create a mobile banking app UX design, why it's worth to read:
- Step-by-step guide─how to design the simplest and most beautiful mobile banking interface in the world, keeping full-scale banking functionality;
- Learn why is psychology an important aspect of ensuring a FinTech service succes;
- Discover the right way to do research and how an Empathy map can provide a better understanding of exactly what your customers need;
- Understand how to make banking experience enjoyable and fun in order to increase your customers’ involvement;
- Find out why we gained inspiration from the miracle of nature and how we integrated it into our banking app design.
To reach our main goal of transforming the complicated online financial world into something far better for users we challenged ourselves to build the simplest, most delightful and enjoyable digital banking design ever experienced. We strove to prove that it's achievable without losing any of the wide variety of banking functions.
It took several months to create Light Bank. The design of the app is based on UXDA's experience and knowledge, gained by regularly finding solutions to a wide variety of different financial design problems, and our devotion to revolutionizing the world of finance by having a direct focus on banking app users and their needs.
We invite you to explore our journey to a new strategy of designing financial products that is unlike anything you have ever seen before. This mobile banking UX design concept, created by UXDA, 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.
Light Bank motion design
How did we get here
What if you wanted your customers to be more than just users?
What if you want your customers to become enthusiastic about your mobile banking application? That would most probably result in much more trustworthiness and enthusiasm from your clients. In order to do that, you need to understand the people who use banking apps, and see the world from their point of view. Each person has a unique way of looking at life, but they all share one thing in common - the human nature.
The UX experts of the UXDA were aiming to change some of universally used approaches of FinTech UI design, while retaining already known easy-to-use principles common to mobile designs. The goal was to design and build the simplest banking app on the planet, keeping the wide-ranging functionality. As an outcome - the concept of Light Bank - a fusion of beauty and simplicity, was created.
How Light Bank app was created, step-by-step guide
We started by evaluating the commercial objectives of the product. That required us to determine the best business model and the best strategy for its launch, in order to learn what would be most beneficial for the app’s users.
After that, we gathered as much information as we could about the app’s potential customers. It was crucial for us to determine the wishes and perceptions of people who could become enthusiastic supporters of Light Bank.
1. Finding heroes for our 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 Light Bank app. Based on the results of our research, the personas were a millennial student, a sales manager and an entrepreneur.
Key user personas
The main characters were generally described as :
- Discoverers - energetic people who keep up with the current trends and consider traditional banking apps to be complicated and tedious.
- 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:
- emotionally engaging,
- easy to use,
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.
2. 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 and an ability to ‘walk in their shoes.’
When creating the Empathy Map, we discovered a lot of pain points and dissatisfaction in regards to our heroes’ 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.
Our 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.
3. 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).
The CJM, created by UXDA, is based on bUP (Business, User, Product) and is specifically tailored for the development of financial solutions.
Customer Journey Map
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.
People tend to remember the services that have caused them to have negative feelings, and it is difficult to make them forget that negativity through other positive experiences. By considering these circumstances and having a goal to create an amazing experience for our users, we identified the main trouble points and tried to make them as easy to use as possible.
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 Light Bank account by transferring funds from another bank account. In this case, the main tasks consist of:
- Adding funds from another account/card
- Adding funds from a card that is already registered in Light Bank
- Adding funds from Apple Pay
- Adding funds from PayPal.
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 increase the amount of money in my Light Bank 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 Light Bank 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.
4. Fit the service conceptual model to users mental model
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.
We focused on making the service architecture as simple as possible in order to eliminate the navigation menu. Regardless of that, we managed to maintain all the fundamental functions that the users need. The service includes complete information about the users’ bank accounts, transactions and even statistical graphs. It is possible to transfer, demand and add funds to your account, and schedule payments. In addition, it is also easy to add and manage a wide variety of financial products - lines of credit, insurance, debit cards, investments, etc. And, of course, the banking app has adjustable profile settings, notifications, and it offers support if needed.
5. 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. It was time to continue with the creation of Low Fidelity (LoFi) maps.
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.
Lo-Fi flow development
With the help of LoFi maps, we were able to build the whole inner logic of the service by thinking about all of the functional demands of the application. Usually, during the process of developing a financial project, the LoFi maps are adjusted.
In total, 35 key user flow maps were created for the Light Bank concept.
6. Architect detailed blueprints of the future
We continued our work by creating High Fidelity (HiFi) wireframes. Our goal was to prepare a visual construction of the app’s screens and the content, considering the logic of the service and all of the previously generated UX insights.
The creation of HiFi wireframes gave us a chance to develop the banking app by using visual communication based on the users’ perceptions of the FinTech service, instead of a traditional technical requirements list that can easily be misinterpreted by the development team.
Hi-Fi wireframe development
HiFi wireframes provide an opportunity to create a prototype of the mobile banking app that is perfectly suitable for testing the UX strategy and the key user scenarios. We executed in-house testing of the HiFi wireframes by checking out the most critical and frequently used banking scenarios identified in the Red Route Analysis.
Despite our best efforts to simplify the structure and the interactions of the banking service, the total amount of wireframes necessary for the concept turned out to be more than 100.
The primary goal of the testing is to determine any points where users found it difficult to manage the given tasks and to find out if there is any difficulty understanding the financial app's interface design. Afterwards, you can brainstorm better solutions and implement the necessary adjustments.
For example, users faced some difficulties in the process of trying to understand how to activate the payment function. In order to keep the structure of the service as simple as possible our decision was to leave this function as it was. However, to make our banking solution easier to understand for users who are not as comfortable using advanced technologies, we added a learning tip that would be displayed at the first login.
7. Catch your desired visual wave
After the UXDA team discussed the results of our examination and prepared the needed corrections, our UI designers continued creating the concept of the Light Bank interface. The task for our UX Design Agency team was to cautiously examine our approach to financial UX, information about the key users, the demands of the organization, and the overall perception of the digital banking products. After learning all about the previously described UX strategy, our designers came up with a mood board for the mobile banking app.
Mood board for the design
When creating this financial UX solution, we focused mainly on the users’ perceptions. It is difficult to compare anything to the beauty of nature. The energy of flames, flares of lightning, the vividness of animals, the night sky filled with stars - the beauty of wildlife and natural environments has fascinated people since their childhood because it is embedded in the evolution of our brain.
For our team of UI designers it was crucial to translate the bliss of being in touch with the miracle of nature into the new banking design. It turned out to be a challenging task for UXDA to create an app that would ultimately inspire and satisfy banking customers so much that their everyday financial activities would feel like a different reality.
8. In search of perfection
The preparation of the Key Design Concept is one of the most anticipated and important moments in the whole process. The main responsibility at this point was to find a way to transform feelings and ideas into a solution that would be loved by millions of people all around the world.
In order to create the perfect banking solution, it is not enough to just colorize the previously created wireframes or to follow an abstract design inspiration.
We needed to consider these factors:
- UX demands;
- aspects of the digital banking solution;
- design standards for the mobile interface;
- the latest trends in the app design industry;
- the technical performance of the mobile platform;
- categorization of the UI components;
- an option to adjust the concept into a top-of-the-line Design System.
Under the guidance of UXDA's art director, a team of designers took part in creating the banking design’s concept development. In order to achieve the key design, the team needed multiple sessions of brainstorming, benchmarking and examinations of a wide range of banking user interface elements and solutions.
This phase took a week, during which the financial app design idea went through many transformations and became very different from its initial version. The design process continued until the best possible outcome was reached.
The process of finding the Key Design Concept
Proof of concept
Our goal was to prepare a concept of a banking UX design displaying the implementation of the most important and basic user scenarios. A total amount of 30 screens were prepared and integrated into a clickable InVision prototype. Also, a motion design video was created.
Screens of the Light Bank interface (Gold at London Design Awards 2018)
The journey of using Light Bank begins with signing in using Face ID verification. After that, users can view the funds available in their main banking account and also view other connected products by swiping the screen. In the next screen the user can see all of his/hers cards, and then the marketplace where the user can apply for any new financial product.
MOTION: Light Bank simple dashboard
In this scenario users can view their transaction history by selecting an account. During this task, they will see only each transaction’s most essential data, the amount and who received the funds. When looking through the list of transactions, we can see a date that is located at the lower part of the screen. This also works as a filter. After the user clicks on it, it's possible to choose a time period for the transactions or array transactions, based on chosen criteria.
To see more specific information, such as the time when a transaction occurred, its ID number, location, and previous deals with the same recipient, the user just needs to click directly on the transaction.
MOTION: Transaction history and detailed information about the transaction
For many people, the basic information of the funds available and the transaction history are the most important scenarios. However, some users need to make a more thorough analysis of their funds’ movement.
To accommodate this need we created a section for statistical data, forecast and settings that can be viewed by clicking on the bank balance. Then the user can choose the category of data and time frame that they would like to see.
In the section of details and settings, the customer can view the information about the account and has an option to manage the outgoing money limits.
MOTION: Account statistics chart, forecast and settings
In the Marketplace section, Light Bank clients are introduced to a broad selection of financial products. In order to apply for a product, the user selects the product category and their main goal. In this example we selected a loan in order to purchase a car. Light Bank immediately offers three choices for this scenario.
The offer is personalized and based on an examination of the customer’s financial data. The user can view the highest amount of credit offered to them and has the option to decrease it. The user can also readjust the loan by choosing a recurring payment or paying the full amount.
MOTION: Requesting a car lease
In order to view the options for money transactions, the user has to press and hold on the amount of their balance in the main page. After that, two types of actions appear, Add Money and Send Money. The option of adding money lets us add funds into our existing Light Bank account from a different bank account payment card, divide a bill with friends, send our account information to others in order to request funds, and produce a receipt PIN code for ATM deposits.
Our focus was to create the Send Money option as clearly, intuitively and easily as possible for the majority of scenarios. All the user has to do is to provide information about the amount of the transaction and the name of the recipient. When people make transactions 80% of them are sent to the same beneficiaries, so we made a list of Recent Transactions so users can effortlessly find the recipients of past transactions.
Another great option is the search function. By using the Smart Search, a user is offered a list of favourite recipients form the contact list, payment templates and transaction history. It is also convenient to use the Geosearch option, which helps users find nearby friends who are also using Light Bank in order to send funds to them. If no results were found, a new form of payment is automatically displayed. In order to move money between the user’s own accounts, the user only has to click o the Accounts tab.
When receiving a confirmation that a transaction has been processed, such as a payment, the user has the option to delay the payment by changing its effective date. Another option available for the users is to set repeats for any transaction..
MOTION: Send money
A great option included in Light Bank is the voice assistant. It is as simple as saying ’Hi, Light Bank!’ and a voice chat with the app will be accessed. The only thing a user has to do is to name the recipient and the amount in order for the transaction to be created.
But what if you want to send money to a recipient that has more than one account in different banks? In this case, the user can simply select the account that they would like to make the payment to.
MOTION: Voice processing
It was also essential to understand how to improve notifications, making them more engaging and fun instead of just boring pieces of text that pop up on screen. We wanted to add a positive emotional aspect by creating notifications that are animated and visually more appealing, in that way we were able to attract the user’s attention and get them involved in the product, providing more delightful experience overall.
MOTION: Animated notifications
We could not call our product Light Bank if it wasn't connected with the concept of light. Based on the timing and geolocation data, Light Bank knows when the sun has risen and when daylight changes into night light. So the app makes an automatic transition from a lighter background to a darker background according to the time. This setting can be manually adjusted, so if the user prefers one of the backgrounds , it can be set as the default.
Financial Design System
Finally, we needed to make sure our design concept has the potential for further development and upscaling. This is where the Financial Design System comes in.
Design System could be compared to a map that guides the product developers and stakeholders through a complete collection of UX insights, UI assets, commonly used visual components, design statements and the style guides of the specific design.
Benefits for the customer include using of the same design ’language’ in developing complex banking solutions, and even adding new digital channels. This ensuring the consistency of the design and is crucial for minimizing the cognitive load on the user.
Benefits for the business - it doesn't matter if the team members working on the project are located in various locations all around the world and speak different languages - the Financial Design System keeps everyone involved ‘on the same page’. It provides a rapid and effective solution, upscaling, and also the possibility to easily adapt to the constantly growing expectations of customers.
Advantages for the designers - it is more convenient to construct interfaces piece by piece, rather than designing all of the screens at the same time. This approach allows designers to adapt and test components to make them pixel perfect.
Benefits for the developers - the Design System allows to create an associated element code library to speed up the development process by copy-pasting similar constructs.
The Financial Design System
The Financial Design System provides a convenient and quick way to look-up elements, resulting in fast interface prototyping without searching for specific elements or modules in hundreds of already designed screens. This significantly boosts the speed of product design and development.
If you look at hugely successful companies that have integrated Design Thinking into their very core, into their DNA you can see five times bigger Price/Earnings rates than average.
As you can see from the chart user-experience is what truly makes a difference in the modern digital world.
Now you have been introduced to our vision of the simplest and the most beautiful banking UX design in the world. Our goal was to show that a customer-centered UX design can significantly improve the value of any financial service. All we need is a design-oriented mindset and a desire to disrupt the financial world by shifting the main focus to an outstanding user experience.
We encourage you not to be afraid to make a difference, to think ’outside the box, and to climb higher - beyond the average. We hope this UX design case study will empower you to reinvent the banking industry, and we are always happy to help you on your journey.
Here at the UX Design Agency we are eager to solve challenges in transforming complicated financial services into beautiful and user-centered designs. This broadens our clients’ perspectives, not only leaving end-users and industry professionals with the word ’wow’ on their lips, but even more - completely blowing their minds away. Every day, with every project, we strive to accomplish our main mission - transform the mindset of the banking industry. So, are you with us?