G Suite: Update copy on stats nudge to remove 'click here' language

[danhauk]

Changes proposed in this Pull Request

This updates the copy on the G Suite stats nudge to remove "click here" in the heading. Changes Customers can’t reach you at contact@%s - click here to add a mailbox -> Customers can’t reach you at contact@%s. Add a mailbox.

It looks like there was an A/B test in #31328 that settled on this copy. However, using "click here" for this heading is not great language.

• This text is not actually clickable, so "click here" doesn't apply. Even if it was a link, using "click here" in links is poor usability anyway).
• "Click here" removes some of the human element and personality we should strive for in our copy. It reads more like a marketing click campaign.

This copy is only a suggestion. Pinging @Automattic/editorial and @Automattic/catalyst for input.

Before	After

Testing instructions

• Checkout this branch or use the calypso.live link.
• Visit the Stats page with a site that has a domain and does not have G Suite.
• Make sure the copy is updated to match the After screenshot above.

[matticbot]

Test live: https://calypso.live/?branch=update/gsuite-stats-nudge-copy

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~98825 bytes added 📈 [gzipped])

name                   parsed_size            gzip_size
entry-main               +141453 B   (+9.2%)   +37170 B  (+10.0%)
entry-login              +141453 B  (+13.9%)   +37170 B  (+14.0%)
entry-domains-landing    +141453 B  (+35.0%)   +37170 B  (+35.1%)
entry-jetpack-cloud       -92803 B  (-38.5%)   -25362 B  (-34.8%)
entry-gutenboarding       +28584 B   (+1.6%)   +12677 B   (+2.6%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~279235 bytes removed 📉 [gzipped])

name                   parsed_size             gzip_size
posts-custom             -866414 B   (-75.9%)  -209199 B   (-74.8%)
posts                    -219054 B   (-44.2%)   -46141 B   (-39.3%)
me                       -155230 B   (-41.5%)   -25949 B   (-30.8%)
site-blocks              -103812 B   (-29.9%)   -22879 B   (-26.2%)
post-editor              -102756 B    (-5.1%)   -20425 B    (-3.8%)
activity                 -102756 B   (-18.3%)   -20425 B   (-15.0%)
devdocs                   +95765 B  (+174.7%)   +26432 B  (+187.2%)
import                    +79917 B   (+65.0%)   +20630 B   (+64.6%)
wp-super-cache            +75707 B   (+51.9%)   +15682 B   (+39.3%)
stats                     -72873 B    (-8.5%)   -16600 B    (-7.8%)
notification-settings     +55918 B   (+22.3%)   +11279 B   (+17.0%)
happychat                 -55754 B   (-18.5%)   -10817 B   (-13.9%)
comments                  -47589 B    (-8.6%)    -7057 B    (-5.7%)
woocommerce               +30025 B    (+1.5%)    +6901 B    (+1.3%)
purchases                 +30025 B    (+3.3%)    +6901 B    (+3.2%)
checkout                  +30025 B    (+2.7%)    +6902 B    (+2.5%)
media                     +16779 B    (+4.9%)    +3825 B    (+4.2%)
privacy                   +15185 B    (+7.3%)    +4779 B    (+8.7%)
marketing                  -7109 B    (-1.7%)    -3070 B    (-2.9%)
home                         +30 B    (+0.0%)       -4 B    (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~70317 bytes removed 📉 [gzipped])

name                                                         parsed_size            gzip_size
async-load-design-playground                                   -102756 B   (-5.7%)   -20425 B   (-5.0%)
async-load-design                                               -78027 B   (-4.2%)   -17832 B   (-4.2%)
async-load-design-blocks                                        -72731 B   (-2.6%)   -13524 B   (-2.1%)
async-load-lib-preferences-helper                               -51122 B  (-78.0%)   -13779 B  (-74.8%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx     -19038 B  (-12.6%)    -5304 B  (-14.2%)
async-load-lib-happychat-connection                             -13219 B  (-17.7%)     +547 B   (+3.2%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[belcherj]

@stephanethomas who would be a good person to make a call on this?

[stephanethomas]

Thanks for the ping @belcherj! @danhauk, @Automattic/larimar is now responsible for our G Suite integration. The change looks good to me, I'll put @fditrapani in the loop just in case.

Note that we have plans to revisit the copy of this nudge as it is known to be misleading (see p9j7e4-w1-p2#comment-875). I'm not sure when this will happen though, given our other priorities.

[stephanethomas]

Tested it, and it works fine .

[michelleweber]

So sorry for my laggy response, I was at the marketing division meetup last week and missed the ping! Good call on losing the "click here." I think your update is an improvement and looks fine, and offer two thoughts in case they're useful:

• I might slap a good ol' exclamation point on the new "add a mailbox" sentence.
• Do we think most people will know what adding a mailbox means, or would it be better to use a phrase like "Get a custom email address"?

[stephanethomas]

Do we think most people will know what adding a mailbox means, or would it be better to use a phrase like "Get a custom email address"?

I don't know the answer to that question but I think that if we go that route we could also revisit the first part of the heading. As I mentioned earlier, this part is confusing as it implies we know customers are trying to contact the user. Your proposal seems like a clearer alternative to me:

Get a custom email address at contact@%s
Let customers reach you at contact@%s. We've partnered with Google to offer you email, storage, docs, calendars, and more integrated with your site.

We also refer to this email as professional email in other pages, we may want to reuse the same term here (it's just a suggestion though):

Get a professional email address at contact@%s
Let customers reach you at contact@%s. We've partnered with Google to offer you email, storage, docs, calendars, and more integrated with your site.

I would be tempted to refine the sentence below as well - to make it clearer that users can actually create other mailboxes than contact@domain, and to avoid the repetition. Here is an attempt:

Get a custom email address at contact@%s
Let customers reach you at a professional email that uses your domain name. We've partnered with Google to offer you email, storage, docs, calendars, and more integrated with your site.

What do you think @michelleweber? 🙂

[michelleweber]

I probably wouldn't bother with the "professional" here in the heading, but I like it in the text (also -- on the other page where it appears, it shouldn't be capitalized). I like this tweaked version of your copy:

Get custom email addresses with [domain]
An email address with like contact@[domain] looks pro and helps customers trust you. We've partnered with Google to give you email, storage, docs, calendars, and more, all integrated with your site and domain.

(That said, I'd also be all for getting rid of the problematic "click here" language quickly while we work on larger improvements.)

[a8ci18n]

⚠️ This change will be queued for retranslation. We'll display the English text until then.

[a8ci18n]

🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.

[stephanethomas]

@danhauk: a heads-up that I've rebased this branch against master, and squashed your commits.

(also -- on the other page where it appears, it shouldn't be capitalized

I've fixed that page.

I like this tweaked version of your copy;

@michelleweber: I've implemented that change (except for with like as this looked like a typo), here is how the banner would look like now:

If both of you are ok with those changes, let's merge them 🙂.

[danhauk]

Looks great, thanks for taking that @stephanethomas!

[olaseni]

Works great, and the copy is much more relatable.

[michelleweber]

Looks great!