1395788 - [Fx 56] /whatsnew page for 56 release

Status: RESOLVED FIXED

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

Description

[Eric Renaud [:erenaud]]

Michelle, per our meeting, final copy needs to be delivered EOD on Tuesday Sept 5th.  Please needinfo Alex Gibson when attaching or linking to that in this bug.

Alex, please notify Peiying with the PR when ready so she may begin the localization process.

Alex - the agreement is to show this page to users upon release of 56.

For the next 57 dot release, we need to revert back to the current page with the Mobile download CTA. I'll file a separate bug with that request (but maybe think about a switch for that now?)

Comment 1

[Eric Renaud [:erenaud]]

Michelle - please see request in original Description to upload or link to final copy doc here and needinfo Alex

Comment 2

[Alex Gibson [:agibson]]

> For the next 57 dot release, we need to revert back to the current page with the Mobile download CTA. I'll file a separate bug with that request (but maybe think about a switch for that now?)

Not quite sure if this was a typo, should it read "For the next 56 dot release"?

If so, we should be able add logic to show this specific page for 56.0 only (no switch required), so if/when 56.0.1 hits it can show the mobile download cta page.

If you meant "For the next 57 major release" (not dot release), then we can just adjust the logic so this page only shows for the range between 56.0 and 57.0.

Comment 3

[Eric Renaud [:erenaud]]

Hi Alex - yes, typo on my part, apologies.  We want this page to be shown at 56.0, then when 56.0.1 hits, shift to showing the mobile download CTA in its place.

The copy is here, final, please proceed w. the PR and notify Peiying when it is ready so she can advance it to the l10n process.

https://docs.google.com/presentation/d/16kzE2bAUCv9VQfowsfkYucjUk-XT2ZXfg7LPucvhsZU/edit#slide=id.p

Comment 4

[Alex Gibson [:agibson]]

> We want this page to be shown at 56.0, then when 56.0.1 hits, shift to showing the mobile download CTA in its place.

Understood - just so we're clear on expectations here: minor dot releases usually happen to fix breakage in the Web, and can often happen quickly after a major release. If we do ship a 56.0.1 in this manner, then users updating from 55.0.3 -> 56.0.1 would likely miss seeing this page (as far as I understand the update process).

Comment 5

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/bedrock/pull/5096

Comment 6

[Alex Gibson [:agibson]]

Strings are in the pull request linked above in Commnet 5

Demo is here: https://www-demo3.allizom.org/firefox/56.0/whatsnew/

Comment 7

[Francesco Lodolo [:flod]]

Asking here too: can someone clarify which locales are targeted by this 56 What's new page? Is it all locales, or German only?

If it's German only, can we make sure only German gets a What's new page on the RelEng side of things? The last thing I want is to end up showing an English pages to 90 languages because of miscommunication.

Comment 8

[Eric Renaud [:erenaud]]

Making note the the intent is set strings in the /whatsnew updated page available for all locales.

Comment 9

[Krishna]

Social Share Copy: (Facebook/Twitter) 

Header: See what's new at Firefox

Body Copy: Faster, more responsive and powerfully private. Check out the latest from the browser that has your back.

Comment 10

[Eric Renaud [:erenaud]]

Christa - can you please advanced the current wireframe for this /whatsnew page, applying the design concepts that you and Rachel have developer for the /firefox-quantum page?  The current idea is here -

https://docs.google.com/presentation/d/16kzE2bAUCv9VQfowsfkYucjUk-XT2ZXfg7LPucvhsZU/edit#slide=id.p

The copy is all final, here - https://docs.google.com/presentation/d/16kzE2bAUCv9VQfowsfkYucjUk-XT2ZXfg7LPucvhsZU/edit#slide=id.p

Comment 11

[Eric Renaud [:erenaud]]

ABenson / BBell - per email and Michelle's prompt therein - would you please provide source files / help with image assets for:

- address bar
- Firefox library 
- all-new New Tab

Comment 12

[Kohei Yoshino [:kohei]]

If [1] is up-to-date, Firefox 56.0.1 will migrate the majority of Windows users to the 64-bit version. I don't have access to the Google Drive content, but is there any plan to show a message like "Welcome to the faster, more stable, more secure 64-bit version of Firefox" on the 56.0.1 whatsnew page? I think it would be nice to have, though it requires a 32/64-bit platform detection.

[1] https://wiki.mozilla.org/Firefox/Win64

Comment 13

[Alex Gibson [:agibson]]

(In reply to Kohei Yoshino [:kohei] from comment #12)
> If [1] is up-to-date, Firefox 56.0.1 will migrate the majority of Windows
> users to the 64-bit version. I don't have access to the Google Drive
> content, but is there any plan to show a message like "Welcome to the
> faster, more stable, more secure 64-bit version of Firefox" on the 56.0.1
> whatsnew page? I think it would be nice to have, though it requires a
> 32/64-bit platform detection.
> 
> [1] https://wiki.mozilla.org/Firefox/Win64

Copy has been finalised for his page, but it already talks about Firefox being faster and more responsive in general. I don't think we need to call out 64bit specifically, also considering it won't be until a future dot release.

Comment 14

[Alex Gibson [:agibson]]

(In reply to Alex Gibson [:agibson] from comment #4)
> > We want this page to be shown at 56.0, then when 56.0.1 hits, shift to showing the mobile download CTA in its place.
> 
> Understood - just so we're clear on expectations here: minor dot releases
> usually happen to fix breakage in the Web, and can often happen quickly
> after a major release. If we do ship a 56.0.1 in this manner, then users
> updating from 55.0.3 -> 56.0.1 would likely miss seeing this page (as far as
> I understand the update process).

Given the above concern has also been echoed in the email thread by the onboarding team, I'm going to switch it so this page will be seen by any version in the range of 56.*

Comment 15

[Alex Gibson [:agibson]]

Final strings are up on demo: https://www-demo3.allizom.org/firefox/56.0/whatsnew/

Comment 16

[David Tenser [:djst]]

(In reply to Alex Gibson [:agibson] from comment #15)
> Final strings are up on demo:
> https://www-demo3.allizom.org/firefox/56.0/whatsnew/

Is that the actual order of strings as it will show up on the page, or is the order irrelevant? I'm asking because the "What's next for Firefox" is placed below the first sentence that talks about Firefox Quantum, it needs to move up one step.

Also, "The New Firefox" should change to "Firefox Quantum" based on the final word on that from Eric P today.

Comment 17

[Alex Gibson [:agibson]]

We can reorder the page however we see fit, but strings are already frozen with a clear due-date. They have already been extracted for localisers.

Comment 18

[Alex Gibson [:agibson]]

(In reply to Alex Gibson [:agibson] from comment #17)
> We can reorder the page however we see fit, but strings are already frozen
> with a clear due-date. They have already been extracted for localisers.

Disregard this, flood tells me there is time

Comment 19

[Alex Gibson [:agibson]]

Sorry, Flod

Comment 20

[David Tenser [:djst]]

Please disregard my comment 16 for now. This bug will contain any final string changes by tomorrow morning EU time. It's possible there are no changes, after all. :)

Comment 21

[David Tenser [:djst]]

No changes. Keep the strings the way they are. Thanks!

Comment 22

[Peter Dolanjski [:pdol]]

After a quick email discussion regarding WNP for v56, the agreed upon plan is as follows:

<56 to 56.0 will see the new WNP (previewing the v57 release)
That is, users updating from a version prior to 56 to 56.0.

<56 to 56.x will see the new WNP (previewing the v57 release)
That is, users updating from a version prior to 56 to any version of 56, greater than 56.0.

56.x to 56.y (where y>x) will see mobile cross promotion (where this one is only shown once in the cycle)
That is, users updating from any version of 56 to a higher version of 56 will be shown the mobile cross promotion unless they have already seen the mobile cross promotion in the 56 cycle.

Comment 23

[Alex Gibson [:agibson]]

(In reply to Peter Dolanjski [:pdol] from comment #22)
> After a quick email discussion regarding WNP for v56, the agreed upon plan
> is as follows:
> 
> <56 to 56.0 will see the new WNP (previewing the v57 release)
> That is, users updating from a version prior to 56 to 56.0.
> 
> <56 to 56.x will see the new WNP (previewing the v57 release)
> That is, users updating from a version prior to 56 to any version of 56,
> greater than 56.0.
> 
> 56.x to 56.y (where y>x) will see mobile cross promotion (where this one is
> only shown once in the cycle)
> That is, users updating from any version of 56 to a higher version of 56
> will be shown the mobile cross promotion unless they have already seen the
> mobile cross promotion in the 56 cycle.

Ok, I've implemented the above logic that relies on the `oldversion` param passed to the `/whatsnew` URL:

<56 to 56.0 will see the new WNP (previewing the v57 release)

https://www-demo3.allizom.org/en-US/firefox/56.0/whatsnew/?oldversion=55.0.3

<56 to 56.x will see the new WNP (previewing the v57 release)

https://www-demo3.allizom.org/en-US/firefox/56.0.1/whatsnew/?oldversion=55.0.3

56.x to 56.y (where y>x) will see mobile cross promotion

https://www-demo3.allizom.org/en-US/firefox/56.0.1/whatsnew/?oldversion=56.0

Comment 24

[christa seabolt]

Attachment: Firefox 57 What's New.png

Final design for the what's new page

Comment 25

[christa seabolt]

Attachment: What's New_56-57_Tail Header 2x.png

Comment 26

[christa seabolt]

Alex - let me know what other assets you need cut from this design.

Comment 27

[Alex Gibson [:agibson]]

(In reply to christa seabolt from comment #26)
> Alex - let me know what other assets you need cut from this design.

Can you please provide the sketch file? Thanks

Comment 28

[Alex Gibson [:agibson]]

A couple of things I noticed in the mockup:

1.) There's a "sign me up" button. This string was not in the original copy doc, so was never localized. And we can't embed a newsletter signup in this page since those would be a bunch of new strings too. I'm hoping this was a mistake.

2.) The design splits a paragraph in two:

The header says: "From the instant you start the browser to the moment you load a web page, you’ll see the effects of the hard work taking place behind the scenes at Mozilla."

The section below says: "Since the start of the year, we’ve made big changes to Firefox to bring you"

We can't do this, as the original paragraph was one piece of copy (as per the copy doc in Comment 3). Splitting up the copy will break translations.

Comment 29

[Eric Renaud [:erenaud]]

To confirm - no sign up button needed, that was just an exploration.

Also, please add a link to the www.mozilla.org/firefox-quantum page in the copy 'The New Firefox will feature'
(or just 'The New Firefox')

Comment 30

[Eric Renaud [:erenaud]]

Per discussion - Christa will provide a mockup with the CTA 'learn more' instead of the proposed link on copy above and remove the current 'sign me up' CTA

Comment 31

[Nick Thomas [:nthomas] (UTC+12)]

(In reply to Peter Dolanjski [:pdol] from comment #22)
> 56.x to 56.y (where y>x) will see mobile cross promotion (where this one is
> only shown once in the cycle)
> That is, users updating from any version of 56 to a higher version of 56
> will be shown the mobile cross promotion unless they have already seen the
> mobile cross promotion in the 56 cycle.

How important is the 'only shown once' requirement, and how is it to be implemented ? 56.0.1 is straightforward if the user is coming from 56.0, but if we end up with several point releases I'm not sure how bedrock or the update server can determine what an install has already seen. pdol/agibson, do you have some heuristic in mind that takes that into account ?

An alternative would be to open both preview and mobile promotion pages for updates from < 56, and nothing for subsequent updates to 56.x.

Comment 32

[Alex Gibson [:agibson]]

(In reply to Nick Thomas [:nthomas] from comment #31)
> (In reply to Peter Dolanjski [:pdol] from comment #22)
> > 56.x to 56.y (where y>x) will see mobile cross promotion (where this one is
> > only shown once in the cycle)
> > That is, users updating from any version of 56 to a higher version of 56
> > will be shown the mobile cross promotion unless they have already seen the
> > mobile cross promotion in the 56 cycle.
> 
> How important is the 'only shown once' requirement, and how is it to be
> implemented ? 56.0.1 is straightforward if the user is coming from 56.0, but
> if we end up with several point releases I'm not sure how bedrock or the
> update server can determine what an install has already seen. pdol/agibson,
> do you have some heuristic in mind that takes that into account ?
> 
> An alternative would be to open both preview and mobile promotion pages for
> updates from < 56, and nothing for subsequent updates to 56.x.

Bedrock has no easy way to determine what the user has already seen. Each page needs to be cached heavily, so relies on a unique URL combination. The logic in Comment 23 is the closest we can get to accommodate this request I think. We rely on the update server to handle when a URL should/should not be opened.

Comment 33

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #29)
> To confirm - no sign up button needed, that was just an exploration.
> 
> Also, please add a link to the www.mozilla.org/firefox-quantum page in the
> copy 'The New Firefox will feature'
> (or just 'The New Firefox')

As discussed, this break strings so won't work. We'll be using a sinple "Learn more" link instead

Comment 34

[Nick Thomas [:nthomas] (UTC+12)]

(In reply to Alex Gibson [:agibson] from comment #32)
> Bedrock has no easy way to determine what the user has already seen. Each
> page needs to be cached heavily, so relies on a unique URL combination. The
> logic in Comment 23 is the closest we can get to accommodate this request I
> think. We rely on the update server to handle when a URL should/should not
> be opened.

The update server has limited information too, mainly the version making the request. There is also going to be some migration of "32-bit Firefox on 64-bit Windows" to 64-bit Firefox, via a special 56.0.1 release, so it would be great if we could minimize the overall complexity to stay nimble. Any thoughts pdol ?

Comment 35

[Alex Gibson [:agibson]]

Sketch file: https://drive.google.com/file/d/0BzYANYtKeoEdenlycmZjbl96Q1U/view?ts=59ba8820

Comment 36

[christa seabolt]

Attachment: 56_Screenshot.png

Comment 37

[Peter Dolanjski [:pdol]]

(In reply to Nick Thomas [:nthomas] from comment #34)
> (In reply to Alex Gibson [:agibson] from comment #32)
> > Bedrock has no easy way to determine what the user has already seen. Each
> > page needs to be cached heavily, so relies on a unique URL combination. The
> > logic in Comment 23 is the closest we can get to accommodate this request I
> > think. We rely on the update server to handle when a URL should/should not
> > be opened.
> 
> The update server has limited information too, mainly the version making the
> request. There is also going to be some migration of "32-bit Firefox on
> 64-bit Windows" to 64-bit Firefox, via a special 56.0.1 release, so it would
> be great if we could minimize the overall complexity to stay nimble. Any
> thoughts pdol ?

Does the 32 bit to 64 bit migration interfere with any of this messaging?

If the logic to only show a message once isn't possible, then let's limit the mobile promo to a single dot release (example 56.0.3) towards the end of the 56 cycle - that way we give most users a higher likelihood of seeing the v57 preview first.  

Would that work?

Comment 38

[Nick Thomas [:nthomas] (UTC+12)]

AIUI there is no messaging for the migration so we're fine there. Lets flesh out the single dot plan

* For 56.0 everyone gets the WNP page with 57 preview
* For 56.0.1 everyone with < 56 gets the WNP page with 57 preview
* Repeat for other 56.0.x until ....
* For 56.0.lastish everyone gets WNP with mobile promo

Is that right ? That's implementable on the RelEng side, OK with you agibson ? There is some risk there for the mobile promo if we have to throttle 56.0.x extensively like 55, and we may not know what the last point release will be.

Comment 39

[Alex Gibson [:agibson]]

(In reply to Nick Thomas [:nthomas] from comment #38)
> AIUI there is no messaging for the migration so we're fine there. Lets flesh
> out the single dot plan
> 
> * For 56.0 everyone gets the WNP page with 57 preview
> * For 56.0.1 everyone with < 56 gets the WNP page with 57 preview
> * Repeat for other 56.0.x until ....
> * For 56.0.lastish everyone gets WNP with mobile promo
> 
> Is that right ? That's implementable on the RelEng side, OK with you agibson
> ? There is some risk there for the mobile promo if we have to throttle
> 56.0.x extensively like 55, and we may not know what the last point release
> will be.

I'm afraid `56.0.lastish` doesn't quite cut it for bedrock. If the logic that's already implemented in Comment 23 needs to change, then we need to know exactly which version number is required to show the mobile promo. This needs to be known ahead of time and requires a unique URL, as the high traffic of /whatsnew requires pages to be heavily cached. If we don't know what the version number will be just yet, I suggest we file a bug for this further down the road and change the logic later. For now, we just show the WNP with 57 preview to everyone updating to 56.x

Comment 40

[christa seabolt]

Design feedback on the demo page:
https://www-demo3.allizom.org/en-US/firefox/56.0/whatsnew/

"Firefox is up to date" - make hex color #4A4A4A

"Built for Speed" should be on it's own line. pt size 41 and bold. 
"primed for Performance" pt size 42 and regular

"What's next for Firefox" reduce type size to 36. 

That's it :)

Comment 41

[Alex Gibson [:agibson]]

(In reply to christa seabolt from comment #40)
> Design feedback on the demo page:
> https://www-demo3.allizom.org/en-US/firefox/56.0/whatsnew/
> 
> "Firefox is up to date" - make hex color #4A4A4A

Done, thanks.

> "Built for Speed" should be on it's own line. pt size 41 and bold. 

Both "Built for Speed" and "Primed for Performance" are a single string, so I can't inject a <strong> element around the first half without breaking translations. For future note, text that needs to be emphasized visually should be done in the copy doc, before we call string freeze.

As for the font size, 41px is not in the new type scale we recently established [1], so it will have to stay at 48px (we're not setting arbitrary font sizes in designs any longer, unless there's a really good reason).

> "primed for Performance" pt size 42 and regular

Same comments as above.

> 
> "What's next for Firefox" reduce type size to 36. 

Done, thanks.

> That's it :)

[1] http://craigcook.github.io/etc/typescale/

Comment 42

[Aaron Benson]

Attachment: Landing.zip

Attached are some updated assets. The bottom 3 images should be used for the 57 preview callouts, but the hero image is more for reference that we should be using a realistic shot of the browser (e.g. windows, default theme, etc.)

I suggest modifying the text in the bottom three buckets as well, so the leading between the title and body copy is closer.

Comment 43

[Alex Gibson [:agibson]]

(In reply to Aaron Benson from comment #42)
> Created attachment 8910835 [details]
> Landing.zip
> 
> Attached are some updated assets. The bottom 3 images should be used for the
> 57 preview callouts, but the hero image is more for reference that we should
> be using a realistic shot of the browser (e.g. windows, default theme, etc.)
> 
> I suggest modifying the text in the bottom three buckets as well, so the
> leading between the title and body copy is closer.

Thanks I'll get these updated asap.

Comment 44

[yuliya]

Hey Aaron,can you give us some context for why you would like for these images to be used?

Comment 45

[Alex Gibson [:agibson]]

I'm holding off updating anything for now, until we sort out what needs to change.

Comment 46

[christa seabolt]

Hi Aaron - 

Thank you for the updated 56 hero image in windows OS!

Alex & Aaron - 

We are going to move forward with the icons for the 57 section at the bottom of the page. I think in this situation the screenshots aren't adding a lot of value. The 'find it faster' and 'hold it together' screenshots look really similar, there is a lack of focus on these images and they are not helping support the message. Let me know if you have any questions/comments. 

Cheers - 

Christa

Comment 47

[Alex Gibson [:agibson]]

Browser image has now been updated with the asset Aaron provide, thanks

https://www-demo3.allizom.org/en-US/firefox/56.0/whatsnew/

Comment 48

[christa seabolt]

Hey Alex - 

Couple more final design polish items. 

Read your comment about the title. Can we make the entire title "Built for speed. Primed for performance" bold and reduce it to the L3 size in Craig's modular typescale example. 

Can we remove the gradient from the rules and make them black? Let me know if you need an asset for that. 

Need to fine tune the fonts in the 'what's new/57' section. 
Title is good. 
Can we reduce the height of the paragraph break? 
The body copy "we've been laying the groundwork..." should not be bold. Increase the leading for all the copy in this section. 

Under the icons there should not be a paragraph break between the title and body copy. Body copy should not be bold. 

Let me know if you have any questions or want to jump on vidyo. 

Christa

Comment 49

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/51b31b8a11d53bf0577ec0ad9a4860e5daea10ee
[fix bug 1395788] /whatsnew page for 56 release

https://github.com/mozilla/bedrock/commit/87baf0e82eddb23ce2fd8189e28ca0583acf2fc8
Merge pull request #5096 from alexgibson/bug-1395788-whatsnew-56

[fix bug 1395788] /whatsnew page for 56 release

Comment 50

[christa seabolt]

Attachment: whatsNew.png

Comment 51

[christa seabolt]

Additional design feedback (attached a png for reference): 
- make the learn more the orange gradient
- decrease the width of the text column on white
- decrease the text width of each column underneath the icons