Closed Bug 661625 Opened 13 years ago Closed 13 years ago

Firefox Mobile/Sync banner graphic and copy - WN page

Categories

(Marketing :: Design, task, P2)

Product:
Marketing
Component:
Design
Platform:
x86
macOS
Type:
task

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: clooney, Assigned: ltom)

References

(
URL
)

Details

Attachments

(1 file)

android phone / galaxy tab scale
58.33 KB, image/jpeg
Details 
Goals: To aid Sync awareness/discoverability, please create (and implement) a Firefox Sync promo banner to go in the place of the current Be a Web Here Banner on the What's New page.

Specs: Same dimensions of the current Web Here banner.

Timing: This is priority 2 (after Firefox desktop and Android banners) but would like to get rotated in whenever possible after the Firefox (5) desktop and mobile launch. (1-2 weeks design, 1-3 weeks implementation).

Design direction: Clearly show desktop -->tablet -->to mobile (this can be an animated graphic to show synchronization across devices). 

Suggested Header: Stay in Sync
Suggested Copy: Get easy and safe access to your history, bookmarks, tabs and passwords on all your devices.
Button: Get started [setup wizard]
Small link below button: Already have a Sync account? Add a device.

Thank you!
Priority: -- → P2
Copying Laura M to make sure you guys are in sync (no pun intended) around promo usage here.

Laura F - can you start pulling together a promo calendar for What's New?
Thanks John-- We had discussed this and on board.
Assigning to Ty.

Caitlin, do you have direction on the stock images of the tablet?  I had the same question/need in another bug and haven't heard from you yet.  Please let me know.. Thanks.
Assignee: tshahian → tyronflanagan
Hey guys, I'm going to assign this to Lee as well.  He has picked up a lot of the WN promos and related mobile promos.  Thought it would make sense to have one person do all these since they're related.  Thanks Ty!  I'll have more work coming your way shortly.
Assignee: tyronflanagan → ltom
Summary: Create Firefox Sync promo banner for What's New page → Firefox Mobile/Sync banner graphic and copy - WN page
For time, I'd like this to go up to support Firefox (5) timing (June 21).

Design Deadling: 6/13
Website implementation: 6/21

Thank you!
I think Caitlin's copy in comment 0 looks great, but just in case, here are a couple of other versions we didn't use for the Panda page:


Header: Get Organized With Sync
Copy: Keep all your Firefox information at hand across all your devices.
Button: Find out how
Small link below button: Already have a Sync account? Add a device.


Header: Sync Your Info
Copy: Access your history, bookmarks, tabs and passwords from any device.
Button: Get in Sync
Small link below button: Already have a Sync account? Add a device.
(In reply to comment #0)
> Goals: To aid Sync awareness/discoverability, please create (and implement)
> a Firefox Sync promo banner to go in the place of the current Be a Web Here
> Banner on the What's New page.
> 
> Specs: Same dimensions of the current Web Here banner.
> 
> Timing: This is priority 2 (after Firefox desktop and Android banners) but
> would like to get rotated in whenever possible after the Firefox (5) desktop
> and mobile launch. (1-2 weeks design, 1-3 weeks implementation).
> 
> Design direction: Clearly show desktop -->tablet -->to mobile (this can be
> an animated graphic to show synchronization across devices). 
> 
> Suggested Header: Stay in Sync
> Suggested Copy: Get easy and safe access to your history, bookmarks, tabs
> and passwords on all your devices.
> Button: Get started [setup wizard]

According to the Sync folks, there's currently no way for a web page to invoke browser UI so we'll be unable to trigger the Sync setup wizard from this promotion. Sad face. 

In that case, what's the best link to use within this promo? Remember - this page gets millions of page views - we want to be sure we make this promo as actionable as possible, and that we're able to measure the effectiveness of this promo to the best of our abilities. 

Options:
This SUMO article: http://support.mozilla.com/en-US/kb/how-do-i-set-up-firefox-sync
This Sync Page: http://www.mozilla.com/en-US/mobile/sync/
Other?

Seems like the /sync page would make the most sense here. 

Caitlin - You mentioned sync signups are fairly static day-to-day. Can you monitor the impact this promo has? I can monitor from the web traffic perspective.
Here's a first stab at illustrating the Android phone and Tablet side by side:
http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_sync_01.jpg

- I'm wondering what would be the best way to tell the Sync story here. Are we matching Firefox start pages? (like the new Mobile for WN: http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_mobile_03.jpg)

- I'm not sure how much presence we want the Sync logo, but thought clearly seeing it in the background might help paint the picture of Sync as a product/function

- FPO some callout text - we can briefly explain here
I wonder if it would be important to show a desktop machine or laptop as well so people know Sync isn't just a mobile product. I'm also not sure what we'd want to put in that bit of text near the image. Do you think we need it?
I'm afraid forcing a desktop machine next to these devices will look really heavy-handed. Maybe we use that bit of text to speak about Desktop thru to the other devices...?
Could do through copy, yeah. Or what if you replaced one of the devices with a desktop? I just wonder if more people have two mobile devices that they need synced, or one mobile and a desktop or laptop.
Thanks Lee.

Some thoughts:

* Agree that having a desktop reference would help, but we really don't have space to force in another graphic here.  Ideally we'd have something like a browser screenshot like what we've used before, and show how that has "magically" displayed on these other devices.  But, don't think we've got enough space to do something like that successfully.  It would be too busy.

* I love how you've re-illustrated the devices Lee, great job there.
* I like the colorful bursts in the background.
* I like the nod to the sync logo.

* This might just be me, but I feel like the devices/graphics and the text should somehow be a little closer together.  I feel like my eyes are drawn to the two devices, and the message/CTA gets a little lost or feels secondary.  And there's a big gap between the two, with each on either side of the promo box. 

* I personally don't think we need to have another call-out with "learn more" next to the devices, the text should be in one place with a clear CTA to either download or learn more.  

* Lee, can you throw in the start page on both so we can see what that looks lke?
Thanks for the feedback guys. Here's a new mockup:
http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_sync_02.jpg

* I'm trying our Firefox logo in the background vs. the Sync logo - maybe this helps suggest Firefox desktop, which is more familiar w/ everyone.
* Also FPO'd the callout copy to mention using Sync from Desktop > Android devices
* Firefox start page on both device screens, consistent w/ our other mobile promos
Thanks Lee.  Thoughts:

* Screenshots of startpage looking good.
* Subtle paint splashes, looking good, and a visual tie connecting these campaign elements together for mobile.
* Firefox logo vs. Sync - I like that too.
* I still think that additional text callout near the devices is not necessary... I think it would be better/cleaner to have the text on the left with the rest of the copy.   I also don't think we should call out "Android" here, since you can also use sync with iPhone, right?  The idea is to just communicate mobile to desktop to tablet sync.  
* I personally love the dotted lines... not sure how to incorporate them if the text goes away :)  but, I like them.

Caitlin / Matej, thoughts on copy and CTA?  Please chime in.
Hey guys. Same basic comments here as in the other bug - I know this makes things much harder, but I just don't think the sync message is clear if we don't show a computer. The tablet just doesn't seem right here.
Just read through some of the earlier discussion, sorry to jump in late here. I think showing a desktop browser screen rather than a full computer image could work, but I still think we need to find a different way of communicating this concept visually.
(In reply to comment #14)
> * I personally love the dotted lines... not sure how to incorporate them if
> the text goes away :)  but, I like them.

Maybe we could use the dotted lines to show that what's on the two screens is the same info by linking one to the other?

> Caitlin / Matej, thoughts on copy and CTA?  Please chime in.

I still think either of the CTAs in comment 6 would work. Caitlin?
-Not sure about the copy. What's the reason for not saying "Sync your Firefox?" I'm not averse to it, but curious. 

-Also, the phone and tablet look really similar. Any way to through in a desktop image (comment 15) or rotate the tablet to landscape so you can see a difference?

Thanks!
* Agree that the "sync" message isn't as clear or strong.
* Agree that the devices look similar, we went with the device references we had.  I think turning the tablet horizontal will definitely help.
* Agree that having a desktop reference in there is helpful, but honeslty I can't think of how to incorporate that without making it messy.  Even if we take the tablet out.  It's a small canvas to design on.  Lee, what are your thoughts on this?  What can we do?  
* I love the dotted lines, always have - so, having those show a connection between the devices I think helps
I also agree that "Sync your Info" isn't the strongest or most meaningful of headers here.  Can we come up with something better?  "Sync your Firefox" at least tells me I can sync my Firefox experience... whereas "info" feels a little vague.  That's just me.
(In reply to comment #20)
> I also agree that "Sync your Info" isn't the strongest or most meaningful of
> headers here.  Can we come up with something better?  "Sync your Firefox" at
> least tells me I can sync my Firefox experience... whereas "info" feels a
> little vague.  That's just me.

"Sync Your Firefox" would work. Also a few other options:

Keep Your Firefox in Sync
Keep Firefox in Sync
Keep Your Life in Sync
Sync Everything, Anywhere
The scale of the tablet and the phone are actually not as different as say, a cellphone and an iPad. (see attached) 

For their iCloud page http://www.apple.com/icloud/ Apple uses way more real estate than we have here, so they're able to show a laptop screen + iPad + iPhone. What I think helps communicate accessing the same content on ea device is the rotation of different websites across all devices. These sites are also more visually compelling than our start page. Are we tied to our start page?
The rotating images on the iCloud site really help, too. Is there something dynamic like that that we can do? Maybe an image appears on one screen and then the other?
http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_sync_03.jpg

* "Keep Your Firefox in Sync" 
* trying to incorporate a screenshot in the background for 'desktop' reference. Since start page on devices may contain bookmarks for CNN or Flickr, I have open tabs in desktop reference. (These are FPO - please advise)
* cellphone screen - start page
* tablet screen - is there a start page equivalent for the tablet, or should the website (Flickr, in this case) be opened?
I think this is going in the right direction. Caitlin, do we really need a tablet in here? Seems like that's the hardest thing to fit in, and I think the point is well made with just a phone and a desktop browser.
I think this is looking really strong. I think the desktop background + the tablet + phone looks really strong. (Are you suggesting removing the tablet so it's just a phone on top of a destkop screen shot?) I really like the ways it's looking now with the tablet on the left. It shows that you can have Firefox across all your devices and shows that we're compatible on tablets -- a very strategic device for us and in the top 5 devices currently used by Firefox for mobile users).
I like where this is headed too.  I wasn't sure if we could add a screenshot in there without overwhelming the space... but it can work. We just have to layer the screnshot/devices in a way that tightens up the design a bit more.  The other key thing is figuring out what screenshot to show in the devices.  I like how you're showing the startpage (which has the tabs from the desktop screenshot open), I think for this to work... we'd have to use the startpage on the tablet as well.  It's not the sexiest of screenshots, but might be the clearest. 

Lee what do you think?
Can someone send me a screengrab of the start page from the tablet device with the same tabs open (CNN and Flickr)? Then I'll plug it into the layout and we can assess from there.
Caitlin, correct me if I'm wrong.. but I believe the screenshot is exactly the same.  It's just a bigger version of what we'd see on the phone.  But I'm not sure what that would look like on a horizontal layout.  So, I guess we would need a new screenshot for that.  

Caitlin, if you can whip that up, that'd be great.
I updated the last jpg w/ a stretched version of the phone start page onto the tablet screen. I can drop in the correct version of the tablet start page if it's drastically different (or not). This is so we can review both devices + browser image (desktop). 

http://www.intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_sync_03.jpg
Thanks Lee. Two things:
1. I think it would make a stronger point if the same site/content was on each of the devices. Right now they're not really synced.
2. Caitlin, what should go on the blue button?
I agree. 

- What would be the best site/content to show as great example of Sync? (ideally, this would be visually compelling w/out being too visually 'noisy')
- Once we decide on this, it would be helpful to have true-to-life screenshots from the devices. I can drop them in from there.
to share an opposing view:

* I Agree with comments 31 and 32, but also think that the graphic here *does* communicate Sync well.   It's just not as direct.  But this shows me pulling the same tabs (Flickr and CNN) from my desktop onto my mobile device and tablet.  I agree that showing an actual page would be nice, and have it be displayed across all devices.. but I think we should also apply some animation here.  Maybe it starts with the start page, and then transitions into the actual page?  Like, it starts with the start page and then they all show Flickr?  or something like that.  Just a thought.   

* I don't think that showing the same screenshot on all necessarily says "sync"... it could also simply imply that you can use Firefox on these three devices, vs. the fact that you're syncing your browsing history/session.
I also agree with this, Tara - comment 33

showing 2 start pages from the devices that are sync'd with the desired website (said website that originated from a desktop experience)
Although this image shows sync -- you can be a bit more hard hitting (without the viewer having to take a closer look) with a picture perhaps. I like Tara's idea of an image. I have this vision of a personal picture (girl and her dog) that someone may have been shared and you see it on desktop (flickr site) tablet, full image, etc.
hehe, Caitlin, is this "girl" you?  I swear I've seen this picture of you and your [late] dog somewhere. 

I actually think if we're going to use a photo, it shouldn't feel like the stock images we see in photo frames... but something a little more branded.  Like, a community photo, or something with our Fox character...etc.  Something that doesn't overwhelm the page but feels more "us". 

So, not sure if we've got solid direction here.  Caitlin, did you want to try the animation I suggested? or go straight to the same photo shown on all three devices (and desktop) ?
How would the animation solution work? That potentially adds a lot of complexity and work (on both the design and dev sides) to what should be a pretty straightforward page.

Also, it's not clear to me how showing different imagery on the devices communicates sync. I'm open to arguments as to why this is true, but for now I really think we need to show the same content on each. I think a nice Flickr page of a community event or something Mozilla-ish would do the trick just fine.

My concern about comment #35 is that this could wind up like an ad for a photo-sharing site...not sure that we really need to show the source material outside the context of the web page it's on.

So what should go on the blue button?
Hey John, just to clarify.. I didn't mean to suggest we'd show different images on each device.  I simply meant that showing the same image across all doesn't necessarily say "sync", it simply (to me) says that we've accessed the same site on all three devices... but the startpage shows that you're accessing your tabs (etc) from your desktop, because it shows the tabs that are on the screenshot (flickr and cnn).  

So, the animation could kick in quickly to take you from the startpage on to the flickr page, showing the same image on all.  I thought that Caitlin had suggested some subtle animation as part of this (or the panda page) to communicate sync... so that's why I suggested it.  It would simply be a rotating image, I didn't think it would be that complex.  

But, it was just a though.  I'm happy doing whatever you think is best and gets us to a strong design solution and a closed bug :)
I don't think we have to overthink how to show sync across the platforms in this promo spot. 

IMO, it should be the flickr page in all 3 spots - desktop, phone, tablet. It doesn't have to be a mobile optimized site on the devices either - Firefox Mobile does a great job of showing the real web. :)

Perhaps use our always handy dotted line flowing from one to the next to show pseudo connectivity.

Just my thoughts.
comment #39 +1
Fine with me.
Agreed - let's go with that.
Here are 2 new versions:

http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_sync_04a.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_sync_04b.jpg

* Flickr page with Mozilla Summit pic on all screens (I app-tab'd CNN, Twitter, and FB since we're using Flickr as the Sync example)

* one version with Sync logo, one without (not sure how hard we want to push the logo)

* I played with our dashed line, but the promo started looking cramped and confusing
+1 on without logo. cleaner.
(In reply to comment #37)
> So what should go on the blue button?

Originally I had Find out how or Get in sync. Not sure if one of those still works. If not, what do we need it to convey?
Agreed with Sean about the logoless version. I'm still thinking it's not super clear that the photo on the tablet & phone is connected to the website though...can we indicate that those are also on Flickr?
For the button, I think Find Out How would work. Caitlin, does that sound right to you?
More bugmail from me!

Lee talked me into changing my mind about comment #46. I'm ok with it if you guys are.
Re comment #47 the objective is for folks to setup an account so I'd tend to make it more actionable. That said, I'd prefer it to read "Get In Sync" -- feels stronger.
Latest:
http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_sync_04.jpg

* without Sync logo
* CTA: "Get in Sync »"
(In reply to comment #50)
> Latest:
> http://intothefuzz.com/leetom/Mozilla.com/JPG/whatsnew_sync_04.jpg
> 
> * without Sync logo
> * CTA: "Get in Sync »"

+1
sweetness. and closed.
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
Blocks: 668112
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: