This repository has been archived by the owner. It is now read-only.

Stronger relying party (RP) brand presence for sign-in and account creation UI elements #3286

Closed
beltzner opened this Issue Apr 19, 2013 · 26 comments

Comments

Projects
None yet
@beltzner
Copy link

beltzner commented Apr 19, 2013

The Webmaker team is rebuilding its toolchain and experience, and has decided to make Persona an integral part of that solution, providing SSO and outsourcing identity authentication so that we're not responsible for yet another password store.

One issue we've run into is that from a user experience perspective, it is very difficult to communicate to a new user that they need to create a new Persona in order to obtain a Webmaker account. There is no way to "white label" account creation so that we can just show a new (non-Persona equipped) user an "email / password" field and have them sign up for a Persona.

We'd love the opportunity to discuss requirements and a potential solution here, most likely at the API level. I suspect we're one of the first consumers who is trying to go completely Persona-based, as opposed to Persona or our own username/password system.

EDIT: morphed title of bug as per callahad's request; this isn't compete "white label", but rather just providing a stronger emphasis on the RP brand elements throughout the UI.

@ozten

This comment has been minimized.

Copy link
Member

ozten commented Apr 19, 2013

Howdy @beltzner! We'd love to chat about your ideas and get your requirements.

At first blush...

To see the long term vision of Persona in action, log into your Webmaker flow with an @yahoo.com email address.

The Persona sigin/signup screen is a way to bootstrap this federated system, until email providers implement the BrowserID protocol for Identity providers natively.

The Persona account chooser, which lets users pick which email they are signing in as, will be replaced by native browser chrome. With native browser support and native email provider support, the "white label" parts disappear.

@lloyd

This comment has been minimized.

Copy link
Contributor

lloyd commented Apr 19, 2013

👍

I think this is representative about how a lot of sites feel. I think we can do better with de-emphasizing Persona and bringing the site up to the forefront. Here's one site that has gone "all in" with persona - http://sloblog.io

I don't know the answer, but I'm curious how we can walk this line better and help sites confuse their users less as they adopt persona as the one and only way to sign in.

@callahad

This comment has been minimized.

Copy link
Member

callahad commented Apr 19, 2013

A common request when I speak is the ability to provider greater visual customization in the pop-up. The idea of being able to just specify a hue or pair of colors to use in the dialog has been met with enthusiasm.

@callahad

This comment has been minimized.

Copy link
Member

callahad commented Apr 25, 2013

Reframing bug: True whitelabel is probably not going to happen -- not all users will have Persona passwords, etc.

Let's use this to de-emphasize the Persona brand and allow the RP's brand to take the focus. For inspiration, check out the bottom corner of this: http://f.cl.ly/items/05000H292r113N2g3n3q/flow.png

@callahad

This comment has been minimized.

Copy link
Member

callahad commented Apr 25, 2013

@beltzner Would it help if you could "theme" the right-hand-side of the login dialog? Maybe something like this:

Screen Shot 2013-04-25 at 1 46 15 PM

@beltzner

This comment has been minimized.

Copy link

beltzner commented Apr 25, 2013

Likely, yes. It would also be great if some of that branding (mostly the name of the organization to which the user is attempting to login) followed through the email confirmation loop in the case where a user is new to Persona. In our initial user testing of the system, that's where people got lost: a traditional email-to-confirm-user-account loop is expected, but the Webmaker/Persona branding switch lost people, entirely.

@lloyd

This comment has been minimized.

Copy link
Contributor

lloyd commented Apr 25, 2013

+1 to having site branding more prominent in confirmation email. What about site name in the subject? /cc @skinny97214

@callahad

This comment has been minimized.

Copy link
Member

callahad commented Apr 25, 2013

siteName in the subject could be tricky from a localization perspective, but we could probably demarcate it pretty easily and add it to the beginning of the subject line?

Current subject: "Thank you for using Persona."

New subject?: "[Mozilla Webmaker] Thank you for using Persona."

Eh, needs some work.

@skinny97214 Check out these mockups: http://callahad.github.io/persona-popup-mockup

@skinny97214

This comment has been minimized.

Copy link

skinny97214 commented Apr 26, 2013

@callahad I'm seeing an email that has subject as "Confirm email address for Persona" with the first line as "Thank you for using Persona." Is that the one you're looking at?

@callahad

This comment has been minimized.

Copy link
Member

callahad commented Apr 26, 2013

@skinny97214 That's the one I'm looking at.

@skinny97214

This comment has been minimized.

Copy link

skinny97214 commented Apr 26, 2013

The sender is Persona. The branding is Persona. I think we might be covered enough to make the subject line the RP name. Thoughts on...

new subject: Confirm email address for Mozilla Webmaker

@lloyd

This comment has been minimized.

Copy link
Contributor

lloyd commented Apr 26, 2013

+1

-- lloyd (thumb-typing)

On Apr 26, 2013, at 3:35 PM, Crystal Beasley notifications@github.com wrote:

The sender is Persona. The branding is Persona. I think we might be covered enough to make the subject line the RP name. Thoughts on...

new subject: Confirm email address for Mozilla Webmaker


Reply to this email directly or view it on GitHub.

@rmorlok

This comment has been minimized.

Copy link

rmorlok commented May 10, 2013

+1 regarding the co-branding of the signup email. We've gotten feedback from our Docalytics customers that they were confused about the Persona email they were receiving.

@callahad

This comment has been minimized.

Copy link
Member

callahad commented Jun 17, 2013

I just received another +1 via email:

We showed a sign-in example using some of our client's branding based on [siteName and siteLogo]. [...] Our customers are concerned about their users getting confused and not understanding the mozilla branding in conjunction with logging in. It would help with adoption of Persona to de-emphasize Mozilla and emphasize our customer.

@callahad

This comment has been minimized.

Copy link
Member

callahad commented Jun 17, 2013

Here's a set of mock-ups from shorlander of where we might be able to go:

persona-popup-revamp-i01-sheet-01

To quote Rob Lord, we should be looking at making Persona a secondary brand, like "Visa." It's how things work, and it makes things work better, but it's not trying to get between you / your bank / your purchase.

@r0bl0rd

This comment has been minimized.

Copy link

r0bl0rd commented Jun 17, 2013

Thanks @callahad. The Visa analogy is very instructive.

FWIW, as mentioned at Identity Staff on June 17th, 2013 wrt to Persona branding being akin to VISA International's, that is, as a secondary or ingredient brand. If you think "ingredient" may mean less impact, consider the VISA International story.

Dee Hock's VISA International is a poignant philosophical and entrepreneurial success story that parallels, IMHO, Ben's/Id Team's/Persona's story of identifying shared utility among competitors/substitutes and driving ecosystem-wide standardization to catalyze promulgation. Go Dee go!

"Dee Ward Hock (born 1929) is the founder and former CEO of the Visa credit card association. In 1968, Hock convinced Bank of America to give up ownership and control of their BankAmericard credit card licensing program. The new company, called National BankAmerica, was a non-stock membership corporation owned by its member banks." - http://en.wikipedia.org/wiki/Dee_Hock

"Visa does not issue cards, extend credit or set rates and fees for consumers; rather, Visa provides financial institutions with Visa-branded payment products that they then use to offer credit, debit, prepaid and cash-access programs to their customers. In 2008, according to The Nilson Report, Visa held a 38.3% market share of the credit card marketplace and 60.7% of the debit card marketplace in the United States.[4] In 2009, Visa’s global network (known as VisaNet) processed 62 billion transactions with a total volume of $4.4 trillion." - http://en.wikipedia.org/wiki/Visa_International

"Birth of the Chaordic Age is a compelling manifesto for the future, embedded within the intriguing story of a personal odyssey. An engaging narrator, Dee Hock is the man who first conceived of a global system for the electronic exchange of value, becoming the founder and CEO of VISA International. He looks critically at today's environment of command-and-control institutions and sees organizations that are falling apart, failing to achieve their own purposes let alone addressing the diversity and complexity of society as a whole. The solution, Hock claims, lies in transforming our notion of organization; in embracing the belief that the chaos of competition and the order of cooperation can and do coexist, succeed, even thrive; and in welcoming in the chaordic age." - http://www.amazon.com/Birth-Chaordic-Age-Dee-Hock/dp/1576750744/ref=sr_1_1?s=books&ie=UTF8&qid=1371501697&sr=1-1&keywords=dee+hock

@beltzner

This comment has been minimized.

Copy link

beltzner commented Jun 18, 2013

Those mockups are great, but as I think I may have suggested in here earlier they are still too "Persona" centric. The window title, top and bottom banners and text is all about "Persona" as opposed to the site you're logging in to. The eye scans top-left to bottom (RTL and Asia aside) and so those parts of the UI should carry the primary message of "Authenticate with SITENAME" and "Powered by Mozilla Persona" ought to be the secondary brand message.

Think "Verified by VISA" rather than VISA.

On 2013-06-17, at 5:44 PM, Rob Lord notifications@github.com wrote:

Thanks @callahad. The Visa analogy is very instructive.

FWIW, as mentioned at Identity Staff on June 17th, 2013 wrt to Persona branding being akin to VISA International's, that is, as a secondary or ingredient brand. If you think "ingredient" may mean less impact, consider the VISA International story.

Dee Hock's VISA International is a poignant philosophical and entrepreneurial success story that parallels, IMHO, Ben's/Id Team's/Persona's story of identifying shared utility among competitors/substitutes and driving ecosystem-wide standardization to catalyze promulgation. Go Dee go!

"Dee Ward Hock (born 1929) is the founder and former CEO of the Visa credit card association. In 1968, Hock convinced Bank of America to give up ownership and control of their BankAmericard credit card licensing program. The new company, called National BankAmerica, was a non-stock membership corporation owned by its member banks." - http://en.wikipedia.org/wiki/Dee_Hock

"Visa does not issue cards, extend credit or set rates and fees for consumers; rather, Visa provides financial institutions with Visa-branded payment products that they then use to offer credit, debit, prepaid and cash-access programs to their customers. In 2008, according to The Nilson Report, Visa held a 38.3% market share of the credit card marketplace and 60.7% of the debit card marketplace in the United States.[4] In 2009, Visa’s global network (known as VisaNet) processed 62 billion transactions with a total volume of $4.4 trillion." - http://en.wikipedia.org/wiki/Visa_International

"Birth of the Chaordic Age is a compelling manifesto for the future, embedded within the intriguing story of a personal odyssey. An engaging narrator, Dee Hock is the man who first conceived of a global system for the electronic exchange of value, becoming the founder and CEO of VISA International. He looks critically at today's environment of command-and-control institutions and sees organizations that are falling apart, failing to achieve their own purposes let alone addressing the diversity and complexity of society as a whole. The solution, Hock claims, lies in transforming our notion of organization; in embracing the belief that the chaos of competition and the order of cooperation can and do coexist, succeed, even thrive; and in welcoming in the chaordic age." - http://www.amazon.com/Birth-Chaordic-Age-Dee-Hock/dp/1576750744/ref=sr_1_1?s=books&ie=UTF8&qid=1371501697&sr=1-1&keywords=dee+hock


Reply to this email directly or view it on GitHub.

@shorlander

This comment has been minimized.

Copy link

shorlander commented Jun 18, 2013

Just to add some context to those mockups: the intent was a way to quickly improve the the RP branding without a massive overhaul of the popup layout. The middle column being my preferred option as it has the most emphasis on the RP branding and the least emphasis on the Persona branding while still retaining roughly the same layout.

If instead we are talking about "fixing" the popup I agree that wouldn't be the way to go. My explorations for a longer term fix involve a more compact layout with a better visual flow (RP --> Sign-in --> Persona Blurb) and some thoughts on really streamlining the copy:

Will drop them here with the disclaimer that I am not necessarily suggesting any of these and there is a lot of just playing with potential layouts ;)

persona-popup-revamp-i02-sheet-02

persona-popup-revamp-i02-sheet-03

http://people.mozilla.com/~shorlander/mockups-interactive/persona-popup-redesign-i01/persona-popup-redesign-02.html

@beltzner

This comment has been minimized.

Copy link

beltzner commented Jun 18, 2013

Shorlander, I didn't think it would be possible, but I love you a little
bit more right now than I did just a moment ago.

On Mon, Jun 17, 2013 at 9:04 PM, Stephen Horlander <notifications@github.com

wrote:

Just to add some context to those mockups: the intent was a way to quickly
improve the the RP branding without a massive overhaul of the popup layout.
The middle column being my preferred option as it has the most emphasis on
the RP branding and the least emphasis on the Persona branding while still
retaining roughly the same layout.

If instead we are talking about "fixing" the popup I agree that wouldn't
be the way to go. My explorations for a longer term fix involve a more
compact layout with a better visual flow (RP --> Sign-in --> Persona Blurb)
and some thoughts on really streamlining the copy:

Will drop them here with the disclaimer that I am not necessarily
suggesting any of these and there is a lot of just playing with potential
layouts ;)

[image: persona-popup-revamp-i02-sheet-02]https://f.cloud.github.com/assets/684427/665943/ff7176ec-d7b0-11e2-869f-2277b2da835e.png

[image: persona-popup-revamp-i02-sheet-03]https://f.cloud.github.com/assets/684427/665944/03da92cc-d7b1-11e2-8362-0d309b50ca84.png

http://people.mozilla.com/~shorlander/mockups-interactive/persona-popup-redesign-i01/persona-popup-redesign-02.html


Reply to this email directly or view it on GitHubhttps://github.com//issues/3286#issuecomment-19585093
.

@ryanfeeley

This comment has been minimized.

Copy link
Contributor

ryanfeeley commented Jun 18, 2013

Taking this to the extreme, what about providing a 100% style-able UI? Email newsletter services offer thing kind of control over newsletter signup forms. Will help mitigate the downside of Persona where the login needs to happen in a new window (or depending on browser settings, a full width tab).

@beltzner

This comment has been minimized.

Copy link

beltzner commented Jun 18, 2013

Originally this ticket was requesting "white labeling" and that was morphed because it was felt that the trust relationship needs to be clear, and so that users understand that they're using a single authentication instead of multiple passwords. I think that reasoning still stands.

I do agree that having the ability to style more of the UI is a worthy exploration, but suspect we'd want some consistent element for trust and comprehension that Persona is the tool being used for authentication.

On 2013-06-18, at 10:17 AM, Ryan Feeley notifications@github.com wrote:

Taking this to the extreme, what about providing a 100% style-able UI? Email newsletter services offer thing kind of control over newsletter signup forms. Will help mitigate the downside of Persona where the login needs to happen in a new window (or depending on browser settings, a full width tab).


Reply to this email directly or view it on GitHub.

@djc

This comment has been minimized.

Copy link
Member

djc commented Jun 19, 2013

I think the compact dialogs would be a great improvement, particularly the second and third rows.

@shane-tomlinson

This comment has been minimized.

Copy link
Member

shane-tomlinson commented Jun 19, 2013

@djc - As an incremental step, we are going to implement column two of #3286 (comment)

@seanmonstar

This comment has been minimized.

Copy link
Member

seanmonstar commented Jul 10, 2013

we closed this, but did we want to consider any of the newer concepts from shorlander?

@djc

This comment has been minimized.

Copy link
Member

djc commented Jul 11, 2013

I think that would be cool. IIRC @shane-tomlinson wanted to hold off on them because it would take a lot of developer and UX time.

@lloyd

This comment has been minimized.

Copy link
Contributor

lloyd commented Jul 11, 2013

@ryanfeeley - can you take the lead on making sure that we don't loose the work that shorlander did, and open a new issue to track the next iterative improvment when it's clear to you what from his designs we should do?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.