top of page
Keeper Security - Credential Manager

An intuitive system for saving, logging in with, and managing passkeys

Product Design | Browser Extension | Web App | Mobile | Design System | Accessibility | Project Management

Save Passkey.png

My Role

Primary Designer
Project Mangement
Testing and QA

Collaborators

Product Manager
1 Engineer /platform
1 QA person /platform

Duration

Design: 2 months
QA: 2 months
Overall: 8 months

Releases

August 12, 2023

Overview

Passkeys are a new credential backed by Apple, Google, and Microsoft that are more secure and easier to use than passwords and will ideally replace passwords in the near future. Because passkeys rely on a credential managers to work it is essential that they integrate with Keeper and that we would be part of leading the way in this space. The goal was to incorporate passkeys into our apps allowing our users to store, use and manage their passkeys with ease. Passkey were so new at the time and relatively uncharted and minimally documented. This project took a lot of research and iterating to really create new experiences that should feel easy and familiar. For the first phase, we focused on saving and using passkeys through Keepers browser extension, and being able to view and manage the credentials across all platforms.

How might we support people saving passkeys?

We identified 3 important scenarios for saving passkeys. Creating completely new passkeys and records is relatively simple while updating existing records or overwriting existing passkeys required a lot more though and iterations to be flexible, powerful, and easy to use. One big decisions that we made was not to allowing saving multiple passkeys for the same account. This required much iterating through scenarios and ultimately makes managing passkeys much easier and less confusing with only one passkey per account per record.

Save Passkey.jpg

Saving a new passkeys
If there is no record matching the user name and website of the passkey, the default is to create a new login record with a passkey.

Add Passkey to Record.jpg

Adding to existing records
If matching records exists, the best match is suggested as the record to be overwritten with the option to select a different record or creating new.

Updated Exsiting Passkey.jpg

Overwriting a passkey
Even though we do not allow creating more than one passkey for the same account, we made sure to account for deleting a passkey from the website and then the inactive store key later.

How might we support people using passkeys to log in?

It is important to support all login scenarios from the simple single passkey to multiple passkeys for the same website, to giving users the choice to fill their passwords if they desire.

Log In with Single Passkey.jpg

Single matching passkey
When there is only one passkey for a website or a single account, the user is presented with the Use Passkey prompt on login page load or after the users chooses the passkey login option on the site.

Multiple Passkeys.jpg

Multiple matching passkeys
When there are multiple passkeys for the same website the user is shown a list of multiple passkeys with the most recently modified record preselected by default at the top.

Other Login Options.jpg

Options for filling other credentials
When a user has both passkeys and passwords for website the user is presented with their most recently modified record passkey first and the ability to choose Other Login Options.

How might we support people managing passkeys?

For phase 1 passkeys can only be saved and created using the browser extension but can be viewed and managed on any platform. Filters make searching for passkeys easier and passkeys can be added to custom record types.

Passkey Record.jpg

Viewing and Deleting
Each passkey is attached to a login record showing the date created as well as the username and relying party associated with the key and are display only while the username and website address fields of the record remain editable to preserve existing functions. This allows seamless passkey integration without negative impact to existing usability.

Passkey Filter.jpg

Searching for Passkeys
We added vault filters to me it easier to see just passkey records or to combine the filter with others for a more refined search. The passkey icon is displayed in front of the email address in record rows to easily identify which records have passkeys and which only have passwords.

Custom Passkey Record.jpg

Special Cases
Users can add passkey capabilities to custom record types. Keeper also allows converting login records into any other type. Passkeys become custom fields in record types other than login and come back as normal fields if the record is converted back.

What’s next?

As Apple and Google open their passkey system to allow third party credential managers to add passkeys registration to iOS and Android, Keeper will support passkeys on mobile. In addition to letting users store and use passkeys with Keeper, the goal is to also allow users to log in to Keeper with passkeys. This will allow for easier and more secure sign-up and sign-in for all of Keeper’s products.

Up Next

Figma - Intuitive interactions for creating more canvas space in the editor

bottom of page