Closed Bug 712795 Opened 13 years ago Closed 12 years ago

ESR Landing Page and FAQ Design

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: lmesa, Assigned: ltom)

References

Details

(Whiteboard: due 1/24)

Attachments

(7 files)

Project Brief
261.12 KB, application/pdf
Details
Firefox ESR Landing Page - white version
102.85 KB, image/png
Details
Firefox ESR Landing Page - blue version
243.26 KB, image/png
Details
Firefox ESR Landing Page - 03
241.34 KB, image/png
Details
Firefox ESR Landing Page - 04
255.88 KB, image/png
Details
Firefox ESR FAQ Page - 01
509.60 KB, image/png
Details
Firefox ESR logo png
11.52 KB, image/png
Details
Attached file Project Brief — 
Need to design a landing page template and an FAQ page for the Mozilla Firefox ESR product. 

Landing Page:
1)The page should feel projecty--like mozilla.org or wiki.mozilla.org. It should not use the same template we use for mozilla.org/firefox. 
2)The page needs to include a prominent link to mozilla.org/firefox. We only want people who know what this product is to download it--otherwise, they should feel intimidated and that they want to go back to mozilla.org/firefox. 
3)The CTA on the page is not to download, but instead, the CTA is to sign up for the enterprise email alias. People can opt out of signing up, but they should go through a scary warning if they do. 
4) After signing up or waiving the email sign up, the user is shown an FAQ page.

Shouldn't be too much copy--will file separate bug for that. 


FAQ
1)The page should feel projecty--like mozilla.org or wiki.mozilla.org. It should not use the same template we use for mozilla.org/firefox. 
2)The page needs to include a prominent link to mozilla.org/firefox. We only want people who know what this product is to download it--otherwise, they should feel intimidated and that they want to go back to mozilla.org/firefox. 
3) Then have a variety of questions (will be supplied by PR & PMM)
4) Link to build will be within one of the responses of the FAQ
5) Have space on a side bar to cal out links to
-enterprise email (enterprise@mozilla.org)
-EWG wiki (https://wiki.mozilla.org/Enterprise)

This needs to be launched Jan 31st, so needs to be handed to webdev 1/26/2012.
Forgot the mention--the page will not be localized initially, but may be in the future, so we should take that into account. 

It's likely we don't need any visual with this page, just basic copy and logo.  The name of the product is "Mozilla Firefox ESR" so not sure how we work ESR into the word mark.
OS: Mac OS X → All
Hardware: x86 → All
Depends on: 712819
Thanks Laura

Assigning to Lee.  Would be great if he can join the kick-off call tomorrow as well.
Assignee: tshahian → ltom
Status: NEW → ASSIGNED
Whiteboard: due 1/26
White version - all content is FPO
Blue version - all content is FPO
Hi all, I just attached 2 preliminary mockups with variations of background color. These are intended to give us a starting point and context to help us to decide how to proceed with visual identity of ESR. Content is FPO.
Thanks Lee. Did you look at something with an orange background? I realize we want this product to be separate from the current Firefox pages but it is a Firefox product and I am wondering if we need to bring the design closer to the current Firefox designed pages so that its part of the family? The white or the blue really speak to Mozilla to me and not so much Firefox. Anyway, that's my two cents. If the vote is to keep it away from the Firefox look and feel I can live with that. Thanks.
(In reply to Kristin Baird from comment #6)
> Thanks Lee. Did you look at something with an orange background? I realize
> we want this product to be separate from the current Firefox pages but it is
> a Firefox product and I am wondering if we need to bring the design closer
> to the current Firefox designed pages so that its part of the family? The
> white or the blue really speak to Mozilla to me and not so much Firefox.
> Anyway, that's my two cents. If the vote is to keep it away from the Firefox
> look and feel I can live with that. Thanks.

Honestly, I don't want this to look too much like a Firefox product.  We only want people to download this knowing full well what they're getting, and I want to minimize mistaken downloads as much as possible. I want to go for the projecty, wiki-like look because I want it to look intimidating. Having said that, I realize we need to find a middle ground--we don't want this to look like a completely foreign project either. That's why I like option 1 better than option 2--it feels different, but also has the officialness of the header and footers we usually have.
Ok, thanks, understood. Ok, I also like Option 1 then. As it better fits within the parts of the site branded Mozilla.
Hey guys. I'm just getting caught up on this and have a few questions...apologies if this has already been discussed but it'd be a big help to know the following:
- what's the URL for this page?
- how are people getting to it?
- where will it fit in our site structure?

(also, since Laura M is out for awhile I'm hoping someone else can fill me in on this)

I'd rather not make a call about the design of the page until that stuff is clear. I understand we want this page to feel non-consumer friendly and isn't something we'll promote to a mainstream audience, but it should still blend in with whatever pages it families with. For example, if it's part of the Firefox site somewhere it really should have that blue background rather than the white one from mozilla.org. We can do that in a way that doesn't feel as friendly as the rest of the site, but maintaining that visual consistency is important.
(In reply to John Slater from comment #9)
> Hey guys. I'm just getting caught up on this and have a few
> questions...apologies if this has already been discussed but it'd be a big
> help to know the following:
> - what's the URL for this page?

It will live off our main mozilla.org/firefox/X domain structure. That said, the intent and LoMo described above it to have it not be extremely user facing or user friendly at this point in time. 

> - how are people getting to it?
It will be available through the top nav drop down. Note: the meat of the page (download experience) will only appear after email submission. Take a look at the brief Laura M emailed around for more details. 

> - where will it fit in our site structure?

See above. It will have a home within our site but access and user friendly-ness will be nuanced on purpose.

> (also, since Laura M is out for awhile I'm hoping someone else can fill me
> in on this)
> 
> I'd rather not make a call about the design of the page until that stuff is
> clear. I understand we want this page to feel non-consumer friendly and
> isn't something we'll promote to a mainstream audience, but it should still
> blend in with whatever pages it families with. For example, if it's part of
> the Firefox site somewhere it really should have that blue background rather
> than the white one from mozilla.org. We can do that in a way that doesn't
> feel as friendly as the rest of the site, but maintaining that visual
> consistency is important.

John - does the above help? I realize this will be a balancing act we haven't really done before. Let me know if there's anything else I can do to help.
Note: I moved the due date up on these creative assets to 1/24. See https://bugzilla.mozilla.org/show_bug.cgi?id=712470#c3 for more.
Whiteboard: due 1/26 → due 1/24
Got it, thanks Laura. That helps. Given that, we should use the blue version. I understand we don't want it to look too inviting, but we ought to be achieve that while still using that background and font system. Otherwise we're just splintering the Firefox site into another look & feel at a time when we're trying to pull things together everywhere else.

How does that sound?
Also, regarding visual identity I'd recommend that we essentially add Firefox ESR to the list of options on this page:
http://www.mozilla.org/en-US/firefox/brand/identity/wordmarks/

(with the idea that it would be more like Firefox Beta rather than Firefox Aurora and/or Nightly, which have different logos & color schemes)
I also preferred the second version (blue) to the other one.  It just made more sense.  Neither of these are "intimidating" and I don't think our sites should be described that way... but since it's related to the Firefox product, it makes sense to fold it into the Firefox visual theme.  You can add the appropriate disclaimers and caveats through copy or appropriate visuals, or in the following steps before download.
(In reply to Tara (musingt) from comment #14)
> I also preferred the second version (blue) to the other one.  It just made
> more sense.  Neither of these are "intimidating" and I don't think our sites
> should be described that way... but since it's related to the Firefox
> product, it makes sense to fold it into the Firefox visual theme.  You can
> add the appropriate disclaimers and caveats through copy or appropriate
> visuals, or in the following steps before download.

jumping in with a few thoughts:

1.) Since this will live inside of the releases sub-folder under the Firefox site, it should share the visual style (+1 to what Tara and John mentioned)

2.) When it comes time to apply copy, it might be helpful to do a "Step 1 of 2" to manage the friction in the user flow, so qualified users don't fall out of the experience, because they are confused

3.) Last bit also figuring out if this makes sense on the site or if, similar to Aurora, we move the user to the wiki for more information, including download via FTP (see Aurora's flow from http://www.mozilla.org/en-US/mobile/aurora/ to https://wiki.mozilla.org/Mobile/Platforms/Android#Download_Aurora )
(In reply to mcbmoz from comment #15)
> 2.) When it comes time to apply copy, it might be helpful to do a "Step 1 of
> 2" to manage the friction in the user flow, so qualified users don't fall
> out of the experience, because they are confused

Not sure I understand what you mean here? What would step 1 and step 2 be?
(In reply to John Slater from comment #13)
> Also, regarding visual identity I'd recommend that we essentially add
> Firefox ESR to the list of options on this page:
> http://www.mozilla.org/en-US/firefox/brand/identity/wordmarks/
> 
> (with the idea that it would be more like Firefox Beta rather than Firefox
> Aurora and/or Nightly, which have different logos & color schemes)

John, do you mean something like this?
http://cl.ly/0B1X400g403J3P3B3040
Lee, I'd say that's about right and goes along with how we do it for beta, nightly and aurora.  I can finalize up a wordmark in vector if needed. 

Also, just as a reminder, the spacing between Firefox and ESR should be one tittle (dot) of the i in Firefox from the registered mark. Looks like your mockup is pretty much exact!
It could just be me, but I'm not entirely clear on what needs to happen next here. What's the status on content?
(In reply to Matej Novak [:matej] from comment #17)
> (In reply to mcbmoz from comment #15)
> > 2.) When it comes time to apply copy, it might be helpful to do a "Step 1 of
> > 2" to manage the friction in the user flow, so qualified users don't fall
> > out of the experience, because they are confused
> 
> Not sure I understand what you mean here? What would step 1 and step 2 be?

Step 1. join the mailing list (they don't have to - it's an interim step to create friction and dropoff)
Step 2. get access to the content
(In reply to John Slater from comment #20)
> It could just be me, but I'm not entirely clear on what needs to happen next
> here. What's the status on content?

Not sure if it's *the* next step, but I'm working on copy this week.
hey guys, friendly ping here.  Where does copy stand (friendly ping to Matej for status), and what are the next steps (LoMo)?
(In reply to Tara (musingt) from comment #23)
> hey guys, friendly ping here.  Where does copy stand (friendly ping to Matej
> for status), and what are the next steps (LoMo)?

Thanks for continuing this while I was away.  Next steps are to see the copy from Matej and to get sign off from patrick and co.  I also want to clarify,  what will be added to the header on mozilla.org/firefox headers is a link to the FAQ, not a link to the download page.  Having said that, let me chat with Patrick about the blue background.
(In reply to Laura Mesa [:lmesa] [:lvmesa] from comment #24)
> (In reply to Tara (musingt) from comment #23)
> > hey guys, friendly ping here.  Where does copy stand (friendly ping to Matej
> > for status), and what are the next steps (LoMo)?
> 
> Thanks for continuing this while I was away.  Next steps are to see the copy
> from Matej and to get sign off from patrick and co.  I also want to clarify,
> what will be added to the header on mozilla.org/firefox headers is a link to
> the FAQ, not a link to the download page.  Having said that, let me chat
> with Patrick about the blue background.

LoMo - Any updates on the Blue Background and other creative feedback from your or Patrick here? We're waiting on that before the design can be complete. 

Note: Copy is being created in Bug 712819.
Note: if this page is on mozilla.org/firefox, the blue background isn't really negotiable. There are plenty of other ways we can make the page seem not consumer friendly though.
 
(In reply to John Slater from comment #26)
> Note: if this page is on mozilla.org/firefox, the blue background isn't
> really negotiable. There are plenty of other ways we can make the page seem
> not consumer friendly though.

Can we discuss? 
This page needs to be visually different from our other firefox products. This is a product that is meant for a particular user set, and making it feel too much like GA Firefox is a big risk for us in that users who do not like the current release cadence might download it in mass--we need to make sure that when general users get to this page they have a big visual indicator that they are in the wrong place.

If there are other suggested ways to make this look intimidating, I would love to see those.
Happy to discuss.

I think we're focusing too much on the background though. If the goal is to keep ESR away from consumers, that should be done by putting it on a different site, or hiding it in the nav, or not having a big download button on the page, etc. The background is very minor compared to all that.
(In reply to John Slater from comment #28)
> Happy to discuss.
> 
> I think we're focusing too much on the background though. If the goal is to
> keep ESR away from consumers, that should be done by putting it on a
> different site, or hiding it in the nav, or not having a big download button
> on the page, etc. The background is very minor compared to all that.

Users won't discover this page through the L1 nav, so LauraM., can you outline how you want users to discover this page? (e.g. someone sends them a link)

One item to adjust the friendliness factor would be to eliminate the L1 nav from the page, making it more of a deadend, unless you want users who land on this page to go back and forth in the product site.
(In reply to mcbmoz from comment #29)
> (In reply to John Slater from comment #28)
> > Happy to discuss.
> > 
> > I think we're focusing too much on the background though. If the goal is to
> > keep ESR away from consumers, that should be done by putting it on a
> > different site, or hiding it in the nav, or not having a big download button
> > on the page, etc. The background is very minor compared to all that.
> 
> Users won't discover this page through the L1 nav, so LauraM., can you
> outline how you want users to discover this page? (e.g. someone sends them a
> link)

1) Link to Firefox ESR page off of the Release tab on mozilla.org/firefox
2) Direct link 
3) SEO 

> 
> One item to adjust the friendliness factor would be to eliminate the L1 nav
> from the page, making it more of a deadend, unless you want users who land
> on this page to go back and forth in the product site.

This is one good potential solution. 

Just talked with chrissie, laura, lee and matej and we like the idea of making this a three step process on the landing page regardless if you sign up for the mailing list.
1) Sign Up for mailing list ->  Read the Faq -> Download on the FAQ
2) Don't sign up for the mailing list -> Read the Faq -> Download on the FAQ
+1
New version attached here. 

- Firefox ESR wordmark (Comment #18)
- There was talk of taking Firefox navigation out of the header, but giving users navigation links in footer (light footer in mockup is FPO)
Few guiding thoughts as folks review this page:

* The page is "simple".  No fancy graphics, illustrations, colors, etc. to maintain that appropriately unfriendly and distinctly "different" tone that LoMo wanted, while still delivering the information effectively and keeping it aligned to the Firefox style themes.

* Nav, no nav. not sure what we decided there.  Please advise. 

* I'm not sure what the mailman system/page looks like, but it might be worth taking that blurb at the bottom (if they don't want to sign up) and moving it to that page (where it makes more sense, imo).  Otherwise... the goal here is to outline the product benefits, who it's for, steps, and a general CTA to "get started".

* "Get started" sends them to the mail sign up.


Thoughts?  (Thanks Lee and Matej).
(In reply to Tara (musingt) from comment #33)
> Few guiding thoughts as folks review this page:
> 
> * The page is "simple".  No fancy graphics, illustrations, colors, etc. to
> maintain that appropriately unfriendly and distinctly "different" tone that
> LoMo wanted, while still delivering the information effectively and keeping
> it aligned to the Firefox style themes.

I think this looks really good.  Part of me wants to know what others think about highlighting the "not from an organization" area to make it more obvious. 
> 
> * Nav, no nav. not sure what we decided there.  Please advise. 

Me either--I like the focus and "starkness" without it though. 
> 
> * I'm not sure what the mailman system/page looks like, but it might be
> worth taking that blurb at the bottom (if they don't want to sign up) and
> moving it to that page (where it makes more sense, imo).  Otherwise... the
> goal here is to outline the product benefits, who it's for, steps, and a
> general CTA to "get started".

Let me quickly figure out what the sign-up page looks like and what we can change. What concerns me is that once we send them to mailman, we then need to make sure they have a link to go back to the download page, right? Let me figure this out today.  
> 
> * "Get started" sends them to the mail sign up.
> 

Agreed. 
> 
> Thoughts?  (Thanks Lee and Matej).
Is leaving the Firefox logo off the wordmark in the upper left intentional? Seems like it should be there.

(Page looks good to me.)
(In reply to Laura Mesa [:lmesa] [:lvmesa] from comment #34)
> (In reply to Tara (musingt) from comment #33)
> > Few guiding thoughts as folks review this page:
> > 
> > * The page is "simple".  No fancy graphics, illustrations, colors, etc. to
> > maintain that appropriately unfriendly and distinctly "different" tone that
> > LoMo wanted, while still delivering the information effectively and keeping
> > it aligned to the Firefox style themes.
> 
> I think this looks really good.  Part of me wants to know what others think
> about highlighting the "not from an organization" area to make it more
> obvious. 

We talked about this too.  I think giving both those sections at the top equal weight made sense, since they're both equally covering who this is/isn't for... but perhaps Lee can try something and see how it looks.  


> > * I'm not sure what the mailman system/page looks like, but it might be
> > worth taking that blurb at the bottom (if they don't want to sign up) and
> > moving it to that page (where it makes more sense, imo).  Otherwise... the
> > goal here is to outline the product benefits, who it's for, steps, and a
> > general CTA to "get started".
> 
> Let me quickly figure out what the sign-up page looks like and what we can
> change. What concerns me is that once we send them to mailman, we then need
> to make sure they have a link to go back to the download page, right? Let me
> figure this out today.  

Well, if we put the little blurb on this page, the link there sends folks directly to the FAQ page (which has the download button).  But at least this way there's only one action on the landing page ( to "get started" which sends them to the sign up first) and if they choose to skip that, then they can click another link to go directly to the FAQ.  If your goal is to strongly urge folks to sign up, this is likely the best, vs. forking the action paths on the landing page.
Not sure how I missed the Firefox logo in that wordmark - thanks for mentioning.
Here's another mockup of the page to reference.
This looks good--thanks for adding that logo--it was missing for sure.

John, my guess is that we will be branding the ESR with a wordmark, etc.  I'm assuming we can just combine the word mark lee created for this page with the logo, right? 

As for the questions on mailman, I haven't gotten a response from stormy, patrick or kev--everyone seems to be traveling.  I hope I can give you answers on Mon.
(In reply to Laura Mesa [:lmesa] [:lvmesa] from comment #38)
> John, my guess is that we will be branding the ESR with a wordmark, etc. 
> I'm assuming we can just combine the word mark lee created for this page
> with the logo, right? 

Yep, exactly. Super simple.
LauraM. will this page need l10n?
No, it will not.  At least not for sometime as ESR will only be available in english for the first few releases.
This is great, thanks Lee. 

If email signup happens on the second page, I believe we'll need creative assets for that as well (the normal signup box, submit button, spacing, etc). Will this signup be on the FAQ page? (Tara or Chrissie please advise). If so, Lee, can you create a mockup for that too?
It was my understanding that there was already a sign-up form in place, LoMo could you please clarify?  There were no discussions or bugs regarding another page for email signup to be designed.  Personally, I didn't see the point of splitting the actions into two separate pages (sign up and FAQ) especially since you can just direct people to both with a single click "get started"  but perhaps there are use-cases I haven't thought of... so, will let LoMo claify and then we can figure it out.
(In reply to Tara (musingt) from comment #43)
> It was my understanding that there was already a sign-up form in place, LoMo
> could you please clarify?  There were no discussions or bugs regarding
> another page for email signup to be designed.  Personally, I didn't see the
> point of splitting the actions into two separate pages (sign up and FAQ)
> especially since you can just direct people to both with a single click "get
> started"  but perhaps there are use-cases I haven't thought of... so, will
> let LoMo claify and then we can figure it out.

So, there is a MailMan sign up right now, not an email sign-up like we usually use.  What I am concerned about is that someone gets to the landing page, does the CTA to sign up, is sent to the mailman registry...and then they have no way to get to the FAQ.  I'm trying to see if I can customize the Mailman sign up process so that when someone does sign up, they go straight to the FAQ or are at least given a link in the sign up process.  I'm waiting on Stormy and Kev to give me guidance. Hopefully will know more today.
I see.  so, what does that process/flow actually look like?  Does the mailman signup box appear on the same page, or we direct them to a basic page that has this?  Can't we just have that all on a single page that folks get to after they click "get started"?  the email sign up can be at the top (to encourage them) with the FAQ and download below it.  Since we have the steps clearly outlined... both steps should be easy to find and follow.  As you noted, if you've got a link to the MailMan signup first, but no clear CTA to direct them to the FAQ, that's confusing :)
Blocks: 719156
Depends on: 717341
No longer depends on: 717341
Hi all,
Attaching the FAQ page mock-up here.
Looks great to me, Thanks Lee.

Folks, is this good enough to move into implementation?  I dont' think we need any more design work on the FAQ, please advise
Thanks Tara, Lee. The FAQ page looks great to me.  I think the FAQ is okay to move to implementation as the copy has also been reviewed by Matej.
Attachment #583654 - Attachment mime type: image/pdf → application/pdf
Hey all, Lee/LauraM, can guys work to get the PSDs in here by e.o.d. today.

I realize that the FAQ copy is still an outstanding deliverable, but we can drop that in and format in the HTML.

Once you do that, this can move over to implementation, and we need to get a webdev on this asap.
Lee is on PTO and will be back on Monday.  So I don't think he can publish the PSDs by eod today.
also, I believe copy is finalized and done:  Bug#717341
Chrissie helped translate for me, and I'm going to add it here so everyone is on the same page:


"The user experience will be way easier to debug when we get it onto staging, but what Fred has recommended is that we pull the sign-up functionality from:

    https://mail.mozilla.org/listinfo/enterprise - starting at, "Subscribe to Enterprise by filling out the following form ..." 


    https://mail.mozilla.org/subscribe/enterprise - this is the "Thank you for subscribing" page


and, drop that into an iframe, which is sort of like an on-page pop-up, instead of sending the users to either of those pages directly, which would result in not getting to the FAQ and download part of the experience directly.

We're going to try to make this work, but it's hacky and unclear that we can do it seamlessly, if it doesn't work then the fallback will be to put everything on a single page, launch that, and then iterate on the design (maybe fold the FAQ into an expandable/accordion experience like we do for http://www.mozilla.org/en-US/press/ataglance).

So, Monday, we'll take the PSDs and explore the options :-) The sign-up form for mailman is loooong."
Hi Lee--friendly ping here since we'll need to finalize this today.
Hi folks,
PSDs are here:
http://cl.ly/210y2l403i0J2N3l2q3I

ESR logo/wordmark is here:
http://cl.ly/3P460u1y0c470n3Y3T3E

It's my understanding that we're going to start webdev on these pages, and test-drive the interaction once we know if Mailman will work in the pop-up page - so the PSDs are the same as we've been reviewing them, with the most updated copy.
Thanks Lee! Closing as resolved/fixed and moving to implementation in bug 717327 and bug 719156
Status: ASSIGNED → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Lee-we need a PNG version of the ESR wordmark. Can you upload the file here?

Thanks!
Attached image Firefox ESR logo png — 
Here you go, Laura
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: