2 Factor Authentication
CloudAdvisors had a normal password based login. Passwords alone are not always sufficient to protect user accounts. They can be easily compromised through techniques like phishing, brute force attacks, or password reuse.
2FA adds an additional layer of security by requiring a second factor (such as a code sent via email) to verify the user's identity, making it much harder for unauthorized individuals to gain access.
The challenge
Designing a better experience for signing in is not as easy as it may seem. You want to make the process beautiful, intuitive and fast for your users, but you also need to make the process difficult and slow for non-users (hackers, thieves, and other assorted bad people).
My role
I was responsible for this project from end to end. I managed the project from the kickoff meeting to the launch and through multiple rounds of iterations afterward. I was supported by 2 developers and an internal stakeholder.
Phase 1
Discovery
Secondary research
Secondary research on two-factor authentication (2FA) was mostly gathering information from existing sources such as websites, applications, expert opinions and articles. Here's a summary of what secondary research revealed about 2FA.
1. Effectiveness: Studies and articles highlight the effectiveness of 2FA in preventing unauthorized access to accounts. Research include data analysis demonstrating how 2FA reduces the risk of account compromise compared to relying solely on passwords.
2. Implementation Best Practices: Understand best practices for implementing 2FA in contexts of web applications.This research could include recommendations for selecting appropriate authentication methods, integrating 2FA into existing systems, and addressing usability challenges.
3. User Experience: Secondary research revealed the user experience implications of 2FA, including usability challenges, user preferences for authentication methods, and strategies for improving the usability of 2FA systems while maintaining security.
Feedback from users
One of the most important reasons for bringing in 2FA was the fact that our customers were giving us their data and had the moral and legal obligation to protect it from external threats.
Moreover the organisation is in a growing stage and we had a lot of customers who insisted on having multiple layers of security.
Phase 2
Ideation
The idea was to create a simple flow that anyone can use.
New userflow
Phase 3
Design
Wireframes
Consideration to our user group
The design was formed keeping in mind that our user group consisted of mostly users in the age group 50 years and above. So it was very important that the design is simple.
Failure is not an option
Our website is used by the customers to perform their day to day jobs and any inconvenience to login will have financial implications. Hence failure was not an option.
Wireframes were created based on the user flows. These underwent iterations based on feedbacks from stakeholders, internal users and development team to identify potential issues and challenges early, saving time and resources by addressing them before visual design and development.
The visual design were created to be pleasing which would create a positive first impression, encouraging users to stay on the site longer in addition to enhance credibility and trustworthiness.
The website was now consistent with clear and visually appealing layouts that help users find information quickly and efficiently. The intuitive designs made navigation easier, improving the overall user experience.
Visual Design
There was a security breach with the current design.
When an error scenario comes up and we were letting the users know by telling them exactly which one (username or password) is invalid.
However, this is not secure. It makes it easier for bad guys (hackers) to get access to account and do malicious things using these informations.
So I had to change the error messages and move the error messages to the top.
Iterations
The developed website then underwent Quality Assurance Test to ensure that the designed version and the developed versions were matching.
Quality Assurance Test
The completed designs and deliverables were given to the engineering team for development.