Overview

1Password is a password manager, where millions of users keep their life’s secrets.

Logins, payment details, and sensitive personal information - these secrets that users trust to be there the moment they need it, wherever that may be: browser, iOS and Android, windows...

Problem

Native macOS autofill is not supported on 1Password...

Users don’t get the password they need on native macOS desktop apps, which means trust is broken with users. This feature was table stakes to retain trust with users.

...but it’s not easy when you don’t own the operating system!

Operating in Apple’s ecosystem means dealing with the complexities and constraints of macOS, and that means doing a lot of explorations and making a lot of tradeoffs for difficult systems problems.

Navigating the Mess

The final flows were simple, but there was a big problem hidden within.

Here as the final flows I handed off.

There was this one part of the flow that was the core of our problems, let me show you how i came to discover that problem...

I researched the password managers on macOS...

...and found 3 key players to the problem:

These products are all competing for the same space on macOS.

The problem on mac apps

Apple passwords is visually dominant over 1Password for macOS.

This is a problem for 1Password as a business since we want users to choose us over the competitor, but it's also a problem for users. Apple Passwords only works within Apple’s ecosystem. If you update a login in 1Password through Chrome, that update won’t sync to the Apple Passwords app on your Mac.

The problem on Safari

The Native macOS dropdown overlays on Safari

Since Safari is also a native app, it will have an overlay on top of the native macOS dropdown on top of the 1Password for Safari dropdown. This creates a really confusing and cluttered UI.

Exploring the problem

My mission was to bring clarity to this mess.

I went into the settings of both macOS and Safari, testing every single possible combination of settings to see what would happen. I also researched Apple's API documentation to see what was possible for 3rd party apps like 1Password.

Safari Explorations

Exploration 1: Disable macOS Autofill on Safari only

If we could disable macOS Autofill on Safari only, this would leave only the 1Password for Safari dropdown visible.

This just wasn't possible with Apple's API limitations.

Exploration 2: UI Code Fixes

If we could engineer the UI in a way to bring the 1Password for Safari dropdown to the top, this would solve the problem.

This solution would require a lot of engineering effort, and still result in a buggy and unreliable experience.

Solution: Rely on user-level decisions

We would need to guide users to turn off Safari Autofill themselves to avoid these double prompts.

I handed this off to the 1Password for Safari team!

macOS Explorations

The only workaround is to disable Apple Passwords

If we disable Apple Passwords, this would leave only the 1Password as the only option.

Solution: Instruct users to turn off Apple Passwords

Here is a flow that I designed from the settings of 1Password for macOS. In the new autofill tab, users are guided to set up macOS Autofill and instructed to turn off Apple Passwords.

Onboarding Users

Where is the entry point to setting up macOS autofill?

The key question was now how do users discover this setting? There were many possible entry points:

Entry Points

Onboarding Modals

These modals are shown to users when they first opened the 1Password app, and here we could direct users to the macOS autofill feature.

Guided Setup

Guided Setup is a series of mandatory steps for new users. Here we could have optional setup steps.

Core Product

The core product is where users land regularly in 1Password. Here we could have a many different entry points to macOS autofill.

Solution

Do More with 1Password

These are suggested setup steps for features like macOS autofill. This is a new addition to the system that I designed, recognizing that there are many other features that would be valuable to have suggestions for.

For this, I did an additional round of design exploration:

Reaching both new and existing users

New users would easily see this feature in the guided setup, and existing users would see these cards living uninstrusively in the home page of the core product.

Final Flow

Discovering & setting up macOS autofill:

Reflection

What I learned

The simplest designs hold a lot of complexity.

My job as a designer is to explore the complexity and bring simplicity to users. Elegant solutions require a lot of exploration and iteration.

Flows aren't always perfect because the tech isn't always perfect.

Technical constraints with API availability and conflicting applications were inevitable. The user flow couldn't be perfect, but we had to work with it.