1397381 - [Fx 57] Apply new design (photon) to /new scenes 1 & 2

Status: RESOLVED FIXED

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

Description

[Eric Renaud [:erenaud]]

Apply new design elements reflective of the photon branding in product, align across onboarding workflow.

Any/all copy changes due 10/3 for l10n

Comment 1

[Eric Renaud [:erenaud]]

Design assets - https://drive.google.com/drive/folders/0BxbX4CuSa5HPVTc0U0xfT2FDMk0

Comment 2

[Eric Renaud [:erenaud]]

Copy - https://docs.google.com/document/d/1JM5fUgfvm3wuTEte_QE0UG65Y8BBfrtpwwbTqiyvhtc/edit

Comment 3

[Rachel Wong]

Attachment: FF 57 _New Scene 1 + 2.sketch

Updated sketch file with new 57 Wordmark Logo

Comment 4

[Eric Renaud [:erenaud]]

Alex - final copy is in the gdoc, approved by Legal (and below).  Please submit a PR with the strings and flag for l10n (Peiying - go live for this page is 11/14)

-----------------------------

Download Page (Scene 1)

<h1> Meet Firefox Quantum
<h2> New. Fast. For good.

<CTA Button>
Download Now 

Firefox Privacy Notice
Advanced install options & other platforms
Other languages
 
<3 Proof Points>
2x Faster
The best Firefox ever

Lightweight 
Uses 30% less memory than Chrome 

Powerfully private 
The only Private Browser that automatically stops ads with trackers
TY/Confirm Page (Scene 2)
Let’s do this! Your download should begin automatically. If it doesn’t, click here.  

Sync up with Firefox on mobile:
 
<Mobile CTA Buttons>

Other languages

Comment 5

[Alex Gibson [:agibson]]

Thanks

Comment 6

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #4)
> Alex - final copy is in the gdoc, approved by Legal (and below).  Please
> submit a PR with the strings and flag for l10n (Peiying - go live for this
> page is 11/14)
> 
> -----------------------------
> 
> Download Page (Scene 1)
> 
> <h1> Meet Firefox Quantum
> <h2> New. Fast. For good.
> 
> <CTA Button>
> Download Now 
> 
> Firefox Privacy Notice
> Advanced install options & other platforms
> Other languages
>  
> <3 Proof Points>
> 2x Faster
> The best Firefox ever
> 
> Lightweight 
> Uses 30% less memory than Chrome 
> 
> Powerfully private 
> The only Private Browser that automatically stops ads with trackers
> TY/Confirm Page (Scene 2)
> Let’s do this! Your download should begin automatically. If it doesn’t,
> click here.  
> 
> Sync up with Firefox on mobile:
>  
> <Mobile CTA Buttons>
> 
> Other languages

Is this all the copy we have?

There are multiple states to this page (out of date Firefox, pre-release Firefox, up-to-date Firefox). We also need things like meta descriptions, page titles for social sharing etc...

Comment 7

[Alex Gibson [:agibson]]

There is also no newsletter signup in the mockupo (this is currently shown to Firefox users only). Is it correct that we no longer want/need this?

Comment 8

[Eric Renaud [:erenaud]]

Krishna - please Alex's comment #4

Christa - please see Alex's comment #5

Comment 9

[Alex Gibson [:agibson]]

Attachment: current-page-states.zip

Attached screenshots of the current page's states for Firefox (showing conditional messaging & newsletter component)

Comment 10

[Eric Renaud [:erenaud]]

Thanks Alex, that's a time saver - I was just starting to take screen shots.

I see no need to change any of those condition messages . . .  And while I would love to get rid of the 'Refresh' button, we don't have time to think about that now.

The only question is the newsletter CTA and I don't think that's really our call to remove, likely an oversight in design  . . .

David, if you concur that we maintain those current 'status quo' items we can move forward and acknowledge this as Alex's QA setting us back on the right path.

Comment 11

[Alex Gibson [:agibson]]

Rachel, could I trouble you for an exported wave shape for this design (like we did for the Quantum page?)

Thanks

Comment 12

[Rachel Wong]

Absolutely! Will upload soon!

Comment 13

[Rachel Wong]

Attachment: Wave Mask White.svg

Here's the wave mask. Let me know if you need anything else!

Comment 14

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #10)
> Thanks Alex, that's a time saver - I was just starting to take screen shots.
> 
> I see no need to change any of those condition messages . . .  And while I
> would love to get rid of the 'Refresh' button, we don't have time to think
> about that now.
> 
> The only question is the newsletter CTA and I don't think that's really our
> call to remove, likely an oversight in design  . . .
> 
> David, if you concur that we maintain those current 'status quo' items we
> can move forward and acknowledge this as Alex's QA setting us back on the
> right path.

Thanks Eric / David,

The answers to these questions are preventing us from starting the l10n process, so it would be great to get this cleared up asap.

Comment 15

[David Tenser [:djst]]

No changes to those conditional messages. l10n process should be able to start. Thanks!

Comment 16

[Alex Gibson [:agibson]]

(In reply to David Tenser [:djst] from comment #15)
> No changes to those conditional messages. l10n process should be able to
> start. Thanks!

What about the newsletter? Exactly the same with no string changes?

There's no visual mockup provided for any of this, so I'm really just guessing...

Comment 17

[Alex Gibson [:agibson]]

Some other ambiguities:

- On the design mockup there's a "Need help?" link, but this does not appear in the copy provided in Comment 4. Should it be included, or omitted?

- Comment 4 also includes the string "Other languages" on scene2, but this does not appear in the design. If it comes driectly after the mobile download buttons, it may seem confusing as to what it's for. I think we may need a more descriptive string here?

- Finally, the mockup shows the main headline as "Firefox Quantum" with Firefox in bold. The final copy reads "Meet firefox Quantum". Should "Firefox" still be in bold here? This needs to be known before we expose strings.

It would be really great if we had a proper copy doc to ask these questions, and also if we had a design that matched the final copy a bit more closely. We can iron this out without these things, but it means asking all these questions to get clear answers.

Comment 18

[David Tenser [:djst]]

Good points - and I missed the newsletter question. Why don't we resolve all these ambiguities "offline" today. Let's update the bug here with the final decisions after that. Thanks!

Comment 19

[Alex Gibson [:agibson]]

WIP demo: https://www-demo3.allizom.org/en-US/firefox/new/

(Note: only mobile layout currently, strings not yet final)

Comment 20

[Eric Renaud [:erenaud]]

(In reply to Alex Gibson [:agibson] from comment #17)
> Some other ambiguities:
> 
> - On the design mockup there's a "Need help?" link, but this does not appear
> in the copy provided in Comment 4. Should it be included, or omitted?
> 
> - Comment 4 also includes the string "Other languages" on scene2, but this
> does not appear in the design. If it comes driectly after the mobile
> download buttons, it may seem confusing as to what it's for. I think we may
> need a more descriptive string here?
> 
> - Finally, the mockup shows the main headline as "Firefox Quantum" with
> Firefox in bold. The final copy reads "Meet firefox Quantum". Should
> "Firefox" still be in bold here? This needs to be known before we expose
> strings.
> 
> It would be really great if we had a proper copy doc to ask these questions,
> and also if we had a design that matched the final copy a bit more closely.
> We can iron this out without these things, but it means asking all these
> questions to get clear answers.

 Krishna - can you please field the questions on copy indicate what is final/final and should in the mockup?

Comment 21

[Alex Gibson [:agibson]]

Copy doc: https://docs.google.com/document/d/1JM5fUgfvm3wuTEte_QE0UG65Y8BBfrtpwwbTqiyvhtc/edit

Comment 22

[Rachel Wong]

Attachment: FF 57 _New Scene 1 + 2.sketch

Updated doc per new copy changes as well as applying designs or the pre-release newsletter section and conditional messaging for user states.

Comment 23

[Peiying Mo [:CocoMo]]

@Alex, not sure how far along you are with this. In the interest of time, we can take the file(s) in the state of *empty template* as long as the copy is final.

Comment 24

[Alex Gibson [:agibson]]

(In reply to Peiying Mo [:CocoMo] from comment #23)
> @Alex, not sure how far along you are with this. In the interest of time, we
> can take the file(s) in the state of *empty template* as long as the copy is
> final.

Strings are not yet final, will let you know as soon as they are. Thanks

Comment 25

[GitHub Bugzilla PR Linker]

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

Comment 26

[Alex Gibson [:agibson]]

Strings are now final in the PR linked in Comment 25, thanks.

Comment 27

[Peiying Mo [:CocoMo]]

Thanks Alex.

Comment 28

[Eric Renaud [:erenaud]]

Apologies for this, Peiying and Alex, we have a change that is required.:

'click here' needs to be changed to 'download the full installer'

Timing-wise I think we're okay here, given the conversation I have w. Peiying about workflows. This update can be part of the upcoming bundle that should include the desktop and mobile page copy as well, this Thursday.

Comment 29

[Alex Gibson [:agibson]]

> 'click here' needs to be changed to 'download the full installer'

This doesn't make sense. 'click here' doesn't download the full installer, it just initiates the same file download that would have happened automatically.

Comment 30

[Alex Gibson [:agibson]]

(In reply to Alex Gibson [:agibson] from comment #29)
> > 'click here' needs to be changed to 'download the full installer'
> 
> This doesn't make sense. 'click here' doesn't download the full installer,
> it just initiates the same file download that would have happened
> automatically.

After getting to the bottom of this request on Slack, we're going to leave this as-is for now. The concern was around an accessibility issue for using 'click here' as the link text. While this is valid, it is a minor issue and not worth changing a string over. We can always update it later on in a separate bug.

Comment 31

[Alex Gibson [:agibson]]

Hi Rachel,

I'm still working on the page and some bits are still in progress, but if you have any design feedback then please let me know. Thanks!

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

Comment 32

[Rachel Wong]

(In reply to Alex Gibson [:agibson] from comment #31)
> Hi Rachel,
> 
> I'm still working on the page and some bits are still in progress, but if
> you have any design feedback then please let me know. Thanks!
> 
> https://www-demo3.allizom.org/en-US/firefox/new/



Hi Alex,

This looks BEAUTIFUL. Thanks so much for this. My comments are honestly just tiny.  

- The Advance install, download in another language and need help? links should be moved down closer to the wave like it is in the mockup giving more empty space between the download CTA and the links. Also could we increase the line height between the links slightly. 

- Could we maybe increase the width of the button slightly and decrease the height a tiny bit. It's feeling a tiny bit fat lol. 

- Yuliya caught that one of the tiles on the browser image is blurry in George's mockup so I updated the main sketch file here: https://drive.google.com/a/mozilla.com/file/d/0Bz-i5ssRMXa1NExNN1Z4UWRRZk0/view?usp=sharing and also uploaded the new png of it in the bug.


- For the Advanced install module. could you put the mobile app store buttons side by side instead of on top of each other. Also the green button on white should maybe have white text? When its on the blue i use the blue so that its more legible. 


Seriously Alex thanks so much for bringing this page to life!

Comment 33

[Rachel Wong]

Attachment: New Browser.png

Please update the page with this new browser where the tile isn't blurry.

Comment 34

[Eric Renaud [:erenaud]]

Alex ^^

Comment 35

[Alex Gibson [:agibson]]

(In reply to Rachel Wong from comment #32)
> (In reply to Alex Gibson [:agibson] from comment #31)
> > Hi Rachel,
> > 
> > I'm still working on the page and some bits are still in progress, but if
> > you have any design feedback then please let me know. Thanks!
> > 
> > https://www-demo3.allizom.org/en-US/firefox/new/
> 
> 
> 
> Hi Alex,
> 
> This looks BEAUTIFUL. Thanks so much for this. My comments are honestly just
> tiny.  
> 
> - The Advance install, download in another language and need help? links
> should be moved down closer to the wave like it is in the mockup giving more
> empty space between the download CTA and the links. Also could we increase
> the line height between the links slightly. 
> 
> - Could we maybe increase the width of the button slightly and decrease the
> height a tiny bit. It's feeling a tiny bit fat lol. 
> 
> - Yuliya caught that one of the tiles on the browser image is blurry in
> George's mockup so I updated the main sketch file here:
> https://drive.google.com/a/mozilla.com/file/d/0Bz-i5ssRMXa1NExNN1Z4UWRRZk0/
> view?usp=sharing and also uploaded the new png of it in the bug.
> 
> 
> - For the Advanced install module. could you put the mobile app store
> buttons side by side instead of on top of each other. Also the green button
> on white should maybe have white text? When its on the blue i use the blue
> so that its more legible. 
> 
> 
> Seriously Alex thanks so much for bringing this page to life!

Thanks Rachel,

All updates should now be in place

Comment 36

[Rachel Wong]

(In reply to Alex Gibson [:agibson] from comment #35)
> (In reply to Rachel Wong from comment #32)
> > (In reply to Alex Gibson [:agibson] from comment #31)
> > > Hi Rachel,
> > > 
> > > I'm still working on the page and some bits are still in progress, but if
> > > you have any design feedback then please let me know. Thanks!
> > > 
> > > https://www-demo3.allizom.org/en-US/firefox/new/
> > 
> > 
> > 
> > Hi Alex,
> > 
> > This looks BEAUTIFUL. Thanks so much for this. My comments are honestly just
> > tiny.  
> > 
> > - The Advance install, download in another language and need help? links
> > should be moved down closer to the wave like it is in the mockup giving more
> > empty space between the download CTA and the links. Also could we increase
> > the line height between the links slightly. 
> > 
> > - Could we maybe increase the width of the button slightly and decrease the
> > height a tiny bit. It's feeling a tiny bit fat lol. 
> > 
> > - Yuliya caught that one of the tiles on the browser image is blurry in
> > George's mockup so I updated the main sketch file here:
> > https://drive.google.com/a/mozilla.com/file/d/0Bz-i5ssRMXa1NExNN1Z4UWRRZk0/
> > view?usp=sharing and also uploaded the new png of it in the bug.
> > 
> > 
> > - For the Advanced install module. could you put the mobile app store
> > buttons side by side instead of on top of each other. Also the green button
> > on white should maybe have white text? When its on the blue i use the blue
> > so that its more legible. 
> > 
> > 
> > Seriously Alex thanks so much for bringing this page to life!
> 
> Thanks Rachel,
> 
> All updates should now be in place



This looks great!! Only thing is in the Newsletter section can we have email address not be in all caps and center aligned? And have the type size match the download button? It feels a little bit bigger. 

Thanks!!

Comment 37

[Alex Gibson [:agibson]]

(In reply to Rachel Wong from comment #36) 
> This looks great!! Only thing is in the Newsletter section can we have email
> address not be in all caps and center aligned? And have the type size match
> the download button? It feels a little bit bigger. 
> 
> Thanks!!

Sorry I can't do this as it's been hard-coded in all-caps [1] and touches many pages, boo :(

(we should totally file a new bug to fix the newsletter form, it has many little niggles like this)

[1] https://github.com/mozilla/bedrock/blob/master/bedrock/newsletter/templates/newsletter/includes/form.html#L50

Comment 38

[Rachel Wong]

(In reply to Alex Gibson [:agibson] from comment #37)
> (In reply to Rachel Wong from comment #36) 
> > This looks great!! Only thing is in the Newsletter section can we have email
> > address not be in all caps and center aligned? And have the type size match
> > the download button? It feels a little bit bigger. 
> > 
> > Thanks!!
> 
> Sorry I can't do this as it's been hard-coded in all-caps [1] and touches
> many pages, boo :(
> 
> (we should totally file a new bug to fix the newsletter form, it has many
> little niggles like this)
> 
> [1]
> https://github.com/mozilla/bedrock/blob/master/bedrock/newsletter/templates/
> newsletter/includes/form.html#L50

Ah okay. So no go on the type size too?

Comment 39

[Alex Gibson [:agibson]]

I can change the type size yes

Comment 40

[Rachel Wong]

Attachment: Pre-release Icon.svg

Updated pre-release icon :)

Comment 41

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/e0b2791d2795b1f97a2724a3a71e59c12c83bae6
[fix bug 1397381] Redesigned /new download page for FF 57

https://github.com/mozilla/bedrock/commit/a616e231385db90d6f66e5053e7e40ff3a517b55
Merge pull request #5187 from alexgibson/bug-1397381-quantum-download-page-redesign

[fix bug 1397381] Redesigned /new download page for FF 57

Comment 42

[Alex Gibson [:agibson]]

Hi Gareth, 

This page has merged to master but will not be live in prod until the 57 launch. There should be no changes to GA as the redesign was purely cosmetic, but could please you take a look at the new page on dev just to make sure everything looks good GA wise?

https://www-dev.allizom.org/en-US/firefox/new/

Thanks

Comment 43

[Gareth Cull [:garethc]]

Hey Alex,

I'm not seeing any GA requests showing up when i visit https://www-dev.allizom.org/en-US/firefox/new/. Typically, i filter the network to search for 'collect' or check real-time GA, but am not seeing anything come through. I also don't see the gtm-snippet-bundle js file in the head like i do in production. Are there any permissions we need to set on this dev site?

Comment 44

[Gareth Cull [:garethc]]

Alex, 

Looks pretty good on /new/. I didn't see an event for 'Need Help' clicks, and am wondering if the newsletter event is the correct one. Is that the moz and you newsletter or should it be a firefox event being sent. 

I'll check scene 2 now.

Comment 45

[Alex Gibson [:agibson]]

(In reply to Gareth Cull [:garethc] from comment #44)
> Alex, 
> 
> Looks pretty good on /new/. I didn't see an event for 'Need Help' clicks,
> and am wondering if the newsletter event is the correct one. Is that the moz
> and you newsletter or should it be a firefox event being sent. 
> 
> I'll check scene 2 now.

If you would like any data attributes on the help link, please let me know.

As for the newsletter, this is the same ID that's used on the current /new page (`mozilla-and-you` is actually the ID for the Firefox newsletter for historic reasons, i believe).

Comment 46

[pgerman]

Hi Alex,

I've added an entry to our link tracking table in GTM and don't require anything from you for for 'need help'.

Scene two looks good to me.

Comment 47

[Eric Renaud [:erenaud]]

Alex ^^ looks like we have analytics signoff.

Comment 48

[Alex Gibson [:agibson]]

Great, nothing more to do here then. Thanks

Comment 49

[Fabio Rios [:frios]]

Hey there,

We needed to remove Firefox Quantum from the main headline like we did on the /firefox page. Can we update the headlines to read:

The New Firefox
Fast for good.

We need to update this in en-US before launch, but the other locales can be a rolling change.

Comment 50

[Alex Gibson [:agibson]]

(In reply to Fabio Rios [:frios] from comment #49)
> Hey there,
> 
> We needed to remove Firefox Quantum from the main headline like we did on
> the /firefox page. Can we update the headlines to read:
> 
> The New Firefox
> Fast for good.
> 
> We need to update this in en-US before launch, but the other locales can be
> a rolling change.

Should this be "The New Firefox" or "The new Firefox"? (as per: https://bugzilla.mozilla.org/show_bug.cgi?id=1397519#c58)

Should "Firefox" also be in bold?

Comment 51

[Fabio Rios [:frios]]

Per slack convo, let's match the /firefox page format

The new <b>Firefox</b>
Fast for good.

Thanks!

Comment 52

[Peiying Mo [:CocoMo]]

I want to make sure we remember to add the new strings post launch for localization. Communities usually spot the differences and wonder why they are not available.

Comment 53

[GitHub Bugzilla PR Linker]

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

Comment 54

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/61aad86780776c5a4599e45e5ccb6f2e1048a9e9
[bug 1397381] Update /firefox/new/ headline for en locales

Comment 55

[GitHub Bugzilla PR Linker]

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

Comment 56

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/74d10ab45970787858ad34a66f0ade068a6b0591
[bug 1397381] Fix footer small link styling on /new (#5267)