765735 - Update Partnership page layout

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Gregory Jost]

We would like to enhance the layout and copy of the current partnership page (http://www.mozilla.org/en-US/about/partnerships/) to increase its usability, discoverability within moz.org and also make it friendlier!


> Page structure
(would be great to make sure all changes are l10n friendly)

* Main column

I suggest simplifying the hierarchy here with a simpler structure:
- Header
- Tagline
- Intro paragraph
- Partnership types
Right now, it seems that the sub-header ("partnerships opportunities) doesn't add much value. Same with the line "Mozilla offer many ways...".

Regarding the different partnership opportunities, would it make sense to use tabs to make the page feel lighter? Or alternatively, use anchors like on the apps page (https://www.mozilla.org/en-US/apps/partners)? It would be great to have images and/or icons with each of the different product/partnership areas.

* Form /right column
- Can we reduce the width of the form a bit? It seems to take a lot of space right now and the fields are fairly large given the font size. Can we maybe use a button like on the apps page to open or scroll down to the form?
- Shouldn't we replace "Firefox Personas" by "Mozilla Persona"? Can we remove Mozilla Toolbar (Mark, do we know why we have this?)

* Breadcrumbs: we need to fix the typo in "Partnerships"

* Copy edits
I took a pass at simplifying / modifying some of the content. I am filing a separate bug for this so it doesn't create to much noise while we discuss the page layout. However, I am pasting the suggested edits below so we can get a sense of the new amount of copy and how it might impact layout decisions.
Please note: this is simply a draft and will need to be refined.

* Navigation
Can we add a link to this page in the "Get Involved" section of the new Mozilla tab? It seems to me it would drive more traffic to this page while also telling the story that partners/orgs can play a part. Right now, the page feels a little buried in the About section.
 
------------------------
Proposed copy

HEADER
Partner with Mozilla

TAGLINE
Help Us Shape the Future of the Web for the Public Good

INTRO PARAGRAPH
Mozilla promotes openness, innovation and opportunity on the Internet by engaging in innovative partnerships with some of the world's leading brands, non-profits, technology, content and service providers.

PARTNERSHIP LIST
- Distribute Firefox on desktop – opportunities include distribution, customized versions, and more for our PC, Mac and Linux browser products. Learn more about Mozilla Firefox distribution policies.

- Distribute Firefox for Android – opportunities include distribution, customized versions and more.

- Develop and distribute an HTML5 App – Mozilla is seeking app publishers and developers to distribute apps across our desktop and mobile platforms, with a starting audience of 450M people on Mozilla Marketplace!

- Bring the Open Web to mobile devices – Project B2G is Mozilla’s new web based device platform. If you are a mobile device and tablet OEM’s/ODM’s, or a mobile operator, then we want to talk to you.

- Enable Mozilla Persona on your site – Persona is a federated login that provides the highest degree of user privacy and security.

- Delight your users and tell your brand story – Co-branding, editorial partnerships, content creation, rewards, events...  Mozilla is always looking for innovative marketing collaborations with like-minded brands.


FORM
Want to partner?
Please complete the form below. Our partnership team will review your request and get back to you as soon as possible.

Comment 1

[Gregory Jost]

Any thoughts on this?
I realize I didn't mention deadlines here. While this is not burning priority, it is also probably not that much work (I hope/think...) so it would be great if we could push this live by end of July. Does that sound fair?

Comment 2

[John Slater]

Thanks Greg. That timeline sounds reasonable. Is there an equivalent implementation bug for the web team?

Tara, let's discuss who should work on this...probably should be ready by mid-July.

Comment 3

[Tara (musingt)]

Thanks Ty for helping us knock this out.  Might be worth having a quick chat with Greg to discuss the page and requested changes.

Comment 4

[Gregory Jost]

ping

Comment 5

[Ty Flanagan]

Hi Gregory,

Ill have the page completed today.

Question - will the form fields be changing depending on locale? Certain countries/counties/states/etc use different form systems to gather address information.

Comment 6

[Gregory Jost]

Possibly in the future, but we won't be localizing this page just now. Being mostly a B2B page, I think it's ok to keep the conversations in English as much as we can.

Comment 7

[Ty Flanagan]

Attachment: Moz.org - Updated Partnership Page

Comment 8

[Ty Flanagan]

Hmm, can we remove the "Get Started" header and tie it into the copy below? the layout would benefit from this.

Comment 9

[Gregory Jost]

Hi Ty, thanks for this.

I think the execution is great, but I admit I'm not sold on the underlying direction, sorry :( A notepad would probably be great for a younger audience (Student Reps?) but we are talking to business partners here. It also feels too much like a table, or a laundry list, which doesn't really make the content stand out or appear all that exciting. Is it ok if we explore a different directions?

I was hoping for something more "classy" (not stiff or boring), spaced out and engaging, with larger visuals like on the apps page (https://www.mozilla.org/en-US/apps/partners/#platform). I also liked the anchor system from that page (could also be tabs but maybe anchors are more lightweight).

I would also rather keep the CTA. It plays an important role in motivating visitors to connect.

I'm happy to discuss more, or maybe jump on a quick call to throw a few ideas?

Comment 10

[Tara (musingt)]

Thanks Ty!  I think this is a good start but agree with Greg's comments about the notepad.  Also, it might just be me, but the brown block with the header for Partnership Opportunities seems to really dominate the page... might be worth trying something different so other elements don't get drowned out.  I like those icons though!  I think something relatively simple could work just fine for that section, even using the white color blocks vs. worrying about replacing the notepad with another object.  Lastly, out of curiosity: was the intention to keep the layout relatively the same with a two-column grid?

Comment 11

[Gregory Jost]

I am open to suggestions on the two-column structure but as long as it doesn't make it harder to get in touch. With this page, we want to offer a gateway to the different opportunities and an esay way to reach out to the appropriate person internally, so the form should definitely stay visible and accessible.

+1 on not using another object. Simple is good, though I think the icons could be a tad larger. Personally, I was hoping we could use a navigation like this: http://www.mozilla.org/en-US/products/

but with a list layout (ie vertical) vs table like they have there(3x2). This also lets us use more inspiring imagery (the visuals might be bigger than we need on this example, but I like this better than icons personally)

my 2 cents

Comment 12

[Mike Alexis [:malexis]]

Just wanted to check on an eta for hand-off to webprod for implementation.

Greg, is there a target go live date for this?

Comment 13

[Gregory Jost]

initial ETA was end of July but the team has been busy so I would like to aim for August 24th (I am going on PTO after that).

Ty, does this sounds reasonable? When do you think you will be able to send a new proposal? Let me know if you'd like to discuss.

Comment 14

[Ty Flanagan]

I can work with that date Greg. Mike, how much time would your team need for an August 24th delivery?

Comment 15

[Mike Alexis [:malexis]]

(In reply to Ty Flanagan from comment #14)
> I can work with that date Greg. Mike, how much time would your team need for
> an August 24th delivery?

8/16 hand-off would be ideal (5 days for implementation and QA). Anything later would put the go live date at risk.

Comment 16

[Gregory Jost]

So I guess a 8/16 hand-off really doesn't leave us a lot of time Ty! ;)
Any chance we can get new mock-ups today?

Comment 17

[Ty Flanagan]

I will try get the designs readied today.

Comment 18

[Tara (musingt)]

Thanks Ty.  This is now part of the P1 of the moz.org project, so I'd like to make sure it gets done soon, especially sine Greg has been waiting for some time.  If there's anything I can do to help please let me know.  Otherwise, looking forward to seeing the next rev.  and thanks in advance!

Comment 19

[Ty Flanagan]

Attachment: Moz.org - Updated Partnership Page - Revised

I gave this somewhat of similar treatment to the products page.
Condensing the form along the right side (versus its original sizing) did propose some layout challenges with the main area content. With our current grid system, I have to rely on this type of linear layout for the Partnership Opportunities.

thoughts?

Comment 20

[John Slater]

This looks fantastic, thanks Ty. I really like the new design.

One thing we'll need to think through is branding around Marketplace and Persona. The current thinking is that, in this use case, we'll be calling it Firefox Marketplace while Persona will most likely remain branded with Mozilla.

But, since the Marketplace link points to a page that's currently titled Mozilla Marketplace it's probably fine to leave as is...we'll just need to make sure we update this page when we update the rest of the Marketplace branding.

Comment 21

[Gregory Jost]

This is great. Thanks Ty!

My only comment would be that at first glance, as I was scrolling rapidly, I had a hard time connecting each paragraph to the appropriate image. Would it make sense to:
* add a tad more space between each paragraph and the following image to space things out a bit?
* make each product name more prominent, maybe in red like on the product page?

My 2 cents, you guys are the pros, so let me know what you think.


Are we confident the graphics will be easy to maintain?


About the form: I don't think "title" refers to Mr, Ms, Miss etc. but rather to the person position in their company. So the drop-down probably doesn't work here.

Matej: looking at this, I wonder if the header "Partnership Opportunities", isn't a bit redundant. I'll update bug 765743 to see if we can find something better here.

Comment 22

[Ty Flanagan]

Hey Greg,

Ill look at including visual separators again to try make the sections more apparent. We could make the headers red, but that would require it to link to another webpage since we reserve red for hyperlinking at this time.

With regards to the visuals, they wont be difficult to modify or maintain. I picked these image dimensions and focal areas which should not dramatically change over time.

Comment 23

[Gregory Jost]

Thanks Ty.
Echoing Matej's comment on bug 765743, is it possible to see how it would look like with the changes you suggested and without the header "Partnership Opportunities"?

Comment 24

[Ty Flanagan]

Attachment: Moz.org - Updated Partnership Page - Revised (2)

- Added the section separators
- removed the "Opportunities" header

Comment 25

[Gregory Jost]

I like it! Thanks Ty.
If everyone is ok with it, I suggest we implement this --> bug 777525.
Mike, do you need anything from me?

Comment 26

[Ty Flanagan]

Great! Ill ready the PSD and attach it shortly

Comment 27

[Ty Flanagan]

PSD can be grabbed from here:

https://www.dropbox.com/s/31g1s3yv4hm9pq8/Moz_About_Partnerships_Final.psd.zip

Comment 28

[Tara (musingt)]

Thanks Ty.  Closing this out. 
Mike, this (as you know) is part of the Phase 1 for the moz.org about/mission redesign.  Lets be sure it gets implemented asap (before mozcamp)  thanks so much!