Closed Bug 700336 Opened 13 years ago Closed 13 years ago

[Upgrade 3.6 Landing Page] Design Landing Page 1 - Speed

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Platform:
x86
macOS
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: christine.brodigan, Assigned: ltom)

References

Details

Attachments

(1 file, 1 obsolete file)

Wireframe: Design & Copy - Speed
129.92 KB, image/png
Details
Attached image Wireframe & Copy for Design (obsolete) — 
This is a bug to design a landing page for the lite-weight 3.6 upgrade campaign.

The core message:

allow user to see how fast their 3.6 version is against the most recent version of Firefox

-interaction with a universal symbol like a speedometer = great
-interaction with universal colors: red, yellow, green = great
-similar to http://www.mozilla.org/en-US/plugincheck/
-no main navigation to Firefox site (see wireframe)
-simple footer to reenforce all selling points that reluctant users cling to: bookmarks, browsing history, inconvenience, crashes, and privacy

elements to include:

*emotional connection with a salutation - Hi there! or Hey there!
*success feedback, "Hi fives! We've packed up all your bookmarks!"
*a general emotional sentiment, "Bummer, you're still running an older version of Firefox"
*a face to Firefox, "Our engineers and designers have been working hard to make your Firefox better for you"

Wireframe attached.

Copy bug coming, but Matej is traveling, so to save time please work with the copy included on the wireframe itself.

Shooting to be launched in en-US as close to November 16, 2011 as possible.
Summary: [Upgrade 3.6 Landing Page] Design Landing Page → [Upgrade 3.6 Landing Page] Design Landing Page 1 - Speed
Depends on: 700337
Hey Chrissie, when would be the design handoff deadline if you're shooting to go live Nov. 16th?
I have Lee to help us with this.  But having copy finalized asap will be very very very helpful.
Assignee: tshahian → ltom
(In reply to Tara from comment #1)
> Hey Chrissie, when would be the design handoff deadline if you're shooting
> to go live Nov. 16th?

We'd love to be able to do one design review by Wed and finalize design by Friday, November 11, 2011, passing PSDs to silverorange. 

RE: Copy - Matej is traveling, please use the copy provided in the wireframes. It's very close to what we want, and we'll have Matej to do the final polish once we're over to the coding phase.

Thanks.
I would also like to review Matej's final copy before we go live. Thanks!
(In reply to Laura Mesa [:lmesa] from comment #4)
> I would also like to review Matej's final copy before we go live. Thanks!

Yes, Laura, you're the product owner, so you have sign-off before we go from staging to production. 

Lee, if you need any help, please let Laura Forrest, Laura Mesa, or me know, happy to walk through anything you have.
THanks guys.  This is definitely a tight turnaround...!  especially given MozCamp... but Lee is going to jump on this today and see what he can pull.

Are there existing speedometer graphics that you're referring to?  When you say "interaction" with speedometer / colors, what exactly are you thinking here? I read the description in the wireframe but seems pretty open-ended still and I'm not entirely sure what Lee needs to design.  If you can clarify these interactions a bit more, that'd be great.
(In reply to Tara from comment #6)
> THanks guys.  This is definitely a tight turnaround...!  especially given
> MozCamp... but Lee is going to jump on this today and see what he can pull.
> 
> Are there existing speedometer graphics that you're referring to?  When you
> say "interaction" with speedometer / colors, what exactly are you thinking
> here? I read the description in the wireframe but seems pretty open-ended
> still and I'm not entirely sure what Lee needs to design.  If you can
> clarify these interactions a bit more, that'd be great.

I'll circle back with Lee this morning offline, thanks Tara.
That'll be great thanks.  but could you also please post your response / updates here on the bug so I'm in the loop as well?
Digging around various icons and illos I have, I found a few 'speedometer' graphics:
http://cl.ly/3e2D3N0s402p0A090g28

I'm not entirely sure what you guys had in mind for the interaction with these - anything beyond having the needles moving a little? Since we're doing a side by side comparison of v3.6 and v4, are we not just comparing SLOWER< to >FASTER?
Also, the speedometer should be for the "latest version" not version 4, right?
updated.
Attachment #572501 - Attachment is obsolete: true
I'm not so sure any of those speedometers will be exactly right for this...those are kind of stylized and built for icons, whereas here it would seem that we need something more detailed or worthy of being the front & center image of the page.

I agree that it would help to have a greater understanding of what the interaction here is, though. Does each speedometer needle move a bit and then point to the appropriate number? And if so, what's the metric?
(In reply to John Slater from comment #12)
>  Does each speedometer needle move a bit and
> then point to the appropriate number? And if so, what's the metric?
I'm comfortable saying "up to 7 times faster".
(In reply to Laura Mesa [:lmesa] from comment #13)
> (In reply to John Slater from comment #12)
> >  Does each speedometer needle move a bit and
> > then point to the appropriate number? And if so, what's the metric?
> I'm comfortable saying "up to 7 times faster".

It would be cool if we could have the text say that, but then have the speedometers support the message by pointing to the appropriate numbers (say, 21 and 3, although I have no idea what the right metrics would be).
Do we need actual metrics? I'm assuming the simplified speedometer graphics basically communicate 

OLD VERSION = slow 
NEW VERSION = fast!

Also wondering if it could be fun to inject some of our casual Firefox tone instead of the metrics too? (not sure how localizable it would be - it's just an idea) 

SLOW END = Snails pace
FAST END = Face melting (or something less disturbing)
Reference for slight animation: http://teachingjobsportal.com/ (see hover state for speedometer gauge) - little bit of jquery and red/green/yellow logic
do we really need two speedometers though?  isn't it better to have one cool one (bigger perhaps) and have 3.6 on the "slow" end, and 4.0 on the fast ? that makes more sense to me than having to double up on the graphic...
Blocks: 700394
(In reply to Tara from comment #17)
> do we really need two speedometers though?  isn't it better to have one cool
> one (bigger perhaps) and have 3.6 on the "slow" end, and 4.0 on the fast ?
> that makes more sense to me than having to double up on the graphic...

I was deliberately vague and hacky with these, so please don't interpret as design direction. One speedometer would be great...

user of 3.6 lands on this page and the speedometer is in the low (red) slow area
call to action #1 is rollover to see how fast the latest Firefox is
call to action #2 download Firefox
call to action for users on latest version is share the speed test with friends, coworkers, and family 

Less copy is better, so it can be optimized and then localized
Hi all,
I wanted to get something for you to look at today (design will be refined for future iterations) - I took some liberties w/ the copy (it's all FPO, of course!) so we can see what the interaction might be like...

http://cl.ly/3V2i3T0y0q2J3a1m2F3o

My understanding is that on page load, we can detect which version the user has. Once they roll over the speedometer, they'll get either:

- "Firefox 3.6" version of copy + the "BUMMER" slow/message
   or
- "New Firefox" version of copy + the "SUPERFAST" fast/message

*NOTE - default, 3.6 and New Firefox states are all shown here simultaneously in mockup.
(In reply to Lee Tom from comment #19)
> Hi all,
> I wanted to get something for you to look at today (design will be refined
> for future iterations) - I took some liberties w/ the copy (it's all FPO, of
> course!) so we can see what the interaction might be like...
> 
> http://cl.ly/3V2i3T0y0q2J3a1m2F3o
> 
> My understanding is that on page load, we can detect which version the user
> has. Once they roll over the speedometer, they'll get either:
> 
> - "Firefox 3.6" version of copy + the "BUMMER" slow/message
>    or
> - "New Firefox" version of copy + the "SUPERFAST" fast/message
> 
> *NOTE - default, 3.6 and New Firefox states are all shown here
> simultaneously in mockup.

Thanks Lee! Other interaction notes:

*Speedometer will bounce lightly at 3.6 to draw the user's attention to it's mobility
*New Firefox is being used to capture all the version numbers (similar to New Twitter, but not like New Coke)
*Design is flexible for other versions to fall in the less optimized or "slower" area of the speedometer
*Simple footer design is taken from the persistent message campaign, which converts at 79+%

----

Feedback:

*eliminate the little "x" from the footer, since it's part of the design and not an overlay & include another upgrade button
*make the instructions to the user to rollover more obvious (examples: http://bit.ly/sS5aj5 and http://37signals.com/ roll over basecamp and click about to see how they use arrows)
Definitely a good start. I'd like to see some further refinements though. For one, everything is perhaps *too* centered...would like to see things laid out in a more interesting way. Also, it feels a little empty now, which might be based on the layout or might be based on the content. Is there more we can say here?

Also, I definitely agree with Chrissie's feedback in comment #20, particularly around making the rollover more obvious. It's pretty subtle right now.
Chrissie and John - thanks for your feedback this morning. Copy is still FPO. We should get Matej's input here, once he's back online.

- Simplified layout
- More clear and direct CTA
- Including an upgrade button in footer
- Page will detect user's version of Firefox and needle will point to Old or New version + expose message 

**should the meter's needle be 'idle' until user rolls over it to reveal their version? If page detects user's version on page load, and needle moves/exposes copy points, then maybe the "Roll over speedometer..." CTA is not necessary?


Old Firefox:
http://cl.ly/2n2J0J1q1s0Z1m1t2M2V

New Firefox:
http://cl.ly/3J3E2u451o2b3q071a3T
(In reply to Lee Tom from comment #22)
> Chrissie and John - thanks for your feedback this morning. Copy is still
> FPO. We should get Matej's input here, once he's back online.
> 
> - Simplified layout
> - More clear and direct CTA
> - Including an upgrade button in footer
> - Page will detect user's version of Firefox and needle will point to Old or
> New version + expose message 
> 
> **should the meter's needle be 'idle' until user rolls over it to reveal
> their version? If page detects user's version on page load, and needle
> moves/exposes copy points, then maybe the "Roll over speedometer..." CTA is
> not necessary?
> 
> 
> Old Firefox:
> http://cl.ly/2n2J0J1q1s0Z1m1t2M2V
> 
> New Firefox:
> http://cl.ly/3J3E2u451o2b3q071a3T

Lee, thanks for this update, it looks really polished. A few notes:

*gauge - it might be helpful to go from blue to something to red, so we can target the Firefox 4, 5, 6, and 7 group in the middle
*fun - any way to add a bit of fun or dazzle, possibly with 3 markers of success: chugging along, cruise control, faster than the future
Thanks Lee. I know we talked about this earlier, but I wanted to go on record with the note that anything we can do to make the speed really pop (without having to rollover anything) would be great. What we have now is a good start, but it still feels like we could make the case more strongly and directly. (Matej, please make a note of that as you look this over.)

Would love to hear from Laura & Patrick on this too.
(In reply to John Slater from comment #24)
> Thanks Lee. I know we talked about this earlier, but I wanted to go on
> record with the note that anything we can do to make the speed really pop
> (without having to rollover anything) would be great. What we have now is a
> good start, but it still feels like we could make the case more strongly and
> directly. (Matej, please make a note of that as you look this over.)
> 
> Would love to hear from Laura & Patrick on this too.

I agree with Chrissie and John here. The graphic is coming along really nicely, but maybe there's a way to add more emphasis. Could we maybe make the "faster side" or the "slow side" glow in the respective states?  Maybe with a light blue? I think it would add a dynamic feel to the graphic.
It think that the movement of the needle is really going to help emphasize speed here - we're just not seeing it in this static graphic. To Laura's suggestion, I do think there are some ways to highlight/differentiate the Slow vs. Fast sides with color and possibly emphasizing phrases like, "VROOOOM!" and "bummer." to make it more dynamic. 

Copy is going to help out greatly, so I'm hoping we can see the combination of visual design + copy, before we keep chewing on the graphics too much. 

Chrissie, your note regarding the gauge in comment 23 about the intermediary colors could* work, but setting this interaction/graphic up to accommodate versions 4,5,6 and 7 seems like a departure from our the initial direction of the page (2 states: SLOW, FAST ...Upgrade)
Lee + all, if we're close to done, we can move over to have Steven code, so we can experience the bouncing and animation. Matej can add copy into the design and we can play with it in HTML. I know Lee is about to get on ze plane to Berlin, so what do you think about taking the concept over to HTML and then playing with words and effects with a real hover?
Indeed, I am getting on ze plane soon, so here's a link to the latest version of PSD. 

http://intothefuzz.com/leetom/Mozilla.com/PSD/upgrade_01.psd

If there's more iterating to do we can either do it in HTML, or I can pick back up on this when I land in Berlin.
John, are you OK with me moving this to Steven to code, so we can tweak around the full effect of the animation?
(In reply to mcbmoz from comment #29)
> John, are you OK with me moving this to Steven to code, so we can tweak
> around the full effect of the animation?

yes please!
OK, here's a pass at this. I tried to incorporate all the feedback I could see, but I'm playing catch up, so please let me know if I missed anything.


[HEADLINE]
How fast is
YOUR FIREFOX?

[COPY]
New Firefox is 7 times faster. (That's a lot!) Roll over the speedometer to see if yours can keep up.

[OLD FIREFOX COPY]
Seriously?
That just isn't going to cut it. Stop browsing in the past and upgrade now! 

[NEW FIREFOX COPY]
Now we're talking!
Feels better, doesn't it? Welcome to the future of the Web. It's nice here.

[LEFT SIDE GRAPHIC]
Old Firefox = Sadface

[RIGHT SIDE GRAPHIC]
New Firefox = Yay!

[FOOTER]
New Firefox is faster, free (as always), crashes less and protects your privacy more.
Upgrading takes less than a minute and you won't lose your history or bookmarks. Hooray!
That copy looks great to me, thanks Matej. The only thing I'm wondering is if we should be referring to it as "the new Firefox" vs "New Firefox". The latter is shorter and more colloquial, but also sounds more like an official product name. Might be better to stay from that.

Thoughts?
(In reply to Matej Novak [:matej] from comment #31)
> OK, here's a pass at this. I tried to incorporate all the feedback I could
> see, but I'm playing catch up, so please let me know if I missed anything.
> 
> 
> [HEADLINE]
> How fast is
> YOUR FIREFOX?
> 
> [COPY]
> New Firefox is 7 times faster. (That's a lot!) Roll over the speedometer to
> see if yours can keep up.

Please say "up to 7 times faster".
> 
> [OLD FIREFOX COPY]
> Seriously?
> That just isn't going to cut it. Stop browsing in the past and upgrade now! 
> 
> [NEW FIREFOX COPY]
> Now we're talking!
> Feels better, doesn't it? Welcome to the future of the Web. It's nice here.
> 
> [LEFT SIDE GRAPHIC]
> Old Firefox = Sadface
> 
> [RIGHT SIDE GRAPHIC]
> New Firefox = Yay!
> 
> [FOOTER]
> New Firefox is faster, free (as always), crashes less and protects your
> privacy more.
> Upgrading takes less than a minute and you won't lose your history or
> bookmarks. Hooray!

Otherwise, I think this looks good.
(In reply to Matej Novak [:matej] from comment #31)
> OK, here's a pass at this. I tried to incorporate all the feedback I could
> see, but I'm playing catch up, so please let me know if I missed anything.
> 
> 
> [HEADLINE]
> How fast is
> YOUR FIREFOX?
> 
> [COPY]
> New Firefox is 7 times faster. (That's a lot!) Roll over the speedometer to
> see if yours can keep up.

Please say "up to 7 times faster".
> 
> [OLD FIREFOX COPY]
> Seriously?
> That just isn't going to cut it. Stop browsing in the past and upgrade now! 
> 
> [NEW FIREFOX COPY]
> Now we're talking!
> Feels better, doesn't it? Welcome to the future of the Web. It's nice here.
> 
> [LEFT SIDE GRAPHIC]
> Old Firefox = Sadface
> 
> [RIGHT SIDE GRAPHIC]
> New Firefox = Yay!
> 
> [FOOTER]
> New Firefox is faster, free (as always), crashes less and protects your
> privacy more.
> Upgrading takes less than a minute and you won't lose your history or
> bookmarks. Hooray!

Otherwise, I think this looks good. I also think we should use "latest" versus "new" since its going to be changing so often (Firefox 9, Firefox 10, etc).
(In reply to John Slater from comment #32)
> That copy looks great to me, thanks Matej. The only thing I'm wondering is
> if we should be referring to it as "the new Firefox" vs "New Firefox". The
> latter is shorter and more colloquial, but also sounds more like an official
> product name. Might be better to stay from that.

I feel like there's something more engaging about losing "the." It seems more exciting somehow. My only concern is that it sounds too much like New Twitter. I'm really fine with either, but slightly prefer the shorter.

(In reply to Laura Mesa [:lmesa] from comment #34)
> Otherwise, I think this looks good. I also think we should use "latest"
> versus "new" since its going to be changing so often (Firefox 9, Firefox 10,
> etc).

Again, fine with either, but I think new says the same as latest. It will always be the new Firefox when it comes out, so I don't think there's anything misleading or wrong about it.
Makes sense to me, thanks Matej.
Hey guys, scanning myself through this bug to catch up.  Where do things stand?  Has this been coded? Are there additional things we need to tweak, or can we close?  Please let me know.  Thanks.
Tara, this is on my list of Chrissie/Tara catchup items for tomorrow. Closing design bug as we've moved to implementation. Hope to catch up soon!
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
Blocks: 707779
Blocks: 707780
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: