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


image.png

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.
image.png
Authentication Flow
Clients are asked to authenticate periodically, they must authenticate with an enrolled method before adding a new one.

image.png


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
Mobile page, passcode entry screen with an informational alert displaying how the code was sent and who it was sent to. Options to resend a passcode, go back, or get help.
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
image.png

Authenticate to Edit
image.png
Edit Authentication Methods
image.png


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.

image.png




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

image.png
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

image.png
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.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.