Closed Bug 726207 Opened 12 years ago Closed 12 years ago

[Launch Persona ID] Design for initial web presence on mozilla.org

Categories

(Marketing :: Design, task)

x86
macOS
task
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: christine.brodigan, Assigned: ltom)

References

()

Details

(Whiteboard: Due: 2/16)

Attachments

(8 files)

Note: Copy/Design direction are still being finalized, JSlater is lead contact for both.

Deadline: PSDs for 3 pages complete by Thursday, February 16, 2012, within the new One Mozilla theme/styles, one new graphic (screen capture)

Copy is being worked on in Bug 726154
----

Specs (where is this going and how much space do we have)

-mozilla.org/persona - should follow the same specs being used by Bug 715566
-landing page should use the same One Mozilla theme as Bug 715566
-About & FAQ should use the same interior page layout as http://cl.ly/0q2Y0C343R3g1k0z041i/o (Sean has the PSD)

---

Hero Graphic

-- literal approach, screen capture of PersonaID being used on MDN or OpenPhoto
-- given the aggressive timeline this is intended to be used just for this one space
Thanks Chrissie. We'll assign this bug to a designer on Monday.
Copy for landing page @ mozilla.org/persona 

(note: this will likely need to be trimmed, but a team effort, Matej has done a great job helping):

H1.
Introducing Mozilla Persona ID
Sign in anywhere with just an email address"]

H2.
What's the problem?

Body:
You probably log in to dozens of sites daily, which means you end up with passwords, login names and profile information scattered across the Internet and different devices. 

Users struggle to remember login details and app providers struggle to manage constantly changing and growing user data.  

H3: Own Your Data
Using Persona ID, users can log in to any site or app with an email address and a single click.

Body:
Simple and secure, Persona ID uses your email address to verify your identity and websites get a verified email address from you. As you engage with the site, you may want to submit more information. It's your choice — you control what information you share.

H3.
Easy for You

Body:
Wouldn't it be nice to never have to manage a username or password again? And to not turn over all your Facebook details just to log in to a website?

Persona ID makes it easy for you to join a site with just an email address — wherever you are, from whatever device you're using. Once signed in, you choose what to share — or not to share. If you want the site to know more about you, you can decide what and when to share that information.

H3:
Try it Yourself
Go to Open Photo, one of our partner sites  http://current.openphoto.me  and click login

If Persona ID is not on your favorite sites, ask them to show respect for your identity. Ask them to make your life easier. Ask them to add Mozilla Persona ID.
Copy for About page @ mozilla.org/persona/about

(note: this will likely need to be trimmed, but a team effort, Matej has done a great job helping us get to this point):

H1:
We're Building a Better Way to Manage Identity Information on the Web

Body:
Persona ID is the first in an eventual suite of Mozilla Persona tools designed to help users and developers manage identity information on the Web.  

H2:
Technology

Body:
Persona ID is built on our original BrowserID protocol, a decentralized authentication technology based on verified email addresses. For more details on the technical aspects, read this blog: http://lloyd.io/how-browserid-works
 
H2:
Open Accessible Standards

Body:
As with all Mozilla projects, the source code is open and accessible. We are proposing Persona ID as a new standard for identity systems and are working with existing identity providers to implement the protocol as their primary authentication tool. 

H3: 
Developers

Body:
Build user trust and confidence, providing an alternate login that protects user privacy and does not exploit profit from stored data.

There's no more need to ask users to think of passwords, to implement email verification or to manage their own sign-in program. In a single step, you can turn visitors into trusted users and get an email address for them.

Check out our developer site at https://developer.mozilla.org/en/browserid to get the code and get started!

Show your users that you respect their privacy and that you will give them a choice about sharing their data.

H3:
Recommended Reading:

User Sovereignty for our Data
Lizard Wrangling, Mitchell Baker, January 13, 2012
http://blog.lizardwrangler.com/2012/01/13/user-sovereignty-for-our-data/

Mozilla to Offer New User-Centric Services in 2012
Mozilla Privacy Blog, Ben Adida, January 13, 2012
https://blog.mozilla.com/privacy/2012/01/13/mozilla-to-offer-new-user-centric-services-in-2012/

Mozilla Identity Team blog
http://identity.mozilla.com/
Copy for FAQ page @ mozilla.org/persona/faq

(note: this will likely need to be trimmed, but a team effort, Matej has done a great job helping us get to this point): FAQ page @ mozilla.org/persona/faq

Imagery: use the different colored login arrows found at:
https://github.com/mozilla/browserid/wiki/How-to-Use-BrowserID-on-Your-Site

Essential CTA: link to Github
***


H1:
Mozilla Persona ID FAQ

H2:

Your Questions Answered

H3
Can I be certain my email and password are secure?

Body:
We take security and privacy very seriously (you can read our complete corporate privacy policy here: http://www.mozilla.org/about/policies/privacy-policy.html). With Persona, verified email addresses and encrypted passwords are saved on the Mozilla server. 

It uses a client-side cryptographic certificate (that is, it stores tamper-resistant proof in your browser) to prove to the site that the current user owns an particular email address. The site that you're logging in to never actually sees your password.

H3
What is the difference between Persona and BrowserID?

Body:
BrowserID is the project name we used during development, which we will continue to use in reference to the underlying technology and protocol. The Persona name represents our larger identity initiative and the Persona ID feature is one our top priorities within this space this year.

H3:
How is Persona ID different than Firefox Personas hosted at www.getpersonas.com?

Body:
Firefox Personas themes lets you choose a wallpaper background — designed by you or by one of thousands of our community contributors — for your Firefox browser. The project has been hugely successful, but we have asked the community to consider a name that is more closely suited to the project. 

We believe wallpapers or skins or ...?  is more descriptive of what that project is and that Persona is more suited to describe a user and his or her online identity across the Web.
 
H3: 
How is this different from Facebook Connect, Twitter, Google or Yahoo logins?

Body:
Persona ID lets you sign in to a site with just your email address and that's all the site gets. Social network logins usually share your social profile, including a list of your friends, and may even track your activity across sites. 

If a site offers both, you can choose which to use.  For developers, Persona ID is a very easy way to add sign-in capabilities to their sites.

H3:
How is this different from OpenID?

Body:
While Persona ID and OpenID have similar goals, the design and user experience is different. Ben Adida, one of our engineers, describes this here:
http://identity.mozilla.com/post/7669886219/how-browserid-differs-from-openid
Summary: [Launch PersonaID] Design for initial web presence on mozilla.org → [Launch Persona ID] Design for initial web presence on mozilla.org
Assigning the design portion of this to Lee. 

Next steps:
- the text in comment #3 still seems like a lot. Chrissie, can you work with Lee on how it might be laid out on the page? I don't think we have time for back & forth with wireframes, but perhaps if you guys work together directly it'll be ok.
- folks on the Identity team - which stage in the process do you want to show off in the main screenshot? I know we've all agreed to showcase MDN there, but it'd be a big help to have a bit of direction as to which part in the sign-in process you think is the most meaningful to showcase.

Thanks-
Assignee: tshahian → ltom
(In reply to John Slater from comment #5)
> Assigning the design portion of this to Lee. 
> 
> Next steps:
> - the text in comment #3 still seems like a lot. Chrissie, can you work with
> Lee on how it might be laid out on the page? I don't think we have time for
> back & forth with wireframes, but perhaps if you guys work together directly
> it'll be ok.

Sounds great, Lee, ping me when you're ready, and we'll whiteboard this puppy together. We can definitely shed copy.
Attached image Persona ID - About 01
Attaching About sub-page here, so we can start editing copy if needed
Attached image Persona ID - DevFAQ 01
Attaching Developer FAQ sub-page here, so we can start editing copy if needed
Lee, these look great! Can you sync with Sean, and use the Mozilla Persona wordmark (I did some investigating, and it exists).

Then, search and replace Persona ID with Mozilla Persona.

After that, I'll ask Emily to review for design assets, but we can make other copy changes over in implementation.
Status: NEW → ASSIGNED
Whiteboard: Due: 2/16
Mozilla Persona - About 02
The mockups in comment #10 and comment #11 look good to me. Any other feedback?
(In reply to John Slater from comment #12)
> The mockups in comment #10 and comment #11 look good to me. Any other
> feedback?

Look great to me, since the major design is out of the way and copy/content changes can be made in HTML, can we get the PSDs and move to code?
Sounds like a plan to me.
CB - I missed the Download from Github CTA on the FAQ page. To clarify, do we want that underneath the page header, "Developer FAQ" above the questions? 

Let me know, and I'll post PSDs ASAP. thanks
Let's keep it towards the top of the page, similar style to our download firefox button, will that work?
Here are a couple PSDs:

About
http://cl.ly/0M172y190y470k16133G

Dev FAQ
http://cl.ly/2V1k2N450I2A0E3h1g0A
There seem to be some issues we need to discuss on for this page - Playing with using a a feature/slider for 3 talking points. Wondering what graphics (if any) should coincide with said value props.
Blocks: 727657
Thanks Lee. I'll say that I like the general direction this is going in, although it's super important that we get input from the stakeholders as soon as possible, as that's the feedback that really matters here.

Another important note to consider is that this layout won't necessarily be used for the fully fleshed out version of mozilla.org/persona that's been discussed. Probably best to think of this as an early stage alpha version that will be thoroughly reworked when we have more time to think through the content and plan out the entire experience.

That said, I think this layout works. There are clearly two things that need refining, though:
1. imagery
2. text

Since the text will define the imagery, I'll start there. I'm not sure what state the copy is on this page exactly - I know comment #4 was presented as at least semi-final, but I think this still needs a lot more work. Specifically:
- I took a very quick pass at editing the main value prop on the 'a better way to sign in' screen so it would fit this format, but my version is clearly not ready for prime time. Emily, do you feel like all the main info is represented correctly here, and that this accurately describes why this is a better way to sign in? If so, I suggest having Matej take another pass to make this flow better. If not, let's work out those details asap. (another note on this page: the assertion that people log into 'dozens' of sites daily feels like hyperbole to me)
- it's not clear to me at all how the "Own Your Data" text actually connects to the idea of owning your own data. The text for "Easy for You" gets at that point a little better, actually, but there seems to be a lot of overlap between the two sections. Overall, I think we need to be crisper about what we're saying here.
- similarly, "Easy for You" seems to be more about owning your data than why Persona is easy (and the 'easy' topic seems pretty similar to the 'better way to sign in' value prop). Mainly I want to make sure each section here is making a unique point really crisply and clearly, and that they all support each other rather than overlapping.

Visually, things are set up to have an image next to every main copy blurb, which will help liven up the page quite a bit. The tricky part is that we need to make sure that each image is different so as not to feel repetitive. 

Here's a first pass at some suggestions, but I could really use some additional input here:
- "a better way to sign in": close up screenshot of the iconic signin button on a website
- "own your data": perhaps a screenshot of the Persona ID account creation process? something that indicates preferences or settings perhaps.
- "easy for you": perhaps a different stage of the process of signing in to a site

This page is due tomorrow (yikes), so let us know what you think soon!
One other note - I know we also have a Persona video (or section of a larger video) being made for MWC, and that the descriptions there went through a fair amount of discussion and refinement.

Is that something we could use as the basis for the key copy points here?
(In reply to John Slater from comment #20)
> One other note - I know we also have a Persona video (or section of a larger
> video) being made for MWC, and that the descriptions there went through a
> fair amount of discussion and refinement.
> 
> Is that something we could use as the basis for the key copy points here?

The video clips are about 9 slides, very basic, pretty much headlines of what we have.  I'll send a copy of the jpgs by email.
The 
> Body:
> You probably log in to dozens of sites daily, which means you end up with
> passwords, login names and profile information scattered across the Internet
> and different devices. 
> 
> Users struggle to remember login details and app providers struggle to
> manage constantly changing and growing user data.  

this is a bit awkward, the transition from "you" to "users" ?


> 
> H3: Own Your Data
> Using Persona ID, users can log in to any site or app with an email address
> and a single click.

Too many usings... can we shorten and say:

With Persona ID, users can sign in with an email address and a single click.

> 
> Body:
> Simple and secure, Persona ID uses your email address to verify your
> identity and websites get a verified email address from you. As you engage
> with the site, you may want to submit more information. It's your choice —
> you control what information you share.
> 
> H3.
> Easy for You
> 
> Body:
> Wouldn't it be nice to never have to manage a username or password again?
> And to not turn over all your Facebook details just to log in to a website?
> 
> Persona ID makes it easy for you to join a site with just an email address —
> wherever you are, from whatever device you're using. Once signed in, you
> choose what to share — or not to share. If you want the site to know more
> about you, you can decide what and when to share that information.
> 
> H3:
> Try it Yourself
> Go to Open Photo, one of our partner sites  http://current.openphoto.me  and
> click login
> 
> If Persona ID is not on your favorite sites, ask them to show respect for
> your identity. Ask them to make your life easier. Ask them to add Mozilla
> Persona ID.
on the value prop:  can we lighten it up some?  
and do we need 3?  Can we combine Easy for You and A Better Way?

Easy for YOU
You probably have signed into dozens of sites daily ... (keep the rest)

Wouldn't it be nice to never have to manage a username or password again?  
Persona ID makes it easy for you to join a site with just an email address.  After a one-time registration it's 1 click for all your site, from any of your devices. 


Own Your Data  [something like ....]

We don't always share our address, birthday and phone number on a first date in person -- why should we online?  

With Persona ID, you control what information you share, and when.



> - "a better way to sign in": close up screenshot of the iconic signin button
> on a website
> - "own your data": perhaps a screenshot of the Persona ID account creation
> process? something that indicates preferences or settings perhaps.

right now, the sign in is REALLY just an email verification.  No preferences, no settings, nothing.  So simple it's hard to show.  Perhaps a red circle with line thru it over a screen with bunches of fields... but it would look busy.

> - "easy for you": perhaps a different stage of the process of signing in to
> a site

the steps are outlined very simply at https://www.browserid.org/about.  

> 
> This page is due tomorrow (yikes), so let us know what you think soon!
(In reply to John Slater from comment #20)
> One other note - I know we also have a Persona video (or section of a larger
> video) being made for MWC, and that the descriptions there went through a
> fair amount of discussion and refinement.
> 
> Is that something we could use as the basis for the key copy points here?

This is the last version of the copy I saw, but there may have been changes since:

Persona

An identity system for the Web

Across the Web, across devices,
the Mozilla Persona sign-in enables a trusted introduction
between users and websites.

Users don’t need new usernames or passwords
and site owners get a verified email address.

It’s that simple.

Once signed in
users control their identity and the data they share
and sites get an engaged, comfortable user. 

The connection is direct and personal,
one that both the user and the website can trust.
Still waiting for design feedback here. Any input? Any thoughts on screenshots or the copy topics for each of the three main sections?

We were given a deadline of *today* for this page, but won't be able to hit that without that info.
(In reply to John Slater from comment #25)
> Still waiting for design feedback here. Any input? Any thoughts on
> screenshots or the copy topics for each of the three main sections?
> 
> We were given a deadline of *today* for this page, but won't be able to hit
> that without that info.

I'll leave design to you specialists.  looks fine to me.  My only question is on the Try It Now phrase, can we mix it up, and not always say try it now, maybe Check it out or Sign In Here or See for yourself .. . or ...?
(In reply to esuter from comment #26)
> (In reply to John Slater from comment #25)
> > Still waiting for design feedback here. Any input? Any thoughts on
> > screenshots or the copy topics for each of the three main sections?
> > 
> > We were given a deadline of *today* for this page, but won't be able to hit
> > that without that info.
> 
> I'll leave design to you specialists.  looks fine to me.  My only question
> is on the Try It Now phrase, can we mix it up, and not always say try it
> now, maybe Check it out or Sign In Here or See for yourself .. . or ...?

Can't find the phrase you're referring to. I see that "Try it yourself" appears once, but don't see "Try it now." If that's what you're referring to, I don't really mind what it says, though I don't see anything wrong with it as is.
it is the try it yourself line, below the "A better way to sign in".  Looking at it now I'm guessing the top part rotates and the bottom stays the same?  It's fine then.
Hey Chrissie, I know we added Privacy and TOS info to the list of subpages to mockup. In the interest of time, would it be far to ask if we could simply use the existing sub-page styles both About and FAQ follow, and flow in all of that content vs. mocking up 2 more pages?
(In reply to Lee Tom from comment #29)
> Hey Chrissie, I know we added Privacy and TOS info to the list of subpages
> to mockup. In the interest of time, would it be far to ask if we could
> simply use the existing sub-page styles both About and FAQ follow, and flow
> in all of that content vs. mocking up 2 more pages?

+1 no mockups needed
Overall it looks nice, here are my comments:

* "...lets you sign in anywhere with a single address." is completely untrue. Persona ID lets you choose which address you want to use when you sign into each site.

* "As you engage with the site, you may want to submit more information." seems a bit out of context?

* OpenPhoto (no space, btw) isn't really a partner (to my knowledge). Not a major problem, but thought I'd point it out.

* We had a couple of other sites we thought we could point to, we just want to use OpenPhoto?

* There are a few "Mozilla Persona"s that I think should say "Persona ID" instead. e.g. in that bottom blurb.

* We use "Sign in", "log in", "login", "join". A bit of language standardization would probably help. We've stayed away from "login" in favor of "sign in" in other BrowserID docs; maybe that's not the right decision but it's at least consistent.

* "...your Facebook details just to log in to..." -> "log into" (or "sign into" as per above).

Thanks!
Thanks Dan. I agree the copy needs a lot of cleanup here. Lee is currently revising the mockups to make the design a bit tighter. In the process we'll probably lose a bit of room for text, so let's see how that looks and then go from there.

The main thing that would help me (Emily?) is to make sure we're clear about what we want to say under each of the 3 main sections...right now there's a lot of overlapping content, and I think we could be making our points more strongly there.

Dan, are there other sites we could or should use besides OpenPhoto? I'm certainly open to whatever, and I know Lee could probably use a few more for screenshotting purposes.

Thanks
(In reply to Dan Mills [:thunder] from comment #31)
>
> * We use "Sign in", "log in", "login", "join". A bit of language
> standardization would probably help. We've stayed away from "login" in favor
> of "sign in" in other BrowserID docs; maybe that's not the right decision
> but it's at least consistent.

"Log in" and "login" can coexist, since it's a matter of grammar, but I like the idea of using "sign in" across the board. It's clear, consistent and there's no confusion since there's no form that makes is "signin."

> * "...your Facebook details just to log in to..." -> "log into" (or "sign
> into" as per above).

This should always be "sign in to" not "sign into."
Hi all,
Attaching a new mockup of the landing page here. After discussion with John about our messaging in the hero section of the page, we thought it would be a good idea to consolidate the key copy points in a static panel vs. scrolling through a 2-3 carousel. I think this layout helps our user focus on the main points of Persona in a more centralized place. 

Links to About and Dev FAQ are now in the top level nav, while footer links for Privacy and TOS are at the bottom of the page. If you feel we need easier/more points of entry to the subpages, we can maybe link to the in the body copy? 

For now I've FPO'd our body copy, while suggesting word count in the "Own Your Data" and "Easy for You" sections. 

I think it would be great to show a 'nice' image of our Sign In ID buttons in the context of a website, but I'm not sure what the best example to use is. I recall CB suggesting Affiliates site, but might be good to show a non-mozilla site using this new system...?
Thanks Lee. I like this a lot. The design looks good to me, although we obviously need to put some real text in place of the cupcake language.

Emily, can you advise on what the key points are that should go in each section? I can help write them, but based on the earlier info it's still not clear to me what we're really trying to say. If we can quickly work through that we should be able to wrap this up tomorrow.

Thanks-
Comment on attachment 598062 [details]
Mozilla Persona - Landing 03

Try this for the 3 headings:

*** A Better Way to Sign In ***
You probably log into dozens of sites daily, which means you end up with passwords, usernames and profile details scattered across the Internet and your different devices. 

Mozilla Persona ID lets you sign in anywhere with a single entry.  Your email (or emails if differentiate work and play) is your identity; type it in, click and go.  Instead of trying to remember passwords, spend your time browsing the web and getting stuff done!

 *** Own Your Data ***
Do you really want every site to access your Facebook or Google+ details ... for your online friends to know when you shop for toilet cleaner or research spider bites?  With Persona ID, you share only your email address.  Then it's your choice; share only information that make sense for that site.


*** Easy for Publishers (site owners?) ***
Add Persona sign in to your site with just a few lines of code.  Build user trust and confidence by providing an alternate login that protects their privacy and does not exploit profit from stored data.  With the verified email you receive, you can follow up with personalized information.
Thanks for the copy, Emily. I flowed it into our landing page, and worked in our Sign in button into the graphic - maybe here we can use that floating caption to tell users/developers to look for/use our Persona button. "It's so simple!" etc.
Comment on attachment 598269 [details]
Mozilla Persona - Landing 04

hi --
Thanks, it's looking a lot better.  A note: The (site owners?) part was my question, not part of the copy.  Just keep the "Easy for Publishers" part. 
:-)
Attaching a different version of the layout - I think this feels more comfortable to look at and gives our graphic more room to breathe. Also, if we need more space for explanation under the graphic, we have more space.

Emily - I left the "(site owners?)" question in there, as a non-discreet nudge ;)
Comment on attachment 598275 [details]
Mozilla Persona - Landing 05

Add a link, bottom right to direct people to the getpersonas page:

Looking for Personas themes for Firefox?  
They are here: http://www.getpersonas.com
Comment on attachment 598275 [details]
Mozilla Persona - Landing 05

Another round at the text, with an added into...

Intro
Protecting your online identity is important to Mozilla.  We believe you should be able to control what other people learn about you.  This is what our Persona project is about.  The first component we're introducing is for signing in to websites.  We're calling it Persona ID.

A Better Way to Sign In
Today almost every website asks its visitors to register.  Each has its own rules and data fields.  You end up with passwords, usernames and profile details scattered across the Internet and your different devices. 

Mozilla Persona ID lets you sign in anywhere with a single entry.  Your email (or emails if differentiate work and play) is your identity; type it in, click and go.  Instead of managing your passwords, spend your time browsing the web and getting stuff done!

Own Your Data
Some sign in systems carry your profile data with them, even ask to share that information with other sites.  Do you really want every site to access your Facebook details ... and for Facebook friends to know when you shop for toilet cleaner or research tick bites?  With Persona ID, you provide only your email address when you sign in.  Then it's your choice; you control when and where to share any additional information about you. 

Easy for Publishers
Add Persona sign in to your site with just a few lines of code.  Build user trust and confidence by providing an alternate sign-in that protects their privacy and does not exploit profit from stored data.  With the verified email you receive, you can contact your user directly.
caption for screen shot:

It's this simple.  Only one entry - your preferred email -- and you're ready to go.
Thanks Emily. I'm going to take a pass at editing this a bit, and then Lee will flow it in to see how it looks. Stay tuned!
Here's some condensed and revised copy. Please pick it apart if you see any inaccuracies, but I think this makes all the basic points pretty well.


A Better Way to Sign In
Mozilla Persona is based on the belief that your online identity should belong exclusively to you. With that in mind, we’ve created Persona ID to improve the way you sign in to websites.

Persona ID allows you to sign in to sites with a single, consistent email address of your choosing. So, instead of having to manage usernames and passwords across your favorite sites and devices, you’ll have more time to do the important stuff. We’ll manage the details! 


Own Your Data
Many sign in systems carry your profile data with them, and even share that info with other sites and social networks. We believe you should control how your personal information is shared, so with Persona ID you only need to provide your email address to get started. 


Easy for Publishers
Persona ID makes things easy for site owners, too. Enabling it on your site only takes a few lines of code, and helps build good user relationships by providing them with a trusted sign-in option. It’s a win-win!
Here's the PSD:
http://cl.ly/2Z0f1V0F3R361J1R2u2T

Thanks, Everyone!
Love the way this turned out, thanks Lee!
Copy looks great! Thanks, John. Not sure if this is too late, but I have a couple of small copy suggestions on the last two blurbs:


Own Your Data
Many sign-in systems carry your profile data with them; some even share that info with other sites and social networks. We believe you should control how your personal information is shared, so with Persona ID you only need to provide your email address to get started. 


Easy for Publishers
Persona ID makes things easy for site owners, too. Enabling it on your site only takes a few lines of code and helps build good relationships by providing users with a trusted sign-in option. It’s a win-win!
My mistake for not closing this resolved/fixed sooner.

I've moved comment 47 over to implementation in Bug 727657.

We should consider this very close to string freeze, so the guys can build this out, with time for one more light edit.

Thank you all!
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Very nice! Thanks for all the work on this.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: