687094 - Design BrowserID flows for login/registration

Status: VERIFIED FIXED

(Participation Infrastructure :: Phonebook, defect, P1)

Description

[Austin King [:ozten]]

We need to think through how to implement BrowserID on Mozillians.

This affects many pieces such as login/registration/forgot your password, etc.

Comment 1

[Austin King [:ozten]]

Attachment: A few basic options and variations

Here are a couple ideas and variations to get the conversation going...

*Anonymous Navigation* - Options 1a or 1b.
User has not authenticated yet, so we don’t know who they are.

*Option 1a*
Signin - User chooses known email address - Happy Case - redirect to homepage
Signin - User chooses unknown email - Go to either Option 2a or 2c
Join Us link - New page loads Option 2b

*Option 1b* - Simple Login, one button to rule them all
Signin - User chooses known email address - Happy Case - redirect to homepage
Signin - User chooses unknown email address - Option 2a or 2c

I think 1b could be confusing to users, but is very simple.

*Anonymous Registration* - Option 2b
Authenticated Registration - Option 2a or 2c - Here we know the user’s email address, but they aren’t in the system

*Option 2b* - Anonymous Registration - Join Us form collects Full Name, IRC Nick, etc and Prompts user to <Create Account>. Doing so starts the BrowserID login/email verification dance. There is a sidebar ‘Already a Member?’ with a Signin button like the one in the global nav

*Option 2a* - Authenticated Registration - Join Us form shows Primary Email as their BrowserID chosen email, Full Name, IRC Nick, etc and Prompts user to <Create Account>. Doing so finishes login and  redirects user to homepage. There is a sidebar ‘But, I ALREADY have an ACCOUNT!’ ‘Sign in with a different email address’ <Signin>

*Option 2a* - Robot Variation - Some humanistic visual that says... wha - huh? in the sidebar

*Option 2c* - Login with Unknown Email Popup - A variation staying on the page. User clicks Signin but chooses an unknown email address. Lightbox says ‘Hey Newb, Register your Profile to access mozillians’ in a sidebar and the Join Us Auth’d form. Buttons are <Cancel> and <Register Account>

*Option 3a* - One Time BrowserID Messaging - Coming from any path above after a successful login or registration... Tell the user
“Remember...
Use the <Signin button> and [e-mail] to use Mozillians. <Yup>”. This will re-enforce the new BrowserID based login and how to use it. Variation Yup button could be <Whatever Mom> or <Okay>

Comment 2

[Austin King [:ozten]]

I didn't mention all Option 2 variations have edit profile as the next step, where we collect:
* Profile photo
* Bio
* more stuff in the future

Comment 3

[Aakash Desai [:aakashd]]

Hey Austin,

Bear with me here as I don't have a lot of experience with BrowserId. I'd like to know more about what browserID does and does not know about a user when they go to sites that do support it. Namely in the following use cases:

1. When a user is not registered with the site.
2. When a user is registered, but not logged in.
3. When a user is registered and logged in.
4. When a user is registered and logged in with an e-mail that's not known by Browser Id.

Comment 4

[Crystal Beasley [:skinny, :crystal]]

Based on user testing videos

1. user clicks button to create profile
2. auth with BID
3. collect profile info
4. success screen

Comment 5

[Austin King [:ozten]]

Marking fixed per IRC conversation, Bug#665373 can proceed development.

Comment 6

[Austin King [:ozten]]

One thing we didn't discuss is that the prototype collapses

https://mozillians.org/en-US/register
and
https://mozillians.org/en-US/user/edit/{unique_id}

Example: I'll add privacy policy checkbox to the revised registration page, since it doesn't have one.

Comment 7

[Austin King [:ozten]]

(In reply to Austin King [:ozten] from comment #6)
> One thing we didn't discuss is that the prototype collapses
> https://mozillians.org/en-US/register
> and
> https://mozillians.org/en-US/user/edit/{unique_id}

Here is a screencast of what I'm referring too. 
http://youtu.be/xN_HBfQrJrA

@Crystal can you re-open this bug and add any specific requirements for changes you'd like to see.

I wasn't sure about:
* "At this time" copy on register flow
* If we should use Create Profile button or Blue Sign in with BrowserID button
* Where to put the privacy optin

FWIW, This is on top of the 1.0 codebase. 1.1 will bring more changes, I'm still working on merging that code.

Comment 8

[Aakash Desai [:aakashd]]

We need a link explaining what BrowserID is to the log-in and Registration pieces to this. 

Are we the first site to implement BrowserID?

Comment 9

[Austin King [:ozten]]

Internally, I don't believe Mozillians will be the first into production.

Externally:
https://wiki.mozilla.org/Identity/BrowserID/InTheWild

Comment 10

[Aakash Desai [:aakashd]]

Do you know of any wordpress sites that use BrowserID?

Comment 11

[Aakash Desai [:aakashd]]

Re-opening as there's some blockers that need to be implemented for this to land on Mozillians.org:

1. User flow for log-in and registration explaining why the site uses BrowserID.
2. A user education page on browserid.org that explains why Mozilla is working on this problem and offering this particular solution. 

We're the first major site to explicitly use BrowserID. For a contributor directory that's designed to get out of users' way to find information about Mozillians, we're going to hamper that. It needs to at least be explained why we're using it.

This'll no doubt lower the number of people who register on Mozillians.org without it and I can't put BrowserID on the site until those two pieces are met and approved by myself and the team.

Comment 12

[Austin King [:ozten]]

Per discussion with @skinny

Login with Unknown Email two changes:

Already have an account error message needs visual treatment. It will be in a div with class 'login-unknown-email'.

Behavior for  "try _logging in_ with a different email address." should be to log out and restart BID flow automatically.

Comment 13

[tofumatt [:tofumatt]]

It just occurs to me: is there gonna be BrowserID localization in time to see it on Mozillians? BrowserID is already a different login flow than what people are used to -- what happens when they can't read the instructions/popup because it's in English?

Comment 14

[Austin King [:ozten]]

(In reply to Matthew Riley MacPherson [:tofumatt] from comment #13)

This feature will require L10n work, like any of our features. Once we have the strings, we can get L10n's help.

Comment 15

[Crystal Beasley [:skinny, :crystal]]

l10n of browserID hasn't started yet. :(

cc'ing @thunder to discuss projected timelines for that to launch.

Comment 16

[Austin King [:ozten]]

(In reply to Crystal Beasley [:skinny, :crystal] from comment #15)

Please track/discuss browserid.org l10n in a bug under product=Mozilla Labs&component=Identity.

Comment 17

[Austin King [:ozten]]

(In reply to Austin King [:ozten] from comment #12)
> Already have an account error message needs visual treatment...
> Behavior for  "try _logging in_ with a different email address."...

Both of these are done. I don't have styles, but have added the css class so it will be easy to whip that up once we land on -dev.

Comment 18

[Dan Mills [:thunder]]

(In reply to Crystal Beasley [:skinny, :crystal] from comment #15)
> l10n of browserID hasn't started yet. :(
> 
> cc'ing @thunder to discuss projected timelines for that to launch.

We've already started to look into it, but it won't be done until Q1. It will be a Q1 goal.

Comment 19

[Aakash Desai [:aakashd]]

The design is done, right? Can we close out this bug? Other than the l10n piece which is being tracked elsewhere, I can't see any other reasons why this bug still needs to be kept open.

Comment 20

[Rebecca Billings [:rbillings]]

Verified flow with unknown email address, known email address, browser id info on home page + sign in window+  link to identity page,  able to switch users/emails on the sign in page,  pp checkbox, create profile + edit profile options. Please re-open if there is an area I missed.