708049 - [brand-q4] Redesign /about to be "Learn More" page

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Laura Forrest]

Design Bug
Help! We launched this great brand campaign for Q4 but don't have a matching landing page to link people to. The closest we have is http://www.mozilla.org/about/ which 1. has a different look and feel 2. has a different copy tone and style. Please create one-off landing page to live on a new URL that will help support this campaign. This new page will live on the mozilla.org/firefox site.

I know this is last minute for Q4 but this page is meant to be simple - to use the existing brand assets and only contain a headline, video, and descriptive text. Also note that this brand campaign is going into Q1 so this page will be used. 

More details below.

Direction:
-Use the look and feel of what we've created so far. For example: http://www.mozilla.org/en-US/firefox/8.0/firstrun/
-I'm imagining a cross between the state of Mozilla annual report landing page: http://www.mozilla.org/en-US/foundation/annualreport/2010/ and the first run page above. Specifically, the State of Mozilla landing page does a good job showing a headline, video, and supporting text - all things we want to have on this new landing page
-Use the orange collage background
-Keep the brand video
-keep a "learn more" link that will link users to the contribute page
-Use the mozilla.org/firefox site headers and footers so people can explore our site from here
-remove the social media components since we'll have those in the footer
-remove the firefox logo in the headline. Use a text headline instead
-Roughly pull from the template used here http://www.mozilla.org/en-US/firefox/8.0/firstrun/ 

Dates: 
Design & Copy done within next 2 weeks or by 12/16 in time for Fx9. 

What Will Link Here/Overall UX:
-"Learn more" within the version of What's New that will be launching with Fx9, Non-Profit awareness snippets, and more

Comment 1

[Laura Forrest]

Here's a reference to the other pages that use this new design:

Main landing page: http://www.mozilla.org/en-US/firefox/new/
http://www.mozilla.org/en-US/firefox/8.0/firstrun/
What's New page: https://bug698854.bugzilla.mozilla.org/attachment.cgi?id=578020

Comment 2

[Tara (musingt)]

enter: the amazing LEE !  
Lets catch up in person about this.  Would love your help.

Comment 3

[John Slater]

I met with the folks from the Mozilla Foundation today (about a number of topics) and brought this page up. They suggested that, with minor modifications (such as making sure there was a Join link or promo somewhere on there) it would be a good idea to go ahead and replace the current /about page with this.

My big concern is that the design will be so different from the rest of mozilla.org, but as the MoFo'ers pointed out, we already have a number of inconsistencies there so maybe it's ok. What do you guys think? (Am copying Stephanie to represent MoFo here.)

Also, what about replacing the existing brand video with the Story of Mozilla one that just came out?

Comment 4

[Laura Forrest]

(In reply to John Slater from comment #3)
> I met with the folks from the Mozilla Foundation today (about a number of
> topics) and brought this page up. They suggested that, with minor
> modifications (such as making sure there was a Join link or promo somewhere
> on there) it would be a good idea to go ahead and replace the current /about
> page with this.

Good to hear! Question - if we link people to the .org site they will be within that environment, in which their header options are "Community Map, Our Projects, Get Involved" and there's no social media footer. It's also not designed for product download or discovery like mozilla.org/firefox (there is a Projects section but it's pretty overwhelming). 

If this page is a one-off on /firefox, people will be able to easily explore other products, stay connected via social media, and it will match the overall look of the What's New page.

I can see it going either way, especially since the vast majority of people coming to this page will already be Firefox users. The big question is, what do we want them to do next? If to explore other products and connect to our social media I suggest using /firefox. If it's to get involved and check out community sites, I suggest mozilla.org.
 
> My big concern is that the design will be so different from the rest of
> mozilla.org, but as the MoFo'ers pointed out, we already have a number of
> inconsistencies there so maybe it's ok. What do you guys think? (Am copying
> Stephanie to represent MoFo here.)

I'm fine with the inconsistencies as well, but we should be consistent within this campaign. Meaning, match the look and feel, and copy tone.  After this campaign we can alter it to be more consistent for .org (if that's where it ends up living).
  
> Also, what about replacing the existing brand video with the Story of
> Mozilla one that just came out?

+1 - let's use the new video on this page.

Comment 5

[Laura Forrest]

(In reply to Laura Forrest from comment #4)
> (In reply to John Slater from comment #3)
> > I met with the folks from the Mozilla Foundation today (about a number of
> > topics) and brought this page up. They suggested that, with minor
> > modifications (such as making sure there was a Join link or promo somewhere
> > on there) it would be a good idea to go ahead and replace the current /about
> > page with this.
> 
> Good to hear! Question - if we link people to the .org site they will be
> within that environment, in which their header options are "Community Map,
> Our Projects, Get Involved" and there's no social media footer. It's also
> not designed for product download or discovery like mozilla.org/firefox
> (there is a Projects section but it's pretty overwhelming). 
> 
> If this page is a one-off on /firefox, people will be able to easily explore
> other products, stay connected via social media, and it will match the
> overall look of the What's New page.
> 
> I can see it going either way, especially since the vast majority of people
> coming to this page will already be Firefox users. The big question is, what
> do we want them to do next? If to explore other products and connect to our
> social media I suggest using /firefox. If it's to get involved and check out
> community sites, I suggest mozilla.org.
>  
> > My big concern is that the design will be so different from the rest of
> > mozilla.org, but as the MoFo'ers pointed out, we already have a number of
> > inconsistencies there so maybe it's ok. What do you guys think? (Am copying
> > Stephanie to represent MoFo here.)
> 
> I'm fine with the inconsistencies as well, but we should be consistent
> within this campaign. Meaning, match the look and feel, and copy tone. 
> After this campaign we can alter it to be more consistent for .org (if
> that's where it ends up living).
>   
> > Also, what about replacing the existing brand video with the Story of
> > Mozilla one that just came out?
> 
> +1 - let's use the new video on this page.

Strike (part of) that. 

Got some other opinions and thought about this more, and think it does make sense to concentrate our efforts on revising the .org /about page with this effort. Creating a new page would just duplicate effort, and revising .org /about is really needed.

So let's have this live there. Let's not use the orange background - too jarring since many people access this page outside of this marketing campaign, but do otherwise use components of this brand campaign - the bold copy, pictures of people, the orange template, etc.  

Thanks!

Comment 6

[Kristin Baird]

So let's have this live there. Let's not use the orange background - too jarring since many people access this page outside of this marketing campaign, but do otherwise use components of this brand campaign - the bold copy, pictures of people, the orange template, etc.  

+1 - we all know there will be some inconsistencies, lets just tie in where we can.

Comment 7

[sschipper]

I already filed the bug to replace the current video with the Mozilla Story video on the /about page and enable Universal Subtitles per the conversation that John and I had.  Bug here at:  https://bugzilla.mozilla.org/show_bug.cgi?id=708923  I filed this yesterday.   

We want to make sure the Join link still has the prominence it has on the current /about page. 

I am still relatively new to working in bugzilla so feel free to bug me with comments or questions or friendly pointers.

Comment 8

[Lee Tom]

> So let's have this live there. Let's not use the orange background - too
> jarring since many people access this page outside of this marketing
> campaign, but do otherwise use components of this brand campaign - the bold
> copy, pictures of people, the orange template, etc.  
> 
I'm a bit confused at where we left off on this design direction - Kristin and Laura, you both mentioned losing the orange background but also mentioned using the people pics and orange template. 

My understanding is we're either:
A: using the new Diff by Design style (orange) 
http://www.mozilla.org/en-US/firefox/8.0/firstrun/ 

or


B: updating content to fit into our existing .org styles 
http://www.mozilla.org/about/

Can you clarify? Thanks! L

Comment 9

[Laura Forrest]

(In reply to Lee Tom from comment #8)
> > So let's have this live there. Let's not use the orange background - too
> > jarring since many people access this page outside of this marketing
> > campaign, but do otherwise use components of this brand campaign - the bold
> > copy, pictures of people, the orange template, etc.  
> > 
> I'm a bit confused at where we left off on this design direction - Kristin
> and Laura, you both mentioned losing the orange background but also
> mentioned using the people pics and orange template. 
> 
> My understanding is we're either:
> A: using the new Diff by Design style (orange) 
> http://www.mozilla.org/en-US/firefox/8.0/firstrun/ 
> 
> or
> 
> 
> B: updating content to fit into our existing .org styles 
> http://www.mozilla.org/about/
> 
> Can you clarify? Thanks! L

Good question. We're mostly doing the second, B option, but using pictures of people where applicable, and the new brand language. While implementing the orange background is too jarring, feel free to use the orange in other ways as you see fit.

Comment 10

[Lee Tom]

OK, thanks Laura. 
Any chance you have or know where the PSD for this page is?
http://www-dev.allizom.org/en-US/firefox/new/

Comment 11

[Tara (musingt)]

Status update:  this is pushed to the 21st, end of day.  Thanks!

Comment 12

[Matej Novak [:matej]]

Just wanted to ping here to see if there's a mockup of this yet. Carmen and I are collecting screenshots of everywhere we've rolled out the new brand positioning this quarter for Chris and we'd love to include this if possible. Thanks!

Comment 13

[Lee Tom]

I'll have something for you to look at today, Matej. Stay tuned...

Comment 14

[Lee Tom]

Attachment: Mozilla.org - Learn More / About

Hi all, 
Please review attached mockup. Working on a blend of new Different by Design campaign style within current Mozilla.org site. Let me know what you think.

Comment 15

[John Slater]

I really like this...I had been thinking something similar for the orange background behind the video so *obviously* your idea is great.

One question - would the various CTA links currently under the video stand out more if they were over in the right nav area? They feel sort of obscured right now...might just be the sentence formatting or something like that.

Comment 16

[Lee Tom]

 
> One question - would the various CTA links currently under the video stand
> out more if they were over in the right nav area? They feel sort of obscured
> right now...might just be the sentence formatting or something like that.

We could treat those links like the ones on the Mozilla.org/ home page, for consistency:
http://cl.ly/1G2C210m3H2k3i1U0c0U

Matej, would something like this work (header + 2 lines of subtext and a Learn more >) ?

Comment 17

[Lee Tom]

Attachment: Mozilla.org - Learn More / About

Mocked up those links into the right column for context...

Comment 18

[Matej Novak [:matej]]

(In reply to Lee Tom from comment #16)
>  
> > One question - would the various CTA links currently under the video stand
> > out more if they were over in the right nav area? They feel sort of obscured
> > right now...might just be the sentence formatting or something like that.
> 
> We could treat those links like the ones on the Mozilla.org/ home page, for
> consistency:
> http://cl.ly/1G2C210m3H2k3i1U0c0U
> 
> Matej, would something like this work (header + 2 lines of subtext and a
> Learn more >) ?

Totally. If we have the space, we should use it. I'll work on some copy in the morning.

My only question is Join. We already have a graphic for it on the right, plus the mention under the video. Is there a reason for the double mention here?

Comment 19

[Matej Novak [:matej]]

I'm going to assume we want to keep the graphic for Join, so here are blurbs for the other three:


Our Mission
Promoting openness, innovation and opportunity on the Web.
Learn more >

Our Projects
Software and other innovations designed to advance our mission.
Learn more >

Get Involved
Become a volunteer contributor in a number of different areas.
Learn more >

Comment 20

[Lee Tom]

Attachment: Mozilla.org - Learn More / About

We also have the Our Mission link in the right column navigation. Would this also be considered redundant? I guess since educating the user about our mission is the priority of the page - it wouldn't hurt. New mockup attached

Comment 21

[Matej Novak [:matej]]

Good catch, I missed that. Seems a bit redundant now. I'd say we should either remove Our Mission from the top, since it's more prominent below, or change the top one to Our Manifesto. What do people think?

Otherwise I think it looks great.

Comment 22

[sschipper]

+1 on having the mission link in the right column where it is prominent.

Comment 23

[Laura Forrest]

From a UI perspective people usually ignore what's in the right column. Even though it's larger, it's structurally disconnected from the main part of the page. My recommendation would be to keep it in the line of text below the video. 

Since I'm clearly outvoted, and since this whole site will be redesigned in Q1 I'm fine with leaving it like we have in Comment 20 for now. :)

Let's get this puppy live!

Comment 24

[Lee Tom]

Thanks all! 
PSD is here:
http://intothefuzz.com/leetom/Mozilla.org/PSD/mozilla_learnmore.psd

Comment 25

[Kristin Baird]

weighing in later here....the new page looks great!

Comment 26

[mcbmoz]

adding Ryan to this bug.