Checkout Plan Upsell: Improve UX by adding a "Plan" column heading #92727

m1r0 · 2024-07-16T16:57:12Z

Related to p1720709664946129-slack-C02NWDZBL0H and p1721070418619219-slack-C02NWDZBL0H

Proposed Changes

Add a "Plan" column to the checkout plan upsell component.
Show the "Cost" column when there is no intro offer. When there is an intro offer, the "Two-year cost" column is shown as before.
Use the adjective form of the plan label.

Before (with intro offer)	After (with intro offer)

Before (without intro offer)	After (without intro offer)

Why are these changes being made?

We found the upsell component a bit confusing when discounts are involved. This change attempts to lower the confusion. You can read more about it in the Slack threads mentioned above.

Testing Instructions

Go to http://calypso.localhost:3000/setup/migration/
Choose WordPress.
On the checkout page, make sure the upsell component in the sidebar has the "Plan" column heading and the adjective form of the plan label is used.
To test the upsell without an intro offer, go through the standard checkout http://calypso.localhost:3000/start/ flow and make sure the columns are there.
Make sure the plan variants are using the noun form on the variant dropdown:

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
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)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-07-16T16:57:25Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129862&env=a8c-for-agencies

matticbot · 2024-07-16T16:58:39Z

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

Sections (~131 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout       +765 B  (+0.0%)     +131 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 (~131 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal            +765 B  (+0.0%)     +131 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal       +765 B  (+0.1%)     +131 B  (+0.0%)

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.

donnapep

Now that Plan is the column heading, the entry Two years isn't correct. It should be Two year.

matticbot · 2024-07-17T10:52:07Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

blaze-dashboard
command-palette-wp-admin
help-center
notifications
odyssey-stats
whats-new
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/improve-upsell-component-text on your sandbox.

m1r0 · 2024-07-17T12:41:13Z

Thanks for the review @donnapep!

Now that Plan is the column heading, the entry Two years isn't correct. It should be Two year.

Funny, because this was the exact thing I was trying to avoid (p1721143498561319/1720709664.946129-slack-C02NWDZBL0H). 😅 But I see your point. I've updated the plan labels (and the screenshots) to use the compound adjective form, i.e. "Two-year". Let me know if this makes more sense or if I should stick to "Two year" instead.

I've also changed the "Plan" / "(Two-year) Cost" columns to be always visible. They were showing only for an intro offer before.

cc @bohdankit07 for visibility.

jjchrisdiehl

Maybe I am misreading this, but to me it looks like the monthly billing term is incorrect:

If we're using this sidebar callout to compare what a plan billed monthly would cost over 24 months versus a plan billed every two-years then we would need to show:

Billing interval	Cost over two years
Monthly	$216
Biennially	~~$216~~ $78

Especially since the context of the component is "hey, if you consider sticking with us for two years, you'll end up saving a lot of money compared to being billed each month over that same time period."

But currently this component doesn't work like that. Instead we say "here is the cost of a One Month plan ($9) and here is the cost of a Two-year plan ($216) and here is the cost of that Two-year plan discounted ($78).

To me, this is more confusing since it is very easy to not understand where the $216 figure comes from and to just assume that it is the cost of plan when billed in two-year increments.

I know we wanted to stop using terms like 'biennially, triennially etc' in favor of less wordy alternatives, but saying 'One Month Plan' and 'Two-year Plan' is different than saying 'Plan billed monthly' and 'Plan billed every two years'.

jjchrisdiehl · 2024-07-17T22:53:33Z

client/my-sites/checkout/src/components/checkout-sidebar-plan-upsell/index.tsx

 					<div className="checkout-sidebar-plan-upsell__plan-grid-cell">
-						{ currentVariant.variantLabel }
+						<strong>{ __( 'Plan' ) }</strong>


Would we want to consider something that indicates it is the billing term, or, 'plan length'?

"Plan" is usually used to describe the feature set of the subscription whereas billing term is often used to indicate how many units of time until expiration of the plan. So in this case, 'billing term' or some variant of that would likely be more accurate as a header.

jjchrisdiehl · 2024-07-17T23:05:14Z

client/my-sites/checkout/src/components/checkout-sidebar-plan-upsell/index.tsx

+						<strong>{ __( 'Plan' ) }</strong>
+					</div>
+					<div className="checkout-sidebar-plan-upsell__plan-grid-cell">
+						<strong>{ isComparisonWithIntroOffer ? __( 'Two-year cost' ) : __( 'Cost' ) }</strong>


For some reason 'Two-year cost' doesn't sit well with me as a header. Maybe it is because I interpret this in the same way as the second line item where it also says 'Two-year'.

But I am not sure what alternative would fit better.

I'm also not sure why there is a differentiation between annual -> biennial and monthly -> biennial here. Wouldn't the second line still be the monthly cost over two years compared to the two-year billing term of the plan?

m1r0 · 2024-07-18T16:18:01Z

Hey, thanks for the review @jjchrisdiehl!

Maybe I am misreading this, but to me it looks like the monthly billing term is incorrect
Would we want to consider something that indicates it is the billing term, or, 'plan length'?

I absolutely agree with you - the wording and the calculations are confusing. I would be happy to change those but I'm missing context and the idea of this PR was to make a small improvement. Maybe it would be best to involve @bohdankit07 in this decision.

@bohdankit07, do you think we should update the calculations and the copy as @jjchrisdiehl is suggesting?

donnapep · 2024-08-06T12:20:42Z

@m1r0 Could we nudge this PR along? We can go with what we have for now. I'll try to give it another review soon, but if not, please seek approval from someone else. 🙇🏻‍♀️

m1r0 · 2024-08-07T08:56:30Z

Thanks for nudging me to nudge the PR, Donna. 😄 🙇

@bohdankit07, can you provide some guidance? Do you think these changes make an improvement?

m1r0 · 2024-12-13T14:23:26Z

Closing because there is no consensus on this one.

bohdankit07 · 2024-12-13T15:28:45Z

@m1r0 I apologize for missing this one! It has just resurfaced in my email notifications. We should ship it as it clarifies the calculations. Thank you!

m1r0 · 2024-12-13T15:32:49Z

Adding it to my to-do list. Thanks Bohdan!

m1r0 · 2025-01-15T14:59:28Z

The PR was rebased. It's ready for review.

m1r0 requested a review from a team as a code owner July 16, 2024 16:57

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 16, 2024

m1r0 self-assigned this Jul 16, 2024

m1r0 requested a review from a team July 16, 2024 16:57

m1r0 added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Jul 16, 2024

donnapep reviewed Jul 16, 2024

View reviewed changes

m1r0 removed the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Jul 17, 2024

jjchrisdiehl reviewed Jul 17, 2024

View reviewed changes

m1r0 closed this Dec 13, 2024

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Dec 13, 2024

m1r0 reopened this Dec 13, 2024

m1r0 added 3 commits January 15, 2025 16:07

Checkout Upsell: Improve UX by adding a "Plan" column

55f1e2c

Always show the "Plan" / "Cost" columns

a013424

Use the product variant label adjective form on the upsell

2560238

m1r0 force-pushed the update/improve-upsell-component-text branch from 1533c99 to 2560238 Compare January 15, 2025 14:20

m1r0 requested a review from donnapep January 15, 2025 14:57

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout Plan Upsell: Improve UX by adding a "Plan" column heading #92727

Checkout Plan Upsell: Improve UX by adding a "Plan" column heading #92727

m1r0 commented Jul 16, 2024 •

edited

Loading

github-actions bot commented Jul 16, 2024 •

edited by matticbot

Loading

matticbot commented Jul 16, 2024 •

edited

Loading

donnapep left a comment

matticbot commented Jul 17, 2024 •

edited

Loading

m1r0 commented Jul 17, 2024 •

edited

Loading

jjchrisdiehl left a comment

jjchrisdiehl Jul 17, 2024

jjchrisdiehl Jul 17, 2024

jjchrisdiehl Jul 17, 2024

m1r0 commented Jul 18, 2024 •

edited

Loading

donnapep commented Aug 6, 2024 •

edited

Loading

m1r0 commented Aug 7, 2024 •

edited

Loading

m1r0 commented Dec 13, 2024

bohdankit07 commented Dec 13, 2024

m1r0 commented Dec 13, 2024

m1r0 commented Jan 15, 2025

Checkout Plan Upsell: Improve UX by adding a "Plan" column heading #92727

Are you sure you want to change the base?

Checkout Plan Upsell: Improve UX by adding a "Plan" column heading #92727

Conversation

m1r0 commented Jul 16, 2024 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jul 16, 2024 • edited by matticbot Loading

matticbot commented Jul 16, 2024 • edited Loading

donnapep left a comment

Choose a reason for hiding this comment

matticbot commented Jul 17, 2024 • edited Loading

m1r0 commented Jul 17, 2024 • edited Loading

jjchrisdiehl left a comment

Choose a reason for hiding this comment

jjchrisdiehl Jul 17, 2024

Choose a reason for hiding this comment

jjchrisdiehl Jul 17, 2024

Choose a reason for hiding this comment

jjchrisdiehl Jul 17, 2024

Choose a reason for hiding this comment

m1r0 commented Jul 18, 2024 • edited Loading

donnapep commented Aug 6, 2024 • edited Loading

m1r0 commented Aug 7, 2024 • edited Loading

m1r0 commented Dec 13, 2024

bohdankit07 commented Dec 13, 2024

m1r0 commented Dec 13, 2024

m1r0 commented Jan 15, 2025

m1r0 commented Jul 16, 2024 •

edited

Loading

github-actions bot commented Jul 16, 2024 •

edited by matticbot

Loading

matticbot commented Jul 16, 2024 •

edited

Loading

matticbot commented Jul 17, 2024 •

edited

Loading

m1r0 commented Jul 17, 2024 •

edited

Loading

m1r0 commented Jul 18, 2024 •

edited

Loading

donnapep commented Aug 6, 2024 •

edited

Loading

m1r0 commented Aug 7, 2024 •

edited

Loading