1240980 - Implementation for Updated Hello Product page

Status: RESOLVED FIXED

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

Description

[Jenny Douglas [:JennyD]]

+++ This bug was initially created as a clone of Bug #1240976 +++

Implement the Update Hello Page to reflect new features and focus

Above is the associated design/copy/UX bug above
Right now Alex G is in our meetings but with the durable team changes, I don't want to assume he is on it.

push live date should be March 8th.

Brief: https://docs.google.com/a/mozilla.com/document/d/1yt9IhH1h9BdzWuXT00mJ4TvrsW1i9HQhEf8nIt5J81c/edit?usp=sharing
Wiki: https://wiki.mozilla.org/Hello/2016/
Notes: https://docs.google.com/a/mozilla.com/document/d/1RBbbAXolgfTS6fQDiXg5YYN0zU9tjyik_13GvMHFddI/edit?usp=sharing

Comment 1

[Alex Gibson [:agibson]]

Hi Jenny, 

Can you please link to the final copy doc here in the bug so I can begin work on preparing the template for localization? Thanks!

Comment 2

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #1)
> Hi Jenny, 
> 
> Can you please link to the final copy doc here in the bug so I can begin
> work on preparing the template for localization? Thanks!

This is approved and ready to go:

https://docs.google.com/a/mozilla.com/document/d/1K2Ovu6rgP48oI0ZjQ8JxT9HCEERxiT7FNePNCAlzuGs/edit?usp=sharing

Comment 3

[Alex Gibson [:agibson]]

Thanks Matej, clearing needsinfo for Jenny

Comment 4

[Alex Gibson [:agibson]]

Strings are now in a template and pushed to demo2 for localizers. Not much to look at yet, but strings should be readable:

https://www-demo2.allizom.org/firefox/hello/

Working branch is here:

https://github.com/mozilla/bedrock/tree/bug-1240980-update-hello-product-page

Note: design is still to be finalized, although we have made it very clear that strings are now frozen.

Comment 5

[Alex Gibson [:agibson]]

Attachment: GitHub pull request

Comment 6

[Alex Gibson [:agibson]]

Link to a WIP mockup of the page for to reference:

https://www.dropbox.com/s/wm0mb7up7vyka8u/firefox-hello_landing-page.png?dl=0

Please note this is still subject to change, particularly the top hero section.

Comment 7

[Michael Ham]

Attachment: firefox-hello_landing-page_v5._conditional-state.png

Posting WIP version of conditional state page (Non Firefox Users and Users not using the latest version)

Comment 8

[Alex Gibson [:agibson]]

Latest version of the page is now up on demo 2:

https://www-demo2.allizom.org/en-US/firefox/hello/

I will also attach some screenshots of each conditional state for feedback.

Comment 9

[Alex Gibson [:agibson]]

Attachment: firefox-up-to-date.png

Firefox up to date users

Comment 10

[Alex Gibson [:agibson]]

Attachment: firefox-out-of-date.png

Firefox out of date users

Comment 11

[Alex Gibson [:agibson]]

Attachment: non-firefox.png

non-firefox users

Comment 12

[Alex Gibson [:agibson]]

Attachment: mobile-device.png

Mobile users (notegraphic in the conditional content area here is still TBD?)

Comment 13

[Alex Gibson [:agibson]]

Flagging Holly and Michael for design feedback, thanks!

Comment 14

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #12)
> Created attachment 8717841 [details]
> mobile-device.png
> 
> Mobile users (notegraphic in the conditional content area here is still TBD?)

There's no button or link for these users. Can we run the text across the entire width of the page for this state?

Comment 15

[Alex Gibson [:agibson]]

(In reply to Matej Novak [:matej] from comment #14)
> (In reply to Alex Gibson [:agibson] from comment #12)
> > Created attachment 8717841 [details]
> > mobile-device.png
> > 
> > Mobile users (notegraphic in the conditional content area here is still TBD?)
> 
> There's no button or link for these users. Can we run the text across the
> entire width of the page for this state?

We're looking to add a graphic for these users, and link to the desktop page.

Comment 16

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #8)
> Latest version of the page is now up on demo 2:
> 
> https://www-demo2.allizom.org/en-US/firefox/hello/
> 
> I will also attach some screenshots of each conditional state for feedback.

Hey Alex,

This is looking good. Just a couple of questions:

• I'm seeing the update version of the copy when I click the link. Is that expected/correct?

• Michael's version of the layout in comment 7 has some nice background texture. Is that still going to be added?

Thanks.

Comment 17

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #15)
> (In reply to Matej Novak [:matej] from comment #14)
> > (In reply to Alex Gibson [:agibson] from comment #12)
> > > Created attachment 8717841 [details]
> > > mobile-device.png
> > > 
> > > Mobile users (notegraphic in the conditional content area here is still TBD?)
> > 
> > There's no button or link for these users. Can we run the text across the
> > entire width of the page for this state?
> 
> We're looking to add a graphic for these users, and link to the desktop page.

OK. That's new info for me. Just note that we don't have copy written for that, so it will be an additional l10n request.

Comment 18

[Alex Gibson [:agibson]]

m seeing the update version of the copy when I click the link. Is that expected/correct?

Can you please explain what you mean? Sorry i don't quite follow

> Michael's version of the layout in comment 7 has some nice background texture. Is that still going to be added?

Yep, this is still work in progress. These screenshots are just to discuss messaging and are not the finished page.

> OK. That's new info for me. Just note that we don't have copy written for that, so it will be an additional l10n request.

We're working through some final design/ux issues as part of our durable team. We can't add any new strings, these we're frozen some time ago.

Comment 19

[Alex Gibson [:agibson]]

(In reply to Matej Novak [:matej] from comment #16)
> • I'm seeing the update version of the copy when I click the link. Is that
> expected/correct?

What version of Firefox are you using? You need 45 or above for the new version of Hello.

Comment 20

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #19)
> (In reply to Matej Novak [:matej] from comment #16)
> > • I'm seeing the update version of the copy when I click the link. Is that
> > expected/correct?
> 
> What version of Firefox are you using? You need 45 or above for the new
> version of Hello.

I'm on 44, so it sounds like this is what's supposed to happen. Thanks.

Comment 21

[Michael Ham]

Attachment: firefox-hello_landing-page_mobile-device.png

Mockup showing icon in CTA bar below hero image.

Comment 22

[Alex Gibson [:agibson]]

(In reply to Michael Ham from comment #21)
> Created attachment 8717966 [details]
> firefox-hello_landing-page_mobile-device.png
> 
> Mockup showing icon in CTA bar below hero image.

Thanks Michael, could I please get a 2x image for the graphic here?

Also for the noise texture Matej mentioned, would it be possible to make something that works with variable width windows and repeats? A bit like this: https://github.com/mozilla/bedrock/blob/master/media/img/sandstone/grain.png

Comment 23

[Holly Habstritt Gaal [:Habber]]

Hi Alex, 

Just 2 things from me.

1. Footer: looks like the simple footer is in your mockups. Currently our product and feature pages on Mozilla.org have this footer http://cl.ly/0y0X0l1v063t

2. Firefox download button style: In our meeting yesterday I thought we decided to move forward with this button http://cl.ly/2F1Z1A0s1h0L as it mentions Firefox and has all the legal-approved links and language.

Comment 24

[Alex Gibson [:agibson]]

(In reply to Holly Habstritt Gaal [:Habber] from comment #23)
> 1. Footer: looks like the simple footer is in your mockups. Currently our
> product and feature pages on Mozilla.org have this footer
> http://cl.ly/0y0X0l1v063t

The footer on demo2 is what was in the design from Matt. Are we switching to the standard mozorg footer? Happy to do either but please let me know which one to use.
> 
> 2. Firefox download button style: In our meeting yesterday I thought we
> decided to move forward with this button http://cl.ly/2F1Z1A0s1h0L as it
> mentions Firefox and has all the legal-approved links and language.

I used the "simple" button as this is what is shown in Michael's design mockup in comment 7. We can use either one, please just let me know which.

Comment 25

[Michael Ham]

+1 to the footer Holly suggested: http://cl.ly/0y0X0l1v063t
+1 to the button Holly suggested: http://cl.ly/2F1Z1A0s1h0L

Comment 26

[Michael Ham]

Attachment: firefox_picto_ffx-desktop-hello.png

PNG file – FFX Desktop Hello image for mobile users.

Comment 27

[Michael Ham]

Attachment: firefox_picto_ffx-desktop-hello.svg

SVG file – FFX Desktop Hello image for mobile users.

Comment 28

[Michael Ham]

Attachment: firefox_hello-page_texture-grain_2X.png

PNG File – repeating texture grain graphic at 2x.

Comment 29

[Michael Ham]

Alex – In addition to the "Firefox Desktop Hello" picto image, I've attached a PNG of a repeating texture grain for use on the hero image, feature picto images in the middle section, and in the two-column benefits section.

The PNG is at 2x. Setting the transparency to 40% when repeating across the images should come close to producing the texture effect shown in the mockups. We can dial it in as needed. Also, happy to continue to workshop this on my end to find the most effective way to deploy this aspect of the design on the page.

Comment 30

[Alex Gibson [:agibson]]

(In reply to Michael Ham from comment #29)
> Alex – In addition to the "Firefox Desktop Hello" picto image, I've attached
> a PNG of a repeating texture grain for use on the hero image, feature picto
> images in the middle section, and in the two-column benefits section.
> 
> The PNG is at 2x. Setting the transparency to 40% when repeating across the
> images should come close to producing the texture effect shown in the
> mockups. We can dial it in as needed. Also, happy to continue to workshop
> this on my end to find the most effective way to deploy this aspect of the
> design on the page.

Many thanks, Michael - this should do nicely!

Comment 31

[Alex Gibson [:agibson]]

Attachment: hello-mobile-revised.png

Revised screenshot of mobile view, featuring new graphic and also background noise texture.

Note: I used a double caret ">>" to highlight to mobile users that the text is a clickable link (since hover doesn't really do anything here). This was pretty much the only standard convention I could use without breaking strings. The image is clickable too. Hope this will suffice.

Comment 32

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #31)
> Created attachment 8718294 [details]
> hello-mobile-revised.png
> 
> Revised screenshot of mobile view, featuring new graphic and also background
> noise texture.
> 
> Note: I used a double caret ">>" to highlight to mobile users that the text
> is a clickable link (since hover doesn't really do anything here). This was
> pretty much the only standard convention I could use without breaking
> strings. The image is clickable too. Hope this will suffice.

I would really prefer to drop the period at the end of the sentence if we're going to use the double caret. Does that break l10n?

I'm also not clear on the interaction here. If a user visits this page from their mobile device and clicks the link, where does it take them?

Comment 33

[Alex Gibson [:agibson]]

(In reply to Matej Novak [:matej] from comment #32)
> (In reply to Alex Gibson [:agibson] from comment #31)
> > Created attachment 8718294 [details]
> > hello-mobile-revised.png
> > 
> > Revised screenshot of mobile view, featuring new graphic and also background
> > noise texture.
> > 
> > Note: I used a double caret ">>" to highlight to mobile users that the text
> > is a clickable link (since hover doesn't really do anything here). This was
> > pretty much the only standard convention I could use without breaking
> > strings. The image is clickable too. Hope this will suffice.
> 
> I would really prefer to drop the period at the end of the sentence if we're
> going to use the double caret. Does that break l10n?
> 
> I'm also not clear on the interaction here. If a user visits this page from
> their mobile device and clicks the link, where does it take them?

Sorry, we can;t remove periods without breaking translations.

The link goes to the firefox desktop page.

Comment 34

[Alex Gibson [:agibson]]

Latest commit is now up on demo2:

https://www-demo2.allizom.org/en-US/firefox/hello/

I'm going to open this up for code review starting today. Please note that this page is due to complete and go into master before the end of the sprint this week, so if there are any larger changes requested this may need to go into a future backlog.

Comment 35

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #33)
> (In reply to Matej Novak [:matej] from comment #32)
> > (In reply to Alex Gibson [:agibson] from comment #31)
> > > Created attachment 8718294 [details]
> > > hello-mobile-revised.png
> > > 
> > > Revised screenshot of mobile view, featuring new graphic and also background
> > > noise texture.
> > > 
> > > Note: I used a double caret ">>" to highlight to mobile users that the text
> > > is a clickable link (since hover doesn't really do anything here). This was
> > > pretty much the only standard convention I could use without breaking
> > > strings. The image is clickable too. Hope this will suffice.
> > 
> > I would really prefer to drop the period at the end of the sentence if we're
> > going to use the double caret. Does that break l10n?
> > 
> > I'm also not clear on the interaction here. If a user visits this page from
> > their mobile device and clicks the link, where does it take them?
> 
> Sorry, we can;t remove periods without breaking translations.

I wish we could have decided/clarified this was going to be a link before we finalized copy. Hopefully we can update this post launch.

Comment 36

[Matej Novak [:matej]]

Also, are we still testing both versions of the hero image?

Comment 37

[Alex Gibson [:agibson]]

> I wish we could have decided/clarified this was going to be a link before we finalized copy. Hopefully we can update this post launch.

I'm open to any further suggestions in the time we have. Myself/Holly/Michael discussed this and agreed this was better than not linking to anything.

> Also, are we still testing both versions of the hero image?

No, we decided this was beyond scope for the sprint.

Comment 38

[Alex Gibson [:agibson]]

Perhaps another option would be to add a simple "Learn more." link after the current copy? I'm pretty sure we have this translated in the base template already.

Comment 39

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #38)
> Perhaps another option would be to add a simple "Learn more." link after the
> current copy? I'm pretty sure we have this translated in the base template
> already.

That would work for me, though again, I'd prefer it without a period:

Learn more »

Comment 40

[Alex Gibson [:agibson]]

Attachment: learn-more.png

Updating to use "Learn more >>" as discussed

Comment 41

[Matej Novak [:matej]]

(In reply to Alex Gibson [:agibson] from comment #40)
> Created attachment 8718361 [details]
> learn-more.png
> 
> Updating to use "Learn more >>" as discussed

Love it. Thanks.

Comment 42

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/e06b93e2b6eedb3ab13c658df1f8a73592e4a3e3
[fix bug 1240980] Update Firefox Hello product page

https://github.com/mozilla/bedrock/commit/77c0cc915132e4f74ec26aa4970e332245ee9e9e
Merge pull request #3829 from mozilla/bug-1240980-update-hello-product-page

[fix bug 1240980] Update Firefox Hello product page

Comment 43

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/70ea3aa55f1d0b9a9c0d624ceac0215e6d8fe0ef
[bug 1240980] Mozilla Support link on Hello page should use title case

https://github.com/mozilla/bedrock/commit/e9723b7b3fb71b232881e327347c166c9b2cbe51
Merge pull request #3866 from alexgibson/bug-1240980-update-sumo-link-copy

[bug 1240980] Mozilla Support link on Hello page should use title case

Comment 44

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/cb30b9d8190c21c79b4e7984a9a1667f5ca51b1a
[bug 1240980] Remove Hello page waffle switch

https://github.com/mozilla/bedrock/commit/51f6ae22bea60bdab8733f28184d58c14d6d4898
Merge pull request #3949 from alexgibson/remove-hello-waffle-switch

[bug 1240980] Remove Hello page waffle switch

Comment 45

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/a6fbcc8f6dc1335b5f2ee2136e2817b6ea863ff8
[bug 1240980] Remove legacy Firefox Hello product page

https://github.com/mozilla/bedrock/commit/d3dfd70ec25e3c9242b888ecd96143ce94b2024e
Merge pull request #3945 from alexgibson/bug-1240980-remove-legacy-hello-page

[bug 1240980] Remove legacy Firefox Hello product page