Wp-calypso: Store: Customization flow / design

[jameskoster]

The customization step in our setup flow is flaky to say the least. We simply send folks into the abyss (customizer) with no guidance at all.

Here's the flow we've worked out:

Design to follow.

[jameskoster]

Prototype incoming: https://automattic.invisionapp.com/share/JDD0CZU8Q#/screens/248337236_Setup

Hopefully we can retain the animations in the Customizer as we switch between panels. This will help illustrate how to get back to those panels later. The logo step will of course be skipped if a logo is already present.

Sketch file: https://www.dropbox.com/s/65w39t64nnckmkl/Customize.sketch?dl=0

[timmyc]

➕ on this - I think it would really by a great guided tour to have. Couple of thoughts on the implementation of this... currently the customizer for Atomic/Store sites loads on the remote domain - a new window is opened in fact vs WPCOM sites which iframe the customizer. As such, I'm thinking in order to add a guided tour like this to the customizer - we would need to add the supporting logic in a plugin that is installed on the Atomic site. Not sure which of the wc plugins would be the best fit for this so something that should be discussed.

[justinshreve]

Not sure which of the wc plugins would be the best fit for this so something that should be discussed.

@timmyc For now this code can go in the wc-api-dev plugin. We have a hotfixes/ folder there for code like this (overwriting email URLs to point to Calypso, etc). This plugin is automatically loaded for AT Store sites.

In early Q4 this kind of code will be split into a separate compatibility plugin, but it's OK to put stuff there for now.

[justinshreve]

I love the flow and prototype here 💯. This will definitely help people get their site looking the best it can for selling.

[timmyc]

@jameskoster is there an existing Storefront guided tour that is already in place - or is that going to be completed after this?

[justinshreve]

@timmyc There is an existing Storefront guided tour.

There is a giant notice for it in wp-admin if you activate Storefront.

It looks like you can kick it off with the following customizer URL: wp-admin/customize.php?sf_guided_tour=1&sf_tasks=homepage.

[jameskoster]

We have some Storefront guided tour tweaks coming here; https://github.com/woocommerce/storefront/issues/644

If you have any feedback please share :)

[timmyc]

@jameskoster thanks - so guessing we should leverage the existing sf guided tour logic? https://github.com/woocommerce/storefront/blob/master/assets/js/admin/customizer.js - seems to work nicely and is pretty similar to Trampoline. Unfortunately we'd likely have to duplicate the js/css logic from the sf theme repo, or extract it and use in both places.

[jameskoster]

If we extracted where would it live? WC core? I'm not sure that really fits in the scope, especially considering the Customizers uncertain future. Are we not able to use Trampoline?

I'll update this prototype tomorrow to include the Storefront activation flow.

[timmyc]

I don't think Trampoline is currently present on Atomic sites, but will need to verify that first - so either way we will need to add the logic to wc-api-dev - I agree extracting it is out of scope.

[jameskoster]

I've updated the prototype to include the Storefront flow, although as mentioned before that is due to change a little. It does help round out the experience though.

One thing we'll need to plan for that I hadn't considered yet is how we actually install Storefront. For brand new sites this isn't a big deal - we auto install and activate Storefront for them. But for existing users we need to make things run smoothly if they decide to give Storefront a try as an alternative to their current active theme.

Unfortunately it's not possible to install themes via the Customizer. So, how do we ensure that this step works as intended?

The only suggestion I can really think is to install (but not activate) Storefront along with our other dependencies when they first set up their store. That way it will show up as an option in the themes list in the Customizer and this prototype can be implemented as-is. It doesn't feel great to be installing something that potentially will not be used, though.

Keen to hear thoughts on this.

[kellychoffman]

I believe Storefront is available on _all_ AT sites with WC installed. @mendezcode: can you confirm?

[timmyc]

My latest test AT site has storefront installed by default, but as @justinshreve pointed out above, you can still delete the theme - so we need to handle both instances still in this flow. From the guided tour standpoint, I think I'm still going to copy over the guided tour logic into wc-api-dev to ensure that it is always available ( even if Storefront gets uninstalled ).

Likewise in the step before launching the Storefront guided tour, we need to ensure it is indeed installed. I do think Storefront being uninstalled is a likely edge case, but it _could_ still happen.

[timmyc]

I suppose another option would be to disable deletion of storefront 😄 - but that could open up a whole new set of problems.

[kellychoffman]

Deleting Storefront sounds like an edge case. However, If they do intentionally delete Storefront, we should just remove the first guide step that mentions Storefront and start here: https://automattic.invisionapp.com/share/JDD0CZU8Q#/screens/248337234

[justinshreve]

Agreed with Kelly. If they intentionally go to the themes screen and remove Storefront manually, I think we can just skip that step. We could get fancier later on and prompt them to reinstall, but for now we can just go on to the next step.

[timmyc]

Encountered yet another woo guided tour with a different design while setting up a local test site on vvv:

Launch by going to /wp-admin/post-new.php?post_type=product&tutorial=true - figured I should drop that here since related to the topic.

[jameskoster]

Deleting Storefront sounds like an edge case. However, If they do intentionally delete Storefront, we should just remove the first guide step that mentions Storefront and start here: https://automattic.invisionapp.com/share/JDD0CZU8Q#/screens/248337234

Agreed.

Encountered yet another woo guided tour with a different design while setting up a local test site

That's using wp-admins "Pointers" feature. I don't think it's compatible with the Customizer and because of it's design optimisation for wp-admin we shouldn't use it here imo.

[kellychoffman]

we shouldn't use it here imo.

Agree.

[timmyc]

Closing this out after today's launch