647730 - Implementation bug for Fx 4 INFLUENCER Upgrade campaign

Status: VERIFIED FIXED

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

Description

[Jane Finette]

Hi there 

attaching the assets for the web dev implementation on the Firefox 4 Influencer campaign. 

We're aiming to have this page on stage by/on April 6. 

thanks

Comment 1

[Jane Finette]

Landing page:

Design can be seen here:
http://mozilla.seanmartell.com/engagement/influencer.png

PSD here:
http://mozilla.seanmartell.com/engagement/influencer_02.psd

-
Facebook Custom tab (being coded by Zac)

Design can be seen here: 
http://mozilla.seanmartell.com/engagement/influencer_fb.png

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

Comment 2

[Jane Finette]

Attachment: Installation guide for MAC

Craig, these are the PDFs for the "Helping is easy and feels great". When we get to this point, I'd love to talk you about how we can offer the MAC & PC version for download please)

Note: we will also have the same situation for MAC & PC on the watch an installation videos. Those videos are currently still in production - I will have the links for you likely on Wed/Thursday this week.

Comment 3

[Jane Finette]

Attachment: Installation guide for PC

Here is the PC version of the Installation PDF. Thanks

Comment 4

[Jane Finette]

Attachment: Webpage copy - FINAL

Attached is the final copy for the website as shown in Sean's mock up. 
http://mozilla.seanmartell.com/engagement/influencer.png

Comment 5

[Jane Finette]

Attachment: Copy for the overlay box (containing email copy to cut & Paste)

Craig - this might sound a bit cryptic (!) 

In the bottom right hand corner you'll see Sean designed a social area. The email box when clicked should open an overlay box with the attached text inside. We want folks to cut and paste that copy out and send via email (via their own email system) to a loved one. 

Please could we see that only the copy I have in grey in the attachment is actually highlighted in the overlay box for cutting and pasting? Not sure if we can do that - I've seen that when you click in a box sometimes, the whole area will be highlighted and ready to be 'copied'.

The overlay box should have a small X to close down the window.

Comment 6

[Craig Cook (:craigcook)]

Where will this page reside on the web? Somewhere on mozilla.com I presume, but did you have a URL in mind?

Comment 7

[Jane Finette]

thanks Craig. 

The page will live on mozilla.com and if possible I would go with:

http://www.mozilla.com/en-US/firefox/upgrade/

Comment 8

[Jane Finette]

Actually - that might already be being used. Lets go with:

http://www.mozilla.com/en-US/firefox/webhero/

Comment 9

[Jane Finette]

Copy for the pre-filled messages for Facebook and Twitter will be:

Discover the awesome, I did! Upgrade to Firefox 4 today! http://mzl.la/i85nib

Comment 10

[Jane Finette]

Hi Laura

we have a few urls that I would love to track on this page - not sure what the process is here so I'm adding you to the bug for now. 

These are the links we know about for sure:
http://www.mozilla.com/en-US/firefox/central
http://www.mozilla.com/en-US/firefox/video/

We're also waiting for 2 more links for PDFs and for 2 videos which are still being made. 

thanks for your help.

Comment 11

[Laura Forrest]

(In reply to comment #10)
> Hi Laura
> 
> we have a few urls that I would love to track on this page - not sure what the
> process is here so I'm adding you to the bug for now. 
> 
> These are the links we know about for sure:
> http://www.mozilla.com/en-US/firefox/central
> http://www.mozilla.com/en-US/firefox/video/

Hi Jane - we'll be able to track these links within Mozilla.com using a path analysis, so we're good to go. 

Cc-ing James here so he can be aware that this page is being added to mozilla.com in the 2.0 milestone and that Craig is working on it. 

Craig - we're on a bi-monthly release schedule when adding new site content to mozilla.com - our next code freeze is tomorrow, Thursday for a live date of 4/12. James Long is our lead dev that will be pushing that content live so be sure to coordinate with him when pushing this page live.

Comment 12

[Jane Finette]

(In reply to comment #11)

> Hi Jane - we'll be able to track these links within Mozilla.com using a path
> analysis, so we're good to go. 


Super - thanks Laura.

Comment 13

[Jane Finette]

Hi Craig, just wanted to check in on progress. Is there anything you need at all? We were hoping to get something to stage today if possible? Thanks so much.

Comment 14

[Craig Cook (:craigcook)]

(In reply to comment #13)
> Hi Craig, just wanted to check in on progress. Is there anything you need at
> all? We were hoping to get something to stage today if possible? Thanks so
> much.

I've been ill so I'm a bit behind schedule and catching up. I was hoping to have it ready for staging today but right now it looks more like it can be staged tomorrow, with still enough time to make any tweaks before code freeze. I'm still waiting for the install videos, but I think I have everything else I need.

As for offering PDFs and videos for both platforms, you said you wanted to discuss how to do that. How did you intend for that to work?

It occurs to me that if I'm helping someone *else* install Firefox, the platform I'm installing on may not be the platform I'm using. So maybe it's simplest to just offer both links directly. Something like "Send them a video (for <a>Windows</a> or <a>Mac</a>) or a PDF (for <a>Windows</a> or <a>Mac</a>) and show them how to install Firefox 4 on their own." Could probably rephrase it to be a bit less clunky.

Comment 15

[Stephen Donner [:stephend] Not actively reading bugmail]

Matej: any chance you could take a look at the installation guides' copy
(Mac+PC):

https://bugzilla.mozilla.org/attachment.cgi?id=524006
https://bugzilla.mozilla.org/attachment.cgi?id=524007 (respectively)?

I've noticed a few obvious typos ("ie." + "Firefox Browser", just to name a
couple).  Thanks!

Comment 16

[Matej Novak [:matej]]

(In reply to comment #15)
> Matej: any chance you could take a look at the installation guides' copy
> (Mac+PC):
> 
> https://bugzilla.mozilla.org/attachment.cgi?id=524006
> https://bugzilla.mozilla.org/attachment.cgi?id=524007 (respectively)?
> 
> I've noticed a few obvious typos ("ie." + "Firefox Browser", just to name a
> couple).  Thanks!

Does this copy exist in a text document where I can edit it directly?

Comment 17

[Stephen Donner [:stephend] Not actively reading bugmail]

(In reply to comment #16)
 
> Does this copy exist in a text document where I can edit it directly?

Jane should know; Jane?

Comment 18

[Jane Finette]

(In reply to comment #17)
> (In reply to comment #16)
> 
> > Does this copy exist in a text document where I can edit it directly?
> 
> Jane should know; Jane?

Hey there - I've added Ty to the bug who pulled together the PDF for us with high res screen shots. Ty - do you have that doc in an editable format to share please?

Comment 19

[Jane Finette]

(In reply to comment #14)
> (In reply to comment #13)
Thanks Craig. 

> I've been ill so I'm a bit behind schedule and catching up. I was hoping to
> have it ready for staging today but right now it looks more like it can be
> staged tomorrow, with still enough time to make any tweaks before code freeze.
> I'm still waiting for the install videos, but I think I have everything else I
> need.

I've asked Grace for the urls for the videos - so we can be plugging that in. 


> As for offering PDFs and videos for both platforms, you said you wanted to
> discuss how to do that. How did you intend for that to work?
> 
> It occurs to me that if I'm helping someone *else* install Firefox, the
> platform I'm installing on may not be the platform I'm using. So maybe it's
> simplest to just offer both links directly. Something like "Send them a video
> (for <a>Windows</a> or <a>Mac</a>) or a PDF (for <a>Windows</a> or <a>Mac</a>)
> and show them how to install Firefox 4 on their own." Could probably rephrase
> it to be a bit less clunky.

Thank you - that is super and what I was looking for. 

Matej, do you have a moment to perfect the sentences for these two lines to include Windows and MAC please? 

• Take them to school. Send them a <a href=”LINK NEEDED”>video</a> or a <a href=”LINK NEEDED”>PDF</a> and show them how to install Firefox 4 on their own.  

• Give them the tour. Show off the best Firefox 4 has to offer <a href=”http://www.mozilla.com/en-US/firefox/central/”>on your computer</a> or send them a <a href=”http://www.mozilla.com/en-US/firefox/video/”>video</a>.

Comment 20

[Jane Finette]

Hi Craig - hope you are continuing to feel better. I have the video urls from Grace. They should be there later today / early tomorrow - but thought you could be plugging in the urls:


http://videos-cdn.mozilla.net/serv/marketing/firefox4/Firefox4UpgradeCampaign/Fx4Mac
http://videos-cdn.mozilla.net/serv/marketing/firefox4/Firefox4UpgradeCampaign/Fx4PC

Thank you

Comment 21

[Laura Forrest]

Hey Craig: code freeze for the 2.0 release is today (eod). Will this page be
done by then?

Comment 22

[William Reynolds [:williamr]]

(In reply to comment #20)
> Hi Craig - hope you are continuing to feel better. I have the video urls from
> Grace. They should be there later today / early tomorrow - but thought you
> could be plugging in the urls:
> 
> 
> http://videos-cdn.mozilla.net/serv/marketing/firefox4/Firefox4UpgradeCampaign/Fx4Mac
> http://videos-cdn.mozilla.net/serv/marketing/firefox4/Firefox4UpgradeCampaign/Fx4PC

Grace, don't the video URLs need file types at the end? Like .webm or .ogg?

Comment 23

[Matej Novak [:matej]]

(In reply to comment #19)
> Matej, do you have a moment to perfect the sentences for these two lines to
> include Windows and MAC please?

It gets a bit longer, but I think it still works:

• Take them to school. Send a video that teaches them how to install Firefox 4 on their <a>Mac</a> or <a>PC</a>. Or send them PDF instructions for <a>Mac</a> or <a>PC</a> instead.

Comment 24

[Jane Finette]

perfecto! :) Thank you Matej. 

Craig, think we're good with this new line and treatment. Thanks!

Comment 25

[Craig Cook (:craigcook)]

Will the videos be added to the gallery on /firefox/video/? 

That would simplify linking since we only need to point to that page with a query string for the video title, e.g. "http://www.mozilla.com/firefox/video/?video=fx4-features", and the page loads the specified video. That also covers all the multi-format cross-platform issues when they send the link to someone who may not be using Firefox. So in that case I don't need the direct video URL, just the name to use in the query string.

Comment 26

[Matej Novak [:matej]]

(In reply to comment #15)
> Matej: any chance you could take a look at the installation guides' copy
> (Mac+PC):
> 
> https://bugzilla.mozilla.org/attachment.cgi?id=524006
> https://bugzilla.mozilla.org/attachment.cgi?id=524007 (respectively)?
> 
> I've noticed a few obvious typos ("ie." + "Firefox Browser", just to name a
> couple).  Thanks!

Here's the updated copy for the installation guides. Made some edits and cuts.
Let me know what you think.


INSTALLING FIREFOX ON WINDOWS

STEP 1
Visit mozilla.com with any browser (i.e. Internet Explorer) and click the
download button.

STEP 2
Click Run to start the installation process.

For Windows Vista/Windows 7:
Once Firefox finishes downloading, a User Account Control window will appear.
Click Yes to proceed.

STEP 3
Almost there! Click Next on the welcome screen to continue.

STEP 4
This will bring you to the Setup Type screen. A standard setup is selected by
default, which will install Firefox with a recommended configuration that will
work for most users.

STEP 5
Click Finish to close the setup wizard when installation is complete. If the
“Launch Firefox now” box is checked, Firefox will start immediately.

CONGRATULATIONS!
You are now ready to enter a bold new era of Web surfing. Double-click on the
Firefox icon whenever you want to go online.

For more step-by-step instructions and useful tips and tricks visit:
firefox.com/tour


INSTALLING FIREFOX ON MAC

STEP 1
Visit mozilla.com with any browser (i.e. Safari) and click the download button.

STEP 2
Your file will begin downloading automatically in a few seconds.

STEP 3
Once Firefox has finished downloading, the disk image may open by itself. If
not, double-click the Firefox dmg icon to open it.

STEP 4
A Finder window will appear. Drag the Firefox icon into the Applications
folder.

STEP 5
Drag the Firefox icon from the Applications folder into the dock.

CONGRATULATIONS!
You are now ready to enter a bold new era of Web surfing. Simply click on the
Firefox icon whenever you want to go online.

For more step-by-step instructions and useful tips and tricks visit:
firefox.com/tour

Comment 27

[Jane Finette]

Matej - thank you. 

Grace, are you also OK with this?

Comment 28

[Grace Jimenez :grace]

(In reply to comment #27)
> Matej - thank you. 
> 
> Grace, are you also OK with this?

looks great! thanks matej!

Comment 29

[Craig Cook (:craigcook)]

Preliminary version of the page is at https://www-trunk.stage.mozilla.com/en-US/firefox/webhero/ and it's very nearly done. Still to do:

1. I'm still working on the email popup and will have that done shortly.
2. Need updated PDFs with the new copy from comment 26.
3. Need the video URL query strings (see comment 25).
4. The videos need to be added to the video gallery.

Am I missing anything?

Comment 30

[Jane Finette]

Hey Craig 

thanks for all this. I see for the Facebook entry that there isn't a custom post already pre-filled. It should be the same as the one for Twitter: 

"Discover the awesome, I did! Upgrade to #Firefox 4 today! http://mzl.la/i85nib"

Can you do that?

Comment 31

[Matej Novak [:matej]]

(In reply to comment #30)
> Hey Craig 
> 
> thanks for all this. I see for the Facebook entry that there isn't a custom
> post already pre-filled. It should be the same as the one for Twitter: 
> 
> "Discover the awesome, I did! Upgrade to #Firefox 4 today!
> http://mzl.la/i85nib"
> 
> Can you do that?

Just a tiny tweak to the copy (comma should be a period): "Discover the awesome. I did! Upgrade to #Firefox 4 today! http://mzl.la/i85nib"

Two questions:
• Should the hashtag stay in the Facebook post?
• Should the Twitter version also include #Fx4?

Comment 32

[William Reynolds [:williamr]]

(In reply to comment #31)
> Two questions:
> • Should the hashtag stay in the Facebook post?
No hashtag for the Facebook post.

> • Should the Twitter version also include #Fx4?
Yes, let's add "#fx4" to the end and drop the # in front of #Firefox. So the tweet is:
Discover the awesome. I did! Upgrade to Firefox 4 today! http://mzl.la/i85nib #fx4

As StephenD mentioned in our meeting an hour, we should have bugs for any changes that need to be made at this point. I'll file this as a separate bug.

Comment 33

[Ty Flanagan]

PDFs have been updated! Here is the link:
http://dl.dropbox.com/u/18740830/Moz/Fx4_Install_Guides_WIN_MAC_updated.zip

I included both compressed/optimized and uncompressed versions of the PDFs.

PSD file with the latest copy and hi-res screens can be grabbed from here:
http://dl.dropbox.com/u/18740830/Moz/FX4_Install_Guide_WIN_MAC.psd.zip

Comment 34

[Jane Finette]

Thanks Ty - really appreciate your help. I'll file a new bug for this to be implemented.

Comment 35

[Matej Novak [:matej]]

(In reply to comment #33)
> PDFs have been updated! Here is the link:
> http://dl.dropbox.com/u/18740830/Moz/Fx4_Install_Guides_WIN_MAC_updated.zip
> 
> I included both compressed/optimized and uncompressed versions of the PDFs.
> 
> PSD file with the latest copy and hi-res screens can be grabbed from here:
> http://dl.dropbox.com/u/18740830/Moz/FX4_Install_Guide_WIN_MAC.psd.zip

Ty, these look great. Just two things on the Mac version:

Can we get the text of Step 1 all on one line, rather than breaking it after Safari?

There's a Y missing from the word "You" after Congratulations! on page 3.

Thanks!

Comment 36

[Ty Flanagan]

Whoops, my bad. Here is the updated MAC PDF:
http://dl.dropbox.com/u/18740830/Moz/Fx4_InstallGuide_MAC_Revised2.zip

Comment 37

[Stephen Donner [:stephend] Not actively reading bugmail]

Step 2 of the Windows PDF says to "Click Run to start the installation process", yet the screenshot has "Open" "Open Folder" and "Cancel".

Comment 38

[Jane Finette]

(In reply to comment #29)

> 3. Need the video URL query strings (see comment 25).
> 4. The videos need to be added to the video gallery.

Hey guys, in order to get this page live, lets *NOT* add the videos for this version. We have the PDFs - lets just use those. I'll file a separate bug to change the copy.

Comment 39

[Mike Alexis [:malexis]]

Here's the new copy for the page sans videos:

OLD COPY:
Take them to school. Send a video that teaches them how to install Firefox 4 on
their Mac or PC. Or send them PDF instructions for Mac or PC instead.

NEW COPY:
Take them to school. Send a PDF guide that teaches them how to install Firefox
4 on their Mac or PC.

Comment 40

[Laura Forrest]

Hey Craig - Any update here? I want to make sure this page goes live for next weeks upgrade launch. Thanks!

Comment 41

[Jane Finette]

Hey Laura, Craig was having intermittent internet connection issues... :/

Comment 42

[William Reynolds [:williamr]]

(In reply to comment #33)
> PDFs have been updated! Here is the link:
> http://dl.dropbox.com/u/18740830/Moz/Fx4_Install_Guides_WIN_MAC_updated.zip

Updated the PDF files from comment 33 and comment 36.

Step 2 in the Windows PDF (comment 37) is still an open issue. Do we want to fix it or is it okay as-is? 

Trunk: r87117

Comment 43

[Jane Finette]

(In reply to comment #42)
 
> Step 2 in the Windows PDF (comment 37) is still an open issue. Do we want to
> fix it or is it okay as-is?

thanks William and Stephen for the catch.

Ty -- can you help fix this in the PDF again? Sorry for another late change here.

Step 2 of the Windows PDF says to "Click Run to start the installation
process", yet the screenshot has "Open" "Open Folder" and "Cancel".

Are you able to get the correct screen for that?

Comment 44

[Ty Flanagan]

Ill have this fixed tonight for you :)

Comment 45

[Mike Alexis [:malexis]]

Craig, when the final changes have been committed to trunk can you list all the files here so James can merge them onto stage?

Then also assign this bug to [e-mail] and add the keyword "push-needed." 

He'll then push to prod tomorrow AM.

James, if I'm missing any steps let me know.

Comment 46

[James Long (:jlongster)]

(In reply to comment #45)

> James, if I'm missing any steps let me know.

Thanks Mike! It's actually not the files I need, it's the specific list of revisions on trunk. I need a concrete list of revisions to push out tomorrow, so someone needs to go through the bugs and gather up every revision that needs to be pushed out.

Those can be listed in this bug, I guess.

Comment 47

[Craig Cook (:craigcook)]

Alright, looks like we'll have to go live without the updated PDF. Some bugs are still marked open but they are in fact fixed and just need their statuses updated and verified. The last real showstopper was fixed this afternoon so I think we're good to go.

Here are the revisions (and corresponding files) that need to be merged to stage and pushed to prod:

r87062
/en-US/firefox/webhero/fb/images/bg.jpg

r87077
/img/firefox/webhero/bg-checklist.png
/img/firefox/webhero/bg-step1.png
/img/firefox/webhero/share-icons.png
/img/firefox/webhero/webhero.jpg
/img/fonts/League_Gothic-webfont.eot
/img/fonts/League_Gothic-webfont.woff

r87089
/img/firefox/webhero/closebutton.png

r87117
/en-US/firefox/webhero/Firefox4_Installation_Guide_MAC.pdf
/en-US/firefox/webhero/Firefox4_Installation_Guide_PC.pdf

r87119
/en-US/firefox/webhero/index.html
/img/fonts/League_Gothic-webfont.ttf
/img/fonts/League_Gothic-webfont.svg

r87147
/style/covehead/webhero.css

r87174
/en-US/firefox/webhero/fb/css/main.css

r87180
/en-US/firefox/webhero/fb/index.html

Comment 48

[Ty Flanagan]

The PDF is enroute. Had to borrow a PC to get the screengrab

Comment 49

[Ty Flanagan]

Updated Windows PDF:
http://dl.dropbox.com/u/18740830/Moz/Fx4_InstallGuide_WIN_Updated.zip

Comment 50

[William Reynolds [:williamr]]

Update from comment 47:

r87189
/en-US/firefox/webhero/Firefox4_Installation_Guide_PC.pdf
/en-US/firefox/webhero/fb/index.html

Comment 51

[James Long (:jlongster)]

committed to stage r87244 and r87245

Comment 52

[James Long (:jlongster)]

pushed to production r87250

Comment 53

[Stephen Donner [:stephend] Not actively reading bugmail]

Shouldn't the static assets be pulled from the CDN?

Comment 54

[Stephen Donner [:stephend] Not actively reading bugmail]

(In reply to comment #53)
> Shouldn't the static assets be pulled from the CDN?

Ah, nevermind; I see they are on prod: http://www.mozilla.com/en-US/firefox/webhero/

Comment 55

[Jane Finette]

Super! Thanks Guys -- really appreciate all you did to get this live this week.

Comment 56

[Matej Novak [:matej]]

This looks great! Nice work, everyone.

I found one little piece of erroneous copy in the email text, though, and have file bug 649631 to remove it.

Comment 57

[William Reynolds [:williamr]]

(In reply to comment #52)
> pushed to production r87250

Thanks James! I've set up the Facebook tab and it's now live on the Firefox Page:
http://www.facebook.com/Firefox?sk=app_176093342441461

Comment 58

[raymond [:retornam] (inactive)]

verified fixed http://www.mozilla.com/en-US/firefox/webhero/