Wp-calypso: Reactivate expired plan task card on My Home

[amamujee]

When a plan is expiring or has expired, there's no in-product messaging. As a result, there's no clear path for users to reactivate their plan.

As a user, I need to know my plan has expired so I can easily reactivate it and get my site features back.

Expiring in 30 days

• When a plan is expiring in the next 30 days, we prioritize a Customer Home view to show a task card prompting renewal.
• Admins who are not the plan owner are shown messaging to contact the plan owner.
• Non-admins do not see this prompt.

Expired

• When a plan has expired, the regular task card becomes an urgent notice task card prompting reactivation (a new pattern we'll establish as part of this work.
• Admins who are not the plan owner are shown messaging to contact the plan owner.
• Non-admins do not see this prompt.

The heavy contrast creates a sense of urgency here. The dark gray background matches the upsell nudges, choosing a single color for anything we want to grab the users' attention to.

This is the first of these types of urgent notices and we need to be careful not to abuse the pattern for things that aren't critical since it's so heavy.

Flow & logic

For a v1 starting point, here's the logic we'll use to display these two cards:

1. Plan expiring in 30 days — Show white task card to prompt renewal
2. Plan expired — Show urgent task card to prompt reactivation

In each case the primary button would take the user directly to checkout. Data shows putting people in checkout (vs. Plans) has a better conversion rate.

Notices

As a nice-to-have or future enhancement, we show notifications in addition to these task cards. Notifications are very helpful, and can be seen across different clients like the native WP app.

See flow blueprint above for all notification variations.

[danhauk]

It seems the main problem this is trying to solve is not necessarily that we need a task card, but that there's no clear indication in-product that a plan has expired. As a result, there's no clear path for users to reactivate their plan.

As a user, I need to know my plan has expired so I can easily reactivate it and get my site features back.

Here are some explorations to solve the problem, starting with the proposed task card addition. Others below it are related but may increase the scope and/or technical lift required.

Urgent task card

When a plan has expired, we show an urgent notice task card that came out of @jancavan's excellent work on site-wide notices.

The heavy contrast creates a sense of urgency here. The dark gray background matches the upsell nudges, choosing a single color for anything we want to grab the users' attention to.

This is the first of these types of urgent notices and we need to be careful not to abuse the pattern for things that aren't critical since it's so heavy.

---

Masterbar notification

Another possibility is to use the masterbar notification panel to display a message about expired plans. We currently don't do anything like this for plans AFAIK, just for expired domains. Something like this isn't quite as in your face as an urgent task card, and available everywhere in WordPress.com. However, it could be more easily missed if users aren't used to checking their notifications all the time (like we are). Using both might be too heavy handed.

Modal

Another alternative I explored is using a modal to completely interrupt the user's workflow. This could also be available everywhere, like the masterbar notification above, but doesn't suffer from the visibility issue. This has its own problems of users dismissing without reading it because it's in their way.

Plan expiring soon

In doing some discovery here, I realized we don't do anything in-product when a plan is about to expire either. There are a few emails that go out in advance if we can't charge the card, but there are no cards, notices, or nudges anywhere in WordPress.com.

When a plan is expiring soon, we can take a slightly lighter approach using a normal task card. Some logic would need to be in place on the API side to determine at what point we switch from the normal task card to the urgent card.

cc @Automattic/dotcom-manage-design for any feedback on whether some of these other approaches would be better than a task card.

[sixhours]

I personally think the card approach works best, esp. where My Home is the default landing page -- I would guess the majority of people will see it, especially if it's high-contrast. Putting it in the notifications panel is less obvious, and the modal overlay is a bit too much.

Agreed that we'd want to use this pattern sparingly to avoid fatigue, though. I also like the idea of a lower contrast card to notify folks when their plans are about to expire, so hopefully we don't have to show the high-contrast card as often!

[danhauk]

Thanks @sixhours, I agree the card approach works best. It strikes a good balance between disruptive and out of the way.

As far as the logic goes for what to show when, here's what I'm thinking at least as a starting point to iterate from:

1. Plan expiring in 30 days — Show white task card to prompt renewal
2. Plan expired — Show urgent task card to prompt reactivation

In each case the primary button would take the user directly to checkout. Data shows putting people in checkout (vs. Plans) has a better conversion rate.

Flow blueprint:

@davemart-in @lcollette @gwwar @sixhours @fditrapani Any objections to this logic as a starting point for v1?

[danhauk]

Also, I'd love to get some eyes from @Automattic/editorial on the copy for these cards. Some of it feels worded a bit weird.

Here are some design guidelines for the copy pulled from the field guide, though I chose to intentionally break them for the urgent card heading because I couldn't think of anything that didn't sound weird. Feel free to do the same.

• The heading should be in clear, action-oriented language.
• Lead with the outcome – think about what benefit a task provides for a user and communicate that, vs. laying out the technical part of the task (e.g. “Learn from the pros” vs. “Register for a webinar”)
• Try to educate the user about the why.
• Keep copy as short and sweet as possible while still communicating value.

[gwwar]

Who will see these? Just the plan owner or will other admins get notices to reach out to the plan owner?

I don't think we need to take an either/or approach re tasks vs notices. Notices are still very helpful, and can be seen across different clients like the native WP app. We don't need to implement both at once either though.

[danhauk]

Who will see these? Just the plan owner or will other admins get notices to reach out to the plan owner?

Thanks for bringing this up, I always seem to forget about multi-user sites. We can definitely show these to all admins. For those who aren't plan owners we'll have to remove the primary button to renew and just have the secondary hide link, or just make the primary button dismiss with a Got it label (not a great label but just to get the idea).

I don't think we need to take an either/or approach re tasks vs notices.

Great point about being seen across different clients. I think especially in the native app where users are more likely to check notifications there.

[fditrapani]

Thanks for the ping @danhauk. I like what you're proposing with the light card for expiring products and the dark one for expired ones — this is a great start. I also agree with @gwwar's comment about using the task and notice approach — it would be great to have a notice for this too.

[jancavan]

Plan expiring in 30 days — Show white task card to prompt renewal
Plan expired — Show urgent task card to prompt reactivation

@danhauk Do you think we should show the dark notice 3-5 days before expiration?

For those who aren't plan owners we'll have to remove the primary button to renew and just have the secondary hide link, or just make the primary button dismiss with a Got it label (not a great label but just to get the idea).

We should probably also change the copy to "Contact your site's admin..." I think that's what shows up for non-admins in one of the expiration notices.

[carolynannewells]

Hello! Carolyn from Editorial here! We got your ping. :) I would change the wording a little bit to read:

Your Premium plan subscription expired on May 21, 2020. Reactivate now to continue enjoying features such as increased storage space, access to live chat support, and automatic removal of WordPress.com ads.

Let me know if you would like me to look at anything else. :)

[davemart-in]

We should figure out if this should be a card, or a modal that pops up.

[kwight]

Server-side code started in D47225-code.

[kwight]

D47225-code deployed, this is live in production. 👍