646868 - Design newsletter/download page for rapid releases

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Laura Mesa [:lmesa] [:lvmesa]]

We need this page up for April 12th.

Basically what we want to do is create a page that will hold two newsletter sign-ups for people interested in getting more information on the Aurora and Beta release channels. 

We had a page (mozilla.com/firefox/beta/feedback) that we could use to begin. 

This page could live for now under the desktop tab and could probably be 

mozilla.com/firefox/future-releases

We can, for now, skin it with Moz.com theme and just create a headline, subheadline and two boxes that describe what each channel does and what to expect. We then put each email signup underneath each descriptive box.

Comment 1

[Tara (musingt)]

Thanks Laura, is there any way you can share a screenshot of the page you referenced? As you noted on the phone, the redirects are not allowing me to see the page.  If we have an existing template, it would be great to just use that vs. starting from scratch. 

I'll see if our freelancer Ty can help us with this.  He's quick, and knows the site's design language pretty well.

Comment 2

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: beta page from before

Again, this page was only added to help with inspiration.  We really just need two columns on the page (could be rows of content I guess too) where we have one section about beta channel and beta newsletter, and one section about aurora.

Comment 3

[Tara (musingt)]

OK.  So, the document has a lot of direction and content that I guess is not relevant to this particular page... right?  I don't want to confuse Ty.  So, will take a more simple approach.  Does the quick sketch attached capture the layout you have in mind?

* General header to put the contents in context / give background.
* Two columns per channel (Mayumi said include all 3)
* Followed by description of the channel
* A download button
* and sign-up form


* Sign-up form content is based off of past forms - right?  Do we have copy for that or should I just copy from the old beta site you shared?

Comment 4

[Tara (musingt)]

Attachment: Quick wireframe mockup

Comment 5

[Tara (musingt)]

Laura, could you please provide some more direction on this page please?  My wireframes seems to include more content than is needed, but if you can help set the content requirements I can hand this off to Ty to design.  He can start on it over the weekend.

Comment 6

[Laura Mesa [:lmesa] [:lvmesa]]

working on wireframe now--you should have it shortly.

Comment 7

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: Rapid Release Mockup

Note I included facebook and Twitter icons.

Comment 8

[Tara (musingt)]

Thanks Laura

So, per our discussion:

* Wireframe looks great, but would be better to lay out the content into columns vs. rows.  So, more vertical.  That way we can see both channels at the top, and scroll down for more info/ sign-up, etc. 

* Ty is going to start working on this over the weekend.  Please stay on point to provide feedback to him.

* The look and feel should echo the new mozilla.com

* Ty, we're looking to wrap this up by Monday.  I know that's tight, but you're well versed in the moz.com design language and can whip this up quickly - I hope.

* The Aurora logo is being done by Sean - so, he can post an update once it's ready, till then... we can FPO.

Comment 9

[Tara (musingt)]

one more thing:

* Copy is FPO, Matej is working on that.  Laura, could you please be sure to post any copy updates to this bug as you have them?  Ty can Greek them in for now, but if there are major changes in length... that would impact design.

Comment 10

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: Download/Newsletter page combined

Use this as the guide for the page.

Comment 11

[Laura Mesa [:lmesa] [:lvmesa]]

Please ignore the first half of this bug and begin from now on:

We will create one page to house the download buttons of build and sign up for the other newsletters.

This will be housed under mozilla.com desktop tab at the bottom of the list. name of page is TBD, but likely something like "future releases".

This page will house 
1. Aurora Build
a. logo and word mark
b. 2-3 sentences explaining what the build is and what to expect.
c. download button for the build
d. a link down to the newsletter sign-up for the page.

2. Beta build
a. logo and word mark
b. 2-3 sentences explaining what the build is and what to expect.
c. download button for the build (the button should be blocked out some how with a ool tip saying coming soon). 
d. a link down to the newsletter sign-up for the page.

3. Firefox 4
a. logo and word mark
b. 2-3 sentences explaining what the build is and what to expect.
c. download button for the build 
d. a link down to the newsletter sign-up for the page.

I think it makes sense to have only one newsletter signup for all three versions, with people choosing which list they actually want, or all of them if the choose. The link down to the signup isn't necessary unless the newsletter signup is below the fold.

Comment 12

[Tara (musingt)]

Thanks Laura.  This looks good to me.  Few quick notes:

* I don't think it makes sense to have a link for the newsletter sign-up if it's clearly presented there and visible above the fold.

* We can try two different layouts (I've attached rough mockups to illustrate these):

   1.) Three columns across the top, as you have illustrated in your mockup, with the signup block at the bottom.

   2.) Two columns, with the channels stacked to the left on top of each other, and the sign-up form on the right.  This makes everything more visible and gives the sign-up form more prominence.  I prefer this version, personally. But it really depends on how the content flows into the page.

* If having the FF logo at the top, and the 3 logos for each channel on the page is feeling like too much, we can just use the wordmarks.

* When download for a particular release is not available, we can simply include a "coming soon" blurb vs. a download button  - and update this when it's ready.

* For the email sign-up form, we want the user to be able to choose which release channels they want to hear from, by checking the relevant boxes.

* For the email sign-up form, we don't need a check box for the privacy policy - a link will suffice.

Comment 13

[Tara (musingt)]

Attachment: Layout options

Based off of the content direction Laura provided, and her wireframe... attached are two layout options we can explore.  These are pretty simple wireframes, meant to share general layout ideas... not as specific design direction.

Would be great to play around with the content and layout to see what works best.  We want to make sure that the three channels *and* sign-up form are visible above the fold, and that the CTAs are clear.

Comment 14

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to comment #13)
> Created attachment 523526 [details]
> Layout options
> 
> Based off of the content direction Laura provided, and her wireframe...
> attached are two layout options we can explore.  These are pretty simple
> wireframes, meant to share general layout ideas... not as specific design
> direction.
> 
> Would be great to play around with the content and layout to see what works
> best.  We want to make sure that the three channels *and* sign-up form are
> visible above the fold, and that the CTAs are clear.

Thanks Tara-- +1 to indicate my agreement.

Comment 15

[Steven Garrity [:sgarrity]]

Getting caught up here. A few questions:

It occurred to me this weekend that we will probably need the product-details library that provides the download buttons to be updated for the new download channels.

James, do you know who might be best to do that?

Also, in the wireframe (which is very helpful - thanks), there is a newsletter sign-up form for all three channels at the bottom, but there are also "Sign up for the newsletter" links in each column - do we need both the links and the form?

I wondered if we should have one of the newsletter channel checkboxes on by default (maybe "General Mozilla News") to help people who miss that field and submit the form with no channel selected?

Thanks.

Comment 16

[My]

For the newsletter sign-up form, I prefer to only have the form and not have 2 CTAs for the newsletter since that will be confusing.  

I think that generally we don't pre-check newsletter boxes in the form but Winston should comment on that since he's managed several newsletter implementations.  Winston, please see comment 15, the last paragraph

Comment 17

[Winston Bowden]

Let's not pre-check any of our newsletter form options.  Thanks!

Comment 18

[Ty Flanagan]

Attachment: Beta Page Download & Newsletter Sign Up

Here's the mockup based on the wireframe! :)

Ill be available during the day to make any changes you need.

Comment 19

[Steven Garrity [:sgarrity]]

(In reply to comment #18)
> Created attachment 523956 [details]
> Beta Page Download & Newsletter Sign Up
> Here's the mockup based on the wireframe! :)
> Ill be available during the day to make any changes you need.

Looks good. A few quick notes (might want to wait for confirmation from some Mozilla folk before making changes based on my feedback - I'm not "the decider" on this).

1. I wondered if three download column descriptions might look better if the left edge of the paragraph was left-aligned to the text in the title above, rather than the icon? Might end up too narrow.

2. I wondered if the download buttons could be close to the titles - though maybe shorter descriptions would be sufficient to tie them together.

3. Perhaps the newsletter sign-up title/desc ("Get the Latest News" / "Sign up for ...") could be floated to the left and the form could live on the right. This would allow the newsletter area to take up much less vertical space on the page. Something like way the headings on this page float to the left of some of the content: http://www.mozilla.com/en-US/firefox/security/#privacy

4. If I understand comment #16 correctly, we don't need the "Sign up for the newsletter >>" links in each column.

5. The "You will soon be able to..." paragraph might be more noticeable and push the page content down less if it were in a box in the top right of the page, something like the "Top Features" box on this page: http://www.mozilla.com/en-US/firefox/features/

To those writing the copy for this page, keeping those three paragraphs as short and as uniform in length as possible would be ideal.

Comment 20

[Steven Garrity [:sgarrity]]

I've setup a (mostly empty) template for this page in trunk in r87020. I wondered if /firefox/next/ might be a better URL?

Comment 21

[Winston Bowden]

Few edits to the newsletter section 

- We can remove the question asking for HTML or text format.
- Remove the checkbox for "agree to mozilla privacy policy"
- Place "Mozilla Privacy Policy" with a link underneath "We will only send you..."

Comment 22

[My]

Thanks Ty, great start.  Here are additional comments:
- Please delete the "Sign up for the newsletter" links under each channel, having the one newsletter at the bottom is fine.  
- Just call Final Release "Firefox" drop the "4" since we're moving away from version numbers
- I don't think we need "Searching for the future of Firefox..." and the paragraph below that.  Can we delete the paragraph "You will soon be able to experience..."  Maybe we can put the message about the newsletter in the Beta button since that's the only one that won't be available for download when this page launches.  
- Instead of big paragraphs for channel descriptions can we make them bullet points, I'll work with Matej on the messaging 
- For the newsletter portion, can we do what we do on the "What's new" page where the newsletter sign-up is collapsed first (http://www.mozilla.com/en-US/firefox/4.0/whatsnew/).  Also, with the envelope on the side" this way everything will be on the first page and won't require scrolling to see the newsletter sign-up

Comment 23

[Ty Flanagan]

Attachment: Beta Page Download & Newsletter Sign Up (Revised)

Hi everyone,

Thanks for all the feedback. I have made a few modifications based on the comments you provided. Ill still need to add in the updated copy once its ready.

Comment 24

[My]

Looks good, I only wish the newsletter template could be more horizontal since the right side of the page seems like wasted space I it seems that's the nature of template.  I'll work on copy now.  Also, I'll attach the latest Aurora logo to replace the one now.

Comment 25

[My]

Attachment: Latest Nightly and Aurora logo designs

Comment 26

[My]

One more thing, is there anyway to make "Aurora" standout more versus "Channel" and same for "Beta" and "Final Release" since those words are more important.

Comment 27

[Steven Garrity [:sgarrity]]

My: Can you let me know when this design is confirmed so we can start building out the page?

Ty: Can you post the PSD of the design when it's completely?

Thanks.

Comment 28

[My]

Attachment: Copy (close to final)

Ty, here is the close to final copy, I'd like Matej to work on the bullet points but I think that we can go ahead with development with this copy since the bullet points won't change the design.  Also note that I changed the copy in the buttons to include the full name i.e., "Download Mozilla Firefox Aurora", etc.  But not sure if that's a problem on the design of the buttons.

Comment 29

[My]

Once the latest copy changes are made, it should be ready for building.  I'll be on the look out.

Comment 30

[Ty Flanagan]

Attachment: Beta Page Download & Newsletter Sign Up (3)

Updated with the latest copy and images.
Anyway we can we add more copy to the beta channel? Its a little sparse compared to the Fx Aurora/Final Release copy.

Here is the latest PSD file too:
http://dl.dropbox.com/u/18740830/Moz/Beta_Page_Newsletter.psd.zip

Comment 31

[My]

Ty, looks great, thanks
Steven, please go ahead and start development with this latest design version.  Slater might want to cut down on some of the copy but it won't change the design.  Thanks!

Comment 32

[My]

One thing, sorry i didn't notice this earlier, the logos are wrong.  It's actually supposed to be the Sunrise logo for Aurora on the far left and the regular Firefox logo for Beta and Release (Nightly should not be on this page).

Comment 33

[John Slater]

Hey guys. I'm jumping in here late, but have a few quick thoughts:

- most importantly, is there a separate website bug for this? If not, let's resolve this bug and open that one to discuss issues with the development of the page.
- really feels like there's too much copy here to me. As Mayumi noted in comment #31, that shouldn't block development getting started, but we should discuss this today. Matej, please find me!
- #1 for Mayumi's comment #32. That seems like an easy thing to fix in the dev process though, so no need for a new PSD from you Ty.
- seems like there are a few other missing details, like the Firefox version # on the GA download button.

Overall, it's looking good but we should address the issues above before it goes live.

Comment 34

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to comment #33)
> Hey guys. I'm jumping in here late, but have a few quick thoughts:
> 
> - most importantly, is there a separate website bug for this?
647241, so I'm happy to move you other comments to the build bug.

Comment 35

[Tara (musingt)]

Closing.  We'll likely tweak/iterate on the design in the future.  But this bug is squished for now. Thanks all!

Comment 36

[Tara (musingt)]

Posting Sean's tweaks as an update to this bug for future reference:  http://mozilla.seanmartell.com/engagement/Beta_Page_Newsletter-revised.psd