Closed Bug 1240980 Opened 4 years ago Closed 4 years ago

Implementation for Updated Hello Product page

Categories

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

Production
defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: JennyD, Unassigned)

References

(Depends on 1 open bug, )

Details

(Whiteboard: [kb=1941109] )

Attachments

(11 files, 1 obsolete file)

+++ 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
Whiteboard: [kb=1941109]
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!
Flags: needinfo?(jdouglas)
(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
Thanks Matej, clearing needsinfo for Jenny
Flags: needinfo?(jdouglas)
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.
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.
Posting WIP version of conditional state page (Non Firefox Users and Users not using the latest version)
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.
Attached image firefox-up-to-date.png
Firefox up to date users
Attached image firefox-out-of-date.png
Firefox out of date users
Attached image non-firefox.png
non-firefox users
Attached image mobile-device.png (obsolete) —
Mobile users (notegraphic in the conditional content area here is still TBD?)
Flagging Holly and Michael for design feedback, thanks!
Flags: needinfo?(mham)
Flags: needinfo?(hhabstritt.bugzilla)
(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?
(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.
Depends on: 1247255
(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.
No longer depends on: 1247255
(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.
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.
Depends on: 1247255
(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.
(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.
Mockup showing icon in CTA bar below hero image.
Flags: needinfo?(mham)
(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
Flags: needinfo?(mham)
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.
Flags: needinfo?(hhabstritt.bugzilla)
(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.
+1 to the footer Holly suggested: http://cl.ly/0y0X0l1v063t
+1 to the button Holly suggested: http://cl.ly/2F1Z1A0s1h0L
Flags: needinfo?(mham)
PNG file – FFX Desktop Hello image for mobile users.
SVG file – FFX Desktop Hello image for mobile users.
PNG File – repeating texture grain graphic at 2x.
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.
Flags: needinfo?(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!
Flags: needinfo?(agibson)
Attachment #8717841 - Attachment is obsolete: true
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.
(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?
(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.
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.
(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.
Also, are we still testing both versions of the hero image?
> 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.
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.
(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 »
Attached image learn-more.png
Updating to use "Learn more >>" as discussed
(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.
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
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
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
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
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
You need to log in before you can comment on or make changes to this bug.