1014040 - Create UX flows for new Webmaker login

Status: RESOLVED FIXED

(Webmaker Graveyard :: Login, defect)

Description

[Brett Gaylor [:brett]]

Design the expected UX flows for how users will use our redesigned authentication.

Comment 1

[Cassie McDaniel [:cassiemc]]

To start this will cover both social sign on and passwordless – if we decide passwordless is not a short-term option, then we can file followup bugs for that.

Matthew has started this work here: http://xmatthewx.github.io/webmaker-login/

Comment 2

[Matthew Willse [:mattheww]]

Here's how I see integrating social sign-on:


   +---------------------+
1  | SignIn / SignUp Btn |
   +---------------------+
             |          
             v          
                     
     +---------------+  
2    |     Modal     |  
     +---------------+  
     |               |  
     |    Persona    |  
     |               |  
     |   FB G+ GHub  |  
     |               |  
     +-------+-------+  
             |          
             v          
                     
      +-----------+    
3     |           |    
      |  Pop-up   |    
      |           |    
      +-----+-----+    
            |          
            v          
                     
    +-------------+   
4   |    Modal    |   
    +-------------+   
    |             |   
    | Action Btns |   
    |             |   
    +-------------+   

#1 - A button or two that says SignIn / SignUp
   - https://groups.google.com/forum/#!topic/mozilla.dev.identity/P24N4iYoHPI
   - http://people.mozilla.org/~rfeeley/persona_variations/#

#2 - Modal could follow Airbnb's lead. 
   - Small modal that fits small screens.
   - Gray layer over site below.

#3 - 3rd partay pop-up!

#4 - Modal with Success msg
   - Big button to get started
     - change text with context?
     - e.g. Start using Thimble, or Explore Now.
   - Small link to Add profile (new users)
   - Optional small snippet to suggest a new tool (returning users)
     - e.g. Try appmaker to roll your own chat app!

#4 Modal adds a click but could reduce confusion and increase adoption.

Comment 3

[Jon Buckley [:jbuck]]

Attachment: Current create user modal

Wouldn't we need a popup between your #3 and #4 steps to collect information that's on our current create user modal?

- Username
- BSD email sign up checkbox
- Terms and Conditions checkbox
- Language Preference (maybe move to modal CTA after successful signup?)

I love the idea of a modal CTA after successful signup, especially if we can make that context-aware.

Comment 4

[Matthew Willse [:mattheww]]

I dont fully understand the boundaries of persona. I'd say that anything we can control should be in a modal before or after the popup. Popup should just be as required by persona, google, etc.


If language won't affect the experience then I like your idea of saving it until after to reduce barriers.

Comment 5

[Matthew Willse [:mattheww]]

The research that I saw from Janrain (reliable?) showed that LinkedIn, Twitter, and Yahoo, had significantly less social sign on users than Google and Facebook. Our user base might be different. Maybe we can survey people before adding them? Github seems like a nice addition. Overall, fewer options will lead to less confusion and maintenance. We should aim to strike a balance.

Comment 6

[Matthew Willse [:mattheww]]

Attachment: New flow for join & login. There are 4 small experiences. https://redpen.io/wy97b4ce42081a018e

In redpen, you can use arrows keys or buttons above to nav between flows #1 - #4a & 4b. 

Small text and dotted lines represent things out of scope of the prototype to keep in mind. Or, I have questions about where something best fits, TBD'd by your comments and my wireframes.

Comment 7

[Chris DeCairos (:cade)]

Left some thoughts in the redpen thingy

Comment 8

[Matthew Willse [:mattheww]]

Attachment: UX Wireframes

Wireframes of the modals with some notes about the experience. 

https://redpen.io/zc7da735786847afff

Comment 9

[Matthew Willse [:mattheww]]

Attachment: Identify & Greet a User

Outline of the conversation between user and server to allow people to use or not use passwords. 

https://redpen.io/gjd501965226f8b0c4

Comment 10

[Jon Buckley [:jbuck]]

Comment on attachment 8435923 [details]
Identify & Greet a User

A added some feedback around the create user form

Comment 11

[Matthew Willse [:mattheww]]

Attachment: Diagram of login across devices

A common scenario might involve a person using Webmaker on a public computer. They might, however, receive their login link on their mobile. Link should authorize the original browser. Confirmation in their mobile should be simple, plain text to help make this clear.

diagram: https://redpen.io/fvde467b18586a7b5d

Comment 12

[Jon Buckley [:jbuck]]

Comment on attachment 8437351 [details]
Diagram of login across devices

I'm flagging this as an feedback-, because I don't think this login flow has security properties we want.

Comment 13

[David Ascher (:davida)]

:jbuck, can you summarize your concerns re: security in here?  I didn't see them in the redpen, but maybe missed them.

Comment 14

[Jon Buckley [:jbuck]]

Sure:

> Innnnnteresting. I wonder if there are any security issues with this
> design though? Have an attacker attempt to sign in, user gets email on
> their mobile device, they click the link, then the malicious user is
> signed in.
> 
> Also, if you have two different devices, do both devices get signed in
> when you click that link?
> 
> I’m not 100% certain about this flow; I think that having a link you
> can click, or a code you can enter is a safer design here.

Comment 15

[Jon Buckley [:jbuck]]

Hm, a clarification:

I think having a link that you can click that authorizes your current browser to login, or a code you can enter for the "email on mobile device, signing in to a desktop" scenario is a safer design.

Comment 16

[David Ascher (:davida)]

Understood & agreed. [and apologies, i was looking at the wrong redpen]

Comment 17

[Matthew Willse [:mattheww]]

Is this a fair summary of login across devices?

v1 - login link authorizes browser that requested it. 
 * https://redpen.io/fvde467b18586a7b5d
 * advantage: not clear text
 * disadvantage: someone unwittingly clicks to authorize a remote enemy 

v2 - text is typed
 * https://redpen.io/oxe253e9a1e11b202e
 * advantage: no easy accidents
 * disadvantage: typing unfamiliar text

Q: If we offer 10 attempts over 30 minutes before key expires, do we need a random string? Or can we offer more easily typed words?

(Diagrams are intended for a general audience and might eventually be blogged. Feel free to comment on clarity.)

Comment 18

[Jon Buckley [:jbuck]]

I think real words vs a random string is something we could user test

Comment 19

[Chris DeCairos (:cade)]

Comment on attachment 8433561 [details]
New flow for join & login. There are 4 small experiences. https://redpen.io/wy97b4ce42081a018e

The flow described looks sane to me. I did leave some comments in the redpen project.

Comment 20

[Matt Thompson (@OpenMatt :OpenMatt)]

* Status? Next steps?

Comment 21

[Matthew Willse [:mattheww]]

I believe the UX is largely drafted and approved by the group, to be iterated as we build and test. We can probably close this bug.