wp-calypso Added MailPoet upsell to email management home page

Added MailPoet upsell to email management home page

Open fredrikekelund opened this issue 1 year ago • 18 comments

Proposed Changes

This PR adds an upsell link for the MailPoet plugin to the email management home screen (/email/:site_slug). The link leads to the marketplace page for the MailPoet plugin (/plugins/mailpoet/:site_slug) and records a Tracks event when clicked.

It's worth noting that because this is shown on the /email/:site page, it will only be visible to users who don't already have an email subscription or to users with multiple domains (because users with a single domain that has email will be automatically redirected from /email/:site to /email/:domain/manage/:site).

EDIT: I've replaced the original screenshot with the latest version.

mailpoet-upsell

Testing Instructions

Have a site with one custom domain without any existing email subscription, or have a site with multiple custom domains (with or without email subscriptions)
Go to Upgrades > Emails
Ensure that the MailPoet upsell is displayed as per the screenshot above
Ensure that the link leads to the correct destination
Ensure that a Tracks event is recorded when clicking the link

Pre-merge Checklist

[ ] Have you written new tests for your changes?
[ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
[ ] Have you checked for TypeScript, React or other console errors?
[ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
[ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

Related to #

Aug 09 '22 08:08 fredrikekelund

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-39647

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-39647&env=jetpack

Aug 09 '22 08:08 github-actions[bot]

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

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

name        parsed_size           gzip_size
entry-main       +120 B  (+0.0%)       +1 B  (+0.0%)

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

Sections (~8107 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
email        +28760 B  (+4.9%)    +8091 B  (+4.8%)
checkout        +43 B  (+0.0%)     +102 B  (+0.0%)
domains         +26 B  (+0.0%)      +51 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.

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.

Aug 09 '22 08:08 matticbot

What if the user already has enabled this plugin? Shouldn't we hide this upsell if that's the case? Regarding the look-and-feel of this upsell, shouldn't we follow design patterns we already use in other sections? Here is an example of what I'm referring to:

Aug 09 '22 09:08 stephanethomas

What if the user already has enabled this plugin? Shouldn't we hide this upsell if that's the case?

Excellent point. I'll look into that.

Regarding the look-and-feel of this upsell, shouldn't we follow design patterns we already use in other sections?

We haven't gotten any specific design feedback on the upsell. I would be cautious about adding something large (like the topmost box in your screenshot), especially if people can't close it.

I suppose we could also pursue a larger, more banner-like appearance, but I would prefer to get a mock-up from design to work off of in that case.

Aug 09 '22 09:08 fredrikekelund

I suppose we could also pursue a larger, more banner-like appearance, but I would prefer to get a mock-up from design to work off of in that case.

Maybe @semihakocer or @wensco could chime in, and share how far we should go in term of design for that upsell? I agree that the upsell for Yoast is too big 😀. We could also keep it like you did but remove the Newsletters header - so it's a bit different from the other sections:

Aug 09 '22 09:08 stephanethomas

We could also keep it like you did but remove the Newsletters header - so it's a bit different from the other sections

I like that! I made that change and increased the top margin.

I also took the opportunity to address some style inconsistencies between EmailListActive and EmailListInactive (see the difference in height for the SectionHeader for the two lists in Stéphane's previous screenshot).

Aug 09 '22 10:08 fredrikekelund

I also took the opportunity to address some style inconsistencies between EmailListActive and EmailListInactive (see the difference in height for the SectionHeader for the two lists in Stéphane's previous screenshot).

Wow that's cool! This difference has been bothering me for some time but it seemed it would only be visible when stylesheets are loaded in a specific order. I'm glad you've fixed that!

Aug 09 '22 10:08 stephanethomas

For reference, here's what the upsell looks like now:

mailpoet-upsell

Aug 09 '22 10:08 fredrikekelund

Maybe @semihakocer or @wensco could chime in, and share how far we should go in term of design for that upsell? I agree that the upsell for Yoast is too big 😀. We could also keep it like you did but remove the Newsletters header - so it's a bit different from the other sections:

The new design looks better. We can use the JITMs but I think we might want to reserve them for our promotions instead of an evergreen Newsletter highlight. It might make sense to ask design to see if we can highlight this part in a different way. (More JITM design could be found here: https://mc.a8c.com/jitms/) Also check this component please: https://wpcalypso.wordpress.com/devdocs/blocks/upsell-nudge

Aug 09 '22 13:08 semihakocer

I'll throw something together with an UpsellNudge or Banner component so that we have something to compare with!

I think it might be sound to visually distinguish between the upsell and the domains.

Aug 09 '22 13:08 fredrikekelund

How will we handle displaying this upsell for users who do not have a plan that supports installing plugins? Currently users need to have Business, eCommerce, or the now-legacy Pro plan to install their own plugins.

Aug 09 '22 14:08 wensco

With a Banner instead of the current implementation, we would get something like this. I opted to move the upsell nudge to the top, since that felt more natural with this format.

Thoughts or feedback?

mailpoet-upsell-nudge

Aug 09 '22 14:08 fredrikekelund

How will we handle displaying this upsell for users who do not have a plan that supports installing plugins?

It might be smart to only show the upsell to users on plans that support plugins...

The CTA URL will technically work for all users, regardless of what plan they are on and I guess you could argue that this might be an argument for users to upgrade their plan. But my suspicion is that the average user might be somewhat confused about the fact that they have to purchase a new WordPress.com plan when they only meant to install the newsletter solution that we showed them an ad for.

WDYT @wensco?

Aug 09 '22 14:08 fredrikekelund

my suspicion is that the average user might be somewhat confused about the fact that they have to purchase a new WordPress.com plan when they only meant to install the newsletter solution that we showed them an ad for.

Agree! And thank you for so nicely articulating what I was getting at with my question. :) It feels slightly manipulative/misleading to offer a newsletter solution without it being clear that they need to upgrade (and to our most expensive plans at that).

It might be smart to only show the upsell to users on plans that support plugins...

I like this approach personally. If that performs well, we can then consider coming up with a different version for users who would need to upgrade their plan to make that clear.

Aug 09 '22 16:08 wensco

I went ahead and committed the Banner approach. It isn't necessary more visually appealing, but I think there are a few clear pros:

it's a recognizable style across Calypso
users can close it
we can fit more copy in there

Here's a screenshot of the latest iteration:

mailpoet-upsell

Aug 10 '22 07:08 fredrikekelund

With a Banner instead of the current implementation, we would get something like this. I opted to move the upsell nudge to the top, since that felt more natural with this format. Thoughts or feedback?

That looks good to me 👍.

Aug 10 '22 12:08 stephanethomas

I went ahead and committed the Banner approach. It isn't necessary more visually appealing, but I think there are a few clear pros:

Looks great to me!

Aug 10 '22 12:08 semihakocer

I think it's a fair assumption that most users will not have more than one custom domain for their site. As @AllTerrainDeveloper pointed out, these users never see the EmailHome component, because they are automatically redirected to either the comparison page or the management page.

That's why I went ahead and moved the upsell to the EmailPlan component instead (visible at /email/:domain/manage/:site_slug). This should make it visible to more users.

Here's a screenshot for reference:

mailpoet-upsell