629238 - [Fx4Launch] Graphic changes to Fx-user version of the homepage

Status: VERIFIED FIXED

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

Description

[Laura Forrest]

We'd like to alter the design of the homepage Firefox users see when they visit www.mozilla.com. (We're currently showing all visitors the same content: http://www.mozilla.com/en-US/firefox)

Since we now know that 52% of Fx users visit to download Firefox (upgrade/reinstall), lets make it easy for them to do so, or to realize they're running the latest build. Lets use two slightly different versions of this page depending on a browser version sniff:

1. Firefox User - Running Old Version of Fx

This visitor is familiar with Firefox already but needs to upgrade to the latest browser. The messaging on the page should clearly let them know they should upgrade, and secondarily show them other Firefox features.

Graphic Changes:
-Show an upgrade message within top headline [John, can you give us a recommendation for copy?]
-Move the download button to the top of the page so it's above the fold and more noticeable to these people. Consider wrapping the current headline and placing it directly to the right of headline. 

2. Firefox User - Running Latest Version of Fx

The user has the latest version of Firefox. Let them know that, and share other Firefox features with them

Graphic Changes
-Keep the "Good news your Firefox is up to date" copy [John - let us know if you'd like to change this]
-Move the download button to the top of the page so it's noticeable 

Changes to Both Versions:
1. Dial down the size of the Panda and/or the Panda and the wheel. Right now it's rather large.
2. Modify the Panda's eyes so he appears more human - add eyeballs?
3. The great content within the wheel is buried by one click. To change that, expose the wheel w/content exposed upon page load. Even better - show the wheel spinning into place upon page load. That small amount of movement should help attract attention to the content of the wheel.

Comment 1

[John Slater]

Sean, we should probably have a quick chat about this page before you get started...the layout & formatting used on http://www.mozilla.com/en-US/firefox/fx/ may need some tweaking to fit the new copy direction.

Generally, though, the idea is to make this page more usable for people who already have Firefox (and especially those who need to upgrade). I'd like to do this by adding the green download button to the upper right like we do on our product detail pages, and then by incorporating the changes that Laura mentions at the end of comment #0. (Plus whatever design tweaks feel right, of course.)

The version for people who need to upgrade could have copy something like this: "Uh oh, your Firefox is out of date. Time for an upgrade!" As noted above, I don't think this works with the current headline formatting, though, so let's discuss.

The copy on the other version, for people who already have the most current version can stay the same, although the formatting may need to change to fit within the various design tweaks.

Comment 2

[Laura Forrest]

Sean is still working on this so moving to 1.3.

Comment 3

[James Long (:jlongster)]

Laura, I don't remember if we discuss the actual design changes in last meeting. Does this still look like this part will get done soon?

Implementing the actual redirection will only take about 30 min.

Comment 4

[Laura Forrest]

(In reply to comment #3)
> Laura, I don't remember if we discuss the actual design changes in last
> meeting. Does this still look like this part will get done soon?
> 
> Implementing the actual redirection will only take about 30 min.

Does not look like this will be done in time. Moving this to 1.4.

Comment 5

[Sean Martell]

Final Existing User Homepage design
----------------------------------- 

PNG:
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/home_existingusers.png

PSD:
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/home_existingusers_01.psd

Comment 6

[John Slater]

Thanks Sean. Steven, can you guys take this one? It's a modified version of what we already have at http://www.mozilla.com/en-US/firefox/fx/.

We'll need to make sure the redirects are working as part of this, of course.

Comment 7

[John Slater]

A couple of final text changes and then we're set:

- lose hyphens in the header so it reads "Up to date"
- change copy in features promo to "Get to know your Firefox"

Thanks!

Comment 8

[John Slater]

Actually, one more change per bug 637483...we need to replace the "Easy ways to pass it on" promo with the following:

Marvel At
WEB WONDERS
Amazing demos that show what the Web can do!
View Demos>>

The link should point to http://demos.mozilla.org.

Comment 9

[Laura Forrest]

One addition to this page that I don't see here includes replacing the Personas wheel segment with information about the new look that will link to the Getting Started/Tour page. Add copy/graphics that address the new UI "Firefox has a fresh new look" sort of thing. 

John - can you create copy for this?

Comment 10

[John Slater]

Attachment: homepage copy: Fx4 version

Actually, I already did - see attached. And, reviewing this doc reminds me that the promos in Sean's mockup still need to be revised a bit more (the changes are in red).

Sean, can you take another quick pass to make sure this is all included?

Comment 11

[Laura Forrest]

(In reply to comment #8)
> Actually, one more change per bug 637483...we need to replace the "Easy ways to
> pass it on" promo with the following:
> 
> Marvel At
> WEB WONDERS
> Amazing demos that show what the Web can do!
> View Demos>>
> 
> The link should point to http://demos.mozilla.org.

Point of clarification here: The share promo should remain in the same area, and the Web 'o Wonder promo can go next to it. See John's copy doc just posted above for more details.

Comment 12

[John Slater]

(In reply to comment #11)
> Point of clarification here: The share promo should remain in the same area,
> and the Web 'o Wonder promo can go next to it. See John's copy doc just posted
> above for more details.

Are you sure? The copy doc, which was based on our earlier convo, only has the Web o Wonder promo and the Team Firefox one. Is Team Firefox the correct sharing promo then? Just want to make sure we're all on the same page.

Comment 13

[Laura Forrest]

(In reply to comment #12)
> (In reply to comment #11)
> > Point of clarification here: The share promo should remain in the same area,
> > and the Web 'o Wonder promo can go next to it. See John's copy doc just posted
> > above for more details.
> 
> Are you sure? The copy doc, which was based on our earlier convo, only has the
> Web o Wonder promo and the Team Firefox one. Is Team Firefox the correct
> sharing promo then? Just want to make sure we're all on the same page.

Yes- the Team Firefox promo is the same as share.

Comment 14

[Steven Garrity [:sgarrity]]

The previous version of this page (http://www.mozilla.com/en-US/firefox/fx/) had a speech-bubble that changed content depending on the location of the wheel. Is that being dropped?

Comment 15

[John Slater]

(In reply to comment #14)
> The previous version of this page (http://www.mozilla.com/en-US/firefox/fx/)
> had a speech-bubble that changed content depending on the location of the
> wheel. Is that being dropped?

Is it possible to have the speech bubble not be there as part of the default, but appear when the different states of the wheel appear?

Comment 16

[Sean Martell]

Final FINAL Existing User Homepage design
----------------------------------------- 

PNG:
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/home_existingusers.png
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/home_existingusers_1.png
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/home_existingusers_2.png
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/home_existingusers_3.png

PSD:
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/home_existingusers_01.psd

Comment 17

[John Slater]

Thanks Sean! Steven, we should be good to go here.

Comment 18

[Steven Garrity [:sgarrity]]

This page has been updated in r83939.

Since some of the elements are a bit small, and we're more awesome, the page is also 16.8% smaller in download size and has 15% fewer HTTP requests.

John, can you confirm that the copy is accurate. In particular, the dashes in "up-to-date" were inconsistent between the PSD and the Doc.

Comment 19

[Steven Garrity [:sgarrity]]

Oh, forgot to mention - I need a URL for the "View global map" link and could use someone from metrics to have a look at the stats-tracking JS on those links to confirm that they are set-up appropriately.

Comment 20

[John Slater]

http://www-fx4.stage.mozilla.com/en-US/firefox/fx looks great, thanks Steven.

Two things:
- should actually be "up to date" (no hyphens)...apologies for the mixup
- will have to confirm the global map URL...stay tuned

Comment 21

[Steven Garrity [:sgarrity]]

(In reply to comment #20)
> - should actually be "up to date" (no hyphens)...

Done in r83952.

Comment 22

[Laura Forrest]

(In reply to comment #20)
> - will have to confirm the global map URL...stay tuned

Confirmed with Potch that it will be glow.mozilla.org.

Comment 23

[Steven Garrity [:sgarrity]]

(In reply to comment #22)
> Confirmed with Potch that it will be glow.mozilla.org.

Link added in r84007.

Comment 24

[raymond [:retornam] (inactive)]

qa-verified-stage http://www-fx4.stage.mozilla.com/en-US/firefox/fx/

Comment 25

[raymond [:retornam] (inactive)]

verified fixed http:/www.mozilla.com/en-US/firefox/fx/