Wp-calypso: Jetpack Onboarding: Copy suggestions for connection steps mid-flow

[joanrho]

I went through all the JPO flows on p7rd6c-1sX and thought the connection steps that interrupt JPO felt a bit jarring without any explanations for users. Here are some copy suggestions for the three connection steps from Contact form, Stats, and Business address:

Add contact form step
In order to add a Contact Us page with a contact form to your site, you'll need to connect to Jetpack by logging in to your WPcom account to set up Jetpack or by creating an account in one easy step.

Activate stats step
In order to activate stats on your site, you'll need to connect to Jetpack by logging in to your WPcom account to set up Jetpack or by creating an account in one easy step.

Add a business address widget step
In order to add Jetpack's business address widget to your site, you'll need to connect to Jetpack by logging in to your WPcom account to set up Jetpack or by creating an account in one easy step.

@benhuberman what do you think of the above?

[benhuberman]

I think it would be somewhat clearer / easier to parse if we split these somewhat long-ish sentences in two, for example:

In order to [goal], you'll need to connect to Jetpack. You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step.

Question: is "create an account" or "in one easy step" going to be linked to where users actually accomplish that? Otherwise, it might make sense to instruct users as to how/where to finish that step.

[joanrho]

Thanks, @benhuberman, these sound great! I've edited the three to include your changes. Yes, the account creation is one easy step and it automatically brings users back to the path they were on before the connection.

@tyxla can we please add the following to the tops of the connection screens as the subtitle text?

Add contact form step
In order to add a Contact Us page with a contact form to your site, you'll need to connect to Jetpack. You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step.

Activate stats step
In order to activate stats on your site, you'll need to connect to Jetpack. You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step.

Add a business address widget step
In order to add Jetpack's business address widget to your site, you'll need to connect to Jetpack. You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step.

[ockham]

(Left a reply on p7rd6c-1sX-p2.)

[tyxla]

@joanrho the copy makes sense, however when the user is already logged in, the "You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step." copy looks obsolete. Is it alright if we simply don't show this part of the copy to logged in users, or should we present them with a different copy?

Essentially, in Jetpack Connect we currently display different subhead copy when:

• User is logged out - You are moments away from connecting your site.
• User is logged in - Jetpack is finishing up the connection process
• User is logged in, and has just successfully connected - Thank you for flying with Jetpack

So the question is: how should we account for all these cases when going through the JPO flow for each of the steps?

[joanrho]

@tyxla Ah, I see what you mean. Yes, I agree that it makes sense not to show it for logged in users.

[tyxla]

I'm not 100% sure how we're expected to proceed with all cases - on the login screen, on the signup screen, on the Jetpack Connect authorize approval step...

@joanrho could I please ask you to create a before and after of how we should alter each case? There are many cases and I just want to make sure we're doing it right.

[joanrho]

@tyxla Thanks for prompting me to go through each and every single case. I've added some copy versions for the Logged In cases hadn't been considered. cc @benhuberman for review.

Does this make sense?

For Logged Out users:

(Add contact form step)
In order to add a Contact Us page with a contact form to your site, you'll need to connect to Jetpack. You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step.

(Activate stats step)
In order to activate stats on your site, you'll need to connect to Jetpack. You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step.

(Add a business address widget step)
In order to add Jetpack's Business Address Widget to your site, you'll need to connect to Jetpack. You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step.

(Jetpack connection step)
In order to set up Jetpack, you’ll need to connect to WordPress.com. You can either log in to your WordPress.com account to set up Jetpack, or create an account in one easy step.

For Logged In users:

(Add contact form step)
In order to add a Contact Us page with a contact form to your site, you'll need to connect to Jetpack. Good news: you're already logged in to your WordPress.com account, we’re completing this connection for you.

(Activate stats step)
In order to activate stats on your site, you'll need to connect to Jetpack. Good news: you're already logged in to your WordPress.com account, we’re completing this connection for you.

(Add a business address widget step)
In order to add Jetpack’s Business Address Widget to your site, you’ll need to connect to Jetpack. Good news: you're already logged in to your WordPress.com account, we’re completing this connection for you.

(Jetpack connection step)
In order to set up Jetpack, you’ll need to connect to WordPress.com. Good news: you're already logged in to your WordPress.com account, we’re completing this connection for you.

Mockup examples based on the flows posted on p7rd6c-1sX: https://cloudup.com/ctaKJo5RFXQ

[benhuberman]

The logged-out language looks good to me. For the logged-in version, I'd suggest a couple of tweaks:

In order to [action], your site needs to connect to WordPress.com. Good news: you're already logged in to your WordPress.com account, so we're connecting your site for you.

Does that work, @joanrho ?

Small nit: when talking about specific widgets (as opposed to widgets, generically), we usually go with title case (like other feature names), so "business address widget" s/b "Business Address Widget."

[joanrho]

@benhuberman sounds good to me! Thanks so much.

I updated my copy paragraphs to include those changes.

[tyxla]

@joanrho we've been discussing possible implementation with @ockham and it seems that in order to achieve that we'll need to implement Jetpack Onboarding-specific copy in two separate sections that are completely distinct from the Jetpack Onboarding one:

• Login (the login block)
• Jetpack Connect + Jetpack signup

FWIW, we've been striving to keep those sections independent and this implementation would be a step against this effort.

As we're working on interconnected Jetpack bits throughout the Calypso codebase, we're finding other bits where sections might be interacting in a better way while they remain modular. We'll continue exploring how best to approach such cases, while keeping independence and modularity.

That being said, we're a bit hesitant to go ahead with this one at this time, and we're willing to punt it for a future iteration, at a point where we have a more suitable environment for interconnecting independent bits like this.

What do you think?

[ockham]

Yeah, been discussing this with @tyxla in Slack -- the trouble is that we would have to spill JPO specific information into JPC, which is otherwise pretty agnostic of JPO. This goes kind of against principles of encapsulation and modularity, so I'd also rather avoid it...

[joanrho]

That sounds good to me for now. We can think of better solutions when we revisit this in the future. Thanks @tyxla and @ockham!

[joanrho]

Hey @tyxla @jeffgolenski! Revisiting this to see if it's still an issue we should keep open. What are your thoughts given the way things stand now?

[tyxla]

@joanrho AFAIK the Jetpack Onboarding in Calypso project (JPO) is no longer being developed, and I'm not sure if it's planned to be used for anyone (cc @Automattic/luna for confirmation). So closing this one makes sense to me 👍

[simison]

Correct, this flow isn't in use and we (Luna) are not planning on bringing it back as-is.

I'll close this. Thanks, everyone!