644756 - Need Screenshots for DIRECT marketing campaign

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Description

[Tara (musingt)]

Hi there

We're working on an "upgrade" marketing campaign focused on encouraging 3.6 users to upgrade to 4.0.  We'll be placing promos and CTAs across key channels to communicate with them directly and prompt them to upgrade. 

We have 5 segmented audiences we're looking to reach based on general interests and activities on the web.  In short, these are:

* Casual gamers
* Social media lovers
* Consumer / Media streamers 
* The web "worker"
* Messaging/chat enthusiasts

We'd like to create a unique landing page for each of these segments.  This will take the form of a light update to the existing mozilla.com download page where we'll update the main copy and hero graphic only.  

The hero graphic will change to browser screenshots and content that will resonate with that particular audience.  For example, a game enthusiast will see a mockup of something with Farmville on it, social media lover will see a Facebook page, etc. 

For the layout, we'd like to simplify and show only the browser.  So, we're looking at a graphic like this:  http://www.intothefuzz.com/leetom/Mozilla.com/JPG/home_newusers_test_02f.jpg  vs. the one that's currently on our site with the various characters. 

For the contents, we'll be giving you direction per segment as to which sites we'd like to show. 

When/where possible, we'd like to incorporate our unique personality into the screenshot.  So, for example, instead of showing a general Facebook page, we'll use the one we created for Curly.  As shown inside the browser, here: http://www.intothefuzz.com/leetom/Mozilla.com/JPG/home_newusers_04_curly.jpg 

We'd also like to customize the browser a bit to add specific App Tabs, and other elements in the toolbar to line up with that particular segment.

---------------------

We're currently discussing this in a separate bug, Bug #642954  
I will follow up and post final content direction asap.

---------------------

* Once we nail down the specifics of the browser screenshots.  

* We'd like you to create those across each platform:  Mac, PC, and Linux.  

* So, that's 15 screenshots in total. 

---------------------

Timing on this is pretty tight.  So, would be great to have these done by early to mid next week.  The sooner the better.

Happy to answer any initial questions you have.  Otherwise, just wanted to put this on your radar.  Will follow up soon to discuss in more detail.

Thanks.

Comment 1

[Tara (musingt)]

Hi there

Stephen, thanks for the call earlier today.  I have a word doc capturing our conversation, and some additional details.  Please let me know if you have any questions.  There are some that you can get started on right away, and others that need more content from our end before you can work with them.  I'll be providing that asap.  

To reiterate: 
* we'll need these on PC, Mac, and Linux
* no personas
* app tabs and live tabs per screenshot - by "live tabs" I basically mean an open tab aside from App Tabs -- since sometimes the page we're showing is an App Tab.  We discussed this over the phone, I offered some suggestions in the word doc.  Let me know if anything feels off.
* I also supplied the login info for the various channels for Curly so that you can tweak and play.

In terms of process, Let me know if we'd have a chance to see the screenshots first and approve designs before you actually finalize and create them across the different platforms.

Thanks again.

Comment 2

[Tara (musingt)]

Attachment: Screenshot direction

Comment 3

[Tara (musingt)]

Attachment: FB hacked - inspiration

Here's an example of a hacked FB page.  It's quickly put together, but it shows Curly's feed having a video, and some status updates.  I added additional critter avatars from around the site.  Added fake "likes", comments, etc.  Just to make it feel more active.  We'd have to update the names though.

Comment 4

[Stephen DesRoches]

Tara: Any updates on the Farmville Screenshot, google calendar events or the dialog for gmail inbox/chat?

Comment 5

[Tara (musingt)]

Hey Stephen. Am having some issues with the farmville one, mainly not finding anyone here who plays and is available to help supply a better screenshot, and not liking any of what the farmville folks are actually giving us.  Will send you what they shared so you see what I'm talking about.  I was also thinking that perhaps we can use a cc-licensed image from Flickr.  That might work best actually vs. us spinning our wheels on this.  

The google calendar and gmail inbox will be sent to you asap today.  I'm working on those next.  

Any updates from you wrt to the other screenshots?  If you have any mockups, I'd love to see them.  

Thanks again.  Will give you the rest of the content as soon as I can.

Comment 6

[Milos Dinic [:Milos]]

(In reply to comment #5)
> Hey Stephen. Am having some issues with the farmville one, mainly not finding
> anyone here who plays and is available to help supply a better screenshot, and
> not liking any of what the farmville folks are actually giving us. 

Hello,

I may help you with that, if you wish.

Comment 7

[Tara (musingt)]

Please do ! and Thanks!  I will ping you in a second with details.

Comment 8

[Tara (musingt)]

Milos.  I'm looking for a screenshot to fit the following general requirements:

* in-play vs. homepage / login page, etc. 
* looking for something that is relatively neutral in terms of color and graphics.  I'd like to avoid the very heavy, flashy, saturated and bubbly graphics that farmville tends to have -- while still capturing something that is easily recognized as "farmville", and resonates with that audience.
* Ideally the screenshot won't consume the entire browser.  That tends to really dominate the page and detract from the download CTA.  As shown in the attachment.
* Related to the above, if farmville is played on facebook, does it take up the whole screen?  or is there a smaller view box within the facebook frame?
* I was hoping to incorporate a FF crop circle in there somehow :)  but have given up on that idea.

* Below are a few links referencing the general type of screenshots that I think will work.  We may have to adjust the color balance a bit, but overall... I'm looking for something relatively simple.

http://www.kern-photo.com/wp-content/uploads/2009/10/Tips_Farmville_Buisness_Tricks.jpg

http://www.loveinsanity.com/wp-content/uploads/2009/10/farmville.jpg

http://www.freerefill.de/blog/pix/Farmville_Chris.jpg

---------------------------

What do you think?

Comment 9

[Tara (musingt)]

Attachment: mockup w/farmville screenshot

This is a mockup of what the folks at Zynga gave us.  As you can see it's very dominant on the page, and I'd like to fix that.  Either reducing it to a smaller view box and/or muting out the colors.

Comment 10

[Milos Dinic [:Milos]]

Tara,

Thanks for the thorough explanation. This's what I'd do:

1) Take the screenshot of the game starting screen, and use it as a base we're gonna build on. That should include some space on the both left and right side of the browser window, giving us some extra white color so it doesn't look much heavy.
2) Make the in-play screenshot which will include a FarmVille sign(it's available as in-game item).
3) Shrink the size of in-game screenshot so it fits the frame from 1)
4) Eliminate extra green parts(mostly grass) from FarmVille screenshot.
5) Combine 2 images.

I'm pretty sure I didn't explain this very well, so I'll attach a screenshot asap.

Comment 11

[Milos Dinic [:Milos]]

Btw, you can find me on IRC if you want us to discuss it more.

Comment 12

[Tara (musingt)]

Thanks Milos.  A screenshot would totally help clarify.  I'm generally on yahoo/AIM.  But I can figure out my IRC and find you :)

Fwiw, I'm also trying to figure out if we need to adjust the size of the browser graphic on this page.  It feels like we're showing too much of any page vs. the actual product. We're trying to show things like app tabs and the new UI, but none of that is terribly clear with the full browser showing.  So, stay tuned for an update on that. Otherwise, looking forward to seeing the screenshot, and thank you SO much for the help.

Comment 13

[Tara (musingt)]

Attachment: Mockup: edited browser screenshot for homepage

As I mentioned earlier, seeing some rough mockups of the landing pages made me realize that we're losing focus of the actual product elements and showing too much within the browser -- inadvertently creating a giant banner ad.  So, I suggest scaling up the browser shell, and fading out the rest (cropping at the right, and fading out the bottom).  A rough mockup is attached. 

Stephen, if you can supply a cleaner version that would be great.  Once we nail down the shell, we can move forward and plug in the screenshots.  I'm hoping this will look and feel better overall.

Comment 14

[Tara (musingt)]

A few updates: 

---------------------------------
DIRECTION FOR FACEBOOK SCREENSHOT:

If you're using avatars of other creatures, I have names for them below:
* Panda: "Mortie"
* Rhino: "Ricky"
* Yeti:  "Abe"
* Purple monster: "Munch"

Would be cool to include them in Curly's Friend list as well.  
If you need more avatars, names, I'm happy to supply those.


------------------------
DIRECTION FOR EMAIL:

Jane has sent Curly some fun new emails.  We can keep her name on some, but
change the rest to be coming from other critters. 

An alternative option here is to take a screenshot with an email thread open. 
that way it's less heavy on text, and we can incorporate a fun photo that has
been attached.  I'm liking this option more, what do you think?

For the chat dialog, Lets just have a video chat open with a few simple lines:
* Curly?
* Hey! How are you?

Something simple for now.  
The video chat can be with Mortie the Panda.  So, please insert his picture. 

---------------------------------
DIRECTION FOR GOOGLE CALENDAR:

This one still feels pretty plain to me.  We'll need to work on making it
better, or finding another page to display.

Comment 15

[Milos Dinic [:Milos]]

Attachment: Farmville window proposal - Milos

Hello Tara,

Sorry for it took so long. I'm not really good at design, and it was a bit hard to express the vision I had :)

Comment 16

[Milos Dinic [:Milos]]

BTW, what I forgot to say: this is just my idea. What I think we're getting with this is:

* Not so much vivid colors, so it should't distract our visitors to much. Using sand-ish environment instead of the one with plenty of grass helps that.
* There's a FarmVille sign:
    a) big enough to be noticed
    b) small enough for not to distract people
    3) small enough for not to look like advertisement(nor be an advertisement)
* We're not using the whole browser window space, so we're not going hard on overall page design

NOTE: I'm not suggesting we should use this picture exactly as it is, it's just an idea on how can we get what we actually want(or at least what I think we want). Please review the attachment I added, and just comment here if you'd like me to post my screenshots so someone can come up with something nicer :)

Comment 17

[Stephen DesRoches]

Attachment: Sample using Facebook

Tara: Sample for en-US/firefox/new/socialmedia/  in OSX

Comment 18

[Tara (musingt)]

Looks pretty good to me Stephen.  The right side still feels like a hard crop... i wish we could smooth that out a bit more.  Perhaps a feathered out approach?  Lee suggested that. But otherwise, screenshot looks fantastic.  Can't wait to see Twitter / the rest. 

Still working on Google Calendar, and Farmville.

Comment 19

[Milos Dinic [:Milos]]

Tara,

Any feedback on the attachment from comment 15?

Comment 20

[Jane Finette]

Facebook shot looks very good. 

Farmville, is also much better and cleaner - Tara are you also on board with this version?

Tara, where can I provide help on Google calendar?

Comment 21

[Tara (musingt)]

Milos -- Thank you so much for your help here.  I think that could work.  My main concern is making sure it's a smaller view-box, and ideally it has *some* element of our own brand personality (the way we have done with the other screenshots). I had actually also asked Asa to help with screenshots ... so am cc-ing him in to loop him in.  He actually also offered to help create the crop circle :)  so, we'll see how that goes.  If we can do a mockup of the Farmville one while Asa is working away... that would at least help us see what it looks like on the page. Stephen, could you help with that?

Jane -- The Google Calendar needs more "events".  In general though, it feels very plain.  We've managed to incorporate fun characters / images into the other screenshots.  But the Goog Calendar feels pretty boring.  I wanted to see if you had any other sites you might recommend here... or if you can simply add more content to the Calendar so that when it's cropped and inserted in, it has more color and content...

Stephen -- The Facebook and Gmail screenshots look fantastic.

Comment 22

[Tara (musingt)]

Attachment: Gmail screenshot

Stephen had shared this with me on IM.  I think it looks great.

Had just asked him to not make all the email messages bold as "new"... and to show a tiny bit more of the actual email subject / content if possible.  Otherwise, it looks great and I love how we've incorporated our characters into the video chat. 

If anyone disagrees or has other feedback, please share asap.

Comment 23

[Stephen DesRoches]

Attachment: Direct Marketing Screens part 1

Attached are all 19 proposed screenshots for the direct marketing pages. I'm still not sure what to do about Farmville and I'm not sure what I'm looking at in Milos example. This attachment is still using the farmville homepage as a placeholder but I do have one alternative version of in game play using the characters (although my farm is fairly pathetic looking)

The pages are also setup and waiting on content. Was that posted somewhere and missed?

Comment 24

[Stephen DesRoches]

Attachment: Direct Marketing Screens part 2

Comment 25

[Stephen DesRoches]

Attachment: Direct Marketing Screens part 3

Comment 26

[Tara (musingt)]

Thanks Stephen.  These actually all look great to me.  Except Farmville :) I appreciate you trying to make that work though.  But it's not quite right yet.

Can we do what Zynga proposed? it's not the best solution, but it works.  I've attached it for reference.  Still need to get approval from Zynga... but it's a good alternative.

Comment 27

[Tara (musingt)]

Attachment: Zynga proposed mock for farmville

Comment 28

[Stephen DesRoches]

Tara: We can but were can I find the full size screenshot they used before they twisted it into the layout mockup? I do think what they are proposing is a bit weird and much more of a focus on facebook then for gamers.

Comment 29

[Tara (musingt)]

Yah, it's definitely not as focused on "gamers" as what we were hoping for.  The point is a little subtle, or simply mixed in with the "social media / facebook" message.  But I"m not sure if I can come up with a better solution.  Do you have any other suggestions? 

Jane, do you want to respond to Zynga regarding their latest email?  They wanted to add a logo in there.  I'd rather not use a logo to be honest... unless it's very small...

Comment 30

[Jane Finette]

Hi Stephen 

we just got this back from Zygna.. "Lets go with this since it satisfies both parties but I would like to include a Farm logo in there so people know what it is. Would that be okay Tara?"

Would we be able to add a small Farmville logo to see how it looks?

Comment 31

[Jane Finette]

Ah.. just saw your comment Tara -- do you want to try and add a small farmville logo?

Comment 32

[Jane Finette]

Attachment: Farmville screen shot

Comment 33

[Stephen DesRoches]

Attachment: Farmville Screen

What if we take the screen from Zygna and add it into the actual game layout using the characters avatars showing the friends activity tab?

Comment 34

[Stephen DesRoches]

Attachment: Farmville Screen 2

Another farmville that shows less game and more character activity

Comment 35

[Jane Finette]

Hi Stephen, screen 2 is looking good. Could we try scaling down the "Farmville" logo a little more please? I know its hard, trying to strike a balance between appealing to gamers and not distracting from our download CTA (and giving them a ton of free advertising)

Comment 36

[Jane Finette]

Stephen - on the gcal screen shot. Did you see I'd added some items to Curly's calender yesterday? The dates were April 4-6. They have a bit more vibrancy, and as Tara mentioned could we tweak the appointments to be different colors? 

thanks so much

Comment 37

[Stephen DesRoches]

Attachment: Farmville Screen 3

This would be the smallest I can make the logo without asking for a larger screenshot from Zynga. Any smaller and then I don't have enough width to fill in the browser.

Comment 38

[Stephen DesRoches]

When I login to Curly's google account, I only see items for Apr 1 and 2.

Comment 39

[Jane Finette]

(In reply to comment #38)
> When I login to Curly's google account, I only see items for Apr 1 and 2.

Hmm... I added them again for April 4-6. Hope see them now. 

I'm still not sure about the Farmville screen shot. Would love Tara to comment when she can about the logo as our design lead here.

Comment 40

[Stephen DesRoches]

Attachment: Farmville Screen 4

We could remove the logo completely by pushing the entire screenshot up.

Comment 41

[Jane Finette]

Stephen, I'd love this. But they were hoping to get their logo in there. 

Let me go back to them with your last screen shot. 

thanks for all your help here -- its been a labor of love I know!

Comment 42

[Tara (musingt)]

Hey guys.  Have to take another quick look with fresh(er) eyes tomorrow.. but overall I think this works.  Not my favorite screenshot... but it's come a long way.  Two things:

* I definitely don't want their logo in there...  whenever it's added on top it just feels like a weird advertisement.  

* I'd love to see this mocked up on the homepage to make sure everything is balanced.  It's hard to say just looking at the screenshot.  But I like how you've added the characters.

Thanks again

Comment 43

[Tara (musingt)]

And for what it's worth, I like he screenshot you have here (sans Logo).  I guess I like not seeing the horses and sheep :)  https://bug644756.bugzilla.mozilla.org/attachment.cgi?id=523679

Comment 44

[Jane Finette]

Heard back from Farmville, that they would be OK with this approach (no logo version). If we can turn around the latest version as per your guidance Tara, I think we'll be there finally. thanks!

Comment 45

[Stephen DesRoches]

Attachment: Farmville Sample Inside Page Layout

A slightly adjusted screen displayed inside the page layout.

Comment 46

[Jane Finette]

Stephen -- this is SUPER! Tara, are you also happy?

Stephen, I think we just have the revised Google calender one and then we're done. thank you!

Comment 47

[Tara (musingt)]

+1

Comment 48

[Stephen DesRoches]

All files have been committed in r87017, r87018 and r87019 and waiting on any page content changes.

https://www-trunk.stage.mozilla.com/en-US/firefox/new/gamer/
https://www-trunk.stage.mozilla.com/en-US/firefox/new/messaging/
https://www-trunk.stage.mozilla.com/en-US/firefox/new/socialmedia/
https://www-trunk.stage.mozilla.com/en-US/firefox/new/streamer/
https://www-trunk.stage.mozilla.com/en-US/firefox/new/worker/

Comment 49

[Jane Finette]

thank you Stephen - all super!

Comment 50

[Tara (musingt)]

Hey guys

The screenshots look fantastic.  Thank you :)

I was wondering what happened to the Facebook one (and the other Youtube one).

Comment 51

[Jane Finette]

Hey Tara - I'm blanking on those right now (!) 

Very happy to progress with what we have for now. 

We have legals for all partners 95% done.

Comment 52

[Tara (musingt)]

Sounds good.  No need to slow things down, but was hoping that Stephen can supply those additional two as well so we have them on hand.  Thanks.

Comment 53

[Stephen DesRoches]

Attachment: Alt Youtube screen.

Tara: I had missed your last comment about the alternative youtube screen. Attached are the 3 screens to keep on file but they are not implemented on the site.

Comment 54

[Tara (musingt)]

Thanks Stephen, really appreciate it.  

Jane (and others), I asked Stephen to create these so we have them on file, but we can also incorporate them into a "fade" rotation similar to what we've done with the social media segment.  It doesn't really add much value since it's two of youtube vs. two different sites, which is why I suggested we not add it in.  But let me know if you prefer otherwise.  Closing out.

THANKS Stephen!!

Comment 55

[Jane Finette]

they are really awesome Tara and Stephen... but I think we're good with the super stuff you already made. :) thank you!