Jetpack: [Shortcopy] Disconnected full-screen modal (displays after plugin activation)

[folletto]

Refocusing Jetpack around Security and Performance.

Update to reflect new homepage designs.
Design TBD

DEVELOPMENT LOCATION DETAILS:

• This page is located on plugins.php immediately after jetpack activation
• And will replace the page located on admin.php?page=jetpack#/ as well. But please make sure they have different tracks events.

Reach out to @jeffgolenski for questions

[jeffgolenski]

@joanrho @keoshi Much like the reframing I did with the connection banner in this issue, here's my idea for the new full page connection screen. Again, would be super quick to implement. See comments here: https://github.com/Automattic/jetpack/issues/11532

Notes:
Final content: tbd
Final illo color: tbd

[keoshi]

I'm loving this new direction! If Security and Performance are on the same plane in terms of offering, could we make the visuals reflect that? Quick idea of having two columns (ignore everything else, especially the illo colors):

[jeffgolenski]

@keoshi omg yeah. I love that.

[shaunandrews]

I dig the overall direction here. I wonder about the use of the primary green in the illustration (I know it says sample) as it takes away the focus from the buttons.

I'm also unsure about the repetition with the TOS line and the double primary buttons. I understand the want to have the primary action button "above the fold" but I think it makes more sense below the two feature callouts. If you reduce the size of the illustrations and shorten the descriptions you can remove the button and TOS line at the top, along with the "Keep your site secure..." heading at the bottom.

Here's a quick cut-and-paste mockup:

[jeffgolenski]

@shaunandrews Brilliant. I love that take. So much simpler and focused. The addition of "not now, thank you." makes it a lot friendlier as well. Thank you for helping along with this. I think the only changes we'd have to make is to place the TOS messaging above the CTAs for legal reasons discussed in the past (conveniently I can't find that conversation right now.

I'm going to flesh this out a little more and I think we'll be good to go.

[shaunandrews]

The addition of "not now, thank you." makes it a lot friendlier as well.

FWIW, I just cut-and-paste from @keoshi's image above. I didn't add, only removed.

[jeffgolenski]

Just a revision. Want to get this posted before visual status - still need to update the illustration color. @shaunandrews @keoshi

[jeffgolenski]

Per the conversation about our connection banner, here

Here's the updated full-screen connection page using our current color scheme, just revised content and structure.

final content tbd. @keoshi @joanrho @shaunandrews

[jeffgolenski]

@dereksmart This is ready for dev. We'll work on the content in development. I updated the issue itself to describe this page's locations. Let me know if the team has any questions there. cc @keoshi

[jeffgolenski]

@Automattic/editorial Hey friends,

Our this page, we're looking at more focus just on Security and Performance. Was wondering if we could get some help making these two descriptions a little more concise:

Jetpack free protects your site against brute force attacks and unauthorized logins.

Our premium security servives also include unlimited backups of your entire site, spam protection, malware scanning, and automated fixes.

Activate Jetpack’s site accelerator to load pages faster, optimize your images, and serve your images and static files (like CSS and JavaScript) from our global network of WordPress.com servers.

Speed up your site for mobile viewers and reduce bandwidth usage, which may lead to lower hosting costs.

I know this can definitely use some help. thank you so much.

[eliorivero]

@jeffgolenski I'm working on this and would be nice to have:

• font sizes (heading, body, fine print)
• the two illos

[jeffgolenski]

@eliorivero

Thanks for jumping in. The illustrations are already on that page, so this should be quick work. It's basically just stripping out a lot of what's there and leaving the security and performance text side-by-side. For now, let's just make the font-size of the p 14px. (I think it's 13px now).

[eliorivero]

Thank you!

[michelleweber]

I tightened up, condensed both to single paras and rephrased a little. I also took out some details that don't really help you on this page -- you want to get people to click the button, and you don't need every detail to get that done. I think we can lose them here without creating any confusion or being misleading.

Jetpack protects you against brute force attacks and unauthorized logins. Basic protection is always free, while premium plans add unlimited backups of your whole site, spam protection, malware scanning, and automated fixes.

Activate site accelerator tools and watch your page load times and hosting costs drop -- we'll optimize your images and serve them from our own powerful global network of servers, and speed up your mobile site to reduce bandwidth usage.

[jeffgolenski]

@michelleweber You are sensational. Thank you!

[eliorivero]

Updated copy. https://github.com/Automattic/jetpack/pull/11573 is now ready for review.