1137302 - Updates to Hello product page - Copy & Design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

>>Project/Request Title:
Updates to Hello product page - Copy & Design

>>Project Overview:
Updates to the Hello product page, primarily highlighting the addition of Screen Sharing.

Set to launch with the Firefox Growth Campaign on May 12th.

Wiki: https://wiki.mozilla.org/Firefox_Growth_Campaign_2015

>> Creative Help Needed:
Copy:    Yes 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
Full specs TBD

>>CTA and Design:
Full specs TBD

>>Creative Due Date:
2015-03-23

>>Launch Date:
2015-05-12

>>Mozilla Goal:
Org Support

>>Mozilla Creative Collective:
No

>>Points of Contact:
Not provided

Comment 1

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Per a meeting with Winston/Arcadio today, the following has been approved:

    # Solution (Arcadio/Winston)

    Add a copy block for screensharing

    Expand on Secure with WebRTC encryption

    Add a message/video in the video about screensharing

    Add a blurb in the copy block adjacent to video on product page about screensharing.

Comment 2

[Matej Novak [:matej]]

(In reply to Cory Price [:ckprice] from comment #1)
> Per a meeting with Winston/Arcadio today, the following has been approved:
> 
>     # Solution (Arcadio/Winston)
> 
>     Add a copy block for screensharing
> 
>     Expand on Secure with WebRTC encryption
> 
>     Add a message/video in the video about screensharing
> 
>     Add a blurb in the copy block adjacent to video on product page about
> screensharing.

Did we decide not to add a blurb about taking your existing conversations to the next level? If we only add one new copy block (i.e. screensharing), that will give us an odd number, which may be tricky from a layout perspective.

We also talked about changing the headline/subhead to be more about sharing than connecting. Is that not the case anymore either?

Comment 3

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Matej Novak [:matej] from comment #2)
> Did we decide not to add a blurb about taking your existing conversations to
> the next level? If we only add one new copy block (i.e. screensharing), that
> will give us an odd number, which may be tricky from a layout perspective.
> 
> We also talked about changing the headline/subhead to be more about sharing
> than connecting. Is that not the case anymore either?
I think those items are still up for discussion, and definitely a creative decision.

The outcome of the above is more to verify that the changes will not involve updating the animation, and there won't be any major layout changes to the page. We won't need UX for this page, and can jump into Design/Copy.

Comment 4

[Lee Tom]

I could be wrong, but the idea of creating a new section (below the hero/animation, but above the 4 pods) for Hello 'features', seem well received from both Arcadio and Holly.  I can flesh out that idea in a mockup, but my idea would basically be to create a section to detail new features (ie: screensharing or IM.) That way, we don't have to stack more blurbs into the current group of pods or deal with laying out odd numbers. It will be make it easier to add newer features in as they roll out. 

Depending on how we lay this new section out, I could imagine it accommodating a screenshot or graphic that might be more explicit than the glyphs in the current section

Comment 5

[Matej Novak [:matej]]

(In reply to Lee Tom from comment #4)
> I could be wrong, but the idea of creating a new section (below the
> hero/animation, but above the 4 pods) for Hello 'features', seem well
> received from both Arcadio and Holly.  I can flesh out that idea in a
> mockup, but my idea would basically be to create a section to detail new
> features (ie: screensharing or IM.) That way, we don't have to stack more
> blurbs into the current group of pods or deal with laying out odd numbers.
> It will be make it easier to add newer features in as they roll out. 
> 
> Depending on how we lay this new section out, I could imagine it
> accommodating a screenshot or graphic that might be more explicit than the
> glyphs in the current section

I'm not sure about adding a new section just yet. Let's talk more about this before proceeding. Thanks.

Comment 6

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

After another regroup with Winston:

Below is the direction for the Hello product page:

    1: Add a fifth pod to talk about screensharing.

    2: Expand on 'privacy' pod. Per brief: "Privacy: Hello comes with Web-RTC encryption standard"

    3: Add screenshare visuals to the video (bug 1141295)

Matej, thoughts? Think we're ready to move forward on design (if needed; probably for the uneven pods)/copy?

Comment 7

[Matej Novak [:matej]]

(In reply to Cory Price [:ckprice] from comment #6)
> After another regroup with Winston:
> 
> Below is the direction for the Hello product page:
> 
>     1: Add a fifth pod to talk about screensharing.
> 
>     2: Expand on 'privacy' pod. Per brief: "Privacy: Hello comes with
> Web-RTC encryption standard"
> 
>     3: Add screenshare visuals to the video (bug 1141295)
> 
> Matej, thoughts? Think we're ready to move forward on design (if needed;
> probably for the uneven pods)/copy?

I'm concerned about 5 pods of copy.

One solution would be to add a section below the current four blurbs, as Lee suggests in comment 4, and treat screen sharing a little differently. Over time, we could add more features to this section.

The other is to combine two of the existing pods and replace one with screen sharing. For example, we could add mention of compatible browsers to the "All you need is Firefox" section:

If you have the latest version of Firefox, you already have Hello. There’s no account or sign-in required and nothing extra to download. Just start a conversation, send anyone with a compatible browser a link and ask them to click it. Simple.

Learn more about compatible browsers »

Would either of the above work?

Comment 8

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

:wbowden, any recommendation on these options? I like the option of adding screensharing under the existing 4 blurbs.

Comment 9

[Lee Tom]

Attachment: Hello Product page - 4 pods - Screen-sharing included

Comment 10

[Matej Novak [:matej]]

(In reply to Lee Tom from comment #9)
> Created attachment 8576977 [details]
> Hello Product page - 4 pods - Screen-sharing included

I just see a text description when I click that link, but no visual. Can you check the upload?

Comment 11

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Matej Novak [:matej] from comment #10)
> (In reply to Lee Tom from comment #9)
> > Created attachment 8576977 [details]
> > Hello Product page - 4 pods - Screen-sharing included
> 
> I just see a text description when I click that link, but no visual. Can you
> check the upload?
NI :leetom

Comment 12

[Lee Tom]

Attachment: FFx_Hello_Product_v10_uptodateFfxuser.jpg

Currently working on a variant of the blue background that

1. does not conflict with the animation
2. the FFx global nav doesn't get lost on

Comment 13

[Lee Tom]

Attachment: FFx_Hello_Product_v10_uptodateFfxuser_2.jpg

Addressing the 2 issues from my comment above.

Comment 14

[Matej Novak [:matej]]

(In reply to Lee Tom from comment #13)
> Created attachment 8577351 [details]
> FFx_Hello_Product_v10_uptodateFfxuser_2.jpg
> 
> Addressing the 2 issues from my comment above.

Hawt. Thanks.

Comment 15

[Winston Bowden]

(In reply to Cory Price [:ckprice] from comment #8)
> :wbowden, any recommendation on these options? I like the option of adding
> screensharing under the existing 4 blurbs.

Good option.

Comment 16

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Winston Bowden from comment #15)
> (In reply to Cory Price [:ckprice] from comment #8)
> > :wbowden, any recommendation on these options? I like the option of adding
> > screensharing under the existing 4 blurbs.
> 
> Good option.
We'll discuss this at our scrum today.

Comment 17

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Lee Tom from comment #13)
> Created attachment 8577351 [details]
> FFx_Hello_Product_v10_uptodateFfxuser_2.jpg
> 
> Addressing the 2 issues from my comment above.
Per a meeting with Winston today, this version is approved.

Comment 18

[Troy Palmer]

Hey everyone

Here is my copy (revised + new) for the product page. Based on the latest from Lee, I revised the "All You Need Is Firefox" copy, added a section for Screen Sharing and revised the copy for the "Safe, Secure, Protected" section. Let me know if anything is unclear or if there are any questions.

https://docs.google.com/document/d/1FTVY82P1fib56HzpeCia6LqnC1E0tgPoRE9EgcqOi14/edit?usp=sharing

Thanks,
Troy

Comment 19

[Lee Tom]

Attachment: FFx_Hello_Product_v10_uptodateFfxuser_3.jpg

Thanks for the updated copy, Troy. Attached is the latest mockup with new copy added.

Comment 20

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: FFx_Hello_Product_v10_uptodateFfxuser_4.jpg

Updated with sharing icon in place (thanks Lee!)

Comment 21

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Troy Palmer from comment #18)
> https://docs.google.com/document/d/
> 1FTVY82P1fib56HzpeCia6LqnC1E0tgPoRE9EgcqOi14/edit?usp=sharing
Thanks Troy. Added some feedback from Winston/Arcadio. Let me know if there's any concern there.

(In reply to Cory Price [:ckprice] from comment #20)
> Created attachment 8579409 [details]
> FFx_Hello_Product_v10_uptodateFfxuser_4.jpg
The bottom right block in this comp doesn't match what is on the current page - https://www.mozilla.org/en-US/firefox/hello/

Just want to make sure we don't plan to change this pod.

Comment 22

[Lee Tom]

I had the (conditional) state for "Non-user" turned on when I made the mockup, Cory. There are no plans to change the copy for the bottom-right block, that I know of.  The "Firefox user up-to-date" content I have in my file is the same as the current page.  

> The bottom right block in this comp doesn't match what is on the current
> page - https://www.mozilla.org/en-US/firefox/hello/
> 
> Just want to make sure we don't plan to change this pod.

Comment 23

[Troy Palmer]

Thanks, Corey. I made one change and left a comment / suggestion in for the second. 

> Thanks Troy. Added some feedback from Winston/Arcadio. Let me know if
> there's any concern there.
>

Comment 24

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Lee Tom from comment #22)
> I had the (conditional) state for "Non-user" turned on when I made the
> mockup, Cory. There are no plans to change the copy for the bottom-right
> block, that I know of.  The "Firefox user up-to-date" content I have in my
> file is the same as the current page.  
> 
> > The bottom right block in this comp doesn't match what is on the current
> > page - https://www.mozilla.org/en-US/firefox/hello/
> > 
> > Just want to make sure we don't plan to change this pod.

Right! Thanks for the reminder Lee.

Comment 25

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

This LGTM!

Still pending Arcadio to confirm the text in the security section is technically correct.

Comment 26

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Copy is approved. We still need a SUMO link for the Web-RTC cta, but copy is good.

Comment 27

[Alex Gibson [:agibson]]

Lee, can you please provide updated assets and/or a PSD for this change too? Thanks

Comment 28

[Alex Gibson [:agibson]]

Troy, can you please provide the correct URL for the link "Learn more about WebRTC encryption"? Thanks

Comment 29

[Troy Palmer]

Hey Alex

I don't actually have a link. The comment in the doc (from Cory) said the URL was TBD.

Comment 30

[Lee Tom]

Here's the PSD Alex: http://cl.ly/3K3C0x3k073M

Again, going to post assets to the DAM soon, but it's also at that ^^ link for you now. 

(In reply to Alex Gibson [:agibson] from comment #27)
> Lee, can you please provide updated assets and/or a PSD for this change too?
> Thanks

Comment 31

[Alex Gibson [:agibson]]

Hi, Lee

Regarding: - "the Hello animation starts with the blue talk bubble being 'drawn in' before it lands in the browser toolbar. This part of the animation might be hard to see since the background will be blue."

If we're to turn the blue Hello faces/bubbles a slightly darker shade of blue, it will require considerable updates to the animation image sprites:

https://github.com/mozilla/bedrock/blob/master/media/img/firefox/hello/sprite-animation-high-res.png
https://github.com/mozilla/bedrock/blob/master/media/img/firefox/hello/sprite-animation.png
https://github.com/mozilla/bedrock/blob/master/media/img/firefox/hello/sprite-animation-mini-high-res.png
https://github.com/mozilla/bedrock/blob/master/media/img/firefox/hello/sprite-animation-mini.png

Before I undertake this task I would just like to assess how important this is in terms of priority, as it could take me some considerable time to manually update these sprites.

If we think it's a worthwhile investment, can you also please provide all the original assets? Thanks

Comment 32

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

The difference of background colors in attachment 8579409 [details] and the current page seem fairly negligible. Before we go forward with this, could we see what the blue face looks like against the new background?

Comment 33

[Alex Gibson [:agibson]]

Attachment: hello-face-blue.png

Here's a screenshot of the current blue face on the updated backgorund / design

Comment 34

[Alex Gibson [:agibson]]

Lee, unfortunately I don't have a demo server free today but can you take a look at the attachment in Comment 33? Let me know if you think this looks ok.

If you would still like to see it on a demo I'll try and find one as soon as I can. Thanks!

Comment 35

[Lee Tom]

Thanks, Alex. Don't worry about the demo. I think we have a discrepancy between the blues of the Hello branding and the UI unfortunately. I'll try to come up with a recommendation soon. 

(In reply to Alex Gibson [:agibson] from comment #34)
> Lee, unfortunately I don't have a demo server free today but can you take a
> look at the attachment in Comment 33? Let me know if you think this looks ok.
> 
> If you would still like to see it on a demo I'll try and find one as soon as
> I can. Thanks!

Comment 36

[Lee Tom]

Alex, I think it's OK for the bubble and our button/link color to differ. Let's leave the animation as is, and stick to #0c99d5 for our link and button colors. 

- Thanks for center-justifying the "Share" widget to Tabzilla. I was going ask you to do that
- Can we change the "POWERED BY" to "Powered by" and style the font: Open Sans Light Italic, 14pt, #85949e
- The Telefonica Logo looks a bit fuzzy, so here's an SVG if it's not too much trouble to replace:
http://cl.ly/210h181p0v3q  (please match color to #85949e)
- the "TRY HELLO NOW" button at the bottom of the page: can we try styling that with a 2px stroke #ffffff, and then have it turn to the dark-blue #2165a9 on rollover? 

Sorry for the design dump here. Let me know if it's easier to IM about it or I can also write up an email if that's more clear. Thanks Alex!


(In reply to Alex Gibson [:agibson] from comment #33)
> Created attachment 8583161 [details]
> hello-face-blue.png
> 
> Here's a screenshot of the current blue face on the updated backgorund /
> design

Comment 37

[Alex Gibson [:agibson]]

(In reply to Lee Tom from comment #36)
> Alex, I think it's OK for the bubble and our button/link color to differ.
> Let's leave the animation as is, and stick to #0c99d5 for our link and
> button colors. 
> 
> - Thanks for center-justifying the "Share" widget to Tabzilla. I was going
> ask you to do that
> - Can we change the "POWERED BY" to "Powered by" and style the font: Open
> Sans Light Italic, 14pt, #85949e
> - The Telefonica Logo looks a bit fuzzy, so here's an SVG if it's not too
> much trouble to replace:
> http://cl.ly/210h181p0v3q  (please match color to #85949e)
> - the "TRY HELLO NOW" button at the bottom of the page: can we try styling
> that with a 2px stroke #ffffff, and then have it turn to the dark-blue
> #2165a9 on rollover? 
> 
> Sorry for the design dump here. Let me know if it's easier to IM about it or
> I can also write up an email if that's more clear. Thanks Alex!
> 
> 
> (In reply to Alex Gibson [:agibson] from comment #33)
> > Created attachment 8583161 [details]
> > hello-face-blue.png
> > 
> > Here's a screenshot of the current blue face on the updated backgorund /
> > design

Thanks Lee,

I'll see to implementing these and post a new screen grab

Comment 38

[Alex Gibson [:agibson]]

Attachment: hello-updates-screenshot.png

Hi Lee,

I've attached an updated screenshot of the full page. Please ignore the jaggies in the blue Hello face icon in the top section, seems Firefox's screenshot feature has a few issues (it's smooth on the real page).

Any further tweaks, please let me know. Thanks!

Comment 39

[Alex Gibson [:agibson]]

Attachment: hello-updates-screenshot-2.png

Updated screenshot

Comment 40

[Alex Gibson [:agibson]]

P.S - I forgot to mention, the Family Navigation is being handled in a separate bug/pull request to this one (that's why it's not in the screen shot here).

Comment 41

[Lee Tom]

Looks great, Alex. Thanks! 

(In reply to Alex Gibson [:agibson] from comment #39)
> Created attachment 8584440 [details]
> hello-updates-screenshot-2.png
> 
> Updated screenshot

Comment 42

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

This blurb is final approved:

Safe, secure, protected
Because Hello is built right into Firefox, you can rest easy knowing that your conversations and information will remain private and secure. And thanks to WebRTC-grade encryption, you’ll enjoy an added level of security. Learn more about WebRTC encryption »