1137306 - Updates to Hello FTU - Copy & Design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

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

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

>>Project Overview:
Updates to the Hello First Time Use tour to showcase 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-04-01

>>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!)]

The decision here is going to be mentioning screen sharing on the final 'connected' state of the FTU.

Current state: http://cl.ly/image/1B1Y3G3S3r1U

More details: Alter copy to mention tab sharing - possible image to represent tab sharing could work, but content on this page must stay minimal.

Matej/Lee let me know if you'd like any more input from PMM to move forward on this. You can find more infomation in the project brief bug1132097comment3

Comment 2

[Matej Novak [:matej]]

I could see going a few different ways here:

• Say tab sharing is now available and show a little illustration of how it works/where to find it. This would be mostly a teaser to entice people to want to try it.

• Provide step by step instructions on how to use tab sharing.

• Add it to the links at the bottom (and point to something like a SUMO page).

Which one of those sounds the most right?

Comment 3

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

(In reply to Matej Novak [:matej] from comment #2)
> • Say tab sharing is now available and show a little illustration of how it
> works/where to find it. This would be mostly a teaser to entice people to
> want to try it.
I  like this. And if we remember that they are already connected at the time of seeing this state, it could be something like, "Tab sharing is now available, click [sharing icon] in your chat window..."

Only con is that this type of messaging may not be right to use on an ongoing basis.

> • Provide step by step instructions on how to use tab sharing.
I don't think this is is the approach we want to take. Especially if they've just finished a tour, they'd be pushed into another step by step thing.

> • Add it to the links at the bottom (and point to something like a SUMO
> page).
I also like this, although that section is currently used for technical help. May not fit there.

:habber, :leetom thoughts?

Comment 4

[Matej Novak [:matej]]

(In reply to Cory Price [:ckprice] from comment #3)
> (In reply to Matej Novak [:matej] from comment #2)
> > • Say tab sharing is now available and show a little illustration of how it
> > works/where to find it. This would be mostly a teaser to entice people to
> > want to try it.
> I  like this. And if we remember that they are already connected at the time
> of seeing this state, it could be something like, "Tab sharing is now
> available, click [sharing icon] in your chat window..."
> 
> Only con is that this type of messaging may not be right to use on an
> ongoing basis.

It could be as simple as adding a subhead between the current copy and the links:

"Now see how easy it is to share your screen. Click the [sharing icon] to try it."

We could even put the icon into the string of copy (though I'm sure that would be tricky for l10n).

Also, worded that way, it doesn't say that screensharing is new, so it could live on for a while.

Comment 5

[Lee Tom]

I like the idea of pointing to the tab sharing icon while the user is still connected. That they can see the icon (and showing them which icon = Share) is a plus for educating the user on the UI

Comment 6

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

(In reply to Matej Novak [:matej] from comment #4)
> (In reply to Cory Price [:ckprice] from comment #3)
> > (In reply to Matej Novak [:matej] from comment #2)
> > > • Say tab sharing is now available and show a little illustration of how it
> > > works/where to find it. This would be mostly a teaser to entice people to
> > > want to try it.
> > I  like this. And if we remember that they are already connected at the time
> > of seeing this state, it could be something like, "Tab sharing is now
> > available, click [sharing icon] in your chat window..."
> > 
> > Only con is that this type of messaging may not be right to use on an
> > ongoing basis.
> 
> It could be as simple as adding a subhead between the current copy and the
> links:
> 
> "Now see how easy it is to share your screen. Click the [sharing icon] to
> try it."
> 
> We could even put the icon into the string of copy (though I'm sure that
> would be tricky for l10n).
> 
> Also, worded that way, it doesn't say that screensharing is new, so it could
> live on for a while.
:flod, any issues with adding an icon in the middle of a string?

Comment 7

[Holly Habstritt Gaal [:Habber]]

(In reply to Matej Novak [:matej] from comment #4)
> (In reply to Cory Price [:ckprice] from comment #3)
> > (In reply to Matej Novak [:matej] from comment #2)
> > > • Say tab sharing is now available and show a little illustration of how it
> > > works/where to find it. This would be mostly a teaser to entice people to
> > > want to try it.
> > I  like this. And if we remember that they are already connected at the time
> > of seeing this state, it could be something like, "Tab sharing is now
> > available, click [sharing icon] in your chat window..."
> > 
> > Only con is that this type of messaging may not be right to use on an
> > ongoing basis.
> 
> It could be as simple as adding a subhead between the current copy and the
> links:
> 
> "Now see how easy it is to share your screen. Click the [sharing icon] to
> try it."
> 
> We could even put the icon into the string of copy (though I'm sure that
> would be tricky for l10n).
> 
> Also, worded that way, it doesn't say that screensharing is new, so it could
> live on for a while.

+1 to this approach ("Now see how easy it is to share your screen. Click the [sharing icon] to try it.") since we don't want to lose the original message and links. There also isn't much room on this page to add more than a line and icon. 

It would be nice to actually point to the icon in the UI (I think that is what Lee is suggesting), but that is not in scope, so we have to do something in the page only, like Matej's suggestion.

Comment 8

[Matej Novak [:matej]]

(In reply to Holly Habstritt Gaal [:Habber] from comment #7)
> (In reply to Matej Novak [:matej] from comment #4)
> > (In reply to Cory Price [:ckprice] from comment #3)
> > > (In reply to Matej Novak [:matej] from comment #2)
> > > > • Say tab sharing is now available and show a little illustration of how it
> > > > works/where to find it. This would be mostly a teaser to entice people to
> > > > want to try it.
> > > I  like this. And if we remember that they are already connected at the time
> > > of seeing this state, it could be something like, "Tab sharing is now
> > > available, click [sharing icon] in your chat window..."
> > > 
> > > Only con is that this type of messaging may not be right to use on an
> > > ongoing basis.
> > 
> > It could be as simple as adding a subhead between the current copy and the
> > links:
> > 
> > "Now see how easy it is to share your screen. Click the [sharing icon] to
> > try it."
> > 
> > We could even put the icon into the string of copy (though I'm sure that
> > would be tricky for l10n).
> > 
> > Also, worded that way, it doesn't say that screensharing is new, so it could
> > live on for a while.
> 
> +1 to this approach ("Now see how easy it is to share your screen. Click the
> [sharing icon] to try it.") since we don't want to lose the original message
> and links. There also isn't much room on this page to add more than a line
> and icon. 
> 
> It would be nice to actually point to the icon in the UI (I think that is
> what Lee is suggesting), but that is not in scope, so we have to do
> something in the page only, like Matej's suggestion.

Could we use the icon as a bullet at the start of the copy string (if we can't put it in the middle)? I worry it's going to be hard to describe just in words.

Comment 9

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

NI :flod for comment 6

Comment 10

[Francesco Lodolo [:flod]]

We already do something similar with the "hamburger menu" icon in the middle of a sentence.

Check point #2 in "How do I disable a plugin?" (bottom right)
https://www.mozilla.org/en-US/plugincheck/

Compare to Italian where word and icon are reversed
https://www.mozilla.org/it/plugincheck/

If there is no word involved, we just a placeholder for the image and a note explaining what is going to happen.

Comment 11

[Matej Novak [:matej]]

(In reply to Francesco Lodolo [:flod] from comment #10)
> We already do something similar with the "hamburger menu" icon in the middle
> of a sentence.
> 
> Check point #2 in "How do I disable a plugin?" (bottom right)
> https://www.mozilla.org/en-US/plugincheck/
> 
> Compare to Italian where word and icon are reversed
> https://www.mozilla.org/it/plugincheck/
> 
> If there is no word involved, we just a placeholder for the image and a note
> explaining what is going to happen.

That's awesome! 

Thinking about it some more, I would tweak the line to one of the following:

"Now see how easy it is to share your screen. Click [sharing icon] to try it."

"Now see how easy it is to share your screen. Click the [sharing icon] icon to try it."

I also chatted with Lee today and he'd like to make a couple of small updates to this page, but nothing that will affect how it works with the FTU. Stay tuned.

Comment 12

[Lee Tom]

Attachment: FFx_Hello_FTU_01.jpg

I might've just blown-up my case for updating all these pages to the blue background. (Stay tuned on that issue) 

Here's a mock of the share screen feature tip in between the main text and the help links. LMK what you think.

Comment 13

[Francesco Lodolo [:flod]]

(In reply to Matej Novak [:matej] from comment #11)
> "Now see how easy it is to share your screen. Click the [sharing icon] icon
> to try it."

Note for dev: if we use the word "icon" associated to the image, we need to be able to revert the order in l10n (in Italian and other languages you say "icon (of) bubble", not "bubble icon").

In the current pages we use CSS to inject the image, so we have two separate classes for that purpose ("menu" and "menurev").

Comment 14

[Matej Novak [:matej]]

(In reply to Lee Tom from comment #12)
> Created attachment 8576999 [details]
> FFx_Hello_FTU_01.jpg
> 
> I might've just blown-up my case for updating all these pages to the blue
> background. (Stay tuned on that issue) 
> 
> Here's a mock of the share screen feature tip in between the main text and
> the help links. LMK what you think.

This looks awesome. Seeing it in layout, I wonder if we should provide a little more context to help the user find that icon:

"Now see how easy it is to share your screen. Click [sharing icon] in your conversation window to try it."

Comment 15

[Lee Tom]

Attachment: FFx_Hello_FTU_02.jpg

Another mockup with a different background color that's more consistent with a potential Hello product page revision.

Comment 16

[Matej Novak [:matej]]

(In reply to Lee Tom from comment #15)
> Created attachment 8577390 [details]
> FFx_Hello_FTU_02.jpg
> 
> Another mockup with a different background color that's more consistent with
> a potential Hello product page revision.

That looks awesome, Lee. I love it!

Comment 17

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

(In reply to Lee Tom from comment #15)
> Created attachment 8577390 [details]
> FFx_Hello_FTU_02.jpg
> 
> Another mockup with a different background color that's more consistent with
> a potential Hello product page revision.
Per a meeting with Winston today, this design and copy have been approved.

Comment 18

[Lee Tom]

It probably goes without saying, but we should probably use the actual icon for "screen sharing" from product UI in the messaging. Does anybody know where I could obtain that? Perhaps, Savaan?

Comment 19

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

:sevaan - do you have any high-res images of the screen sharing icon?

Comment 20

[Sevaan Franks [:sevaan]]

Attachment: Screen Sharing Icon

Here you go!

Comment 21

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

Just noting that this was approved by PMM in yesterday's meeting.

Comment 22

[Alex Gibson [:agibson]]

Hi Lee, could you please provide me with the rays-of-light background image seen in the attachment in Comment 15?

Thanks!

Comment 23

[Alex Gibson [:agibson]]

Actually Lee, if you have a PSD handy please feel free to provide that instead, as it makes it easier to check font sizing etc. Thanks

Comment 24

[Lee Tom]

No problem, Alex. 
http://cl.ly/3Y1H2T2F1N2F

I believe Ty and I are going to build out some variants of the new rays-o-lights backgrounds (to work in different scenarios). I'm guessing we could supply the #hexcolors for base colors and a transparent PNG (rays) in their various colors? Let us know if there's a better way to go. 

I'll be uploading this file to the DAM today - just wanted to get the file to Alex ASAP. 
Thanks! 

(In reply to Alex Gibson [:agibson] from comment #23)
> Actually Lee, if you have a PSD handy please feel free to provide that
> instead, as it makes it easier to check font sizing etc. Thanks

Comment 25

[Alex Gibson [:agibson]]

(In reply to Lee Tom from comment #24)
> No problem, Alex. 
> http://cl.ly/3Y1H2T2F1N2F
> 
> I believe Ty and I are going to build out some variants of the new
> rays-o-lights backgrounds (to work in different scenarios). I'm guessing we
> could supply the #hexcolors for base colors and a transparent PNG (rays) in
> their various colors? Let us know if there's a better way to go. 
> 
> I'll be uploading this file to the DAM today - just wanted to get the file
> to Alex ASAP. 
> Thanks! 
> 
> (In reply to Alex Gibson [:agibson] from comment #23)
> > Actually Lee, if you have a PSD handy please feel free to provide that
> > instead, as it makes it easier to check font sizing etc. Thanks

Thanks, Lee!

This sounds like a good way forward if the background effect is to be used on more pages in the future. It may be worth us creating a few new base styles in sandstone for this [1], so adding these rays to a new page could be as simple as adding a CSS class name to the page body.

https://github.com/mozilla/bedrock/blob/master/media/css/sandstone/sandstone-resp.less#L55

Comment 26

[Alex Gibson [:agibson]]

Hi Lee, I'm looking to update the Firefox Hello logo as shown in the PSD above. I was thinking it would be nice to use and SVG here if possible, but I can't seem to extract one from the PSD. I've had a look on assets.mozilla.org, but can't see the right one there either. 

Could you please link to one here in the bug? 

Many thanks again, Alex

Comment 27

[Lee Tom]

Hello SVG: http://cl.ly/0H200G2o2H2v

(In reply to Alex Gibson [:agibson] from comment #26)
> Hi Lee, I'm looking to update the Firefox Hello logo as shown in the PSD
> above. I was thinking it would be nice to use and SVG here if possible, but
> I can't seem to extract one from the PSD. I've had a look on
> assets.mozilla.org, but can't see the right one there either. 
> 
> Could you please link to one here in the bug? 
> 
> Many thanks again, Alex

Comment 28

[Francesco Lodolo [:flod]]

Note for the future: let's avoid idiomatic expressions like "Share and share alike", or at least think about non native speakers and give them an explanation when they need to work on this copy.

I'm working on exposing strings to localizers, and I had a hard-time figuring it out, until I discovered it's an idiomatic expression.

BTW, we're still missing a link for the Web-RTC encryption in the product page.