Industry

B2B SaaS

Client

iThemes Security

Role

Sole Product Designer, End-to-End Design

Passkeys Security - Early Adoption

30%

Reduction in login recovery emails

65%

Reduction in login time

x2

Doubled login success rate compared to the password model.

📝 Project Introduction

Our user base, primarily agencies, developers, and power users managing multiple client sites, faced a pervasive, costly security problem: the password itself.

Users and their clients were forced to use passwords every time they logged into their WordPress sites, leading to increased anxiety over potential breaches. This poor password hygiene generated a corresponding business problem: a spike in brute-force attacks and late-night sessions for our experienced users, who had to unblock authorized clients locked out by their own forgotten passwords interacting with our existing security features.

We recognized that the underlying issue was not just a lack of security features, but a critical friction point in the login process. To address this support burden and security exposure, our challenge was to integrate Passkeys, a novel security technology, into our plugin ecosystem quickly and intuitively.

Goal

The primary objective was to launch Passkeys as an early industry adopter to differentiate our product, iThemes Security, from competitors

Results

Reduced login time by 65%

Improved login security for our clients.

First to launch passkeys in the WordPress security industry.

Doubled login success rate.

30% drop in login recovery emails.

😁 My Role

Sole UX UI Product Designer, owned and led end-to-end feature launch.

Project Type

B2B SaaS Feature, Cyber Security Feature

Team Size

3 Engineers, a Project Manager, Myself (Sole Product Designer)

Tools

Figma, Maze Testing, Zoom

Context & Business Challenge

The Problem

Our users and their own user bases were forced to use their passwords every time they logged in to their WP sites. Users also experienced regular phishing and brute-force attacks due to the existing password model. This all led to increased anxiety around passwords being stolen and forgotten passwords. This has led to more password reset emails on our infrastructure and increased effort from our users to set new passwords.

Initial Ambiguity

We were unaware of what interacting with the new Passkeys technology looked like. No other company in WP Security had adopted it, and the large companies like Microsoft and Google had not yet launched their own Passkey feature.

Defining Success Early

We decided to measure success by using qualitative interviews to understand how much quicker and easier the Passkeys made logging in. We also decided to review our own infrastructure for password resets and support tickets related to security breaches stemming from phishing or brute-force attacks.

Discovery & Research (Unearthing the Opportunity)

Our Initial Hypothesis

My initial understanding of the problem mainly focused on login effectiveness. As a Security plugin, we consistently advised users to reset passwords regularly, but we often struggled to get them to follow through with that best practice. When I first discussed the idea of introducing passkeys with my Lead Developer, who was already familiar with the technology and highly supportive of it, and our Project Manager (we did not have a product owner at the time), I presented Passkeys as a solution to the recurring password reset issues our users faced.

User Research

We decided to skip extensive user research to prioritize speed to market. Our goal was to be the first WP Security plugin to introduce Passkeys. However, we still wanted to validate our assumptions and explore other ways Passkeys could benefit our users and their clients. So, we met with only five current users, discussed login security with our support team, and held additional collaboration sessions with our Lead Developer, who had a strong understanding of the subject.

I sourced a handful of users through our email list. I included a preliminary survey to ensure we were getting experienced users, since we wanted to dive deeper than the obvious improvements to login time on task. What we found validated our assumptions and made the possibility of launching Passkeys a reality for our roadmap.

Sourcing for User Interviews

I met with experienced users who mostly used our security plugin on their own sites and their clients’ sites. We met with them to better understand how their day-to-day operations were affected by login issues, both on their own site and for their clients.

Key Findings

All the experienced users I met shared a common issue. They also struggled to get their clients to reset passwords regularly, which led to late-night sessions unblocking authorized users solely because of password problems and interactions with our security features like brute force protection and the blocked users list—something we only realized after meeting with users and noticing a similar pattern in support tickets.

  • We also noticed that users didn’t use the existing two-factor feature to the level we hoped. Only two of five users used the two-factor authentication feature, leading us to assume their clients were not using it either.

  • We measured how long users took to log in to their sites. For users who had their passwords saved to a password manager, they logged in very quickly without delay, but for the users who did not have a password manager, they took on average 25 -30 seconds to log in.

The issue now stems more deeply from the security burden on experienced users (agencies, developers, power users) because of their clients' widespread password management failures and a general hesitation to adopt existing multi-factor authentication (2FA). This creates significant, time-consuming support problems for these users and increases the risk for both the client and the site.

Strategy, Ideation, & Prioritization

Defining the Scope & Vision

Vision:

Vision:

Ideally, we wanted a Passkeys feature that could compete with big companies like Google and others but didn't have a clear idea of what their experiences would look like.

Ideally, we wanted a Passkeys feature that could compete with big companies like Google and others but didn't have a clear idea of what their experiences would look like.

MVP:

MVP:

We decided to provide extensive user guidance for Passkeys registration in the MVP, since no other competitors had released Passkeys at this stage and the concept would be new to many of our million active install users. We were unsure how much it would resemble offerings from leading companies like Google, but we chose to include a comprehensive amount of guidance on the initial registration process.

We decided to provide extensive user guidance for Passkeys registration in the MVP, since no other competitors had released Passkeys at this stage and the concept would be new to many of our million active install users. We were unsure how much it would resemble offerings from leading companies like Google, but we chose to include a comprehensive amount of guidance on the initial registration process.

Trade-offs & Constraints

Regarding design, we needed to match the existing styling for the WP login screens. This imposed strict design limitations to align with users' mental models when they log in. Not only is this standard practice, but we also wanted to ensure users do not face a significantly new design or unnecessary cognitive effort when interacting with a completely new technology or feature: no logos and minimal new visuals.

User Persona

We aimed to base our designs on our primary user persona, “Cindy.”

User Flow

Before meeting with my Lead developer to discuss what they knew about the new technology and how the experience would look from a technical perspective, I researched everything I could about Passkeys and found only one existing demo from Cisco DUO that greatly helped in understanding how a user would interact with Passkeys.

Once I gained an initial understanding from Cisco’s passkeys demo, I attended several meetings with our Lead Developer to ensure my research aligned with the technical application his team expected. The Cisco demo proved to be very valuable because the flow matched the technical application that my developer anticipated.

To ensure I understood each step in the process, both when designing and across the organization, such as for junior developers, I created a user flow chart to clearly show the step-by-step process of registering and using a passkey.

Design, Testing, & Iteration

Once we had low-fidelity designs, I quickly translated a few screens to high fidelity designs for its added benefits during collaboration. I reviewed them with my lead developer to ensure they remained aligned with the technical application.

After some discussion we felt it necessary to add more instruction than what currently existed.

As I discussed earlier, we wanted to guide users through this experience, since it might be one of the first, if not the very first, experiences most of our users have with passkeys. The initial screen in the flow that we eventually improved is represented by the "how" and "why" UI shown below:

Visual Design Change Rationale

The step-by-step guide we pivoted to was designed to introduce users to and guide them through the process, even if the browser interstitial did not guide on its own. We knew users would still be able to see our guiding UI, even when the interstitial was displayed, so the UI would automatically update to show the next numbered step and hopefully offer helpful information if users were unsure of what to do next or were initially confused by a browser pop-up.

Usability Testing

Once we had a complete high-fidelity prototype, I advocated for usability testing because, again, this was uncharted territory for our product and industry. We needed to ensure these designs were intuitive and would facilitate the adoption of this new security technology.

Goal:

Goal:

The goal of these usability tests was mainly to assess how intuitive these designs were, whether users would feel confident at the end of the tests about what they just did, and if they understood what passkeys did for their login and potential clients.

The goal of these usability tests was mainly to assess how intuitive these designs were, whether users would feel confident at the end of the tests about what they just did, and if they understood what passkeys did for their login and potential clients.

30 Testers

30 Testers

52%

Percentage of participants rated the ease of use 9/10

63%

Percentage of participants said the UI was intuitive and 33% said “very intuitive”

90%

Task success rate, with a low click rate.

96%

Percentage of participants said the flow was “as expected”

User Quotes:

User Quotes:

“The design is quite easy to understand”

“Very simple and intuitive.”

“I found the language was clear.”

“Easy to understand, but too much text.”

Changes Post-Testing

After the usability tests, we incorporated some key feedback. We shortened the dense text sections but kept the rest of the design since users connected well with it and rated it as intuitive most of the time.

Results & Impact

After the launch, we saw Passkeys meet all of our set KPIs.

Using basic telemetry data, we reduced login times by 65% compared to our initial user interviews and pre-passkeys telemetry observations.

Using basic telemetry data, we reduced login times by 65% compared to our initial user interviews and pre-passkeys telemetry observations.

65%

Reduction in login time

Improved login security for our clients. We saw a reduction brute force issues with our users and their customers/clients from our support team.

Improved login security for our clients. We saw a reduction brute force issues with our users and their customers/clients from our support team.

Reduction in Brute Force-related support tickets.

We were able to reach our first launch of passkeys in the WordPress security goal.

We were able to reach our first launch of passkeys in the WordPress security goal.

First to market!

We saw the login success rate double.

We saw the login success rate double.

x2

Doubled login success rate compared to the password model.

A 30% decrease in login recovery requests from our direct users.

A 30% decrease in login recovery requests from our direct users.

30%

Reduction in login recovery emails.