Keycard 2FA OTP Generator App Login/Register Screens

It took users years to build trust and acknowledge the need for 2FA. However, this wasn't the case in the '90s since most believed that just a regular password was adequate. The world we live in today is one where hackers attempt to hack every day. Someone could hack into your Instagram account, steal credit card information, and who knows what else. As a result, people started using 2FA rapidly, although recent data shows that most of these users are still using simple passwords such as 12345, Password123, Petname123, and similar combinations. So, where is the problem?

At Keycard, we created a prototype to help users with these issues. As the app comes in two different states (Simplified and Advanced), our users can choose to do everything themselves or sit back and relax as our app rotates, mixes, generates, and twists their passwords at certain times. So, what exactly is Keycard? In the heart of the code lies a complicated system that integrates with a specific website and acts as a bubble zone so you can log into your account without a password.

During this project, my task as a product designer was to fully understand and communicate the logic and process behind everything. The images on the right only show three of the most valuable screens. First, an item selection screen. Generator of one time codes for login purposes and QR scanning feature. On the surface, it will work just like any other 2FA app (Authy, Microsoft Authenticator, Google Authenticator, etc), but under the hood / settings page, you can set up how you want to use this app.

One of the main challenges I faced as a designer was figuring out how to keep it simple enough knowing I had over 15 awesome features to incorporate into this app. In addition, the design had to be made in a way that would provide trust and reliability. However, we realized that users would mostly come into the app, read the code they need, and leave. Which is good, right? Well, our security team realized there are potential malwares that could wait and mimic certain domains in order to see security code before you and use it without you knowing it. To solve that problem we placed a button "Generate" that would trigger a code generation in a safe environment with background checks. 

During the testing phase one more thing popped out. Users would usually have more accounts on the same platform. Gmail, Slack Workspaces or other services. So, as a simple solution we just gave our users the ability to name each one of the items. From a security perspective those names would always go into the system under some sort of IDs that could not be traceable.