805237 - [Social APICampaign] Facebook custom tab landing (design + copy)

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Tara (musingt)]

Placeholder for Facebook landing page (custom tab) that will need to be created in support of the social api launch on nov. 20th. More info to follow..

Comment 1

[Tara (musingt)]

We're kicking this off:

This custom tab is the primary landing page for our campaign efforts.


>> TWO STATES:

* One: for existing firefox users
* Two: for non firefox users and those on pre fx17

The difference between these two states will basically be a change in messaging and CTA - one to turn on the feature, and one to download the latest FF.


>> CREATIVE/VISUAL DIRECTION:

* I'm attaching an initial sketch that outlines this.
* The page should feel like our own, but have some connecting tissue tying it to the facebook messenger page -> which is where we're pointing people to and the feature will be turned on.
* It should feel like our own page and strike the right balance of brands: Firefox vs. Facebook. 


>> HERO IMAGE: 

* This is a glorified screenshot of the feature.
* We'll take a screenshot of the browser with this feature turned on, and hack our brand personality and fun bits into it.  
* This includes: custom profile images, one with the fox perhaps, others with colorful backgrounds...  we'll also cater the copy to something that reinforces the feature and our brand personality.
* Similar references: http://www.flickr.com/photos/musingt/5637232640/in/set-72157626548526818/

>> SECONDARY BRAND IMAGE:

* For small banners and other channels we'll need something to represent this feature that is not a giant screenshot mockup.
* We'd like to find the appropriate pairing of the FF logo and Messenger icon. 
* This should not be considered a new Logo but a visual solution to pair the two brands.


>> COPY: 

* Lean and mean -> lets capture the key benefits of this feature without having to write too much (which helps with localization as well).  LoFo will direct here but we can follow the same outline as what is on the FB messenger page and build on it a little.


>> CONTENT: 

* Again we'll keep this lean and mean.  The goal is to focus the user on learning about this feature quickly and pointing them down the path to adoption -> aligning it with the fb messenger page but building on it a bit.  This includes:
* Header and tagline
* Logo/icon pairing
* Hero image
* Bullet point blurbs with prop values.
* Button/Link to turn on the feature / download Fx
* Product Video
* Social sharing section.


>> SOCIAL SHARING: 

This section will encourage people to share this great feature with their friends across Twitter and Facebook.  We may also add the Affiliate link as well.  Another suggestion is to incorporate a facepile to reinforce your friends are using this and so should you. Lets keep this in mind when designing the layout.

Comment 2

[Tara (musingt)]

Attachment: Custom Tab Sketch #1

Comment 3

[Tara (musingt)]

>> COPY:

updated direction from LoFo.  Matej, lets start here:
 
It's okay to follow fb's example - but be positioned more from the Fx perspective, something like: Keep up with your friends, directly from Firefox (I'm no copywriter!). 

Would be great to see a few variations / options of the headline below:

----------

Keep up with friends wherever you go on the web.

1. Chat while you browse
Stay connected without having to click away.

2. Get notified right away
See new comments, photo tags and other stuff instantly 

----------

>> HERO IMAGE:

Suggested websites we can show in the browser:

* Firefox Live, cute pandas on YouTube!
* A soccer game -- let's just blur out any company names so it stays "generic" but the "I'm watching a soccer game with my friend" comes across -- we will need to get creative here!
* Etsy shopping together
* AirBNB -- Paris apartment hunting


Lets try a few of these to see what works best:
* something that's not too distracting.
* something that potentially reflects brand values / or has some brand alignment .. like maybe we're showing an Etsy page that has crafty fox hats... etc.

Comment 4

[Tara (musingt)]

Ty / Matej... food for creative thought:

* Ty is going to start re-building the screenshot tomorrow in photoshop.  We'll need to decide how much of the feature we want to show in the sidebar.  Enough news updates and friends on chat to capture the feature... but not so much that we'd have to shrink the screenshot by a lot to fit it into the custom tab.

* I'll let Ty figure out what makes sense when he drops it into the layout.  

* We'll need to figure out what the updates will be.  They're mostly straightforward updates:  "Tara commented on Ty's photo" , "Matej liked your photo", "Laura added a new photo", etc.  

* I think it would be nice IF we can explore the possibility of showcasing the hover and live preview. This is a good opportunity to have fun with the screenshot.  For example, it could say " Tara: "this is so cool!" and when you hover the update is a photo of our jump, or perhaps the summit group photo.

* Then there's the chat.  Matej you'll need to help come up with something fun here.  What could be in the chat box that is simple but fun.

----

Any copy that goes in the screenshot will need to be localized, so lets keep that in mind as well.

Comment 5

[Tara (musingt)]

One of the updates can also be from the Firefox facebook page... perhaps echoing the status we'd post to announce this feature.

Comment 6

[Tara (musingt)]

Attachment: live hover screenshot

Last comment on this bug for today, promise:

Whether this becomes a state in the custom tab graphic or not, I think it's helpful to have a polished screenshot highlighting different aspects of the feature -- like the live hover and preview on the newsfeed.

For the contents of the newsfeed and especially the website that we show -- I'd prefer to not have obvious self promotions in there.  On a site like etsy, for example... lets not show what looks like a Firefox merch (the pillow is actually an illegal item there, though I own one). Instead, lets show things like a generic fox hat. 

Same with the photos - I'd love a jump photo in there :)

Comment 7

[Ty Flanagan]

Attachment: Social API - Facebook Custom Tab (Firefox User)

Comment 8

[Ty Flanagan]

Attachment: Social API - Facebook Custom Tab (Non Firefox User)

Comment 9

[Ty Flanagan]

PSD here:

https://www.dropbox.com/s/cmuz34k699z41fd/SocialAPI_FB_CustomTab.psd.zip

Comment 10

[Tara (musingt)]

thanks Ty, these rock!

I'm asking for a tiny edit (please) to the hero graphic - magnified section. 
We're also looking into updating the body of the page with some new content - we'll decide on a go/no go tomorrow AM.

Comment 11

[Laura Forrest]

(In reply to Tara (musingt) from comment #10)
> thanks Ty, these rock!
> 
> I'm asking for a tiny edit (please) to the hero graphic - magnified section. 
> We're also looking into updating the body of the page with some new content
> - we'll decide on a go/no go tomorrow AM.

Hey Tara -- Jon P would like to get started implementing this tab. Can you provide a ETA on the edits you refer to in Comment 10? When can Jon expect the final PSD to be posted here?

Comment 12

[Tara (musingt)]

custom tab was done and approved on Friday of last week.  Ty can you please post final files?

Comment 13

[Ty Flanagan]

Attachment: Social API - Facebook Custom Tab (Firefox User)

Hi all, 

The PSD in Comment 9 still links to the latest PSD.
Here is a screenshot for reference though.

Comment 14

[Laura Forrest]

Thanks Ty! 

Marking this as closed.

Comment 15

[Ty Flanagan]

I have made a small edit to the hero graphic which Tara's sharp eyes caught this morning :)

The magnified area of the screenshot does not match the transparent chrome of the hero graphic. Please grab the PSD from dropbox again and update the version used in implementation.

https://www.dropbox.com/s/cmuz34k699z41fd/SocialAPI_FB_CustomTab.psd.zip