1062563 - incorporate device image into about:home template (in conjunction w FxOS animations)

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jean Collings]

>>Project/Request Title:
Firefox OS Animation for About:home

>>Project Overview:
We are currently working with an agency and outside contractor to create 2 new animations for the Firefox OS launches on the about:home page. 

>> Creative Help Needed:
Copy:    No 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
We are looking to incorporate specific device images below the search bar but 1) we need to make sure it steers clear of the animations so there's no overlap and 2) device images are big enough so users can really see it. 

Mock ups of what the device can look like below the search bar with animations in play.

(Note, if we can't make the device image big enough below the search bar so that users can see the nuances, then we would have to consider asking the agency to incorporate the device above the search bar with their animations). 

>>CTA and Design:
The two animations are here:
http://client.s77.tv/files/ftp/Mozilla%20Firefox/1311%20mozilla%20firefox%20snippet/140828/1311_mozilla_firefox_roughanimation_140828.mp4

User: mozilla77
Pass: client77

Sorry for the short timeline - there's an urgency behind this as we're putting our agency on hold until we can see if this plan will work. 

>>Creative Due Date:
2014-09-05

>>Launch Date:
2014-09-05

>>Mozilla Goal:
Firefox OS

>>Points of Contact:
[e-mail], [e-mail]

Comment 1

[John Slater]

Assigning this to Sean.

Comment 2

[John Slater]

Also updated the bug title a bit, since this isn't actually about the animations and don't want to confuse things.

Comment 3

[Sean Martell]

Hey all,

Here's a crack at some options - some being a bigger change than others:

1 - http://cl.ly/image/2B190923013r

Similar to where snippet is now, but with bigger phone. Fox would probably not be able to jump around box unless he went behind phone.

2 - http://cl.ly/image/1O0J1I3w3f0p

Saving up room for the fox to jump around the search box, move a larger phone to the edge of the screen.

3 - http://cl.ly/image/3R1c0r3n410X

Putting the phone up top, it saves room for the fox to leap and frolic along the darker grey bar along the bottom, coming to rest on the right.

Comment 4

[Jean Collings]

Thanks Sean for working on these. I'm inclined to go with the first one though it is a big change. I hesitate to have the phone on top because I want to make sure we have the fox branding and it just comes off a bit too much like an advertisement. The phone on the right also seems out of place to me. John what do you think? I'll pass these to Barry and Mary Ellen for review once I get your thoughts.

Comment 5

[John Slater]

I agree. We might also want to try a version where the phone isn't tilted, or perhaps it's visually connected to the snippet copy in a way that suggests they're part of a unit, but that one seems like the best general direction.

Jean, should we also ask the agency folks what they think about this one? Especially about the level of impact it would have on the work done so far.

Sean, thanks for jumping in and turning this around quickly.

Comment 6

[Jean Collings]

Hi all,

Mary Ellen's feedback (as well as John's) is to make the fox and the phone more connected which I think can be resolved with the actual animation. 

I'll send the first link to the agency to see if they can incorporate their animations around it.

Comment 7

[Jean Collings]

Hey Sean,

Is there anyway you can 1) un-tilt the device and 2) scale down the device image a bit (maybe it's 80% of what it is now?) so that there's room for the fox to run underneath without overlapping with the bottom tool bar and losing the nuances of the device image? Let me know, thanks!

Comment 8

[John Slater]

Am assigning this over to Lee, since he's been more involved in the overall project.

Lee, can you continue to refine as discussed via email and comment #7?

Thanks!