715566 - [One Mozilla] /contribute landing page design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[mcbmoz]

Attachment: v4-landing-page-a

Tara & team, opening this bug for the redesign of the http://mozilla.org/contribute

Happy to set up a kickoff meeting if needed, part of the One Mozilla redesign.

Content owners: David/Mary
ux & implementation help: CB
Designer: Sean
Copy: Matej
Creative: Tara

Attached are wireframes with annotations. Here are a few notes:

* this is one of major 4 pages from the mozilla.org L1 nav

* copy is carried over from the current page, but it would be great if matej could take a look at the new design to see if he has any recommendations

* versions A, B, C, all share the same template, but with different content in the hero area (video, still photo, slider of quotes)

* share the same header, footer, uni tab, and styles as the new mozilla.org home

* the lead generation sign up inspiration comes from http://www.zendesk.com/product/key-features (form expands when the user begins to type)

* the social sharing should be baked into the page and is different from the main Facebook/Twitter in the universal footer - this flow is more about sending to a friend who might also want to become a contributor

* inspiration for the interaction in the Opportunities area came from http://loosecubes.com/ (Find a space/check out these cool places)


Content for Contributor Notes/Testimonials (choose at least 5 for the slider or any layout that you think works with this copy in the hero image placement)

* "I can help with testing and QA. I also have some coding knowledge. I would love to help to grow both Mozilla and myself."

* "My colleagues and I would like to start a Mozilla community in Zambia. How can we do that?"

* "I’ve used Firefox since version 1.5 and I would like to take part as a translator to translate Firefox to my native Malay language. I hope I’ll be accepted to join this community."

* "I am a postgraduate law student based in London. I am writing to enquire whether there are any legal volunteering opportunities available."

* "If you need any help with mobile app development, I would be happy to help."

* "I am interested in web development and I don’t understand why there is no Mozilla in the Caribbean."

* "I’m an anthropologist. My application field is user experience, with a focus on web experiences. It would be great to help Firefox in user research."

* "I am vastly interested in all things Mozilla and the open web and can be quite brilliant when turning a phrase in support of the ideal I believe in. I am also a dynamite researcher and all around good cook."

* "I’m interested in most of your projects—I guess it would depend upon how you could use my skills. Thanks for the opportunity to help."

* "I’m a graphic designer interested in interface design, identity and other graphic stuff. I’m a technology fan and support free software. How can I help?

Comment 1

[mcbmoz]

Attachment: v4-landing-page-b

Version B. still image for hero area (fallback for devices without video)

Comment 2

[mcbmoz]

Attachment: v4-landing-page-c

Version C. quotes/testimonial content slider

Comment 3

[Matej Novak [:matej]]

I'm a bit concerned about creating new copy for subpages before we know what's going to be on the new homepage (content, tone, etc.). I also think the current copy is pretty good as is. Could we use that for now and then tweak in the future if necessary?

Comment 4

[mcbmoz]

(In reply to Matej Novak [:matej] from comment #3)
> I'm a bit concerned about creating new copy for subpages before we know
> what's going to be on the new homepage (content, tone, etc.). I also think
> the current copy is pretty good as is. Could we use that for now and then
> tweak in the future if necessary?

Yep, it might have gotten lost in all the content above, but this is what I wrote for you:

* copy is carried over from the current page, but it would be great if matej could take a look at the new design to see if he has any recommendations

No new copy needed, unless after the design is applied you see something that doesn't fit well or could fit better.

Comment 5

[David Boswell]

Just to reiterate what Chrissie said about the copy -- this is being carried over.  We thought it would be useful to take another look at it though since the context for some of this is different than the current page (for instance, the main CTA is different than the current page).

Comment 6

[Matej Novak [:matej]]

Sounds good. I'll keep an eye on it and tweak as necessary. Thanks!

Comment 7

[Tara (musingt)]

Thanks Chrissie.

Few questions / thoughts:

* I'm assuming this is already rolled up onto Sean's plate for the mozilla.org redesign?  if not, we may need to rethink who designs this.  Once Sean establishes the core visual design / theme... we can then free his plate a bit and reach out to our other designers to help apply that across the various pages.  Marking this as due in/by end of Q1 (unless someone tells me otherwise)

* I personally prefer version A (with video) but can see the photo working too if localization is an issue and a picture wills peak a thousand [localized] words - perhaps. I personally prefer having graphics vs. text in the hero space -- and showing faces of the community on a community/get involved page is always a plus.

* Are the community testimonials a new section being added?  I wasn't able to see this on the current page.  Perhaps I missed it.  The block marked with a question "testimonial space?" is that a suggestion you're looking for feedback on? what would that link to?  Is that just a one way communication of existing quotes from the community, or would we also prompt people to contribute their own / new quotes?  I'm not sure where the testimonials fall on the priority scale and how much weight we want to give them... but It feels like it would be squished in that space.  We may want to open up a new tier of content for the testimonials.

* I like the expandable email block.

* The section on finding opportunities sounds good in theory, but looking at the types and amount of content we have under each of those sections... I'm not sure how that would fit here. I worry that we'd need to expand this block a lot to accommodate the content... which would then push the "Promos" block way down. Things like "areas of interest" already have a long list of options which consume an entire page, so I'm not sure how we'd collapse this into a clean box as suggested here. And is the intention that we'd have some graphical representation / icon of each category and upon click we'd see the information come to surface? or that by default we'd be on one of those categories and could then toggle between them?

* on social sharing, lets be sure we have a compelling graphic (or simply the right/high res version of the logo) that goes out with the code.  In the past we've had instances where we've shared pages and really ugly/pixelated graphics and logos start showing up in people's streams :)  so, just making sure we've embedded some quality control there.

Comment 8

[John Slater]

Schedule note: let's discuss with the involved parties, but we'll need this a lot sooner than the end of Q1.

Comment 9

[Tara (musingt)]

I see, ok.  Thanks.  I assumed since Moz.org redesign had to happen first (and this adopting that new theme) that it would need till end of Q1.  I'll update the whiteboard with specific timing once we discuss and figure that out.

Comment 10

[mcbmoz]

(In reply to Tara (musingt) from comment #7)
> Thanks Chrissie.
> 
> Few questions / thoughts:
> 
> * I'm assuming this is already rolled up onto Sean's plate for the
> mozilla.org redesign?  if not, we may need to rethink who designs this. 
> Once Sean establishes the core visual design / theme... we can then free his
> plate a bit and reach out to our other designers to help apply that across
> the various pages.  Marking this as due in/by end of Q1 (unless someone
> tells me otherwise)

Design deliverable (finalized PSD): Feb 10, 2012

> 
> * I personally prefer version A (with video) but can see the photo working
> too if localization is an issue and a picture wills peak a thousand
> [localized] words - perhaps. I personally prefer having graphics vs. text in
> the hero space -- and showing faces of the community on a community/get
> involved page is always a plus.

This page will be heavily tested, so we've included the 3 varients, all three should be included in the Feb 10, 2012 deliverable.

> * Are the community testimonials a new section being added?  I wasn't able
> to see this on the current page.  

This will be 1 of 3 varations in the hero spot. The approved copy is up in comment 0

Perhaps I missed it.  The block marked
> with a question "testimonial space?" is that a suggestion you're looking for
> feedback on? what would that link to?  

It's just one-way communication at this point.

>Is that just a one way communication
> of existing quotes from the community, or would we also prompt people to
> contribute their own / new quotes?  I'm not sure where the testimonials fall
> on the priority scale and how much weight we want to give them... but It
> feels like it would be squished in that space.  We may want to open up a new
> tier of content for the testimonials.

Since this is for testing, we want to keep it simple and just include an implementation similar to the one referenced in the notes on http://www.barackobama.com/
 
> * I like the expandable email block.
> 
> * The section on finding opportunities sounds good in theory, but looking at
> the types and amount of content we have under each of those sections... I'm
> not sure how that would fit here. 

We're confident that this will be easily resolved in implementation, when we do a bit of javascript trickery. An example is referenced in the notes for the designer, to look at the lower third of http://loosecubes.com/ (click check out these cool spaces)

I worry that we'd need to expand this
> block a lot to accommodate the content... which would then push the "Promos"
> block way down. Things like "areas of interest" already have a long list of
> options which consume an entire page, so I'm not sure how we'd collapse this
> into a clean box as suggested here. 

I'm confident we'll figure this out once the design is underway. There are a few really good examples included in the interaction notes on the wireframe.

And is the intention that we'd have some
> graphical representation / icon of each category and upon click we'd see the
> information come to surface? or that by default we'd be on one of those
> categories and could then toggle between them?
> 

I'm confident we'll figure this out once the design is underway. There are a few really good examples included in the interaction notes on the wireframe.

> * on social sharing, lets be sure we have a compelling graphic (or simply
> the right/high res version of the logo) that goes out with the code.  In the
> past we've had instances where we've shared pages and really ugly/pixelated
> graphics and logos start showing up in people's streams :)  so, just making
> sure we've embedded some quality control there.

This is referring to the implementation piece v. design, I'm working on a cross-team solution that will ultimately impact all of our sites. Shouldn't be a blocker for this, but duly noted for implementation.

Sounds like next steps would be to get Ty or Lee assigned to this, what do you think?

Comment 11

[John Slater]

Re: the issues discussed above, let's assign a designer and we can work through them in the process of creating a page. Tara raises some good points, but I know the team has already thought through a lot of this stuff so I'm confident we can figure it out.

Comment 12

[mcbmoz]

Tara, gentle nudge here, can you please assign to Ty or Lee, so I can touch base with them directly. Thanks!

Comment 13

[Tara (musingt)]

Hi there.  Thanks for the ping.  I'll connect with Ty and Lee to see who can take this on and get back to you today.

Comment 14

[Tara (musingt)]

Enter:  Ty

Comment 15

[Tara (musingt)]

sorry :)  ok, back on track.

Comment 16

[mcbmoz]

Ty, I'll set up a short call for us this week!

Comment 17

[Ty Flanagan]

Thursday or Friday is good for me :)

Comment 18

[mcbmoz]

Ty, David caught something, before you upload your first pass here, can you change the sub-nav (in the white band) to read:

Get Involved By:  Area of Interest  Location   Time Available

Comment 19

[Ty Flanagan]

Attachment: Moz.org Redesign - Contribute Landing Page - A

Comment 20

[Ty Flanagan]

Attachment: Moz.org Redesign - Contribute Landing Page - C

Comment 21

[mcbmoz]

Ty, these look amazing!

Any changes we have will be very small (if at all), can you upload the PSDs, so Steven can get working on coding them. Thanks!

Comment 22

[David Boswell]

Thanks for these Ty -- they both look great.  I just blogged about this to get feedback.  I'll probably Yammer and post to the Mozillians list too.

http://davidwboswell.wordpress.com/2012/02/14/getting-involved-with-mozilla-evolved/

I'll follow up soon with feedback.  My initial thoughts are that we might want to remove the sub-nav for this page (it seems duplicative of the Find An Opportunity section but I could see how this fits on sub-pages) and I think we may need to tweak the form some (I'm not sure if the combined lead generation/email sign-up is very clear).

Comment 23

[Ty Flanagan]

PSDs:
http://mozilla.tyflanagan.com/artwork/MozOrg_Redesign/MozDotOrg_ContributePages_PSDs.zip

Comment 24

[mcbmoz]

(In reply to David Boswell from comment #22)
> Thanks for these Ty -- they both look great.  I just blogged about this to
> get feedback.  I'll probably Yammer and post to the Mozillians list too.
> 
> http://davidwboswell.wordpress.com/2012/02/14/getting-involved-with-mozilla-
> evolved/
> 
> I'll follow up soon with feedback.  My initial thoughts are that we might
> want to remove the sub-nav for this page (it seems duplicative of the Find
> An Opportunity section but I could see how this fits on sub-pages)

We've planned for two major use cases here:

Use case 1.) "Impulsive, Knows what she wants" - Sub-nav above the video lets users see all the areas covered, in case they want to jump right in v. viewing the video.

Use case 2.) "Pokey, methodical, Loves to scroll" - The area of sub-nav below the video/email/lead-gen sign-up is for the user type who watches the video, scrolls, and like to peruse. 

Being prepared for those two use cases is good thing, plus you can always run a test without the sub-nav and see if your conversion or other metrics improve.


> I
> think we may need to tweak the form some (I'm not sure if the combined lead
> generation/email sign-up is very clear).

Yep, but that's done more easily once the form is interactive, so let's move over to Bug 725678

\0/\0/\0/

Comment 25

[David Boswell]

(In reply to mcbmoz from comment #24)
> Being prepared for those two use cases is good thing, plus you can always
> run a test without the sub-nav and see if your conversion or other metrics
> improve.

Sounds good.

> Yep, but that's done more easily once the form is interactive, so let's move
> over to Bug 725678

Sure.

Let's still leave this bug open for a day or so for me to gather any responses to my blog post.  I'll add feedback soon, but I don't expect anything big.

Comment 26

[mcbmoz]

David,

Since we're on a rapid schedule, we'll be making any edits to copy and content over on the implementation bug v. back here in the PSD. Steven is a whiz at this, as things change in HTML that are harder to see in a PSD. If you can add your feedback over in Bug 725678, that would be great. 

If there's a radical change or new design asset needed, we'll open a new bug for that so it's not a blocker to the scheduling. Thanks!