Closed Bug 651604 Opened 13 years ago Closed 13 years ago

Design and build an update billboard encouraging users on older Firefox 4 beta builds to update to Aurora

Categories

(www.mozilla.org :: General, defect, P1)

Product:
www.mozilla.org
Component:
General
Type:
defect

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: lmesa, Assigned: sgarrity)

References

(
URL
)

Details

Attachments

(2 files)

Mockup of billboard in context
215.57 KB, image/png
Details
Aurora billboard image
339.74 KB, image/jpeg
Details 
This is an urgent bug and needs to be done ASAP. 

We want to build a 700 x 360 billboard, similar to what was done in bug 626839 to push 4.0.1 beta users to Aurora.

Billboard is based on https://www.mozilla.com/en-US/firefox/4.0beta/details/ and  we need to switch out Firefox logo for Aurora and the Aurora word mark. 

Copy wise, we will be offering this to users currently on 4.0.1 beta--in other words, these people are relatively tech savvy and are generally excited about being on the latest versions of Firefox. We should be a bit more aggressive in tone with our messaging compared to the firefox/channel/ page and I think we should do bullet points instead of a sentence. 



The copy could be something as follows:

Be part of the Cutting Edge
Download Mozilla Firefox Aurora
-Download Aurora and be one of the first to try out the newest features in Firefox
-Help decide what features make it to Firefox
-*Not all add-ons are compatible with Aurora*

The add-ons warning definitely needs to be there. 

Also, we will need to localize these messages in french, german, spanish, portuguese, fwiw.
Warning should also mention that Aurora is not as stable as other channels.
And to define the deadline--we'd like this ready to go tomorrow at noon tomorrow.
Matej, looks like you're first in line here. Can you help?
Yup, already on it. Should have something later today.
hi slater. assigned this to you for now- since this bug is both for copy and design. thanks!!
Assignee: nobody → jslater
Ok. Steven, will you be able to help with the design/build? Sounds like copy will be ready pretty soon.
Three headline options and two versions of the bullet points. The first set is similar to our other messaging, just amped up a bit; the second takes a different approach. Let me know if either of these are working for you guys.


[HEADLINE]

Browse on the Cutting Edge

Experience the Latest

The Future of Firefox


[CTA]

Download Mozilla Firefox Aurora


[BULLETS]

• Get the very latest features before they go to beta

• Give feedback and help decide what makes it to final release

• But watch out, Aurora is unstable and not all your add-ons will work



• Newest features: pre-beta, might not make it to final release

• Feedback wanted: what works, what doesn't, what stays, what goes

• Not for everyone: unstable environment, not compatible with all add-ons
Thanks Matej. I'm leaning towards option 1 for both...Laura/Mayumi, what do you think?
I agree. Option 1 for me.
Steven, can you take this one? Design direction from comment #0, copy from comment #7 (first option).

Tight turnaround...let us know. Thanks!
Assignee: jslater → steven
Blocks: 646236
Priority: -- → P1
(In reply to comment #10)
> Steven, can you take this one? Design direction from comment #0, copy from
> comment #7 (first option).

Yeah, I'll work this up tomorrow morning in my Atlantic Time Zone future - should have something by the time Mountain View is getting going.
(In reply to comment #11)
> (In reply to comment #10)
> > Steven, can you take this one? Design direction from comment #0, copy from
> > comment #7 (first option).
> 
> Yeah, I'll work this up tomorrow morning in my Atlantic Time Zone future -
> should have something by the time Mountain View is getting going.

This is why it pays to work with Prince Edward Islanders. Thanks, and say hi to the future for me!
Just to make sure I'm clear, the copy should be:

Browse on the Cutting Edge (headline)

_Download Mozilla Firefox Aurora_ (link/button)

• Get the very latest features before they go to beta
• Give feedback and help decide what makes it to final release
• But watch out, Aurora is unstable and not all your add-ons will work

Should the Aurora wordmark be used at all?
https://bug646896.bugzilla.mozilla.org/attachment.cgi?id=525605
Is https://www.mozilla.com/en-US/firefox/4.0beta/details/ the URL where the page will be hosted or is it in a different subfolder?
Re: comment #13, we just made a slight revision. Here's the new version:

Browse on the Cutting Edge (headline)

_Download Mozilla Firefox Aurora_ (link/button)

• Get the very latest features before they go to beta
• Help decide what makes it to final release
• Note: Aurora is unstable and not all your add-ons will work


As for the wordmark, that would be nice but will leave that up to your design judgement. If anything, I'd lean towards showing more of the Aurora logo since that looks so good, but the wordmark is nice too. If that's too vague, let me know and we can discuss further.
(In reply to comment #14)
> Is https://www.mozilla.com/en-US/firefox/4.0beta/details/ the URL where the
> page will be hosted or is it in a different subfolder?

A different subfolder that has yet to be named. 4.0aurora maybe?
(In reply to comment #16)
> (In reply to comment #14)
> > Is https://www.mozilla.com/en-US/firefox/4.0beta/details/ the URL where the
> > page will be hosted or is it in a different subfolder?
> 
> A different subfolder that has yet to be named. 4.0aurora maybe?

Hi Pascal and Laura. 

It will be hosted in the link below: 
http://www.mozilla.com/en-US/firefox/channel/aurora/details/index.html
(In reply to comment #0)
> Copy wise, we will be offering this to users currently on 4.0.1 beta

This is wrong. We'll be offering it to users on the beta channel running 4.0, NOT 4.0.1.
* I think we should mention something about l10n possibly being incomplete (for non en-US pages)

* I also don't think we should say it *is* unstable, only that it might be less stable than the build they are currently on. Ditto with the add-ons as the plan is to bump compat forward automatically when possible.  Current Aurora builds are perfectly fine and as a user those absolutes could really turn them off Aurora

* I wouldn't assume technical users. If want to do something similar to get a percentage of users from the release channel onto Aurora it'd be nice to not have to do more copy/localization work. "Help decide what makes it to final release" and "before they go to beta" seem targeted to a more technical audience to me

* I am not an expert here so feel free to tell me to be quiet :-)
Steven please use this:  
Browse on the Cutting Edge (headline)

_Download Mozilla Firefox Aurora_ (link/button)

• Get the very latest features before they go to beta
• Help decide what makes it to final release
• Note: Aurora may be less stable at times

====Answer to Christian's response======
* I think we should mention something about l10n possibly being incomplete (for
non en-US pages)[MAYUMI: I DEFER TO PASCAL ON THIS, I WOULD NOT ADD THIS TO THE ENGLISH PAGE]

* I also don't think we should say it *is* unstable, only that it might be less
stable than the build they are currently on. Ditto with the add-ons as the plan
is to bump compat forward automatically when possible.  Current Aurora builds
are perfectly fine and as a user those absolutes could really turn them off
Aurora [I GET YOUR POINT HERE ABOUT TONING IT DOWN; AND FOR ADD-ONS I THINK SAYING UNSTABLE IS ENOUGH TO DETER USERS; I'D LOVE TO ADD A MORE POSITIVE NOTE LIKE "Note: Aurora may be less stable at times BUT THAT'S THE PRICE OF BEING ON THE CUTTING EDGE" BUT NOT SURE THAT'S THE RIGHT TONE (SLATER?)]

* I wouldn't assume technical users. If want to do something similar to get a
percentage of users from the release channel onto Aurora it'd be nice to not
have to do more copy/localization work. "Help decide what makes it to final
release" and "before they go to beta" seem targeted to a more technical
audience to me [TO KEEP CONSISTENT WITH OUR MESSAGING AND TARGET AUDIENCE, I WANT MORE TECHIE PEOPLE ON AURORA AND IF THEY DON'T UNDERSTAND SOME OF THIS LANGUAGE I'D RATHER THEY STAY ON BETA]

* I am not an expert here so feel free to tell me to be quiet :-) [WE APPRECIATE YOUR INPUT]
Ok, 1 more as you appreciate my input (I see what you did there...)!

We shouldn't have an obvious link/button, as the quickest and most secure way is to have them just accept by clicking the button *below* the page in chrome. I don't even know what happens if they click a link in this popup (new tab? Does it dismiss this dialog?)

It might be good to have a big arrow pointing down to the chrome "Install" button, though the button order may vary by platform (we'd have to check and send different versions, which we know how to do as we did it for the 3.6.4 billboard)
(In reply to comment #20)
> I'D LOVE TO ADD A MORE POSITIVE NOTE
> LIKE "Note: Aurora may be less stable at times BUT THAT'S THE PRICE OF BEING ON
> THE CUTTING EDGE" BUT NOT SURE THAT'S THE RIGHT TONE (SLATER?)]

I really like this. Matej, confirmation?
(In reply to comment #22)
> (In reply to comment #20)
> > I'D LOVE TO ADD A MORE POSITIVE NOTE
> > LIKE "Note: Aurora may be less stable at times BUT THAT'S THE PRICE OF BEING ON
> > THE CUTTING EDGE" BUT NOT SURE THAT'S THE RIGHT TONE (SLATER?)]
> 
> I really like this. Matej, confirmation?

can we say something like: 
- Test out experimental features in the early stages of development 
(which implies that it might be unstable at times as it's in its early stage without calling out that it's unstable.)?
"Also, we will need to localize these messages in french, german, spanish,
portuguese"

Is this billboard going to be sent only to beta users of these localized builds?
(In reply to comment #24)
> "Also, we will need to localize these messages in french, german, spanish,
> portuguese"
> 
> Is this billboard going to be sent only to beta users of these localized
> builds?

Correct. At least that's the plan for now.
Which Spanish (es-ES, es-CL, es-AR, es-MX) and Portuguese (pt-PT, pt-BR)?
(In reply to comment #26)
> Which Spanish (es-ES, es-CL, es-AR, es-MX) and Portuguese (pt-PT, pt-BR)?

Whichever will give us the most leverage and can be substituted for the others. Es-es?
I would say es-ES and pt-BR then
(In reply to comment #22)
> (In reply to comment #20)
> > I'D LOVE TO ADD A MORE POSITIVE NOTE
> > LIKE "Note: Aurora may be less stable at times BUT THAT'S THE PRICE OF BEING ON
> > THE CUTTING EDGE" BUT NOT SURE THAT'S THE RIGHT TONE (SLATER?)]
> 
> I really like this. Matej, confirmation?

I love the attitude and tone, just a couple of thoughts:

I'd like to avoid saying "less" when we're not actually comparing it to anything directly. I think it's too ambiguous and open to interpretation. I was thinking one of the following:

Note: Aurora may not always be stable, but...

Note: Aurora may not be so stable at times, but...

Note: You may experience some instability, but...

I like the the rest of the line as is, as long as we're OK repeating "cutting edge" again in such a short amount of copy (I am, but it's also in the headline). If not, I can come up with another way to put this, or we can use one of the other headlines.
Initial implementation is done in trunk in r87629. I might be a bit behind on some of the text changes, but I think I'll wait for confirmation before making any more text updates. Design/layout feedback is welcome (though time is obviously limited).

Preview here: http://www-trunk.stage.mozilla.com/en-US/firefox/channel/aurora/details/
URL: https://www.mozilla.com/en-US/firefox... → http://www-trunk.stage.mozilla.com/en...
Lookin good!

Could you have the second line of the headline in Meta Black to see how that looks?  Just curious to see how it looks and if we want to follow the headline stylings of the main website or if all Georgia is fine.
Is there a way for me to test this in the context of the real update window? Is there a download/update button in the window itself?

(In reply to comment #31)
> Could you have the second line of the headline in Meta Black to see how that
> looks?  Just curious to see how it looks and if we want to follow the headline
> stylings of the main website or if all Georgia is fine.

Sean, we could try that - but it would haul in another 60Kb. Should I try it?
This looks great to me, thanks Steven. I suppose we could try Meta Black to see how it looks, but I don't think it's strictly necessary.

We'll get back to you with final copy asap.
(In reply to comment #32)
> Is there a way for me to test this in the context of the real update window? Is
> there a download/update button in the window itself?

Christian, can you answer this question?
Is the download button going to be a real button or is it going to be a link to
the download page? If the former, I think I remember that we can't have
javascript in the billboard for OS detection because the page is in the chrome
but I may be well wrong.
(In reply to comment #35)
> Is the download button going to be a real button or is it going to be a link to
> the download page? If the former, I think I remember that we can't have
> javascript in the billboard for OS detection because the page is in the chrome
> but I may be well wrong.

Pascal, good question. I assume this is just a link to the /firefox/channel/ page where you can use the real download button. Using a button for this that says "Download" might be a bit misleading. Thoughts? Maybe "Get" instead of "Download"...?

If the dialog has a button that does this for us - relying on that would be ideal.
Steven: if there is a concern with performance on this page, Georgia it is!
Final final copy:

Browse on the Cutting Edge (headline)
_Download Mozilla Firefox Aurora_ (link/button)

• Get the very latest features before they go to beta
• Help decide what makes it to final release
• Note: Aurora is not for the faint of heart, but that's the price of leading the way.
Sorry, one tiny revision — no period at the end of the last line:

Browse on the Cutting Edge (headline)
_Download Mozilla Firefox Aurora_ (link/button)

• Get the very latest features before they go to beta
• Help decide what makes it to final release
• Note: Aurora is not for the faint of heart, but that's the price of leading
the way
Updated button with link to /firefox/channel/ in r87646 and updated text from comment #38 in r87646.

Can we get confirmation on whether there is a button in the dialog UI? I am a bit concerned that our purple button looks like it would start the download, when really it just takes you to a page where you have to click another purple button. Maybe it should be redesigned/reworded to look more like a link?
You can see the UI in the top row @ https://bug480178.bugzilla.mozilla.org/attachment.cgi?id=430909
(In reply to comment #35)
> Is the download button going to be a real button or is it going to be a link to
> the download page? If the former, I think I remember that we can't have
> javascript in the billboard for OS detection because the page is in the chrome
> but I may be well wrong.

We did it server-side for 3.6.4 (as some platforms didn't get OOPP and wanted to change the billboard). It was fairly trivial, the catch was sending the vary header for platform. And yes, JS doesn't work in the billboard.
(In reply to comment #39)
> Sorry, one tiny revision — no period at the end of the last line:

Never apologize for fixing inconsistent punctuation. Done in r87649.

(In reply to comment #41)
> You can see the UI in the top row @
> https://bug480178.bugzilla.mozilla.org/attachment.cgi?id=430909

This is very helpful - thanks. With this context, I'm thinking that we should make the download link inside the HTML pane the primary visual focus, as clicking the "Get the New Version" will provide a much better experience (I'm assuming it automatically downloads/installs the update, rather than just starting the download like the mozilla.com download button).

I would suggest we either:
a) keep the download link wording "Download Mozilla Firefox Aurora" but make it less visually prominent (probably just white text with an underline), or
b) drop the download link completely (maybe replace with a "Learn More" link and rely only on the "Get the New Version" button as the main action.
Here's a quick mockup of how the billboard would look in context in the Windows dialog frame (with the simpler download link mentioned in my previous comment).
(In reply to comment #43)
> With this context, I'm thinking that we should
> make the download link inside the HTML pane the primary visual focus, as
> clicking the "Get the New Version" will provide a much better experience (I'm
> assuming it automatically downloads/installs the update, rather than just
> starting the download like the mozilla.com download button).

Correct. This is the preferred way as it is quicker (don't need extra clicks), easier (can't lose the installer after downloading) and more secure (the chrome download button can't be spoofed but mozilla.com's can).
(In reply to comment #44)
> Created attachment 527577 [details]
> Mockup of billboard in context
> 
> Here's a quick mockup of how the billboard would look in context in the Windows
> dialog frame (with the simpler download link mentioned in my previous comment).

Thanks Steven. Re: the button vs link issue, I want to make sure I'm understanding things properly. Is it that the link is better from a technical perspective b/c we're not actually initiating downloads from here? B/c visually both Mayumi & prefer the button so I want to be clear on that.
(In reply to comment #46)
> Thanks Steven. Re: the button vs link issue, I want to make sure I'm
> understanding things properly. Is it that the link is better from a technical
> perspective b/c we're not actually initiating downloads from here? B/c visually
> both Mayumi & prefer the button so I want to be clear on that.

The ideal user experience comes from clicking the "Get the New Version" button in the dialog. This triggers the automatic update so the user doesn't have to deal with installer wizards on windows, or dragging App files from .dmg folders on the Mac.

Currently, if someone clicks the purple button, they are taken to the /firefox/channel page on mozilla.com, where they have to click the Aurora download button. Even then, they have to go through the install process (and close their current browser).

I wonder if it might be better to not have a link or button of any kind in the panel we're working on here, and rely solely on the "Get the New Version" button.

We don't have the purple button linking directly to the install file since we can't use javascript here to detect your platform. That said, Christian pointed out a workaround for this that they used in 3.6.4. Even though, though, it's a much more elegant path if you just use the "Get the New Version" button.

Let me know if I can clarify further.
the url for the details page is 
/firefox/channel/aurora/details/

but for our other traditionnal channels is is:
/firefox/3.6/details/
/firefox/4.0/details/
...

Wouldn't it be more consistent to have the details page in 
/firefox/aurora/details/ ?

Or does it mean that future billboards for versioned firefox will be like:
/firefox/channel/6.0/details/ ?

(asking because I have htaccess rules managing that and I'd like to know if I have to change them)
Re: comment #47, thanks for the update...that helps a lot. If the best product experience is the Get the New Version button, let's direct people there. Any recommendations as to the best way to do that?
(In reply to comment #48)
> the url for the details page is 
> /firefox/channel/aurora/details/
> 
> but for our other traditionnal channels is is:
> /firefox/3.6/details/
> /firefox/4.0/details/
> ...
> 
> Wouldn't it be more consistent to have the details page in 
> /firefox/aurora/details/ ?

A case can be made for either I think. It was arbitrary, though the general idea was the prompt is related to the channel and not a specific version on the channel.

That being said, we do have http://www.mozilla.com/en-US/firefox/unsupported/details/...so perhaps we want to move it under /firefox/. It doesn't make a difference as far as I am concerned, as RelEng needs to manually stick the URL into the update snippets so they can point it wherever we need to. I'm fine either way.

> Or does it mean that future billboards for versioned firefox will be like:
> /firefox/channel/6.0/details/ ?

No, they will still be in firefox/[version]/details. Note they will become less relevant as we will be taking people from 4 automatically to 5 with a minor update rather than a billboard.
@LegNeato
I have a preference for consistency with other versions and keep all the billboard pages in the same folder then:

http://www-trunk.stage.mozilla.com/fr/firefox/aurora/details/

I just need a final decision to be done on what the strings will be to put localizers on it.

(It looks like we are not having a link in the page in the end so I removed it from the l10n copy, but if we have one in the page, we should probably use a target="_blank" attribute on it, it was needed for the previous billboards)
Christian, can you comment here?  What else needs to be done?
We need a final decision on the link/button and related copy. I would lean towards no link/button at all, but the copy will have to be adjusted as the link is the only place that the full "Mozilla Firefox Aurora" name is used. Perhaps the link could just be replaced with a simple heading "Get Mozilla Firefox Aurora" (or something like that) for the bullet list?

Also, if there is no objection, we can move this page into /firefox/aurora/details/ as per Pascal's request.
(In reply to comment #51)
> @LegNeato
> I have a preference for consistency with other versions and keep all the
> billboard pages in the same folder then:
> 
> http://www-trunk.stage.mozilla.com/fr/firefox/aurora/details/

Works for me
(In reply to comment #53)
> We need a final decision on the link/button and related copy. I would lean
> towards no link/button at all, but the copy will have to be adjusted as the
> link is the only place that the full "Mozilla Firefox Aurora" name is used.
> Perhaps the link could just be replaced with a simple heading "Get Mozilla
> Firefox Aurora" (or something like that) for the bullet list?

I think we should not have a download button and instead point them to the dialog button. I'll leave the copy for the experts.
+1 to no link/button
The plan from comment #53 (no link/button) sounds good then. Is it possible to include a graphic, maybe an arrow, pointing to the Get the New Version button in the UI, or is it impossible to anchor the graphic so it would be pointing in the right place?

If it's doable, that might be a nice way of directing people to the button. If not, we'll make it work with just copy.
The window size is fixed so it should be fairly easy to have an arrow. The only difficulty I see is the fact that for rtl locales we'd most likely have to flip the arrow to point to the left rather than the right. Also, I think we tend to use data urls instead of image tags
My thoughts then:

- add a little space between the header & bullet points
- as a CTA below the bullet points, let's try this:
To update, click Get the New Version button below.

I'd like to see how that looks...hopefully adding an arrow won't even be necessary.

Thanks!
After a bit of back-and-forth with John on IM (thanks John), we've made a few changes:

1. Drop link/button (the button was pretty, but distracted from the dialog button that provides the best experience)
2. Add the wordmark as a title (without the button, there was no introduction of the new "Aurora" name)
3. Drop the "Browse on the Cutting Edge" title as it clashed with the wordmark
4. Update the wording of the final bullet to use the "cutting edge" terminology.

This updated version has John's +1, he'd like Mayumi to weigh-in.

Note that the URL has changed to Pascal's suggestion:
http://www-trunk.stage.mozilla.com/firefox/aurora/details/

Also moved the styles and image (via data-uri) inline.
URL: http://www-trunk.stage.mozilla.com/en... → http://www-trunk.stage.mozilla.com/fi...
+1, looks good.
Merged everything to stage in r87748.
Status: NEW → RESOLVED
Closed: 13 years ago
Keywords: qawanted
Resolution: --- → FIXED
Christian, are we all set for this one? do you have everything you need? when will this go live? please let us know what are the next steps. thanks!
Sorry, this is probably way too late (I was out for a couple of days), but I noticed a couple of things:

1) When I open this in a wide window, the third bullet point is so long that the last E of the "edge" goes beyond the night sky image. Just want to make sure that won't be an issue when this is sent out.

2) The new CTA action line should actually read "To update, click the <i>Get the New Version</i> button below," but that's a little awkward. Could we lose the word "button" (I think it will be clear without it) so it reads:

To update, click <i>Get the New Version</i> below.

Thanks, and sorry again for the late comments.
Attached image Aurora billboard image — 
Here's what I'm referring to in point 1) in comment 65. Look on the right at the end of the third bullet point. The right edge of the image cuts through the word "edge."
(In reply to comment #65)
> 1) When I open this in a wide window, the third bullet point is so long that
> the last E of the "edge" goes beyond the night sky image. Just want to make
> sure that won't be an issue when this is sent out.

The page is actually displayed in a 700px wide dialog, so the text wraps nicely and the background image extends beyond the visible area (try resizing your browser to be around 700px wide to get an approximation).

> 2) The new CTA action line should actually read "To update, click the <i>Get
> the New Version</i> button below," but that's a little awkward. Could we lose
> the word "button" (I think it will be clear without it) so it reads:
> To update, click <i>Get the New Version</i> below.

Done in trunk in r87837. Merged to stage in r87837.
Keywords: push-needed
pushed to production r91952
Keywords: push-needed
verified fixed http://www.mozilla.com/en-US/firefox/aurora/details/
Status: RESOLVED → VERIFIED
Component: www.mozilla.org/firefox → www.mozilla.org
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: