Improving security key understanding

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. Team Katherine aimed to increase the use of phishing-resistant authentication methods such as face/touch unlock, government employee IDs (PIV/CAC), and security keys, as a primary goal for 2024.

As of November 2023, only 12% of active users employed phishing-resistant methods, with 78% relying on phishable SMS. By February 2024, just 66% of security key users successfully authenticated within two weeks. Enhancing the adoption of phishing-resistant multi-factor authentication (MFA) depends on creating a seamless and user-friendly experience for security key integration.

The Challenge

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

1. 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 sign in process — from authenticating to troubleshooting — created a frustrating user experience for many people, especially those with cognitive disabilities.


2. 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 tickets mixed in due to shared systems messaging.


3. Various codes (256 tickets, ~20%): Login.gov has a slew 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.

Issues with 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 technical 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.

Outcomes & Impacts

Following the initial implementation, we looked at trends for the security key setup page following our content changes throughout April 2024. What I read here is:

1. The conversion rate noticeably decreases, because the content effectively communicates that most users are not eligible for setting up a security key.


2. The overall success rate increases, because 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.

– Andrew Duthie, Lead Software Engineer

Design & Content Revisions

Following the initial success, I had also proposed larger design and content changes to the page since there was an additional opportunity to use our process list to break down the steps (example below in our authentication app setup page). I thought we could also utilize 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.

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

Outcomes & Impacts

Following implementation of the second design there was a 50% improvement in the success rate in just one day. – Charles Hazen, Product Manager