651901 - Update INFLUENCER campaign Facebook tab design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[William Reynolds [:williamr]]

This is a follow up design request to bug 644338, where we designed the Web Hero Facebook tab for phase one. Background context in bug 644338 comment 2.

As part of a second phase roll out of the Facebook component of this campaign,
Facebook fans will be able to directly ask one of their Facebook friends to upgrade to Firefox 4. In doing so, they will be awarded a special Facebook badge to wear with pride on their page.

Design Requirements:
- Modify existing design to include large "Send a message to a friend" (placeholder text), most likely near the top right.
- Add a second, smaller "Send a message to a friend" button at very bottom for those who have scrolled down.
- No design work needed for the dialog that appears when a user clicks one of the buttons since it will be a Facebook dialog.

Timing: Need this Tuesday EOD, April 26th so we can push this on May 3rd. Would be great to have Monday by noon if possible.

Comment 1

[Tara (musingt)]

Thanks William.  In the future, if you can file these bugs a bit earlier so we have more of a heads up (and time to plan resources) that'd be great.  Having this done by noon on Monday only gives us a few short days, and I know Sean is busy working on a number of other things that need his attention.

So, is this basically:

* opening up some space below the main header (above the green monster) to include the "send msg to a friend" CTA ?
* and including a button with the same message at the bottom?

Let me know.  I'm sure Sean can whip something up pretty quickly for you.

Comment 2

[Tara (musingt)]

Attachment: area to add text/button ?

Comment 3

[William Reynolds [:williamr]]

(In reply to comment #1)
> Thanks William.  In the future, if you can file these bugs a bit earlier so we
> have more of a heads up (and time to plan resources) that'd be great.  Having
> this done by noon on Monday only gives us a few short days, and I know Sean is
> busy working on a number of other things that need his attention.

Will do. Thought this was already in motion, so apologies for filing this later than need be.

> So, is this basically:
> 
> * opening up some space below the main header (above the green monster) to
> include the "send msg to a friend" CTA ?
> * and including a button with the same message at the bottom?

Exactly.

Jane, do those changes work for you? Just want to make sure I'm not leaving anything out.

(In reply to comment #2)
> Created attachment 527575 [details]
> area to add text/button ?

Perfect. Could also see the first text/button appearing to the left of the character, below the "Be a Web Hero" text. I think your placement below the intro paragraph works better though.

Comment 4

[Jane Finette]

+ 1 all sounds good with placement for CTA at the bottom. Thanks.

Comment 5

[Sean Martell]

is "Send a message to a friend" final text?

I'll mockup a solution now.

Comment 6

[Sean Martell]

Attachment: Influencer FB tab with links

- fairly straightforward, used the same button style as on the firstrun page for consistency.

Comment 7

[John Slater]

Thanks Sean.

William, Jane...any final thoughts?

Comment 8

[William Reynolds [:williamr]]

This looks great to me, thanks Sean.

We're also planning to add L10n support with this updated design.

Stas and Gandalf, any feedback for making this more localization friendly? The current implementation uses a large background image, which we should slice to allow fluid content areas.

Production: http://mzl.la/gZ5l2g

Comment 9

[Sean Martell]

I gave some recos on how to make the layout play nice with localization here: https://bugzilla.mozilla.org/show_bug.cgi?id=649460#c5

Those landing page thoughts should be able to apply here also I would think.

Comment 10

[Jane Finette]

(In reply to comment #7)
> Thanks Sean.
> 
> William, Jane...any final thoughts?

thanks Sean and John. The second CTA at the bottom of the page, is the same size as the oen at the top -- could we slightly scale down the one at the bottom. 

William - would you also change the message to be:

"Tell a friend and earn a badge"? or something like this?

Comment 11

[Sean Martell]

I wouldn't want to scale the button in this case. I'd rather stay consistent with the button style.

If it is to be de-emphasized below, a simple text link might be best.

Comment 12

[Tara (musingt)]

Hey Jane, if your concern is that the two buttons conflict somehow, I think we're OK since they're not going to both be viewable in one screen.  Just a thought.  I think it looks good, fwiw.

Comment 13

[Jane Finette]

OK - that's great. thanks Tara & Sean.

Comment 14

[Tara (musingt)]

Thanks all!  closing.

Comment 15

[William Reynolds [:williamr]]

Reopening to update the button text Jane suggested in comment 10 and get the PSD file.

Sean, can you change the text in the 2 buttons to "Tell a friend and earn a badge"? And post the PSD file please? Thanks!

Comment 16

[Tara (musingt)]

I think keeping the CTA copy on the button short and sweet is best.  Otherwise you get a very "long" button which can look weird.  Maybe "Tell a friend, earn a badge"  it's a tiny bit shorter.  I'm not sure, but I believe that they can update the copy pretty easily in development.  The button is easy to extend and text should be a separate layer anyway.  But you'd need the PSD for all that :) 

Sean, I know you're swamped, but if you can upload the final files, that'd be great.  We can wrap this up.

Comment 17

[Jane Finette]

"Tell a friend, earn a badge" is great. 

thanks Tara and Sean

Comment 18

[Sean Martell]

Hey folks.

Updated PSD found here: http://mozilla.seanmartell.com/engagement/influencer_fb.psd

Enjoy!

Comment 19

[Tara (musingt)]

Thanks Sean.  Re-Closed.