Bankinter
Bankinter
Bankinter
Bankinter
Bankinter
UX / UI
UX / UI
Creation of the new application for individuals for Bankinter, one of the main banks in the Spanish financial system.
Creation of the new application for individuals for Bankinter, one of the main banks in the Spanish financial system.
Creation of the new application for individuals for Bankinter, one of the main banks in the Spanish financial system.
UX / UI
Hey, I'm Daniel.
Digital Product Designer based in Madrid, working worldwide.
Bankinter
Fintech
Successful creation of the first native consumer app for Bankinter
My Rol: Senior Product Designer
Situation
Bankinter has been a technological leader bank. As early as 1996, its clients could access their accounts and carry out operations through the online Broker platform and its Bankinternet corporate web portal.
Currently, due to different factors, it has lost its technical leadership. And their digital products are outdated and no customer centric.
Challenge
Our goal is not just to restore leadership but to regain ground and reduce the competitive gap. To achieve this, we will:
—
Develop the first native app as the central platform where users manage their finances.
—
Design and integrate all necessary functionalities to ensure an effective and seamless operation.
—
Offer an intuitive and secure experience, ensuring a smooth transition from the previous web model.
Constraints
We face several challenges in implementing this transformation:
—
User resistance to change. Users have been using the same web app for a long time. They are accustomed to it and reluctant to switch, despite its negative perception.
—
Stronger competition. Competitors offer more robust products. They are developing new solutions that we cannot currently incorporate.
—
Limited tech-savviness. Many users are not highly tech-savvy, making adoption more challenging.
Achievements
—
Created a unified user experience model. Developed a consistent framework for the app that also served as a guide for enterprise, youth, and broker apps.
—
Developed a flexible visual component system. Defined a scalable system aligned with the new corporate identity, forming the basis of the design system.
—
Delivered the app on time. Ensured timely delivery with all desired features and functionalities.
—
Helped establish a data-driven workflow. Supported the creation of a product development process based on research.
Business Impact
—
85% of users successfully transitioned from web to the new app for their daily banking operations.
—
35% increase in mobile transactions, boosting overall engagement and revenue.
—
Higher customer satisfaction, with a +25% increase in NPS (Net Promoter Score) after launch.
—
Stronger market positioning, reinforcing Bankinter’s reputation as a leader in digital banking innovation.
Stakeholders
—
Core project team. Included the Product Owner (PO), Development Team Lead (DTL), developers, and QA specialists who were directly involved in designing, building, and testing the consumer app.
—
Data, research, and CX teams. Contributed critical insights through data analysis, user research, and customer experience feedback, supporting a user-centered and iterative design approach.
—
Parallel web project teams. Product Owners and UX teams working on related web projects, collaborating to maintain alignment and consistency between web and app experiences.
How have we dealt with the project?
Through a simple work process that has allowed us to discover the current problem to solve and identify the opportunity. Define solutions through the exploration and generation of ideas. And finally iterate and iterate, refining the solutions based on the feedback generated by our users.
And for that we have had a series of collaborative tools for solving problems in each phase of the process.
1. To find out
2. Define
3. Refine
Let's start with some relevant data from research and analysis.
Who is our user?
Our user is between 40-55 years old.
With a good financial position and a low technological profile.
What do our users feel and think when using the current app?
Through research processes, data and techniques such as the creation of empathy maps we have reached the following conclusions.
Is very slow, Its performance is very improvable.
It is much worse than the competition.
It works very badly, many times it does not open.
It lacks products, options and basic and important operations.
It is very unintuitive and difficult to handle.
The interface is very improvable.
I prefer to do my operations from the web version (online banking).
What do our users use the app for?
The data and the results of the interviews tell us that:
95% of the sessions in the app are to consult the financial situation, movements and balances and to make transfers and Bizum.
Distribution of operations by type of operation (%)
App Arquitecture
If the percentage of sessions dedicated to making payments, and specifically Bizum, is so high, we will create an architecture that is broad and flexible enough to respond to the needs of our clients.
Bizum Service Architecture Schema
What are other financial entities doing?
After a detailed benchamarking process we have detected that other financial entities are working on:
Financial health
Operations aimed at improving the domestic economy, increasing savings and financial planning. Adapted to the client's needs.
Operations aimed at improving the domestic economy, increasing savings and financial planning. Adapted to the client's needs.
Payment financing
Payment financing Postponement and fractioning of the payment of your taxes, debit purchases, receipts and transfers.
Personal Managers
To help in making important decisions through humane treatment and tools to control income and expenses, improve savings, etc.
Cross-Selling
Cross-selling of non-bank products Checks, security, health, tickets, vehicle rental, subscriptions ...
Virtual assistants
Based on artificial intelligence and machine Learning. The best finance expert to solve all queries and doubts related to the management of banking products.
In addition, Neobanks have appeared that offer immediate payment systems, purchase and sale of shares, cryptocurrencies ...
What extra problem have we encountered?
After a detailed benchamarking process we have detected that other financial entities are working on:
Fear of change
Although the current application is very bad, it has been in the store for so long and they are so used to it that users are reluctant to change.
No mobile first
We are not a mobile first project. The web project has started a year earlier and we are forced to align ourselves with it.
Poor architecture
The architecture and API services of the bank do not respond to the needs posed for a mobile environment.
What is our goal?
Create a new application that is solid, stable, fast, intuitive and with a very short learning curve that helps our users better manage their finances. Make it a starting point to constantly and progressively introduce improvements, products and operations.
How are we going to approach the project?
We have decided to approach the project in two phases:
Phase 1
Adaptation
In a first we will create a solution of continuity. A more solid, fluid and modern application, but taking up certain navigation aspects of the current application and the new website. We understand that we cannot be too groundbreaking, especially considering that we are additionally applying a new corporate image.
Phase 2
Innovation
In a second phase, once users have become accustomed to the change, we will promote a new concept. Redefining complete sections looking for measurable objectives, incorporating new functionalities and discarding others. Guiding users towards a better management of their finances in a process of constant iteration.rporate image.
Let´s start creating an...
UI
...application with a visually impact ...
To tackle a transformation project of such magnitude, we have adapted our visual identity and focused them on online environments: a new exclusive typeface family for applications, an iconography, a perfect pixel game, an extensive palette of accessible colors, a new tone of voice ... Creating a new universe of recognizable, flexible and consistent components that will build each of our digital products.
El reto es alinear todos los productos digitales todos los productos digitales para conseguir una experiencia consistente.
UX
A harmonious UX built for people.
We have developed a simple and consistent UX that works as a good score throughout the entire application. Responding to the new needs of our users. In which the client, you, always comes first. And always in continuous evolution ...
Most frequent operation
The Dashboard allows you to consult all your products categorized by families: accounts, cards, financing, investments, insurance ...
It is a transition Dashboard, because we want you to feel comfortable with what you already knew and have used for so many years.
Through the tabbar you access the main options.
Accounts
Control all your accounts from the same point. The categorization of movements will help you manage the information.
Cards
Know the situation of your cards, both credit and debit. Pay with them, turn them on, activate them, modify their limits or payment methods, change the PIN ...
Notifications
Stay informed at all times. Notices from your manager, pending operations ... Always up to date!
Most frequent operation
The operate button allows you to access the most common functionalities. The options will depend on the product or operation you want to carry out. And it is completely configurable.
Payments
User tests have shown that money transfers and remittances are one of the most used functionalities. That is why we have created a new section, which you can access from the tabbar and will allow you to consult and manage both payments issued and received, past and future. Offering you the possibility of creating favorite payments to speed up future transfers (through the carousel located in the upper area) and incorporating buttons at the first level to facilitate the start of new payments.
Consistency
We wanted to create an application with a consistent UX. Simple operations, with patterns that are repeated in each one of them, reducing the learning curve. Accompanied by a close language to reinforce the communication of each concept.
DSL Bank System
2. Who do you want to make the transfer to?
3. How much do you want to transfer?
4. What type of transfer do you want to make?
Transfer flow example
1. From which account do you want to send?
5. Sign the operation
6. Confirm if all the data is correct
7. Done!
More value
New features that do not stop growing.
Creating a new application means knowing what is happening around us, what new services there are, how our users interact both with our products, with their finances and with each other. How are other entities and our competitors working? That is, to be up to date and to create new functionalities that provide added value to our users.
Most frequent operation
The Dashboard allows you to consult all your products categorized by families: accounts, cards, financing, investments, insurance ...
It is a transition Dashboard, because we want you to feel comfortable with what you already knew and have used for so many years.
Through the tabbar you access the main options.
Accounts
Control all your accounts from the same point. The categorization of movements will help you manage the information.
Cards
Know the situation of your cards, both credit and debit. Pay with them, turn them on, activate them, modify their limits or payment methods, change the PIN ...
Notifications
Stay informed at all times. Notices from your manager, pending operations ... Always up to date!
Send money to a mobile number
Select the contact from your agenda and send or request money instantly.
Do you need to get money?
Find the ATM that interests you the most. The closest, without commissions, an open office, accessible ... With the search engine that we have developed and the simplicity of the graphical interface, locating it is immediate.
Cardless withdrawal
If you don't have the card or want to send money to someone, this is your functionality. Select the amount to withdraw (the shortcuts on the screen will make your life easier), generate a unique code and send it. By introducing it in the ATM you will be able to withdraw the money.
PFM
Take control of your financial universe
Our consumption patterns have changed and continue to change. We make more purchases online, we subscribe to more platforms, we pay in cash, through our banks, with wallets… We want to know how we spend and what we spend on… And we want to have everything on the same screen. That is why we have chosen to create a powerful PFM (Personal Financial Manager), which will undoubtedly grow over time.
All this financial information is collected in a configurable PFM (Personal Financial Manager). Through a simple and attractive interface you can consult the information by periods of time, type (income, expenses), categories, etc.
The detail of the movement shows more information about that specific purchase. Showing all the expenses in that establishment (Starbucks) in the last month and the total consumption in hospitality, to have a more global vision. The buttons allow actions such us divide payment, request payment or add the receipt with the camera.
If the movement does not appear well categorized, it is easy to re-categorize it using filters such as “All, Income, Expenses”.
When making a purchase, it is already pre-categorized with the name of the business or the type of expense (purchases, technology, ATM withdrawal…) on the card board.
Push notifications (configured with different filters) help us keep up to date with each of our movements so as not to have surprises ...
In the future
We create functionalities that go beyond ...
Creating an application involves solving present needs and anticipating future needs. It is an exercise in perspective and imagination.
Simplify navigation
Optimize space
Other financial entities
Accessibility
Error Handling
Phase 2
Innovation
Phase 2 involves abandoning the inherited patterns of the previous app and looking for new solutions, according to the current situation and the needs of our users. For this we will start with a new dashboard. Simpler, simplified, with a single scroll and configurable. What do we want to achieve?
We want to improve the browsing experience with a single vertical scroll.
The dashboard could have a large amount of information and the new model we propose optimizes the space on the screen.
We have developed a new functionality so that the user can include and operate with products from other banks. So the need to optimize space is even greater.
CRM
A layout based on cards with large fonts poses accessibility problems, especially for users who use large text sizes.
Due to the inherited architecture and the large number of calls to APIs (they can be up to 17), a model like the one we have now in which almost no products are seen at first sight is a great handicap to show errors in those products that are off the scroll.
The business requests a greater presence of CRM banners and this model helps to display a greater number of them on the screen.
Make it configurable
Allowing users to decide which products they want to see and in what order they want to see them.
Dark mode
We have to be up to date even in the smallest detail.
Our current dashboard
Our future dashboard
Bankinter App