Monee Bank, the financial app for Millenials.
UX/UI Challenge
What is today´s banking situation?
“Millenials,” the generation born between 1980 and 1999, have become the main target of the neobanks (banks that are 100% digital and compete with traditional banks by offering simple online financial services).
Millenials are the reason why these financial enterprises even exist. These companies rely heavily on new technologies and the range of products and services they offer are based on principles demanded by younger and financially uneducated people: transparency, simplicity, ease of use, and better conditions.
Monee Bank is one of these neobanks; a European startup that intends to disrupt the traditional banking sector, creating a financial app for this market niche.
As a UX/UI Designer working for this startup, the challenge was to create the user dashboard for the app device, taking into account the UX research made.
The given deadline was one working day and the dashboard had to include:
1. Actual balance.
2. Global overview of accounts and cards.
3. Monthly expenses represented in a user-friendly graphic.
4. Offers of one of the bank´s products: directly (banner) or indirectly (content).
5. Menu (burger or sticky footer).
6. Other services: insurance, FAQ, etc…
Ready? Set? Go!
UX RESEARCH
The company held a focus group with 50 Millenials and a co-creation session with 25 stakeholders.
With the information gathered from these investigation techniques, it was clear that there were two different profiles (students Vs. workers), with very different economic and vital situations as you can see in the below comparative box:
The negative aspects (highlighted with a red background) should be taken into account in terms of the app´s approach as they could imply a weakness for the company if they are not taken care of.
Both groups think that banks are something distant from their reality; they perceive a cold approach from them which could be deceiving. They demand transparency, clear language and products and services that are oriented towards their needs. Integrity, sense of security, and market consolidation are the main factors they take into account when choosing a financial institution.
BENCHMARKING
So what are the competitors offering this generation?
I analyzed two competitors of this startup, N26 and ING Group to see what aspects could be discarded or included in the mobile app.
N26
This German neobank has become very popular amongst young people in the last years. Taking a quick look at the characteristics they display in the App Store, I found the following:
Contrasting this information with their website, I recognize the company´s goal to improve its user experience whilst using their different devices.
Apart from the above displayed added-value features, this bank offers a series of products and services that are directed towards the needs and interests of Millenials, such as:
- International cards with an innovative design and without commissions.
- Premium Plans: travel insurance, mobile theft insurance coverage, free cash withdrawal around the world.
The language used is very informal and easy to understand, making their communications more attractive to all audiences. In terms of the design, it is also very clear, having a well-defined information architecture.
ING Group
The Dutch firm is one of those traditional banks that has strived to move towards a more modern model of business in the last 15 years. Visiting the App Store display for their mobile version, they highlight the following features:
I observed in their website that their contents are clear but they use a more formal language. Their information architecture is set up clearly, but the content design is more traditional.
In both ING devices, the information is cluttered. Scrolling through the website, I realize that it is difficult to see the added value that the company offers. Users have to click CTA´s that take them to other pages, increasing the time spent to obtain basic information.
Main findings
The positive characteristics I have found analyzing both companies and that should be taken into consideration whilst designing Monee Bank´s app are the following:
A) Informal language and clear design
B) Free account opening without paperwork
C) Real-time notifications
D) Fingerprint access
E) Accounts, savings, incomes, and spendings available to be personalized by categories
F) Cards linked to Google payments
G) Products and services oriented towards Millenial needs
USER PERSONA
Thanks to the previous analysis, it is easy to define the user personas that the bank could have.
In this case, I will be focusing on the profile that is harder to approach and the one that has more problems in terms of managing their finances. That would be a young student such a Gerardo Gómez:
With the information defined in his profile, we can understand his life, his economic situation, and how he would interact with a financial service.
To establish a realistic journey that he could follow with a banking app, I establish the following scenario: his parents have transferred him this month´s allowance through their joint bank accounts and he accesses the app to check if he has received it.
Through this hypothetical situation, I realize how important language is when designing an interface. If the majority of the app users have very little financial knowledge, the device will need to be structured in a clear, organized and understandable way so they can find their most-used operations fast and easily.
STYLE GUIDE
The first thing I wanted to design within the prototype was the logo. It consists of the bank name in different Roboto typography weights and sizes, turning both E´s into the Euro symbol (€) to link the name to its main function and a small red vertical line dividing both words.
The colors selected for the logo were also used throughout the whole prototype: dark blue, red and yellow. White (#FFFFFF) is used permanently as the background color to provide clarity.
Blue is a color that transmits security and that is why it was selected as the main color (#1B2C86); red (C62828) was used to highlight certain blocks or graphic areas (underlines and arrows) and yellow (#E6CF01) was left to contrast blue texts with icons.
Other secondary colors were used as you can see in the below screenshot. Grey (#C4C4C44C) was used as the background color for buttons and a lighter shade of blue (#5673DC), green (#34A853) and orange (#FBBC04) were selected to represent graphically the user´s expenses in a chart.
In terms of the typography, Roboto was selected for both, the logo and all of the app´s texts. It is very clear and understandable and has many weights and uses that can be applied, providing a large design versatility.
Within the components I used, you can see below the CTA´s, icons, and others included in the prototype.
In terms of the layout, I used:
- Iphone 8 frame
- 10 pixels grid
- 2 columns grid with 30 pixels gutter and 15 pixels margin
PROTOTYPE
Screen 1 (Splash): it displays the logo and allows the user to log in with their fingerprint.
Screen 2 (Home): the header displays the logo, notifications icon (inactive) and a burger menu. With an overlay animation, the menu is displayed ; it includes FAQs, customer services, insurances, and other services. The main body of this screen displays all the accounts and cards of the user, enabling the addition of new ones or linking cards to Google pay.
Screen 3 (Account overview): this screen shows the actual balance of the selected account. It also provides pie graphics of the incomes and expenses by the selected period of time (daily, weekly, monthly or yearly). By scrolling down the user can see the history of those operations and the way they are organized by categories (mobile, Restauration, etc), providing a personalization option.
Screens 4, 5 and 6 (Notifications set up): Pressing the notifications icon in screen 2, users can set up the real-time notifications they want to receive from each account. A banner advertising a premium service of the company was included in the lower part of screens 4 and 5. Once the selections have been saved, the notifications icon in screen 2 (home) appears active.
Want to see how Gerardo´s interaction would be using the app?
CONCLUSIONS
It has been interesting working on a financial app and seeing how the information can be displayed in a more user-friendly way. I believe all users really appreciate having numerical information represented graphically so it is more understandable and also, using a more informal language.
All the “must-have features” of the challenge were successfully added throughout the screens plus all the other characteristics I found interesting from the competitors. Although the additional features implied more time designing, I think it could provide an added value for Monee Bank´s app.
If the challenge had provided a longer time frame, it would have been really helpful to test this prototype with a group of Millenials.
