[settings] UPE feature flag design update

frosso commented 3 years ago

Description

In the newest designs, it looks like the UPE feature flag changed from being displayed in a banner to being displayed as a chackbox. (please confirm with UX) checking the checkbox should redirect to the UPE onboarding wizard.

Screen Shot 2021-10-08 at 3 46 48 PM

Questions

Does checking the checkbox redirect to the onboarding wizard?
Does the redirect happen immediately after saving or immediately after checking it?
- If it happens immediately after checking the checkbox, is it acceptable to not save the pending changes on the settings?
Should we still display a banner in giropay/Sofort/etc. (other UPE payment methods) when UPE is disabled?
Should we also remove the inbox notification to enable UPE? (WC_Stripe_UPE_Availability_Note)
Any other questions?

Acceptance criteria

UX matches the designs
Behavior has been clarified
Functionality is implemented

LevinMedia commented 3 years ago

@frosso @RafaelFunchal

(please confirm with UX) checking the checkbox should redirect to the UPE onboarding wizard.

Affirmative 👍

frosso commented 3 years ago

@LevinMedia thanks for confirming!

Does the redirect happen immediately after saving or immediately after checking it?
- If it happens immediately after checking the checkbox, is it acceptable to not save the pending changes on the settings?

LevinMedia commented 3 years ago

On second thought - that doesn't really make sense, it seems like the first time around it should be a button that launches the experience, then after it's set up, it can be toggled on or off with the check mark - cc @jarekmorawski

jarekmorawski commented 3 years ago

@LevinMedia I've thought about it hard while workin on this part of the experience and couldn't figure out how to fit in there a button that would later turn into a checkbox. It seemed logical to me to let folks enable and disable the new experience in exactly the same way. Also, checking a box shows an intent ("I want to enable the new UX") and after the stepper, people will see the end result (the box is checked = the new UX is on).

Given that we've got a more distinguishable button in the Inbox note, I'd stick to the checkbox and add a loader to it so that people know that something's going on in the background when they turn it on.

frosso commented 3 years ago

@jarekmorawski it's no problem to convert the experience to a checkbox. But when does the stepper come into play? Does the user get redirected after checking the checkbox?

If that's the case, are there concerns that the redirect would "break" the user's expectations when checking a checkbox? (i.e.: the user is just checking a checkbox, not clicking on a link) What would happen to the rest of the settings displayed on the page that haven't yet been persisted? Would it be acceptable to not save the rest of the pending changes on the settings page?

jarekmorawski commented 3 years ago

Hiya! 👋

Does the user get redirected after checking the checkbox?

That's the idea. Ideally, we'd add a loading state to the checkbox to let them know something's going on in the background. We could let them check the box without going through the setup, but that raises concern that they'd never do it. Without the immediate redirection, we're left with similarly unappealing alternatives:

redirecting people after they save settings
adding a link/button to the checkbox (what if they miss it?)
sending an Inbox note
immediately turning on the new UX (without additional config it may break the checkout)

I'm happy to explore it a little further, though. @LevinMedia, do you have any thoughts?

Would it be acceptable to not save the rest of the pending changes on the settings page?

Can they be cached so that changes are visible to people when they finish/cancel UPE setup? Then, they'd proceed to save changes as usually (if people finished setup, UPE would be turned on and saved in the background separately from other settings).

frosso commented 3 years ago

Can they be cached so that changes are visible to people when they finish/cancel UPE setup? Then, they'd proceed to save changes as usually (if people finished setup, UPE would be turned on and saved in the background separately from other settings).

The wizard is on a separate page and unfortunately, a page redirect resets the state of a form :(

jarekmorawski commented 3 years ago

I understand. 🤔 Maybe we could add an affordance to let people know the button is linked to an external flow?

cc @LevinMedia

cesarcosta99 commented 3 years ago

Jumping in to share an idea, maybe the whole sentence "Try the new checkout experience (early access)" could be a link to the onboarding? Or even turn it into a button? It could be that the user think they just need to tick the box to enable it. We could add a notice/subtitle saying "You will be redirected to the onboarding" or "Your current changes will be discarded" too.

@jarekmorawski can you please share the link we should use for the "submitting your feedback" text?

jarekmorawski commented 3 years ago

Or even turn it into a button?

That's a great idea and after exploring it a little, David and I arrived at a different, but simpler solution. After checking the box and saving settings (which solves us the "Should we discard changes?" dilemma), we'd show a toast message pointing merchants to Settings > Payments where they'd enable/disable and add payment methods.

We skip the stepper entirely in Stripe, because the payment method are managed differently from WCP.

Here's a brief video of what it'd look like. I'll update the designs in Figma.

https://user-images.githubusercontent.com/79307566/140891735-3822953d-7d35-418a-a6e3-d02d9bdb6ff9.mov

@jarekmorawski can you please share the link we should use for the "submitting your feedback" text?

It'd the same CS survey link that we've in Settings > Payments > Payment methods table > Provide feedback:

https://woocommerce.survey.fm/woocommerce-stripe-upe-opt-out-survey

cesarcosta99 commented 3 years ago

@jarekmorawski I think that really solves most of the questions we had, thank you!

We skip the stepper entirely in Stripe, because the payment method are managed differently from WCP.

That lead us to the remaining questions:

Should we still display a banner in giropay/Sofort/etc. (other UPE payment methods) when UPE is disabled or non-UPE methods such as Alipay?
Should we also remove the inbox notification to enable UPE? (WC_Stripe_UPE_Availability_Note)

If the answer to 1 is "no", it means the onboarding stepper will be completely removed indeed.

jarekmorawski commented 2 years ago

Hi @cesarcosta99! 👋

Should we still display a banner in giropay/Sofort/etc. (other UPE payment methods) when UPE is disabled or non-UPE methods such as Alipay?

No. I don't think the banner is needed anymore.

Should we also remove the inbox notification to enable UPE? (WC_Stripe_UPE_Availability_Note)

No, I'd leave the notification as it. It currently takes you to the stepper, but now it could enable the UPE in the background and display the toast with a link to the payment methods settings.

dechov commented 2 years ago

Will there still be a "Disable" option from the menu of the "Payment methods" view? If so, we may want to word it more clearly: "Disable new checkout experience"?

Also, when disabling using that option, I'm seeing a potentially misleading message about payment methods requiring UPE:

If that will still show, we may want to adjust that wording (though it can also be a separate issue).

jarekmorawski commented 2 years ago

Will there still be a "Disable" option from the menu of the "Payment methods" view?

Yup! In Stripe, the message has been tweaked a little.

woocommerce / woocommerce-gateway-stripe