Over the past several months BrowserID adoption by sites both inside and outside of Mozilla has started to take off. We have received a lot of feedback from site operators, some good, some bad. Far and away the biggest complaint from site operators is that completing the new user flow in BrowserID is causing drop off in potential users converting to verified users. Because of this, our own User Researcher Mary Trombley and UX guru Crystal Beasley have made it their mission to make this experience as smooth as possible.

Mary user tested our current sign up flow with people who had never used BrowserID. The results were eye opening. Users are doing things we suspected may cause problems, but we did not realize the extent of the confusion we were witnessing.

The core problem is that users get lost once they verify their email with BrowserID. No clear indication is given for how to return to the original site being signing up to. Sometimes users close the original site, sometimes they open the verification page in a new window, sometimes they start on mobile and finish on their desktop, sometimes they do everything we expect but don't realize the original site is still open in another tab. All users see after completing the new user flow is some text that says (paraphrased) "You have finished signing up to BrowserID.... You may now close this window."


Clearly, we have to do better.

Lloyd Hilaiel came up with some initial ideas outlined in the GitHub Tracking Issue. Skinny (Crystal) took these ideas and ran. She's got UX talent. The changes she suggested were so obvious it was like "duh, how did we not think of this before?" But then again, it's easy to say that in retrospect - the process for coming up with a smooth flow is anything but smooth.

Lloyd and Skinny's initial suggestion was to use some browser trickery to get the user back to the initial site once they have completed the verification step.

If the original site is still open, we can use a window.alert to return focus to its tab. This works in Firefox, Chrome and Safari - neither Opera nor IE play nicely. Mobile browsers universally show the alert message, but fail to return the user to the correct tab.

If the original site is no longer open, we can redirect the verification tab back to the original site. Overall this offers a much better experience, but still leaves a huge hole - if we have to redirect the current tab to the original site, currently we have no way of indicating to that site that the user is now logged in. We think we have a solution to this using DOM events. I did a quick proof of concept on this last night and will post a video once something more concrete is available.

These simple changes boosted our conversion rates quite a bit. Skinny then took the flow and made it even smoother. She thought "why not enter the password inside the dialog?" Brilliant - when the user opens the verification link from their email, they have no additional work to do - all they have to do is worry about logging in.

BrowserID New User Verification Flow Experiments Screencast from Shane Tomlinson on Vimeo.

Both of these flows can be tried with right now. This is experimental work made for user testing and feedback - these flows should not even be considered alpha quality.

Flow 1 - https://feature385.myfavoritebeer.org/ - window.alert if original site is still open or redirect to original site if closed.

Flow 2 - https://feature1000.myfavoritebeer.org/ - Same as flow 1 with initial password entry inside the dialog.

Note, for these experiments we are using "hacksign.in" as our test version of "browserid.org" - you are not being hacked. Both domains are running in separate environments, so you will have to create an account on each.

I will be continue hacking on these flows over the next couple of weeks. Additional user tests will be done. We are going to keep refining until we get it right. Any and all feedback is welcomed and encouraged.

Check it out, see what you think.

Want to get involved?

We'd love to hear from you about how we can make this better!