Passkeys

Seamless sign-in across Shopify surfaces

About the Project

In October 2022 Apple rolled out its passkey option with the release of iOS 16. This presented us with a unique opportunity to reduce sign-in friction across all Shopify surfaces (Checkout, the Shop app, Sign in with Shop surfaces, etc.).

Passkeys replace traditional passwords with cryptographic key pairs and allow users to verify their identity using biometrics, a PIN, or a finger-drawn pattern. For Shopify this reduces friction by replacing the 6 digit code required for authentication.

Passkeys are saved to password managers (e.g. iCloud Keychain on iOS devices) and so only one passkey is needed to sign into multiple devices (when those devices are connected to the same password manager). 
Our success criteria for this project was around the adoption and use of passkeys across Shopify surfaces.

My Role

Interaction, Visual Design, Prototyping

Team

Team: 8 developers, 1 Product manager (for last 2 months)

Date

Nov 2022 - Apr 2023

Gathering Insights

This project was unique in that we were working with technology that had just recently been released and we would be one of the first companies to adopt it. I started by learning about how passkeys worked by going through online publications. I also connected with the developers to better understand any technical limitations and to understand the implications of those on my designs.

Insights

During this initial research phase, I concluded that two key areas I would need to focus on were:

Solutions

Our project was split into multiple milestones:

  1. Milestone 1: Allow users to create a passkey in account settings (web and Shop app).
  2. Milestone 2: Allow users to sign in with passkeys across Shopify surfaces.
  3. Milestone 3: Increase the adoption of passkeys by prompting buyers on different surfaces. We knew that with Milestone 1 passkey creation in account settings was relatively hidden.

Milestone 1: Allow users to create a passkey in account settings

We added the ability for a user to create a passkey on the settings page on shop.app (web) and the settings page on the Shop app (mobile). To increase the chances of passkey adoption, we determined that we would be best to frame the passkey technology around what users were already familiar with (i.e FaceID, TouchID etc.).

Passkey creation in shop.app (web)

Users can create and manage passkeys from their Shop account on web.

Passkey creation in the Shop app

Users can create and manage passkeys from their account settings on the Shop app.

Milestone 2: Allow users to sign in with passkeys across Shopify surfaces

To allow users to sign in using a passkey, we initially explored using Conditional UI which would prompt a user to sign in with a passkey if they had one, and would not prompt users without a passkey. To ensure a seamless sign in experience, we knew we needed to ensure that we did not create a disruption for users who did not have a passkey. With Conditional UI we realized that not only was it not working on certain browsers, but it created a negative experience for users who did not have a passkey. Instead, we pivoted to an alternative solution where we would have an explicit passkey button.

We implemented the ability to sign in with a passkey on numerous surfaces: shop.app (web), the Shop app (mobile), Sign in with Shop surfaces (Customer Accounts, Lead Capture and Follow on Shop) and Shop Pay Checkout.

Sign in with Shop surfaces

The Sign in with Shop surfaces include Customer Accounts (shown), Lead Capture and Follow on Shop.

They allow merchants ways to simplify sign in, create value for customers through saved discounts and special offers, and result in quicker checkout and boosted conversion rates.

Passkeys amplify their impact by making the sign in experience more seamless.

Shop Pay checkout

Adding passkey sign-in to Shop Pay checkout further streamlines the experience. Instead of a buyer needing to input a 6 digit code, they can now use Face ID to seamlessly sign in.

Milestone 3: Increase passkey adoption

In milestones 1 and 2, passkey authentication usage was added to all Shop sign in flows, but enrollment and management of passkeys was possible only in shop.app and the Shop app in the account settings view. In milestone 3 we wanted to drive adoption of passkeys on more surfaces (being aware and careful not to disrupt shopping flows) and make passkey enrollment easier for more Shop users.

Account tab prompt

We added a red badge and a banner to the Account tab which prompted buyers to add a passkey.

Shop Home Feed prompt

We conducted an experiment by adding a prompt to the Home Feed when a buyer opens the Shop app. This performed 3x better than the Account tab badge and banner.

Results

Our two primary goals with this project were to gain adoption and usage of passkeys. With milestones 1 and 2 we were able to get some adoption and usage of passkeys, but the work in milestone 3 was most impactful for getting significant adoption and subsequent usage. During my time with the project we had reached 2 Million passkeys created and 10% of Shop Pay checkouts completed with buyers having signed in using a passkey, and these numbers were continuing to go up.

2M
Passkeys created
10%
Shop Pay checkouts completed with a passkey
Next Project: Digital Grading