Improving security key understanding and success

Experience

Animation

Background

Preventing phishing of Login.gov accounts is crucial to protect both partner organizations and user data, as compromised accounts can risk funds, sensitive information, and systems. Our team aimed to increase the use of phishing-resistant authentication methods like passkeys, government employee IDs, and security keys.

My Role

I leveraged UX, content, and visual design expertise to analyze and enhance the security key setup page, resulting in a 50% improvement in authentication setup success.

The Challenge

In November 2023, only 12% of active users employed phishing-resistant methods, with 78% relying on phishable SMS one-time passcodes. By February 2024, just 66% of security key users successfully authenticated within two weeks.

We sampled 1,298 support tickets between January 21, 2023 to January 20, 2024 and found three key themes:

Process issues (433 tickets, ~33%): Issues ranged from users being unfamiliar with security keys to not having access to one when signing in. This coupled with a complicated authentication process created a frustrating user experience for many people, especially those with cognitive disabilities.
Multi-factor authentication (320 tickets, ~25%): Many security key tickets seemed mislabeled as other MFAs. In particular, there was a high number of face/touch unlock (passkey) tickets mixed in due to shared systems messaging.
Various codes (256 tickets, ~20%): Login.gov has a variety of different codes, and for some users it's not clear what they are or what they do. This adds to additional confusion on top of some of the long processes users go through for account creation, identity verification, and account reset.

The original security key setup page included a vague H1: "Add your security key", which wasn't specific enough to the authentication method since all the other methods used the same language of "add x method". The paragraph below the H1 mentions FIDO standards which is not an important detail for the average user, adding to information overload.

In addition, once the user clicks "Continue" they are met with whichever passkey setup modal their browser features.

Chrome and Edge lead with a QR code, prompting users to scan it with their mobile device. The security key icon and text is diminished in these examples, adding to user confusion and making it less likely that they will be successful in setting up a security key.

Safari and Firefox fare slightly better since they give equal weight to mobile passkeys and security keys. Windows is by far the best since it focuses on solely setting up a security key.

Initial Content Updates

The first round of updates I made came in content changes throughout the setup page. This included an update to the H1: "Insert your security key into your computer's USB port" (mobile devices say "phone's port"). This update made the text more specific and actionable over the original H1: "Add your security key".

I also added a link out to the relevant help article in case users needed more guidance or information for setting up or authenticating with their security key. Updated name label and CTA copy also utilized more specific language.

Design & Content Revisions

After the first set of improvements, I felt there was an additional opportunity to use our process list to break down the steps (pictured below is our authentication app setup page). I also saw an opportunity to create an illustration or an animation to further build user understanding.

Below is my design of the updated security key setup page. I reordered and edited the content and hierarchy: enter a nickname, see an animation of how to use a security key, and finally directed users to click the "Set up security key" CTA.

Using the Figma plugin, SVG Animate, I was able to make an animation that demonstrates what a security key looks like and how to use it to authenticate. This would be the first Login.gov authentication method to feature a visual aid.

The version below illustrates how a user should insert their security key into their mobile device.

Outcomes & Impacts

Following the initial implementation, we looked at trends for the security key setup page following our content changes throughout April 2024. Andrew Duthie, our Lead Software Engineer analyzed data after a month and found the following:

The success rate increased by an average of 50%, since those who remain and choose to continue setting up the security key are more likely to have one and therefore are more likely to be successful.
The conversion rate noticeably decreases by an average of 40%, because the content effectively communicates that most users are not eligible for setting up a security key.