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



4 years ago
3 years ago


(Reporter: Jean Collings (Maternity Leave 4/6/18 - ping Kat Plam for Leanplum, Michele Warther for Snippets), Assigned: Lee Tom)



>>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:

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:

>>Launch Date:

>>Mozilla Goal:
Firefox OS

>>Points of Contact:,

Comment 1

4 years ago
Assigning this to Sean.
Assignee: jbalaco → smartell

Comment 2

4 years ago
Also updated the bug title a bit, since this isn't actually about the animations and don't want to confuse things.
Summary: Firefox OS Animation for About:home → incorporate device image into about:home template (in conjunction w FxOS animations)

Comment 3

4 years ago
Hey all,

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

1 -

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 -

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

3 -

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.
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.
Flags: needinfo?(jslater)

Comment 5

4 years ago
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.
Flags: needinfo?(jslater)


4 years ago
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.
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!
Flags: needinfo?(smartell)

Comment 8

4 years ago
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?

Assignee: smartell → ltom


4 years ago
Flags: needinfo?(smartell)


3 years ago
Last Resolved: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.