Closed Bug 707780 Opened 10 years ago Closed 10 years ago

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

Categories

(Marketing :: Design, task)

x86
macOS
task
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: christine.brodigan, Assigned: ltom)

References

Details

Attachments

(2 files)

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
PSD of template for designer: http://intothefuzz.com/leetom/Mozilla.com/PSD/upgrade_01.psd
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.
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
Assignee: tshahian → ltom
Great idea Tara! Let's go with it, Matej should be able to tweak the copy and achieve some form of liftoff!
How about this?


3, 2, 1...

Take your bookmarks and browsing history with you on a journey to a faster Firefox.
No longer blocks: 700394
Blocks: 708325
Attached image 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.
(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/
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?
Attached image upgrade - bookmarks 02
I like the second option (countdown first) - see attached:
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!
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.
(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!
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
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.
I think if the rocket is 'rumbling' side to side-ish, it could suggest that it was blasting off...
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!
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
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
Thanks Lee.
Status: REOPENED → RESOLVED
Closed: 10 years ago10 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.