Plans Grid: automatically switch to monthly/annually version of currently selected plan

[ciampo]

What

If the user picks a yearly premium plan, goes back to the plans grid, and changes the period toggle to Pay monthly they shouldn't need to pick the plan once more

Why

This would improve the UX around monthly/annually billed plans, and avoid confusion in the user

A/C

• Expected behaviour:
  1. User picks a plan by selecting on the plans grid (e.g. Premium, billed annually)
  2. Later on in the flow, user changes their mind, goes back to the plans grid and clicks on the "Monthly" toggle
  3. The corresponding monthly billed plan to the previously selected plan should be automatically selected (e.g. Premium, billed monthly)
• The above needs to hold true for all premium plans, and for both monthly to annually, and annually to monthly switched.
• The above needs to hold true for all flows using the <PlansGrid /> component (Gutenboarding, Step by Step, Focused Launch)

Context

See related conversation in p1610464266273700/1610463892.273000-slack-C0KDTA48Y

[razvanpapadopol]

This change could lead to confusion from UX perspective because until now only by explicitly pressing on a "Select" button, a plan would be selected (and added to cart when completing signup/launch). If the plan selection state is not immediately visible, doing the same action when a user interacts with the billing interval toggle doesn't feel transparent.

Perhaps we should apply this behavior only to Plans Grid variant that has the selected plan highlighted (eg: in Focused Launch with #48622)

cc: @ollierozdarz for any thoughts on this

[ollierozdarz]

@ciampo would you mind providing a screenshot or video of what you're proposing so it's easier to follow please? 🙏

[ciampo]

Hey @ollierozdarz , here's an example of what Razvan and I referred to:

Let us know if you need further clarifications!

[ollierozdarz]

Hey @ollierozdarz , here's an example of what Razvan and I referred to:

Let us know if you need further clarifications!

Thanks, @ciampo @razvanpapadopol.

I think you're both right in this scenario.

The addition of this billing period toggle after the initial designs were created means that the interaction for selecting a plan would now have to change (as per Raz's comment).

To suffice @ciampo's idea of 'not deselecting the plan when the billing period is toggled', we'd need to add a Gutenboarding style 'Continue' button to the top right of the page and make it more of a two step interaction (users clicks the button over a plan to select it, then click 'Continue' in the top right to move on). Otherwise, when the toggle is used, there's no way to go back to the summary page (I don't think the 'Back' button is clear that you're saving a new selection).

My thoughts are that deselecting the plan when the toggle is used may run the risk of the user not understanding that we've deselected it, causing more confusion, which could lead to frustration, then they exist the flow without proceeding. I think it would be a worthy change to make sure that doesn't happen.

Obviously we're pretty close to launch and this isn't a critical or glaring UX issue (although it's still nice to have). Would it be worth prioritizing it for after it's shipped?

[razvanpapadopol]

Thanks for your input, @ollierozdarz !

we'd need to add a Gutenboarding style 'Continue' button to the top right of the page and make it more of a two step interaction

At that point, for consistency, we should probably turn also Domain selection modal to a 2-step process using a Continue button.

I agree we can put this on hold for now and we can discuss it further after running the first iteration of the experiment. Also, I think the UX is acceptable after the fix we have just added to have the correct billing period pre-selected: #49518 (review)