At Duo Security, we believe that systems can only be as secure as they are usable. Introduce a complicated password policy and people will start writing down their passwords on post-its or in text files, instantly negating any positive effects. The world needs a better way of securing access, one that respects the time and attention of the people that use it every day. Like most technology, the perfect authentication system is invisible.
With this as a design goal, we worked to create an online service that businesses deploy to strengthen security. Their employees use our mobile app (or any phone with SMS) to prove their identities, reducing reliance on the password.
I’ve been at Duo Security for 4 years, and have worked on a wide range of projects. Many components started out as MVPs (minimum viable products) when we had between 5 and 10 employees (I was #5). Most have matured into 2.0 versions as we’ve grown (there are close to 100 Duonauts now!), introduced new features, streamlined workflows, increased conversion rates, learned from user testing, and had conversations with customers.
I’m proud to have led design for a product used every day by thousands of employees at Facebook, Tumblr, Box, Etsy, Yelp, and many more.
“I haven’t gotten a single complaint about it. Our overall experience with Duo has been extremely easy — that’s not something that always happens in the technology world.”
– Tristan Hammond, IT Infrastructure Manager at Threadless
Our mobile app started out very simply: it handled one account. The main screen showed a passcode, and the second “Duo Push” tab was used to respond to incoming login requests. The most common way of launching the app was (and still is) from a push notification sent from our server when the user is attempting to log in.
For example, to protect an SSH session:
Here are a few flowcharts I put together to explain how the first version of the app should function.
And other flow for what the user sees (click for full-size). I wanted to remind people that the loading screens are important.
We eventually added support for multiple accounts to Duo Mobile. This was a big win for us because it meant people could sign up for a personal account of our service (for free) and try it out for a while on their home servers. Then they could sign up for a second account and introduce the technology to their company. Specifically designing for this kind of behavior turned out to be the right choice.
We needed a way of showing the passcodes in a larger typeface. I sketched some possibilities and shared it with the team. I’ve learned that presenting people with options can increase participation in the design phase, and leads to more “UX thinking” in the organization as a whole.
People liked option B and that’s what we use today.
A promo mockup for the website:
More options, this time for the welcome screen. I take a lot of screenshots while a I work, so I can see the evolution of an idea.
The 2.0 version of Duo Mobile opted for a lighter look, and removed the “Duo Push” tab. Since most of the time users are launching from a notification on the lock screen, a separate tab. We also added custom branding; an admin uploads their logo using our admin interface, and then it appears in the app during authentication, which is a nice touch that people seem to enjoy.
Since then, we’ve updated the look and feel for iOS 7, removed the “Duo Push” refresh button in favor of pull to refresh, and streamlined the “Add Account” workflow. Here’s the newest version of the “Login Request” screen, that users see every time they authenticate with Duo:
“The thing that I personally love about Duo is, the interface is absolutely slick. You just can’t beat the fact that it’s one touch, one button, one press.”
– Paul Pieralde, Principal Product Security Engineer at Eventbrite
Deploying Duo is fast and easy, partially thanks to the fact that users register their own accounts when they log in for the first time. We call this “enrollment”, and it includes downloading a free app and then scanning a barcode to link the app to their corporate account. This is the way most people experience Duo for the first time, so it’s important that the process is smooth and handles edge cases (no smartphone, SMS disabled, etc.) well.
Enrollment started simple and worked very well for our first 100 customers. It was mostly text and standard controls, but wasn’t very friendly and didn’t have a lot of character.
The enrollment module has some interesting design constraints: most of the time it’s included in another page, using an iframe (iFrame? IFRAME?). This improves the login experience because people aren’t bounced to another website or prompted with a popup. But it means that we have limited space to design in.
We redesigned the enrollment experience to update its look and feel, but also to add a few new features and address some of its shortcomings.
Here’s an early draft of “New Enrollment” as seen when logging into a Juniper VPN:
The final version is branded, and uses color more effectively. It also uses screenshots to communicate what the user should be seeing at this point in the process.
Wizard interfaces get a bad rap, but they make sense in some situations. In this case, we don’t know what information to provide or what questions to ask until the user has told us what type of device they’re trying to enroll, what type of smartphone they have, etc.
Enrollment workflow, diagrammed using a weird font. This diagram helped me be on the same page with our development team as we built this component.
Finally, we were able to re-use the design patterns for a user-facing “Device Management” feature. Having a solid framework allowed us to quickly build a new interface without doing a lot of in-depth design work.
Quick enrollment success story: Yelp was able to enroll more than 1,000 employees within 24 hours without a single call to their help desk!
“We were incredibly blown away at how our deployment went … this was the easiest deployment we’ve ever done. I’m really impressed.”
– Ivan Leichtling, Security Manager at Yelp
Signup, Setup, and Administration
Finally, here’s one of the “experience prototypes” I’ve put together while at Duo. The point of an experience prototype is not to show final mockups or polished design, but to communicate the idea of a product from the eyes of the person who might one day use it. I shoot them in one take so they’re rough, but that’s often perfect for internal deliverables.