Skip to content
Set up tight, controlled feedback loops where we could identify problems and iterate to polish the productIron out legal and security risks before rolling out to external clients
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.
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.
Share
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
Clients enroll in 3 simple steps. In the absence of a progress stepper, the next step is introduced in the description.
Authentication
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.
Search
📋 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...
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
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
Clients choose how they want to receive authentication passcodes.
MVP Insights
😖 Adding an authentication method is complicated
👓 Accessibility could be improved
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.
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.
Enrollment
Progress stepper with back button to free up space and focus the bottom of the screen on primary actions.
Passcode input area suggests a 6-digit passcode and would automatically submit once 6 characters are entered. Less CTAs focuses attention on passcode entry.
Authentication
Adjusting authentication methods on the passcode entry page helps minimize distractions.
Different headers and the introduction of a stepper clearly indicates which process the client is going through. The client can exit the “add new method” process at any time.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.