Overview
For the mBank login redesign project, my overarching aim was to make the web login experience easier, while also ensuring security and efficiency. I conducted a thorough analysis of the existing login process, as well as competitor analysis and a review of existing research and case studies on authentication methods. Additionally, I took into account the legal requirements of the PSD2 regulation to ensure a realistic implementation of the redesign. The result was a carefully crafted login flow that improved both the user experience and the security of the system.
Expertise
UX Research, UI Design
Platforms
Web, iOS, Android
Year
2022
Duration
1 month
Software used
UXPin, Figma
See it live
TL;DR
The project involved a redesign of mBank's web login process, incorporating QR code-based authentication and mobile approval. The process also utilized mBank's large design system library to pick appropriate components and color schemes for the redesigned flow. The new login process was well-received by customers in pilot tests and was compliant with security requirements. Competitor analysis revealed a tedious and time-consuming login process for most banks in Poland, making mBank's new login process a more convenient and secure alternative.
Integrated
Seamlessly integrated, making it effortless to access web login through the mobile app
Instantaneous
Instant login notifications and authentication prompts that make logging in quick and easy
Secure
Continuous QR code regeneration kept the system one step ahead of phishing attackers, ensuring a high level of security.
Convenient
Instead of requiring users to enter long and complicated login credentials, the new login used biometric authentication.
About the client
During my time working with mBank, I came to understand that the bank caters to all age groups of users, from young adults to senior citizens, and to customers across all income ranges. With over 6 million customers, mBank is one of the fastest growing banks in Poland. It offers a diverse range of account types, including private, investment, and company banking, to suit the unique financial needs of each customer. As a leading financial institution in Poland, mBank is committed to providing innovative solutions and exceptional customer service to its customers.
Rapid Growth
With over 6 million customers and growing, mBank presents a unique opportunity to test and improve the banking experience for a diverse range of customers in Poland.
Range of services
mBank's diverse range of account types, including private, investment, and company banking, reflects its commitment to catering to the unique financial needs of each customer.
Targeting All
mBank's customer-centric approach caters to all age groups and income ranges, including young adults, senior citizens, and everyone in between. A redesign of the login process could potentially improve the user experience and accessibility for all customers, regardless of age or income.
Process
In order to design a new and improved login process for mBank's web banking portal, I undertook a multi-step process. Firstly, I analyzed the internal data of mBank's users to gain insights into their preferences and behaviors. Secondly, I reviewed the Payment Services Directive and its technical requirements to ensure compliance with industry standards. Thirdly, I researched competitors and existing market solutions in the banking industry and beyond. Additionally, I conducted a literature review, looking into case studies and usability analysis. Finally, I ideated and brought the ideas to reality by using mBank's design system to create a seamless and user-friendly login experience.
process visualisation
Internal data
While working on the project, I analysed the internal data of mBank users to gain insight into their interactions with the web portal. Through my interactions with the team, I learned that there are three main types of users at mBank: mobile-only, desktop-only and those who use both platforms. However, a key insight was that the bank is most interested in users who use both platforms, as they tend to use the platform more frequently and generate more profit for the bank. Therefore, the main objective of the project was to convert single-platform users into users open to trying other mBank platforms, while improving the overall user experience.
mbank user groups
PSD2 requirements
The PSD2 regulation requires strong customer authentication using two of the following factors: something you know, something you own, and something you are. Incorporating these factors into the login process was a top priority while making it sleeker, faster, and user-friendly, while meeting the regulation's standards. The challenge was to balance security and usability without compromising the user experience.
PSD 2 infograph
Literature review
I began my literature review by examining the paper titled "The quest to replace passwords: a framework for comparative evaluation of Web authentication schemes” by students from the University of Cambridge. They found that despite numerous proposals over two decades, no known authentication scheme has been able to provide all the desired benefits of password authentication. Even the existing schemes do not retain the full set of benefits provided by legacy passwords. This emphasizes the difficulty of replacing passwords and highlights the need for a comprehensive evaluation framework.
TABLE I from "The quest to replace passwords: a framework for comparative evaluation of Web authentication schemes"
After reviewing the paper from the University of Cambridge, I delved into other comparative security analysis papers such as "Evaluating the Android Security Key Scheme," as well as case studies from companies like Google, who internally tested strong authentication methods such as hardware authentication keys. While these studies have highlighted the superior security characteristics of hardware keys, it was not feasible for mBank to implement such a method due to its cost and inconvenience for users to carry around a physical device.
Table 1 from "Evaluating the Android Security Key Scheme: An Early Usability, Deployability, Security Evaluation with Comparative Analysis"
Time to authenticate from "A Google Case Study Strong authentication for employees and consumers"
Second factor support incidents from "A Google Case Study Strong authentication for employees and consumers"
Competitor analysis
During the process of redesigning mBank's login flow, I conducted a comprehensive competitor analysis by benchmarking the login flows of the 10 largest banks in Poland. To my surprise, I found that the login process across banks was almost identical. This made it easy for Polish customers who frequently switch banks or use several banks to log in, as the process was fairly standardized. However, I also found that the process was tedious and time-consuming, which could discourage mobile-only users from trying the web login. This made it clear that there was a significant opportunity to differentiate mBank's login process and make it more user-friendly, while still maintaining the necessary security measures.
Banking systems
QR Codes as login
During my research for alternative login methods, I came across QR codes. While already widely used in Asian markets on apps like WeChat or QQ Mail, QR code login has also seen growth in the Western market, with social media platforms using it as an authentication method. QR codes offer a more convenient and secure way to authenticate users compared to OTPs.
QR Code login on the web
Ideation
After conducting extensive research and analysing customer data, I began the ideation process to synthesise the findings into a new login method. Given the limitations of existing authentication schemes, I explored QR code-based login as a potential solution. This would involve displaying a QR code on the web version of the platform, and users would scan and confirm their login using an app on their mobile device. This approach takes advantage of biometric authentication and eliminates the need for hardware keys, while still ensuring compliance with regulatory requirements.
Design System
To ensure consistency and alignment with the mBank brand, I used the company's extensive library of design systems. This allowed me to select appropriate components and colour schemes for the redesigned web login flow. The design system provided a wide range of reusable UI components, such as buttons, input fields and icons, which helped me create a cohesive and visually appealing login experience. In addition, the design system's typography, spacing and layout guidelines ensured that the new login flow was consistent with mBank's existing design standards.
input field
button
button
keypad
selector
input field
text button
icon button
icon button
icon button
app bar
web login
system progress - modal window
mobile authentication
deep link QR codes
Summary
The mBank login process redesign case study aimed to improve security and convenience for users by exploring alternative login methods and utilising the bank's design system library. The proposed concept included a new login screen that allowed for traditional and QR code-based login, mobile authentication for easy approval or rejection of logins, and deep links that took the user to the app login. The concept was well received by customers in pilot tests, and the security team confirmed that it met the necessary security requirements. Overall, the redesign achieved its goals of enhancing security while improving the user experience.
