In late 2014, we started thinking about how to optimize the signup process to extract the most value from our current signup volume.
Previously, admins would
Here's what the path to using Duo Push, along with the number of signups that got to each stage. For every 100 signups, only 53 got to the step where they were able to try Duo Push ():
My proposal was to allow administrators to activate Duo Push for their admini
Now in active use by over 100,000 people, Duo Mobile went through several iterations before arriving at the current design.
Here’s Duo Mobile 3.0, the current shipping version:
“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, Eventbrite
Each update was a sizeable project with its own goals and process — this writeup describes the highlights from each.
Duo Mobile 1.0 was created as a minimum viable product, and was the first app ever to use push notifications as a way of confirming user identity. It only supported one account. Here’s the flow diagram I created to faciliate conversation with our developers:
And the flow from a user’s perspective, to show that all of these screens together make up the user experience of approving a login request:
For the second major version of Duo Mobile, we added support for multiple accounts. This was important because we noticed that many administrators were signing up for a personal account to try us out. When they saw how easy it was, they signed up for a second account to deploy Duo at their companies.
For version 3, we redesigned to match iOS 7’s updated human interface guidelines, and made several UX improvements at the same time. For example, on the login request screen:
What I’ve Learned
I’ve learned a lot about mobile design over the past 5 years at Duo. Specifically:
Know the HIG. iOS and Android have their own human interface guidelines, which describe both general attitudes and specific design patterns. Understanding the recommended practices for each platform helps create a product that fits with the device and ecosystem that it’s a part of.
Create flow diagrams. They’re useful for understanding how the app’s many screens fit together, which can help expose corner cases and issues with the app’s information architecture. They’re also good communication tools — creating deliverables that helps build consensus is always smart.
Remember loading screens and transitions. Smartphones are often on slow or unreliable data networks, which can lead to inconsistent load times. Nobdy wants to wait for 3 seconds with no indication that something is happening. A good transition can improve perceived speed, and even add some delight to the interaction.
Deploying Duo to an organization is quick and seamless, partially thanks to "Enrollment" — the system that lets users register their own accounts when they log in for the first time.
The process 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 gracefully (SMS disabled, user doesn’t have a smartphone, etc.).
We tested with real users throughout the design and development process, making sure to always test with people who didn’t have any prior experience with Duo.
In the end, we knew this project was successful when we heard customers like Yelp talk about enrolling thousands of users within 24 hours without a single call to their helpdesk:
“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, Yelp
Enrollment started as simple MVP and actually 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. 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.
Basic flow diagram, mainly used to communicate with our development team:
Here’s an early mockup of “New Enrollment” as seen when logging into a Juniper VPN:
The final version is much simpler, more polished, and makes good use of color. It also uses screenshots to communicate what the user should be seeing at this point in the process.
It can be hard to schedule user tests on a regular basis, especially with a small UX team. Fortunately, enrollment is a public component and its target audience is just about anyone on the internet with a smartphone. That meant we could use a service like UserTesting.com to quickly kick off tests and then have results back — complete with videos and voice annotations — in just a couple hours. We found a number of bugs and edge cases this way, including several we would have never found had we only tested internally (or not tested at all!).
I have learned that user testing early and often is much better than a single testing phase, and that keeping tests simple and inexpensive will help ensure that they happen throughout the process.
Tasked with exploring new ways of browsing the University of Michigan’s massive movie collection, I drew inspiration from traditional library browsing methods.
Books are often shelved with similar titles — grouped by either author or topic, for example — which can lead to serendipitous discoveries. What if this could happen across multiple dimensions at the same time?
FilmGrid is an interactive prototype that I created to explore this idea further.
How It Works
The movie in the middle is highlighted, and its information is shown in a sidebar on the right. The movies to its left and right are in the same genre, and the movies above and below were released in the same year. The grid is browseable with simple left/right/up/down actions. Here's a short video that shows how it works:
In the future, this could be extended to support other categories on the x and/or y axes — director or lead actor/actress, for example.
I started with some sketching and then used Keynote to make a simple clickable PDF prototype (click the white arrows to jump between screens).
I then realized that I needed real data to properly prototype and validate the idea. I found that themoviedb.org has a great API, and went from there.
The prototype isn’t optimized for startup performance, so unfortunately it takes a while to load all the data. Once it loads, use the arrow keys to browse the grid. You can also click a movie to jump right to it.
“[Tom’s] execution sets this submission apart, as his visualization doesn’t try to encompass everything, but tells a clear, specific story around how Firefox usage times vary across age groups.”
–Christopher Jung, Mozilla
I used SQL to grab all the STARTUP, ACTIVATE, SHUTDOWN, and INACTIVE events from the ~4,000 users that filled out the survey. Then I plotted the STARTUP events for each age group using R.
It’s clear that different age groups act differently, and that there’s a difference between daytime and nighttime behavior. But only looking at STARTUP events doesn’t tell the whole story. So I wrote a Python script that computed how many users in each age group were online every ten minutes. I plotted that data, and used LOESS for smoothing.
This shows a much clearer picture of who’s actually using Firefox throughout the week.
Code and images licensed under Creative Commons Attribution-ShareAlike 3.0.
Other Duo Work
Here’s one of the “experience prototypes” I 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.
App design and microsite design+development for X-Ray app.