Cognito Forms Two-Factor Authentication

Password Confirmation

Before changing any 2FA settings, the user must confirm their password for extra security.

Wrong Code Error

The discrete color palette found throughout Cognito Forms allows for the usage of color to show errors.

Enter 2FA Code at Login

When logging in, users are prompted to enter the 2FA code from their authenticator app.

Setup 2FA at Login

When a user without 2FA attempts to log in to an account that requires 2FA, they are prompted to set up 2FA before logging in.

Project Overview

Role: UX designer, UI designer, Front End Developer
Date: Q1 2021
Tools: Figma, Visual Studio Code, Vue.js, Slack, Microsoft Teams

Cognito Forms is a B2B software product that enables companies and individuals to easily build powerful online forms. The forms support a huge variety of use cases through features such as payment processing and HIPAA compliance.

Problem Statement

Form entries may contain sensitive information, including patient data in compliance with HIPAA regulations. To enhance the security of customer data, the implementation of two-factor authentication (2FA) is imperative. This measure ensures the preservation of data security while maintaining a pleasant user experience.

Users should be given the option to enable 2FA using external applications like Google Authenticator, thereby strengthening the security of their accounts.

Roles & Responsibilities

I created a prototype of this feature in Figma, incorporating feedback from the creative director throughout the process. I then presented the prototypes to the stakeholders for their review and approval. Once the prototypes were approved, I worked alongside a team of four developers to implement the majority of the frontend using Vue.js.