Woocommerce-admin: Store profiler: create a business features step for free extensions

[pmcpinto]

Description: the experiment implemented in #4579 showed that we're moving in the right direction. However, there are some concerns over not allowing users to disable some extensions and displaying them in the Business Details step if far from ideal.
We're going to experiment with an intermediate approach while keeping the two existing flows. We aim to validate this approach in the WooCommerce December release and if everything looks good we'll remove the two other flows.

Final segmentation: Stores that selected the US as the country and Otheror Food & Drinks as the industry. It gives about 30% of the total number of new users from the US

Acceptance Criteria:

• [ ] display the changes in the flow just to a specific segment: Stores that selected the US as the country and Otheror Food & Drinks as the industry
• [ ] introduce a new step after the business details called "Business features"
• [ ] display just one checkbox to install all the free extensions. The checkbox should be toggled on by default
• [ ] introduce an accordion where the users can see more details about each extension and disable some of them
• [ ] allow users to install the following extensions: Jetpack, WooCommerce Services, Facebook, Mailchimp, Google Ads, WCPay
• [ ] install and activate the selected extensions when the user clicks "Continue"
• [ ] remove the JP/WCS step for this segment, as they're going to be installed in the Business details step
• [ ] the redirect to the Jetpack account creation flow should only happen after the theme step

Event tracking:
It will be better to add a new event for this step's alternative version:

Event name: wcadmin_storeprofiler_store_business_features_continue
Event description: When the user clicks on "Continue"
Event prop: all_extensions_installed (value: True/False) - with all the extensions selected or deselected
Then we should also have a prop for each extension to cover when they deselect some of them:
install_woocommerce_services
install_mailchimp
install_jetpack
install_google_ads
install_facebook
install_wcpay

Event name: wcadmin_storeprofiler_store_business_features_accordion_click
Event prop: NA
Event description: When the user clicks on the accordion

It will be necessary to update wcadmin_storeprofiler_step_view to include this alternative step as the value of the step prop. It can be named business-features

Additional links:
P2 w/ link to the mockups here: pbIJXs-n0-p2

[elizaan36]

Here's an update to this design to include categories for extensions.

Extensions are divided into two categories, "Get the basics" and "Grow your store". This iteration includes Creative Mail as well. All designs for the store profiler are located in the Onboarding Iterations Sept '20 Figma.

[samueljseay]

@pmcpinto in previous segmentation based flows like #4579 it was simpler because we didn't introduce additional steps, we simply did something different in the "Business Details" step, but in this case it seems that you want to introduce a new step to the wizard but only after we have determined segmentation during the wizard. This means we will have to change how many steps are displayed at the top half way through the wizard. It also means this will be significantly more complicated than the last experiment.

I just wanted to check if those are OK? probably the thing I'm most interested in is whether adding another step into the wizard half way through is OK? I think it's going to cause some horizontal visual movement in the step list when you go between the industry step and business details. I guess another option would be always displaying all the steps in the header, but just skipping the business features step if the segment doesn't apply to them.

There are likely some gotchas and edge cases with that approach that I haven't considered, for example returning to the wizard later after having completed it and trying to click navigate to that step.

[pmcpinto]

@samueljseay thanks for raising this problem. @elizaan36 let's chat about this in our 1.1.

[pmcpinto]

@samueljseay I chatted with @elizaan36 about this today and we think that the easiest way is to display the new UI within the Business Details step for this experiment instead of creating a new step. Sounds good to you?
Elizabeth is going to work on the design today.

[samueljseay]

@pmcpinto yes that sounds ideal, thank you!

[elizaan36]

Thanks for bringing this up @samueljseay. We definitely don't want to change the number of steps while the user is in the middle of the onboarding flow, so in order to present this experiment (new step for business features) we'd need to consolidate the "Free features" step within the "Business details" step.

Here's a solution that I think is the best way forward to present the features as a new step.

Granted, this is not ideal considering that it's an additional step disguised as a tab. I think it's worth experimenting to see how it performs as the separate step and hopefully in the future we can have more flexibility with a/b testing to prevent the issue. When @pmcpinto and I chatted earlier, I suggested that targeting a random sample prior to loading the first step would allow us to present a full and complete experience to each cohort, but there are privacy/legal concerns with collecting data until people explicitly opt-in.

A couple points to make this work:

• The "Free features" tab is disabled until the Business details form is complete

• Users can tab back and forth between Business details and Free features when Business details is complete

• Clicking the Free features tab once the Business details are complete will save the selections, same as clicking Continue. This will encourage more forward movement, so users that want to explore the tab first don't have to go back to click the Continue button to move forward.
• Only clicking Continue from the Free features tab will install and activate the chosen features, clicking the tab to Business features will not install the extensions

Let me know if you see any issues with this, or if I've missed anything here. Prototype and designs are in the Onboarding iterations Sept '20 Figma.

[pmcpinto]

@elizaan36 thanks for creating an alternative so quickly. I'm just not 100% sure about this point:

The "Free features" tab is disabled until the Business details form is complete

My assumption is that this probably can add friction and create some confusion: users can think that the tab is broken or that if they click "continue" in the business details tab they'll be redirected to the Theme step without seeing what's going to be installed. WDYT?

[elizaan36]

The reason the "Free features" tab needs to be disabled until the "Business details" are complete is that they are required. If business details are optional, then the tab can be shown as active regardless.

I'll walk through the use case of the tab being active to explain:

• User lands on Step 4, Business details (on the Business details tab)
• Sees the "Free features" tab and clicks over on curiosity
• Selects free features they'd like to install, then clicks "Continue"
• Can't continue to the next screen because the Business details step isn't complete

So the issue is how do we provide an error message that's detailed enough for people to understand that they need to return to the "Business details" tab and complete those selections, before coming back to "Free features" and clicking through to the next step after that? IMO, this would be too convoluted so my solution was to disable the tab unless Business details is complete.

[pmcpinto]

It could work the following way: Click "continue" in the Free features tab and redirect the user back to the Business details tab with an alert message saying something like: Please fill in the required information before proceeding to the next step.

This way we'd also get a sense of how many people want to move forward without adding the business details

[elizaan36]

That feels convoluted to me since they would have to click through the Free features step again, but I don't know how much of an edge case that would be. I'm ok with trying it for this test.

[samueljseay]

@pmcpinto I think thats definitely going to add more complexity (this piece of work is already fairly complex for a number of reasons). This flow of expecting users to fill out the data before moving steps should feel familiar as it is anyway, as we do this throughout the wizard already.

I'm hoping to have a PR up in the next couple of days with the current state, maybe you could review how it feels as it is implemented at that stage, but I do feel that the design feels intuitive as it is in the designs personally.

[pmcpinto]

@pmcpinto I think thats definitely going to add more complexity (this piece of work is already fairly complex for a number of reasons). This flow of expecting users to fill out the data before moving steps should feel familiar as it is anyway, as we do this throughout the wizard already.

@samueljseay thanks for your feedback. So let's keep it simple and only allow them to check the free extensions tab after adding the data.

[samueljseay]

@pmcpinto What should the behaviour be for the "Add recommended business features to my site" checkbox in these cases:

1. A user deselects a single checkbox for a plugin, should it be deselected?
2. A user deselects each plugin manually and now none are checked, I think it should be deselected in this case?
3. a user unticks "Add recommended business features to my site", then adds back a single checkbox manually?

Here's how I have it behaving right now:

But if it behaves this way then I think all_extensions_installed should be true when all plugins are checked and false when at least one is not checked?

[samueljseay]

@pmcpinto One other question on tracking:

For the original flow, we track the event storeprofiler_store_business_details_continue. but it doesn't just include the extensions installed it also includes options chosen in the first step. This is all under one event.

What should we do for this new one? The simplest thing would be to do the same and track all that additional information alongside the extensions installed.

[samueljseay]

@pmcpinto sorry for the question barrage but another one:

for the current experiment we display TOS text because they're installing jetpack and wc-shipping. The text is

'By installing Jetpack and WooCommerce Shipping plugins for free you agree to our Terms of Service.'

Do we want to have separate pieces of copy for if they just chose wc-shipping or just chose jetpack? or could we check if they installed either and adjust the copy:

'By installing Jetpack or WooCommerce Shipping plugins for free you agree to our Terms of Service.'

Also, is this copy still relevant/ok:

'User accounts are required to use these features.',? Do we need to conditionally show this based on which extensions they install? or perhaps show it when there is at least 1 selected and don't show it otherwise?

[samueljseay]

@pmcpinto another question:

this event: wcadmin_storeprofiler_store_business_features_accordion_click should we record whether they're opening or closing it? if not should we just record it when they open it?

[pmcpinto]

@samueljseay sorry for the late reply. Here's my feedback:

Here's how I have it behaving right now
The way how it behaves right now makes sense to me

But if it behaves this way then I think all_extensions_installed should be true when all plugins are checked and false when at least one is not checked?

Sounds good to me.

What should we do for this new one? The simplest thing would be to do the same and track all that additional information alongside the extensions installed.

I think that it would be less confusing to have a separate event for this tab, as I mentioned in the issue description. Also, if this experiment goes well we're going to have this tab as a separate step in the near future, so probably it's better to have separate tracking right from the beginning. Makes sense?

or could we check if they installed either and adjust the copy:
'By installing Jetpack or WooCommerce Shipping plugins for free you agree to our Terms of Service.'

This option looks good to me.

'User accounts are required to use these features.',? Do we need to conditionally show this based on which extensions they install? or perhaps show it when there is at least 1 selected and don't show it otherwise?

AFAIK all of them require user account, so we can keep it simple and show the copy even if they don't disable all of them

this event: wcadmin_storeprofiler_store_business_features_accordion_click should we record whether they're opening or closing it? if not should we just record it when they open it?

The most important is to track if they open the accordion. We don't need to track if they're closing it

[elizaan36]

hey, regarding the first question there's the possibility of implementing this indeterminate state. I think it's a valid option in this case as an alternative to keeping the checkmark even when features underneath are deselected.

https://share.getcloudapp.com/8LunwQpX

Clicking on the indeterminate state from here would deselect all.

[samueljseay]

@elizaan36 that seems entirely reasonable but the checkbox control in gutenberg doesn't have this state. I looked in to it, and it uses an svg for the background, it'd be non-trivial at this stage to implement that. Wondering if we could defer adding this intdeterminate state? Otherwise we have to implement another checkbox of our own to support this. I support doing it, but maybe as an enhancement?

[samueljseay]

I think that it would be less confusing to have a separate event for this tab, as I mentioned in the issue description. Also, if this experiment goes well we're going to have this tab as a separate step in the near future, so probably it's better to have separate tracking right from the beginning. Makes sense?

@pmcpinto I think there is maybe some confusion here. You're saying "separate event for this tab, as I mentioned in the issue description" but there are now 2 "tab" steps as part of this alternative flow:

1. they click continue on details tab
2. they click continue on features tab

The total info to collect is the info you specified in the issue description but also:

product count (chosen in the dropdown)
selling on another platform? (chosen in dropdown)
currency
revenue (chosen in dropdown)

for the original flow this was all recorded alongside the choosing of the checkbox for business features. (under the event wcadmin_storeprofiler_store_business_details_continue)

we can do:

1. Record a continue event for the first tab, just collect that first information, then record a separate event for second tab, record just the installed features information

or

1. Record the event you described in the spec at the continue of the second tab and collect all the info from both tabs.

or

1. Not record that additional info from the first tab, but I don't think you wanna lose that?

[pmcpinto]

@samueljseay sorry if I wasn't 100% clear. The approach that I'm proposing is the first one:

Record a continue event for the first tab, just collect that first information, then record a separate event for second tab, record just the installed features information

Let me know what you think . Thanks

[samueljseay]

@pmcpinto that's perfect thank you!

[elizaan36]

Wondering if we could defer adding this intdeterminate state? Otherwise we have to implement another checkbox of our own to support this. I support doing it, but maybe as an enhancement?

Makes sense to defer adding it now and plan on this enhancement in the future. Maybe something we can contribute back to Gutenberg as well.

[pmcpinto]

@samueljseay just to confirm that it will be possible to include this in the WooCommerce 5.0 release. The code freeze is next week. Thanks

[samueljseay]

@pmcpinto Yep its all wrapped up and in the code base now so its ready for the next release.

[pmcpinto]

Awesome, thanks! ❤️ I'm looking forward to testing this variation.