668101 - [Increase FX Upgrades] Persistent messaging unit

Status: RESOLVED FIXED

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

Description

[mcbmoz]

Hey Chris,

You recently designed an awesome experience for persistent messaging: https://support.mozilla.com/en-US/kb/Firefox%20crashes?s=firefox+crashes&as=s&ref=aoa

Super gorgeous and smooth! We LOVE it!

We did a fast and dirty one ourselves this past release cycle, and were wondering if you could take the design you made for Army of Awesome and swap out the image and the copy to work for a campaign across all of moz.com to encourage upgrades (we'll also be updating for implementation on Moz Europe in a future phase).

Here is a screen capture of what we have currently running: http://www.diigo.com/item/image/1981d/c528

Copy:  

Hey there! Looks like you're using an old version of Firefox.

Don't miss out on the latest technology & security features. Get the free
upgrade in less than a minute.

Imagery/icon: Your choice!

Functionality:

Update now - links to http://www.mozilla.com/en-US/firefox/new/

Learn more - links to http://www.mozilla.com/en-US/firefox/central/

Comment 1

[Chris Howse [:chowse]]

(In reply to comment #0)
> We did a fast and dirty one ourselves this past release cycle, and were
> wondering if you could take the design you made for Army of Awesome and swap
> out the image and the copy to work for a campaign across all of moz.com to
> encourage upgrades (we'll also be updating for implementation on Moz Europe
> in a future phase).

This wouldn't be hard to do. But is there any reason that SUMO would use a different style call-out than the rest of Moz.com? Or is to test how the SUMO-style banner would look on the rest of Moz.com?

If the latter, there were a few things I'd like to improve upon (but time didn't allow for previously):

* Moving the bar to the bottom (e.g. http://cl.ly/2R2h1y3t0u180K1t0I2u) and using animation to draw attention to it. If the bar will remain as tall as it is, having push-down or overlap from the top is really annoying. Size+animation should still be enough to ctach the user's attention.

* Make the "download" and "learn more" links buttons to call out the action to be taken.

Here's a quick mock of what I'm thinking:
http://cl.ly/1e0L433F1J0u2C3m2r1G

Comment 2

[mcbmoz]

(In reply to comment #1)
> (In reply to comment #0)
> > We did a fast and dirty one ourselves this past release cycle, and were
> > wondering if you could take the design you made for Army of Awesome and swap
> > out the image and the copy to work for a campaign across all of moz.com to
> > encourage upgrades (we'll also be updating for implementation on Moz Europe
> > in a future phase).
> 
> This wouldn't be hard to do. But is there any reason that SUMO would use a
> different style call-out than the rest of Moz.com? Or is to test how the
> SUMO-style banner would look on the rest of Moz.com?
> 
> If the latter, there were a few things I'd like to improve upon (but time
> didn't allow for previously):
> 
> * Moving the bar to the bottom (e.g. http://cl.ly/2R2h1y3t0u180K1t0I2u) and
> using animation to draw attention to it. If the bar will remain as tall as
> it is, having push-down or overlap from the top is really annoying.
> Size+animation should still be enough to ctach the user's attention.
> 
> * Make the "download" and "learn more" links buttons to call out the action
> to be taken.
> 
> Here's a quick mock of what I'm thinking:
> http://cl.ly/1e0L433F1J0u2C3m2r1G

Chris,

Huge props for the link to Daily Puppy! It's been a long-time favorite of mine:-) (funniest thing though - I've been annoyed with that site for that persistent message now for months!) 

Wix.com has been advertising with a very similar position now on Web Design Ledger for nearly 2 years: https://skitch.com/chrissiebrodigan/f82yy/screen-shot-2011-07-01-at-9.17.59-am

I would love to A/B test the message at the top of the page and the bottom of the page and see what happens.

In terms of the design, there's no reason to use the style you created for Add-ons, I think it's really lovely though - reasons I liked it: animation bringing it onto the page (like pulling down a shade), the reduced size left/right, which made it stand out that it wasn't really part of the overall page, and it just felt very Mozilla-y!

If you can take that feedback and whip up a top-of-the-page and bottom-of-the-page versions, we'll work with Steven and silverorange to implement and A/B test.

You are awesome Chris! Thank you :-)

Comment 3

[Chris Howse [:chowse]]

Oops, I missed your feedback after the All-Hands. Sorry for the slow response.

Here are 2 quick concepts of the upgrade message:

  Slide-in from the bottom:
  http://moz.howsehold.org/sumo/upgrade/bottom.html

  Push-down from the top:
  http://moz.howsehold.org/sumo/upgrade/top.html

(Had to use Moz.com as a stand-in, since SUMO can't be embedded in an iframe.)

This uses some Firefox 4+ specific CSS for animations (most easily replicated w/ jQuery), but should give you a sense of how the pop-up should look and behave. I'm still partial to the slide-in from the bottom, especially if it could be given some more creative transitions (e.g. bounces).

Comment 4

[Laura Forrest]

(In reply to comment #3)
> Oops, I missed your feedback after the All-Hands. Sorry for the slow
> response.
> 
> Here are 2 quick concepts of the upgrade message:
> 
>   Slide-in from the bottom:
>   http://moz.howsehold.org/sumo/upgrade/bottom.html
> 
>   Push-down from the top:
>   http://moz.howsehold.org/sumo/upgrade/top.html
> 
> (Had to use Moz.com as a stand-in, since SUMO can't be embedded in an
> iframe.)
> 
> This uses some Firefox 4+ specific CSS for animations (most easily
> replicated w/ jQuery), but should give you a sense of how the pop-up should
> look and behave. I'm still partial to the slide-in from the bottom,
> especially if it could be given some more creative transitions (e.g.
> bounces).

Thanks for designing and building both approaches. IMO, the banner at the bottom is the more elegant solution; I like how it's both very noticeable and not as intrusive as the top banner. 

Chris - how will these Fx4 + animations appear to the pre Fx4 users that this is being shown to?

Comment 5

[mcbmoz]

Assigning to Laura for webtrends for tracking.

Comment 6

[Laura Forrest]

Please append the following:

?WT.mc_id=upgradetop
?WT.mc_id=upgradebottom

Comment 7

[Steven Garrity [:sgarrity]]

These look great. As Chris points out in comment #3, the animations use CSS3 transitions, which don't work in 3.6.

We can implement them jquery, though the home page does not currently include jquery.

Should we take this over?

Comment 8

[mcbmoz]

(In reply to comment #7)
> These look great. As Chris points out in comment #3, the animations use CSS3
> transitions, which don't work in 3.6.
> 
> We can implement them jquery, though the home page does not currently
> include jquery.
> 
> Should we take this over?

Yes! Yes! Please!

Before launch though, we'll need Laura Forrest to provide 2 WT Codes, so we can track performance.

Many thanks Steven! And, they should go out in an A/B loop

Comment 9

[Laura Forrest]

(In reply to comment #8)
> (In reply to comment #7)
> > These look great. As Chris points out in comment #3, the animations use CSS3
> > transitions, which don't work in 3.6.
> > 
> > We can implement them jquery, though the home page does not currently
> > include jquery.
> > 
> > Should we take this over?
> 
> Yes! Yes! Please!
> 
> Before launch though, we'll need Laura Forrest to provide 2 WT Codes, so we
> can track performance.
See comment 6 for those codes. 

> Many thanks Steven! And, they should go out in an A/B loop

Comment 10

[Laura Forrest]

It would be great to see this go live within 3.4!

:)

Comment 11

[Laura Forrest]

Tracking tag for learn more:
?WT.mc_id=upgradelm

Comment 13

[Steven Garrity [:sgarrity]]

Done in trunk in r93011. Please review and after that, I'll merge to stage.

A few notes:

The notice shows up on top or bottom (50/50), but uses a cookie to remember so it doesn't jump around as you browse.

If you close the message (with the X link), a cookie remembers and doesn't not show again.

If the page already has jquery, we use it for animation, if jquery isn't already there, we drop the animations, but it still works. This way, we don't have to pull jquery into the home page just for out-of-date browsers.

On the /new/ page, we hide the Update link, since it just links to that same page.

The javascript has been cleaned up so it should be easier to localize.

Comment 14

[Steven Garrity [:sgarrity]]

Merged to stage in r93083. Also needs these two merges to stage from Bug 662975: r91569 and r91583.

Comment 15

[Anthony Ricaud (:rik)]

Since this animation is only displaying 1.5 seconds after load and only for Firefox 3 users, could we only include a "launcher" on every page? That would reduce the amount of code sent to everyone.

Comment 16

[Steven Garrity [:sgarrity]]

We'll update with Pascal's link request [1] and Anthony's suggesting of only loading for 3.x browsers. The script has gotten complex enough that this might be worth doing.


[1] https://bug662975.bugzilla.mozilla.org/attachment.cgi?id=542847

Comment 17

[Michael Gauthier [:gauthierm]]

Anthony's suggestion is implemented in r93199.

Comment 18

[Michael Gauthier [:gauthierm]]

Bug fix in r93200. L10n suggestions implemented in r93202.

Comment 19

[Steven Garrity [:sgarrity]]

Merged Mike's changes to stage in r93206.

Here's the updated list of changes to go to stage: r91569, r91583, r93083, r93206

Comment 20

[raymond [:retornam] (inactive)]

qa-verified-trunk https://www-trunk.stage.mozilla.com/en-US/firefox/new/

Comment 21

[James Long (:jlongster)]

pushed to production r93233