Skip to main content

Cognito Forms Two-Factor Authentication (2FA)

Brief

My Role: UI/UX designer, Front End Developer
Date: Q1 2021
Tools: Figma, Visual Studio Code, Slack, Microsoft Teams
Technologies: JavaScript/Vue.js, HTML, CSS/SCSS

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

Allow users to easily enable 2FA via an eternal app, such as Google Authenticator, to make their accounts more secure.

Form entries can inherently contain sensitive information, including patient information through the HIPAA compliance feature. To better protect customer data, 2FA is a must — ensuring that data remains secure while still providing an enjoyable experience.

Users & Audience

Admins

In Cognito Forms, account admins are able to assign permissions and configure security rules for the users of their account.

Users

Users are invited to Cognito Forms via account admins.  They are able to manage forms and/or view form entries, based on the permissions assigned by the account admins.

Roles & Responsibilities

I prototyped this feature in Figma, with input from the creative director along the way, and presented it to stakeholders.  Upon approval of the prototypes, I implemented the majority of the front end, utilizing Vue.js, alongside a team of 4 other developers.

Scope & Constraints

2FA was deemed to have a high business value by the product managers, which resulted in a desire for a quick turnaround on this feature.  We collaborated efficiently through the height of the COVID-19 pandemic, 100% remotely, to quickly prototype, refine, and implement 2FA.

Design Process

  1. Conduct stakeholder interviews to narrow down the scope of this feature.
  2. Wireframing & UI/Visual Design
  3. Conduct usability testing
  4. Iterate on the prototypes, taking into account usability testing and stakeholder feedback.

Usability Testing

The creative director and I conducted usability testing, which brought to light a glaring issue in which users were closing the setup dialog before completely enabling 2FA.

The creative director and I brainstormed and put together a list of proposed improvements based on the usability testing.  The most notable change was the addition of an experience that notifies users if they attempt to leave the setup process prematurely.

Outcome

Through powerful collaboration and by utilizing all of our resources, including stakeholder interviews and usability testing, we were able to successfully achieve our goal of quickly delivering a high value feature to our customers.

Takeaways

Making experiences frictionless, but also creating clear boundaries for users was a fun hurdle to jump over. With customers needing to interact with an external app to generate the 2FA codes, there were plenty of areas for this feature to confuse.  Keeping it simple in one step, and making it hard for customers to lose their progress, were great learning moments for me.

This feature was a blast and I thoroughly enjoyed being a part of its creation.