Next →
← previous

Intesa mBank concept

Role: Concept design
Year: 2018
Platform: iOS

intro

Since starting my career in design, I have always been interested in designing experiences for certain industries - one of which was finance/banking. Even though I never got the opportunity to work on a real product in that industry, I decided to create a concept on my own - a simple redesign of an app I've been using for years.

Why?

I have been using Intesa's consumer banking app for a several years, but as a user I have discovered a lot of pain points. As a designer I wanted to explore this in more detail, and see if there is a better way to improve the user experience. I discovered that the last application release on the App Store was over a year ago, and over the last 2-3 years only a couple of updates have been published.

I started doing some research on local competition and noticed that none of them had a proper mobile banking experience. So I set a goal for myself to attempt to improve a few focal points of the app in a way that would make for a much better user experience.

Current design of the app



Information Arhitecture & Flow

As I had been using the app for quite some time, I was familiar with the UX, but wanted to dig deeper into the finer details. To accomplish this, I reviewed their information architecture and flow maps. This helped me discover everything relevant to solving this problem, and pinpoint more pain points from a user perspective.

Current flow

Wireframes

The next step was to wireframe the new application screens, which I did on paper together with the flow map.

Once I had the wireframes ready it was time to move to the design stage. I digitized the flow map and started with UI design.

DEFINING PAIN POINTS

1. Application Login
2. Not product-oriented (summary, balance, available balance)
3. Hard to navigate (details, transfer, latest transactions)

Firstly, logging into the app by typing a long password every time became quite a tedious process, especially when the user wants to quickly check their balance or status of a transaction. As mobile device nowadays implements fingerprint or face recognition technologies, an elegant solution to this problem would be using them to enable faster and more secure logins. A password would only be required if the user is sending a large sum of money.

After logging in, there was the issue of the homepage, which contained a lot of unnecessary items such as a calculator or news that are only updated once every 6 months. The homepage also featured a strange 'Lock' option which has no indication of what it accomplishes. This feature is essentially a sign out button, which could be presented much better.

The goal was to make the landing/homepage bank-product oriented. Ultimately, I decided to go down the 'card-design' route. Each product has a representative card with the most important details. The account card would show the  current statement and the option to initiate a new transfer. The loan and credit modules would show the outstanding amount, next installment, or something similar.

Navigation through the app is very difficult. For common tasks such as checking available balance, making a payment, or looking up card details, it can take anywhere from 3-7 steps. In addition to this, the bottom navigation appears one some views, while on others it's just bank, creating a confusing experience.

So I solved this problem with three simple navigation bars:
1. Products
2. Notifications
3. Setting

The 'Products' section contains all the information about the different products, while also including options such as initiating a transfer or payment. The 'Notification' tab informs the user about the last changes made on the account, and the 'Settings' view is used for configuration and settings.

Account overview now contains the most important detail - balance at the top, altogether with available balance. Users can see their latest transactions on the screen, but also can filter them as they wish. There are accounts details that contain numbers like IBAN, contract number or swift.

Transfer & Payments were previous two different selections. The only difference between the two is that with transfer you are moving money between your products, and with payments you are doing the same except out of your account(s).  

In the new concept though, the two features are under the same tab - "Transfer", as the logic behind these functions is the same. The goal is to transfer money in as few steps as possible - select beneficiary (or enter their details),  choose an amount, confirm details, and transfer.

This was the first project where I used Figma as a main design tool, and I was really impressed with the suite of features available. Below you can check out an interactive prototype of this concept design directly in your browser.


Conclusion

If you've made it this far, I really appreciate it. This design is just a concept, so I hope you enjoyed the details involved in trying to detect and solve a real world problem. I don't own any of the copyright materials of the Intesa bank (branding and brand guidlines), I just used their app as an example for learning purposes.

Thank you for reading.

Get in touch