M24 app — Login to Dashboard Flow UX/UI Case Study
About Montepio’s Bank
Montepio’s Bank business focuses on retail intermediation, by raising funds from small and medium savings customers and granting credit to individuals, micro-companies, SMEs, sole proprietors and third sector institutions.
Case Study Scenario
“Hello, I am the CEO of Montepio, our internet banking APP is considered one of the best in the market. But … not everything is good. I know that our app has problems and that its appearance, although pleasant, is not consensual nor does it have that WOW effect. Our customers still don’t use the app as we would like, and in the near future we want to abandon online banking for cost containment. There are some customers who complain in the app store and leave unpleasant comments. The login and dashboard are the gateway to the bank and I think they are not quite at the level of usability, as they do not correspond to the needs of users and what they do in their day-to-day. In this way, I would like to count on your proposal to solve our problems. I would like you to submit a proposal for login, Dashboard and a payment for services and how you suggest solving the problems found by you.”
App Analysis & User Interviews
To start this challenge, I analysed images of the application that I received and installed the app on my phone to be able to test myself and with real users (in this case my housemates — 3 users).
1. The image background follows an older UI trend. Currently, the trend follows much more solid colors. In analysis, competing app’s follow the trend of flat backgrounds with solid colors.
2. This type of content is too small. A good practice is to insert this type of content between the splash screen and the login screen in slide sequence.
3. The Footer Menu contains icons without any label that helps to identify the action and / or content that each one represents.
1. There is no arrow to go back if the user is mistaken and click on “Sign in” instead of clicking on “Open account”.
2. The user does not have an option to define a new PIN if he forgets the current one.
3. In this case, users did not understand at first that it was a link. This is because at first glance, it looked just like a label, compared to the other buttons because it has no clickable aspect. My recommendation would be to use an underlined and / or just keep this button with the text “Safety Tips”
1. In this section I noticed that the user thought that the section was disabled. Perhaps using a darker color so as not to look like such a disabled state.
This section can also be better when you have more operations with the possibility of dragging to choose the desired operation. So there is not so much need to go to the hamburger menu.
1. There is no arrow to go back if the user is mistaken and click on “Sign in” instead of clicking on “Open account”.
2. Here, an “X” icon shows the user more easily that he can close the menu.
Definitions and Solutions
After all the research, the following improvements are concluded:
- Redesign the entire login flow with new visual elements in the interface.
- Improve the usability of all pain points found previously.
Sketches and Wireframes
Definition step of positioning elements, navigation flow and functionalities, as well as, validating ideas that appeared during research.
UI Design
You can see the final result designed after the wireframes.
Thank you for reading :D Feel free to give me your feedback ^^
You can also see this work on my Behance :)
