Two-Factor Authentication (2FA) is a security process that provides two different ways to authenticate to a specific service. It has become a standard security feature for the vast majority of online services. In general, the first factor to authenticate is by using a username or email address and a password. The second factor is often code sent through text message, automated phone call or with the use of a software-based authenticator like Google Authenticator. When it comes to the different options for the second factor, a mobile phone with internet access is necessary. The basic idea behind the two-factor authentication is if a username and password get leaked or stolen, access to the mobile phone would still be required to access the account.
In this article, we will show examples and tips on how to design a great two-factor authentication user flow, the different user experience (UX) and user interface (UI) strategies to use. We will also show the complete user journey to enable the two-factor authentication on the popular CRM HubSpot. In addition to the HubSpot’s user flow, you can access more annotated videos of two-factor authentication user flows from well-known apps like Dropbox, MailChimp, Evernote and Zendesk.
How to design a two-factor authentication process
The two-factor authentication is always set up once the user is signed up, not while signing up. Unless specific cases, two-factor authentication is always optional. The specific cases refer to high security or government applications. In general, the two-factor authentication options are listed in the user/profile preference of an app. For some apps with more options, like HubSpot for example, the two-factor authentication options are listed in the security section.
HubSpot’s Two-Factor Authentication (2FA) User Flow
From all the different user flows tested, we choose HubSpot because their user interface and experience is on point. It was clear and easy to set up, in other words, a flawless experience.
Profile & Preferences: Security
The first step to enable two-factor authentication is to visit the Profile & Preferences section. It’s usually the place where the user-specific settings are located.
The Security Section
The security section is the perfect location for the two-factor authentication options. It’s also the section where a user can reset their password and log out of all sessions. Once the user clicks on Set up primary method, the setup process starts.
Verification Method
The method defines how the user will receive the access code from HubSpot to continue their sign in. In the case of HubSpot, the two options are Google Authenticator and SMS (text message). Other websites offer the phone call option where an automated system calls the number on file and read a 6-digit code. In the case of HubSpot, they added the word recommended next to Google Authenticator and selected that option by default. The goal of this article is not to advise on which method is the best but we can help a bit on this topic. The main reason to recommend Google Authenticator is that it can be accessed with wifi while SMS would require a phone/voice plan. In some cases, like travelling abroad, wifi is the only option. Notice the blurb about the app and the external links to the app stores.
Different Verification Method
The blurb at the bottom changes depending on which method is selected. The blurb itself describes the next step for the selected verification method.
Register HubSpot
Once the method is selected, the two-factor authentication setup starts. Note that we selected Google Authenticator for this recording and the setup screen would be different if we selected SMS. Like any website registration in an authentication app, the first step is to scan a QR code that contains information specific to the current user and account.
Verify Google Authenticator
After users scan the QR code with their phone, the authentication app will provide a 6-digit code to enter. Note the progress bar and the number of steps at the top of the page.
Backup Verification Codes
The backup verification codes are essential in case a user loses the mobile phone used to set up the two-factor authentication. The designers at HubSpot added two buttons to print the verification codes or download a PDF version.
Generate New Codes
There is also a link to generate new codes. Note that the Next button is inactive at this point. To make the Next button active, the user has to click on either Print or Download. It tells HubSpot that the user took the necessary measure to save their verification codes, by printing them or saving them.
Verified
Once users click on Next, they land on the final page of the setup process. At this point, nothing has to be done anymore and the setup is complete. Note the Done button at the bottom right of the page.
Back to Profile & Preferences
The two-factor authentication setup is now complete. The setup button is now a Turn off button with the verification method indicated just below it. Note the Secondary Verification option below. The second verification is the remaining method that was not used in the primary setup. In this case, it would be the SMS method.
Turn Off Notification Popup
When the user clicks the turn off button, a popup shows up to make sure it was not a mistake.
Back to the Beginning
Now that the user turned off the primary verification, the security section is back as it was before.
Design (UX & UI) Tip 1
Divide the two-factor authentication into simple and clear steps. One action per step. HubSpot made a different step for each action, even if it takes only one mouse click to complete.
Design (UX & UI) Tip 2
Make sure to explain each step and keep in mind that not everybody has the same technical knowledge. For example, HubSpot added a description of Google Authenticator when the user would choose that option.
Please note, for security reasons, this testing account was disabled and deleted.
Discover more with SaaS Websites Pro
If you are interested in learning how some of the biggest SaaS companies and web apps have built their two-factor authentication user flow, we invite you to join SaaS Websites Pro. SaaS Websites Pro is a library of hundreds of annotated user flow videos.
