Explore

Account Authentication

Role: lead designer

Collaborators: product management, engineering, research, legal, information security

Project Type: new product development

Timeline: 4 months (September - December 2022)

Impact: 94% of active accounts enrolled, >2 million users

⁠

Background

⚖️ Newly introduced federal legislation required all financial institutions to implement additional security measures to protect consumers’ financial accounts 🛡️

To reduce internal resources, the company decided to leverage an authentication template offered by a third party identity provider.

The design team was engaged after contracts were signed. Our original role was to adjust the template to incorporate components that align with our brand and create a smooth authentication experience.

⁠

Problem

How might we create a secure and seamless authentication experience that meets federal guidelines without compromising user login efficacy?

Client: Keep my account information safe and easy to access via a secure and seamless authentication experience.

Business: Keep us compliant with new federal legislation with minimal to no effect on login efficacy.

⁠

Solution

Impact

>2 million clients enrolled 91% of active clients enrolled 94% of authentication attempts succeed in one session

Prototypes

Enrollment

⁠

This link can't be embedded.⁠

⁠

Clients enroll in 3 simple steps. In the absence of a progress stepper, the next step is introduced in the description.

Authentication

⁠

This link can't be embedded.⁠

⁠

Most clients have 1 method, in that case a passcode would automatically be sent to the method on file. In this example, the client has 3 different methods to choose from (text, phone, and authentication app).

⁠

Limitations

Third-Party Template

After some experimenting with the engineering team, we realized two critical usability flaws with the template we had chosen to use.

📋 Rigid page flow and components

🔗 Pages with specific actions must be used universally

📋 Rigid page flow and components

Description

Template only allowed for styling of existing components, no new assets, pages, or functionality could be supported.

Example Caption

Unable to introduce a stepper to clarify the steps of enrolling in authentication vs adding a new auth method.

⁠

Outdated Design System

The engineering team had not yet adopted our new modular design system, which caused some hesitation from certain team members who were accustomed to the old system's fixed component structure. However, after some convincing and extra effort, the introduction of modular elements greatly improved the final product's usability and aesthetic quality.

⁠

Design & Development Process

⁠

Understanding our technical limitations and anticipating lengthy legal and information security reviews, we chose to create and launch a proof of concept to a group of internal employees first.

This allowed us to...

Set up tight, controlled feedback loops where we could identify problems and iterate to polish the product

Iron out legal and security risks before rolling out to external clients

⁠

Mapping

To better understand the connections and contingencies, I mapped out the enrollment and authentication processes as dictated by the third-party template we were using.

Enrollment Flow

After signing in, clients set up an authentication method that is saved for future use.

⁠

Authentication Flow

Clients are asked to authenticate periodically, they must authenticate with an enrolled method before adding a new one.

⁠
⁠
⁠

Adding an authentication method reuses the enrollment screens, but there is no process stepper or indication that you are adding a new method. This makes it VERY easy to get lost.

⁠

Ideation

Passcode Entry

⁠

Adjusted an alert from the template as the passcode delivery notification instead of plain text. Status clearly differentiated by alert type. Not ideal, but draws attention and signals that action is necessary.

Choose Existing Method

⁠

Mobile page where clients with multiple authentication methods can choose which one to use. Option to add a new authentication method or get help.

⁠

Page must be used both to choose a method for clients with multiple authentication methods and as the first step when adding a new auth method.

Choose New Method

⁠

Mobile page where clients are asked to choose how they'd like to receive passcodes (via text or phone call). Options to go back or get help

⁠

Clients choose how they want to receive authentication passcodes.

⁠

MVP Insights

😖 Adding an authentication method is complicated

Users were confused and frustrated when adding a new authentication method, especially due to the requirement of authenticating with an existing method first.

Clients require clearer instructions and expectations for the process, but we cannot add to the existing template process.

👓 Accessibility could be improved

Users with international phone numbers can not enroll or authenticate. Vendor sending one-time passcodes did not support messages/calls to international phone numbers.

Keyboard strokes to navigate to options and buttons could be streamlined.

⁠

Improvements

Edit Authentication From Settings

We streamlined the process of adding a new authentication method by hosting an API-driven flow in a user's “Sign-In and Security" settings. This gives us control over the flow and design while using the third-party vendor's logic and protocol.

⁠

flowchart depicting process for adding a new authentication method from client's account settings

⁠

Edit authentication from settings user flow. The user has to re-authenticate to enter this space, but once they enter they can add and delete authentication methods.

Sign-In and Security Settings

⁠

Authenticate to Edit

⁠

Edit Authentication Methods

⁠

Authenticator App

We added authenticator apps as an authentication method to allow clients with international phone numbers to authenticate. We laid out the enrollment process in 3 easy steps.

⁠

What We’d Do Differently

If I could start over again, I’d push back much more after we discovered the critical flaws of the third-party template. We ended up creating our own API-driven flow anyway to allow clients to add and edit authentication methods. Had we committed to this from the beginning we would have saved a lot of time agonizing over copy and trying to bend the template to our will.