1333435 - /new for Firefox onboarding v2.0 experience for Feb 2017 funnelcake

Status: VERIFIED FIXED

(www.mozilla.org :: Pages & Content, defect)

Comment 1

[Eric Renaud [:erenaud]]

Michael - please upload assets for /new here, per discussion in this morning's meeting.  Many thanks!

Comment 2

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #1)
> Michael - please upload assets for /new here, per discussion in this
> morning's meeting.  Many thanks!

Please provide the background page assets in SVG - given the design we need this to keep the page weight to an acceptable minimum.

Comment 3

[Chris More [:cmore]]

Just to be clear on variations:

FC98 = control: existing installer, download page and first run
FC99 = variation 1: updated download page, streamlined installer, auto-migration enabled, wow moment first run
FC100 = variation 2: updated download page, streamlined installer, auto-migration DISABLED, wow moment first run

This means the updated /new page should only be displayed when f=99 or f=100 is in the URL.

Comment 4

[Chris More [:cmore]]

agibson: the updated /new template above should be loaded for \?.*f=(99|100).*$

Comment 5

[Verdi [:verdi] Best to slack me]

Attachment: download1-spec.png

Copy for scene 1:
Headline: 
Chart your own course

Below download button:
Download Firefox for another platform
Firefox Privacy

3 Benefits:
Go Fast
You have things to do. Get them done faster.

Go Far
Go anywhere, with more built-in privacy tools than any other browser.

Go Forward
Use the only browser built for people, not profit.

Copy for scene 2:
Headline:
Behold! The open web awaits.

Subhead:
Thanks for choosing Firefox. Your download should begin automatically. If not, click here.

3 Benefits are unchanged from scene 1.

Comment 6

[Verdi [:verdi] Best to slack me]

Attachment: Night scene background

Comment 7

[Verdi [:verdi] Best to slack me]

Attachment: speedometer

Comment 8

[Verdi [:verdi] Best to slack me]

Attachment: road

Comment 9

[Verdi [:verdi] Best to slack me]

Attachment: signpost

Comment 10

[Alex Gibson [:agibson]]

(In reply to Verdi [:verdi] from comment #6)
> Created attachment 8829986 [details]
> Night scene background

We can create the background sky gradient using just CSS, so all we should need is the foreground and the stars. Also could you please remove the redundant empty space at the bottom? Thanks.

Comment 11

[Verdi [:verdi] Best to slack me]

Attachment: night scene - foreground and stars

(In reply to Alex Gibson [:agibson] from comment #10)
> We can create the background sky gradient using just CSS, so all we should
> need is the foreground and the stars. Also could you please remove the
> redundant empty space at the bottom? Thanks.

Like this?

Comment 12

[Alex Gibson [:agibson]]

(In reply to Verdi [:verdi] from comment #11)
> Created attachment 8829996 [details]
> night scene - foreground and stars
> 
> (In reply to Alex Gibson [:agibson] from comment #10)
> > We can create the background sky gradient using just CSS, so all we should
> > need is the foreground and the stars. Also could you please remove the
> > redundant empty space at the bottom? Thanks.
> 
> Like this?

Looks good - are you ok with the trees being cropped on the far left and right sides?

If you like you can attach the sketch file and I can try and extract what I need.

Comment 13

[Verdi [:verdi] Best to slack me]

Attachment: night scene - foreground and stars (uncropped)

Ah! I didn't notice that it was cropped. Attached a new version and here's a link to the sketch file too - https://drive.google.com/open?id=0B2y0OSD97CR6RURxUWJZa2VUVW8

Comment 14

[Alex Gibson [:agibson]]

(In reply to Chris More [:cmore] from comment #4)
> agibson: the updated /new template above should be loaded for
> \?.*f=(99|100).*$

Chris, thinking about this it might be a bit problematic and prone to error. If we show the template based on ?f=99 or ?f=100, then bedrock will automatically append the funnel cake build to the download query param URL. Trouble is, it will do this for any platform or version number - so the thank you page will redirect to a 404 unless the build exists. Not only does this make development / testing more difficult - it could actually lead to broken downloads (say if we do a chem-spill release and update product details, but we don't stop the experiment straight away).

Given the above, how about we use a slightly different query param for /new (say /?fv=99, /?fv=100). You can then target these URLs in Optimizely and set the download link explicitly.

Does this make sense?

Comment 15

[Alex Gibson [:agibson]]

WIP version is now up on demo:

https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/new/?fv=99
https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/new/?fv=100

Note: The link to open the modal is not yet incorporated. This is waiting on Bug 1330605.

Comment 16

[Alex Gibson [:agibson]]

Attachment: GitHub pull request

Comment 17

[Alex Gibson [:agibson]]

The demo links in Comment 15 have now been updated to incorporate the modal link from Bug 1330605. 

Note: the "Download Firefox for another platform" link appears below the "Firefox Privacy" link. This is because "Firefox Privacy" is baked into our download button component, so any changes to it have site-wide implications. As this modal is currently used only on /new, I made the call that it's not worth it to start introducing page specific deviations. At the point of if / when we need the modal on other pages, we can look to incorporate it into the download button app.

This bug is now waiting on feedback, and a reply to the question in Comment 14.

Thanks

Comment 18

[Romain Testard [:RT]]

Alex, Grover is looking at testing the full end to end from /new to firtrun. Please confirm when this is ready for him to test.

Comment 19

[Alex Gibson [:agibson]]

(In reply to Romain Testard [:RT] from comment #18)
> Alex, Grover is looking at testing the full end to end from /new to firtrun.
> Please confirm when this is ready for him to test.

This is up on the demo link listed above. Are the funnelcake's ready?

Comment 20

[Romain Testard [:RT]]

(In reply to Alex Gibson [:agibson] from comment #19)
> (In reply to Romain Testard [:RT] from comment #18)
> > Alex, Grover is looking at testing the full end to end from /new to firtrun.
> > Please confirm when this is ready for him to test.
> 
> This is up on the demo link listed above. Are the funnelcake's ready?

Per https://bugzilla.mozilla.org/show_bug.cgi?id=1326252#c21 they seem to have all pieces put together but an addon (I'm not too sure what that addon is).

Comment 21

[Eric Renaud [:erenaud]]

Alex - per our conversation & citing cmore's PTO til 2/2 - can you please check Optimizely for the test cmore would've written here, pointing that out to agibson for his review?

Comment 22

[Alex Davis [:adavis]]

Eric, I could not find this test in Optimizely.

Comment 23

[Verdi [:verdi] Best to slack me]

Attachment: fast.svg

New "Fast" icon from Ty.

Comment 24

[Verdi [:verdi] Best to slack me]

Attachment: far.svg

New "Far" icon from Ty

Comment 25

[Verdi [:verdi] Best to slack me]

Attachment: forward.svg

New "Forward" icon from Ty.

Comment 26

[Verdi [:verdi] Best to slack me]

Alex, can you swap the order of "Firefox Privacy" and "Download Firefox for another platform" and space them like they are in https://bugzilla.mozilla.org/attachment.cgi?id=8829985

Comment 27

[Alex Gibson [:agibson]]

(In reply to Verdi [:verdi] from comment #26)
> Alex, can you swap the order of "Firefox Privacy" and "Download Firefox for
> another platform" and space them like they are in
> https://bugzilla.mozilla.org/attachment.cgi?id=8829985

Please see Comment 17 for explanation for why I propose not doing this yet.

Comment 28

[Verdi [:verdi] Best to slack me]

(In reply to Alex Gibson [:agibson] from comment #27)
> Please see Comment 17 for explanation for why I propose not doing this yet.

Got it! Thanks Alex.

Comment 29

[Chris More [:cmore]]

(In reply to Alex Gibson [:agibson] from comment #14)
> (In reply to Chris More [:cmore] from comment #4)
> > agibson: the updated /new template above should be loaded for
> > \?.*f=(99|100).*$
> 
> Chris, thinking about this it might be a bit problematic and prone to error.
> If we show the template based on ?f=99 or ?f=100, then bedrock will
> automatically append the funnel cake build to the download query param URL.
> Trouble is, it will do this for any platform or version number - so the
> thank you page will redirect to a 404 unless the build exists. Not only does
> this make development / testing more difficult - it could actually lead to
> broken downloads (say if we do a chem-spill release and update product
> details, but we don't stop the experiment straight away).
> 
> Given the above, how about we use a slightly different query param for /new
> (say /?fv=99, /?fv=100). You can then target these URLs in Optimizely and
> set the download link explicitly.
> 
> Does this make sense?

agibson: I don't think this makes sense and it is now how the funnelcakes work. The bedrock funnelcake helper only works with f=XX where XX gets appended to the download.mozilla.org product name as -fXX. The f=XX is used to trigger both the correct funnelcake build *and* also display the correct /new and /firstrun templates. All funnelcakes are made from only one version of Firefox, one operating system, and one language. Thus, when Optimizely redirects to f=98, f=99 or f=100, the correct funnelcake build will be trigger on click of the button on /new. Just like all previous funnelcakes that have been ran, if you visit the f=XX URL from an OS or lang that is not part of the experiment (like OSX in Germany) it will 404. That's just now the funnelcakes work, because they targeting is very specific to the build.

Does that help or makes sense?

Comment 30

[Chris More [:cmore]]

(In reply to Eric Renaud from comment #21)
> Alex - per our conversation & citing cmore's PTO til 2/2 - can you please
> check Optimizely for the test cmore would've written here, pointing that out
> to agibson for his review?

Eric: If you are looking for the Optimizely test, it is best to use the Optimizely bug and not the bug for the /new page modification, which can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=1332130

The optimizely test has not been created yet.

Comment 31

[Chris More [:cmore]]

(In reply to Chris More [:cmore] from comment #30)
> (In reply to Eric Renaud from comment #21)
> > Alex - per our conversation & citing cmore's PTO til 2/2 - can you please
> > check Optimizely for the test cmore would've written here, pointing that out
> > to agibson for his review?
> 
> Eric: If you are looking for the Optimizely test, it is best to use the
> Optimizely bug and not the bug for the /new page modification, which can be
> found here: https://bugzilla.mozilla.org/show_bug.cgi?id=1332130
> 
> The optimizely test has not been created yet.

Optimizely test has been created, but it is not done yet. See bug 1332130 for more information.

Comment 32

[Alex Gibson [:agibson]]

(In reply to Chris More [:cmore] from comment #29)
> agibson: I don't think this makes sense and it is now how the funnelcakes
> work. The bedrock funnelcake helper only works with f=XX where XX gets
> appended to the download.mozilla.org product name as -fXX. The f=XX is used
> to trigger both the correct funnelcake build *and* also display the correct
> /new and /firstrun templates. All funnelcakes are made from only one version
> of Firefox, one operating system, and one language. Thus, when Optimizely
> redirects to f=98, f=99 or f=100, the correct funnelcake build will be
> trigger on click of the button on /new. Just like all previous funnelcakes
> that have been ran, if you visit the f=XX URL from an OS or lang that is not
> part of the experiment (like OSX in Germany) it will 404. That's just now
> the funnelcakes work, because they targeting is very specific to the build.
> 
> Does that help or makes sense?

Thanks Chris, I understand how the funnelcake helper works OK. My concern was less for other platforms / locales 404'ing, and more for downloads breaking should product details change underneath our feet. That said, you seem to understand the risk and if you are confident we can spin up new builds in time for the eventuality that product details does change, then I am happy to defer to what you suggest.

Comment 33

[Alex Gibson [:agibson]]

This is now updated on demo with the URLs Chris requested, and the new icons from Michael:

https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/new/?f=98 (control)
https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/new/?f=99
https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/new/?f=100

Note: for anyone testing the "thank you" page will redirect to a 404 page, unless you're testing on Windows and the funnel cake build is ready.

Comment 34

[Alex Gibson [:agibson]]

Peter, please see Comment 33 above for final URLs, thanks!

Comment 35

[pgerman]

Thanks, I'll make the necessary configurations.

Comment 36

[Chris More [:cmore]]

(In reply to Alex Gibson [:agibson] from comment #32)
> (In reply to Chris More [:cmore] from comment #29)
> > agibson: I don't think this makes sense and it is now how the funnelcakes
> > work. The bedrock funnelcake helper only works with f=XX where XX gets
> > appended to the download.mozilla.org product name as -fXX. The f=XX is used
> > to trigger both the correct funnelcake build *and* also display the correct
> > /new and /firstrun templates. All funnelcakes are made from only one version
> > of Firefox, one operating system, and one language. Thus, when Optimizely
> > redirects to f=98, f=99 or f=100, the correct funnelcake build will be
> > trigger on click of the button on /new. Just like all previous funnelcakes
> > that have been ran, if you visit the f=XX URL from an OS or lang that is not
> > part of the experiment (like OSX in Germany) it will 404. That's just now
> > the funnelcakes work, because they targeting is very specific to the build.
> > 
> > Does that help or makes sense?
> 
> Thanks Chris, I understand how the funnelcake helper works OK. My concern
> was less for other platforms / locales 404'ing, and more for downloads
> breaking should product details change underneath our feet. That said, you
> seem to understand the risk and if you are confident we can spin up new
> builds in time for the eventuality that product details does change, then I
> am happy to defer to what you suggest.

Yeah, it is a risk, but basically the same risk that we took on for all of the major funnelcakes in recent time. The only difference here is that we are changing onboarding via real changes instead of using an add-on to augment www.mozilla.org and the product itself. There is some risk, but the experiment is narrowed down to one specific audience and it use these bouncer entries:

https://download.mozilla.org/?product=firefox-stub-f98&os=win&lang=en-US
https://download.mozilla.org/?product=firefox-stub-f99&os=win&lang=en-US
https://download.mozilla.org/?product=firefox-stub-f100&os=win&lang=en-US

Comment 37

[Alex Gibson [:agibson]]

(In reply to Chris More [:cmore] from comment #36)
> (In reply to Alex Gibson [:agibson] from comment #32)
> > (In reply to Chris More [:cmore] from comment #29)
> > > agibson: I don't think this makes sense and it is now how the funnelcakes
> > > work. The bedrock funnelcake helper only works with f=XX where XX gets
> > > appended to the download.mozilla.org product name as -fXX. The f=XX is used
> > > to trigger both the correct funnelcake build *and* also display the correct
> > > /new and /firstrun templates. All funnelcakes are made from only one version
> > > of Firefox, one operating system, and one language. Thus, when Optimizely
> > > redirects to f=98, f=99 or f=100, the correct funnelcake build will be
> > > trigger on click of the button on /new. Just like all previous funnelcakes
> > > that have been ran, if you visit the f=XX URL from an OS or lang that is not
> > > part of the experiment (like OSX in Germany) it will 404. That's just now
> > > the funnelcakes work, because they targeting is very specific to the build.
> > > 
> > > Does that help or makes sense?
> > 
> > Thanks Chris, I understand how the funnelcake helper works OK. My concern
> > was less for other platforms / locales 404'ing, and more for downloads
> > breaking should product details change underneath our feet. That said, you
> > seem to understand the risk and if you are confident we can spin up new
> > builds in time for the eventuality that product details does change, then I
> > am happy to defer to what you suggest.
> 
> Yeah, it is a risk, but basically the same risk that we took on for all of
> the major funnelcakes in recent time. The only difference here is that we
> are changing onboarding via real changes instead of using an add-on to
> augment www.mozilla.org and the product itself. There is some risk, but the
> experiment is narrowed down to one specific audience and it use these
> bouncer entries:
> 
> https://download.mozilla.org/?product=firefox-stub-f98&os=win&lang=en-US
> https://download.mozilla.org/?product=firefox-stub-f99&os=win&lang=en-US
> https://download.mozilla.org/?product=firefox-stub-f100&os=win&lang=en-US

Does this include 64bit builds of Windows?

Comment 38

[Alex Gibson [:agibson]]

(In reply to Alex Gibson [:agibson] from comment #37)
> Does this include 64bit builds of Windows?

Oh wait, we're not yet exposing those by default right? So we should be ok.

Comment 39

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/8a7403a6cf9f09dbe1c202b221f9fd4237d70c97
[fix bug 1333435] /new for Firefox onboarding v2.0 experience

https://github.com/mozilla/bedrock/commit/1bb5b2f31bc06ab1faea5c510fe04a3c2327e6ac
Merge pull request #4608 from alexgibson/bug-1330605-firefox-new-onboarding-2-0

[fix bug 1333435] /new for Firefox onboarding v2.0 experience

Comment 40

[Nicole Yee (:nicoleyee)]

Hey Jennifer,

can we please get a UX review from you :)

Comment 41

[Alex Gibson [:agibson]]

(In reply to Nicole Yee (:nicoleyee) from comment #40)
> Hey Jennifer,
> 
> can we please get a UX review from you :)

This has already shipped. We have very little time before the experiment is due to start, so can only accommodate very small changes at this time.

Comment 42

[Verdi [:verdi] Best to slack me]

I just talked with Nicole about this. This page is good to go. r+ from UX :)

Comment 43

[Alex Gibson [:agibson]]

This is now in production:

https://www.mozilla.org/en-US/firefox/new/?f=99
https://www.mozilla.org/en-US/firefox/new/?f=100