707780 - [Upgrade 3.6 Landing Page] Design Landing Page 3 - Packed Your Bookmarks & Browsing History

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[mcbmoz]

This is a bug to design a landing page for the lite-weight 3.6 upgrade campaign.

Objective: Get small graphic polish to staged template (new images for the coded interactions/concepts)

Template & coded interaction: http://moz.jbalogh.me/en-US/firefox/bookmarks/

Copy in live page (above) was written by Matej (might be tweaked a bit when we update the graphics)

Wiki: https://wiki.mozilla.org/Mozilla.org/Roadmap_2011/Q4/3.6-Upgrade

Deadline: Thursday, December 8, so it can be in code an QA'd for next week's 4.10 release


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 that = packed up bookmarks for your trip to a new Firefox
-similar to http://www.mozilla.org/en-US/firefox/speed/
-existing template by Lee Tom, live code with temporary graphic http://moz.jbalogh.me/en-US/firefox/bookmarks/

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"

*****

Responsible: CB
Accountable: Laura Mesa/Patrick
Supportive: CB/John Slater
Consulted: Lee Tom, Tara, Laura Forrest, Matej
Informed: Jane F., Carmen

Comment 1

[mcbmoz]

PSD of template for designer: http://intothefuzz.com/leetom/Mozilla.com/PSD/upgrade_01.psd

Comment 2

[Tara (musingt)]

Hey guys.  As noted earlier (when speaking to Chrissie), this bug was filed only yesterday and the timing is really tight given the request.  I think the suitcase graphic is fun but I don't want to use stock imagery and we don't have much time to custom illustrate a new graphic here.  

Plugging in an existing graphic could work.. except that I want to be careful about recycling our graphics as it will start to dilute their meaning/impact...  certain graphics are created to represent certain things (rockets for speed, aurora, etc) so while there are times when can plug one into a few different places, it's not always going to work.  So just wanted to note that.  

I'll see what I can do, but can't guarantee that we'll have this done by Thursday.  It's simply a tight turnaround time for the ask.  But I"ll do my best and keep this bug updated.

Whimsical images discussed included:
* Suitcase, Airplane / Rocket ship --> suggesting travel.
* Other ideas are welcomed / encouraged.
* Anything that implies we've "packed" things up for you. 

Also, if you can share flexibility on timing, that would help.  Thanks.

Comment 3

[Tara (musingt)]

OK.  Lets use spaceships here since we have a variety of these in our graphics library to choose from, and they look pretty good. 

Would probably need to update the copy though so it's a bit more aligned with the spaceship "launch into space" imagery vs. packing up for a trip (suitcase/airplane etc)

Thoughts?

Lee, would love your help with this as well.  Hoping it's a quick project since we have existing graphics.  Chrissie, as discussed if we can push this to Friday that'd be great.

Thanks

Comment 4

[mcbmoz]

Great idea Tara! Let's go with it, Matej should be able to tweak the copy and achieve some form of liftoff!

Comment 5

[Matej Novak [:matej]]

How about this?


3, 2, 1...

Take your bookmarks and browsing history with you on a journey to a faster Firefox.

Comment 6

[Lee Tom]

Attachment: upgrade - bookmarks 01

Mock up attached! 
Matej, would it be possible to craft the header around the same styling we've been using on the other pages? 

Italicized,
BOLD TEXT

Also, Meta font has a rather awkward number set...I like the countdown, but I think the "3,2,1..." looks a bit weird.

Comment 7

[mcbmoz]

(In reply to Lee Tom from comment #6)
> Created attachment 579883 [details]
> upgrade - bookmarks 01
> 
> Mock up attached! 
> Matej, would it be possible to craft the header around the same styling
> we've been using on the other pages? 
> 
> Italicized,
> BOLD TEXT
> 
> Also, Meta font has a rather awkward number set...I like the countdown, but
> I think the "3,2,1..." looks a bit weird.

Matej, Lee,

Maybe something like:

Are you ready to go?

A question would be parallel to the style of the Speed landing page http://mozilla.org/en-US/firefox/speed/

Comment 8

[Matej Novak [:matej]]

I like Chrissie's suggestion in comment 7, I would just shorten it a bit:

Ready to go?
3, 2, 1...

Could also go the other way:

3, 2, 1...
READY TO GO?

Comment 9

[Lee Tom]

Attachment: upgrade - bookmarks 02

I like the second option (countdown first) - see attached:

Comment 10

[mcbmoz]

Looks great to me +1

If you guys are good to go, Lee can you post the link to the PSD and close as resolved?

Thanks for the fast turnaround here!

Comment 11

[Lee Tom]

PSD is here:
http://intothefuzz.com/leetom/Mozilla.com/PSD/upgrade_bookmarks.psd

Hey CB, since the other 2 upgrade pages have slight animations - is the thought here to sway the rocket back and forth slightly? Maybe there's some subtle movement of the rocket's exhaust smoke? I'm not an animator, so I'm not sure how easy either of those are implement (or if we have time/resources to do this,) just thinking aloud.

Comment 12

[mcbmoz]

(In reply to Lee Tom from comment #11)
> PSD is here:
> http://intothefuzz.com/leetom/Mozilla.com/PSD/upgrade_bookmarks.psd
> 
> Hey CB, since the other 2 upgrade pages have slight animations - is the
> thought here to sway the rocket back and forth slightly? Maybe there's some
> subtle movement of the rocket's exhaust smoke? I'm not an animator, so I'm
> not sure how easy either of those are implement (or if we have
> time/resources to do this,) just thinking aloud.

Thank you Lee! Yep, the plan is to have the rocket teeter a bit like the suitcase, once we see how that looks we might take a stab at making the rocket lift off and slide up a little or do a 90 degree tilt like it's ready to fly off the page. That part is pretty easy since I'm just grabbing code from an existing jquery library.

Closing as resolved! Grazti!

Comment 13

[Tara (musingt)]

my (over analyzed) 2 cents:

* Having the rocket teeter a bit isn't exactly true to how rockets take off :) which is in a perfectly calculated path... otherwise it would feel unstable and weird, in my opinion.  Works well for suitcase, but not so much for a rocket about to take off into space.

* Would have been nice to give the stars subtle animation... especially if the rocket was in motion going up, we could have the stars/clouds move down (on a loop) suggesting motion.   I also like the idea of playing with the puff of smoke below for something subtle that suggests the rocket is prepping for blast off.

Comment 14

[Lee Tom]

I think if the rocket is 'rumbling' side to side-ish, it could suggest that it was blasting off...

Comment 15

[mcbmoz]

Lee, I can manage a bit more animation, but need your help with the image:

*Can you give me a few extra layers in the PSD where the *fire* from the jet is in different positions (maybe short flames to long flames) - this will let me cycle through them and create a movie-like experience on a timeline

*Also, can the stars have similar/multiple layers, so we can twinkle them

High fives for the great ideas!

Comment 16

[Lee Tom]

Chrissie, 
Here are some PNGs, PSDs and some rough examples/animations for the Bookmarks page. I think you guys can take it from here!

http://cl.ly/2W3g1N0T1o051Z0T093i

Comment 17

[Tara (musingt)]

Thanks Lee.