Wp-calypso: NUX flow: I just signed up for WordPress.com and want to setup my store

[kellychoffman]

Scenario: I have just walked through the WP.com sign up flow, chose Store with a Business plan.

1. Signup flow for WP.com: https://cloudup.com/c3b9SbgzuWA
2. During the tour of the customizer/nav menu I see that there's a Store menu item added to the nav:
   
3. I click on Set up button (or anywhere on the Store nav item) and a brought to a Store section:
   
4. Note: sticky top banner design with the back button arrow, site name is borrowed from the current WP.com editor
5. If I click the <- arrow, I am brought back to my main site section:
   

Sketch file for dashboards: https://www.dropbox.com/s/wb7sirom6hcg1gg/dashboard.sketch?dl=0

cc: @allendav

[allendav]

Sweet! Thank you @kellychoffman ! I have a few questions / assumptions to run by you:

• ASSUMPTION: The Store icon, label and button (Set up/Manage) in the sidebar will only appear if the current site has WooCommerce active.
• SUGGESTION: Right now “Store” just falls in with Stats and Plan - it seems like maybe it belongs under a heading (like Blog Posts is under a Publish heading) like “Selling” or “eCommerce” or something - eventually besides Store we could have things like (Email) Campaigns under there too
• ASSUMPTION: If a site deactivates the WooCommerce plugin, the Store icon, label and button will no longer appear in the sidebar
• ASSUMPTION:The Store button label will say “Set up” until they have clicked the “I’m finished setting up” button on the Dashboard view, after which it will say “Manage” (this is true even for established stores, but we could get fancier in the future)
• ASSUMPTION: If WooCommerce is active on the site, but below some version (e.g. 3.0.5) we will display some drake-please-backup-and-then-upgrade notice on each route under store (dashboard, products, orders, etc) instead of that route’s container
• Let’s call the new “bar” that appears below the Master Bar the “Secondary Nav Bar”
• Let’s call the new sidebar that appears when in a store route the “Secondary Side Bar”
• ASSUMPTION: On the Secondary Nav Bar, clicking on the site name / logo will open a modal showing the store front side much like it does today from the existing sidebar
• QUESTION: On the Secondary Nav Bar, the current “section” (e.g. “Dashboard”) is displayed above the main content area - what is the intention there, since it seems to just present again the highlighted “section” already on-screen in the Secondary Side Bar - are we going to do breadcrumb nav for sub-routes (the underline suggests a link to me)? Otherwise it seems like duplicated UI and could be removed?
• QUESTION: Is Promotions the same as Coupons or something more?
• QUESTION: All the tasks on the “Howdy” view are thankfully available from the Secondary Side Bar except for one - Customize. That presently requires leaving the store view to go back and select Customize from the (Primary) Side Bar. Would it be a good idea to copy/include a Customize item on the Secondary Side Bar too?
• QUESTION: Extensions are a significant revenue source, so putting them below a separator seems unwise. How about we move that item above the separator - maybe we don’t even really need a separator at this time since that would just leave Settings below the separator.
• SUGGESTION: The (Primary) Side Bar also has a Settings item. Having a Settings item in the Secondary Side Bar could be confusing. Maybe we should name this item Store Settings instead.

[allendav]

We need a mobile mock too, i.e. for widths < 660px when the (Primary) Side Bar disappears

[kellychoffman]

Thanks for the thorough review! You bring up great points and I appreciate this level of feedback.

ASSUMPTION: The Store icon, label and button (Set up/Manage) in the sidebar will only appear if the current site has WooCommerce active.

Or if they have a business plan.

• [ ] Design flow for when user has biz plan but doesn't have WC

SUGGESTION: Right now “Store” just falls in with Stats and Plan - it seems like maybe it belongs under a heading (like Blog Posts is under a Publish heading) like “Selling” or “eCommerce” or something - eventually besides Store we could have things like (Email) Campaigns under there too

Eventually that could be the case, but since we made the decision to house all the store related setup items within a separate section that once navigated to, you would be brought to an entire new area with its own navigation (think Calypso editor), we decided that keeping it top level would be ideal.

ASSUMPTION: If a site deactivates the WooCommerce plugin, the Store icon, label and button will no longer appear in the sidebar

Correct.

ASSUMPTION:The Store button label will say “Set up” until they have clicked the “I’m finished setting up” button on the Dashboard view, after which it will say “Manage” (this is true even for established stores, but we could get fancier in the future)

Forgot to mention this! But yes, you are spot on.

ASSUMPTION: If WooCommerce is active on the site, but below some version (e.g. 3.0.5) we will display some drake-please-backup-and-then-upgrade notice on each route under store (dashboard, products, orders, etc) instead of that route’s container

Yes! TODO for me:

• [ ] What happens when WC is below a certain version? design this flow/interaction

Let’s call the new “bar” that appears below the Master Bar the “Secondary Nav Bar”
Let’s call the new sidebar that appears when in a store route the “Secondary Side Bar”

Sounds good.

ASSUMPTION: On the Secondary Nav Bar, clicking on the site name / logo will open a modal showing the store front side much like it does today from the existing sidebar

Correct. It should work exactly like it does in /post (the editor)

QUESTION: On the Secondary Nav Bar, the current “section” (e.g. “Dashboard”) is displayed above the main content area - what is the intention there, since it seems to just present again the highlighted “section” already on-screen in the Secondary Side Bar - are we going to do breadcrumb nav for sub-routes (the underline suggests a link to me)? Otherwise it seems like duplicated UI and could be removed?

Correct, it provides a sense of place. Here is an example of how it would look in Shipping, which is within Settings:

QUESTION: Is Promotions the same as Coupons or something more?

We didn't want to restrict it to only coupons, but it may only include coupon creation for MVP. It will include coupons, and the ability to run a storewide sale.

QUESTION: All the tasks on the “Howdy” view are thankfully available from the Secondary Side Bar except for one - Customize. That presently requires leaving the store view to go back and select Customize from the (Primary) Side Bar. Would it be a good idea to copy/include a Customize item on the Secondary Side Bar too?

Great point. I am leaning towards a yes on this. @jameskoster: Thoughts?

QUESTION: Extensions are a significant revenue source, so putting them below a separator seems unwise. How about we move that item above the separator - maybe we don’t even really need a separator at this time since that would just leave Settings below the separator.

I don't feel super strongly, but I'm also not entirely convinced a separator will impact revenue. How about we leave it with the separator to see how it feels? That is, if its easy enough to move on your end. We'll get marketing to weigh in as well.

SUGGESTION: The (Primary) Side Bar also has a Settings item. Having a Settings item in the Secondary Side Bar could be confusing. Maybe we should name this item Store Settings instead.

Good point. I agree. I'll update that.

• [ ] Change Settings to Store Settings

We need a mobile mock too, i.e. for widths < 660px when the (Primary) Side Bar disappears

• [ ] Design small screen view

[allendav]

One more thought...

SUGGESTION: If WooCommerce is active on the site, but the current user lacks the manage-store capability, we could display some drake-no-soup-for-you notice on each route under store (dashboard, products, orders, etc) instead of that route’s container - it would probably help happiness when debugging things for that user instead of not showing the store nav at all.

[allendav]

Two more thoughts for you @kellychoffman 👍

On the Dashboard page, after I click on "I'm finished setting up" or "I'll do this later", what should appear on the page?

Similarly, if I click on "I'll do this later", how do I get back to the "set up your store" view?

[jameskoster]

Great point. I am leaning towards a yes on this. @jameskoster: Thoughts?

I suppose it all comes down to whether we believe that 'Customization' is something folks would want to do during regular store management. I'm inclined to agree that some will, but I'm also conscious about the size of the nav (thinking about extensions). Something to consider; would it be easier for us to _add_ a Customize link later if folks cry about it missing, or easier to remove it if we learn that very few users click it?

A little context on the separator @allendav; The idea here was to group the day-to-day management screens separately from the now-and-again screens. I think the grouping gives the nav better structure and will make it more intuitive the more you interact with it.

On the Dashboard page, after I click on "I'm finished setting up" or "I'll do this later", what should appear on the page?

When you're finished setting up you'll be taken to the dashboard;

Similarly, if I click on "I'll do this later", how do I get back to the "set up your store" view?

Good question.

I'm now wondering if we should ditch this link or at least re-label it to something like "Skip setup".

Chances are if a user decides to skip the guided setup process they've probably either done it before or are a more 'advanced' user that prefers the 'manual' approach. I'm not sure we'd need to offer a way to get back to the original screen which is what "I'll do this later" probably suggests. "Skip setup" seems clearer, or perhaps even "Setup manually".

Either way, if they decide to skip we'll need a slightly tweaked dashboard display (no point encouraging them to share their site when they can't take orders). I think we should probably display a prominent notice to remind them of the outstanding critical setup tasks (payments, tax, shipping etc). What do you think @kellychoffman ?

[jameskoster]

Chatted through the "skip setup" link with @kellychoffman just now and we concluded that we'll remove that link. You can't skip the setup. Or to put it a different way you can't hit the main dashboard until all of the main setup tasks are complete.

The checkboxes next to each step will be checked automatically and only when they're all checked (and the store is ready to take orders) will you be able to see the main dashboard (the image in my comment above).

So these are the 3 dashboard states;

• Checkboxes with core setup tasks
• Store setup complete - go promote it
• Established store with sales graphs / analytics

[kellychoffman]

I suppose it all comes down to whether we believe that 'Customization' is something folks would want to do during regular store management. I'm inclined to agree that some will, but I'm also conscious about the size of the nav (thinking about extensions). Something to consider; would it be easier for us to add a Customize link later if folks cry about it missing, or easier to remove it if we learn that very few users click it?

I thought about this a bit more and since its so integral to the store set up process, I think we should have Customization be accessible in the sidebar.

[allendav]

@kellychoffman @jameskoster - there are a few other "important" settings that the setup dashboard design doesn't cover - i'm thinking about these in particular:

• base location and currency
• ship-to, sell-to restrictions
• weight and dimension units
• shop currency
• allow guest accounts/require registration
• whether or not to generate usernames and/or passwords for customers

I've got issues covering these and more here: #13608 #13610 #13611 - they all need design and y'all may want to divide up those UXes differently and thats cool - I'll revise the issues if you don't first :)

[kellychoffman]

These nux items you listed are part of other setup flows and shouldn't be included in this epic. This epic is only for the initial signup of WP.com & Store or existing WP.com users enabling Store.

base location and currency

Base location is taken from WP.com sign up flow (payment step). It is displayed and confirmed in many steps including: Shipping and Payments. The currency is chosen when the user sets up payments.

ship-to, sell-to restrictions

This is taken care of in the setup shipping flows.

weight and dimension units

This is taken care of during the first product added.

shop currency

This is in the payments flow.

allow guest accounts/require registration
whether or not to generate usernames and/or passwords for customers

I'm not convinced this needs to be included this in any formal nux flow.

[allendav]

Hey @kellychoffman - @psealock and I were chatting about the reports link - is that supposed to point just to the Woo Connect Insights Store Stats or something else?

[kellychoffman]

🔥 it.

[allendav]

@kellychoffman wrote:

This epic is only for the initial signup of WP.com & Store or existing WP.com users enabling Store.

I only see the initial sign up in the mocks above. Are there mocks for the “existing WP.com users enabling (adding) Store (to a new site and to an existing site)” anywhere? Maybe we should open separate issues for those and close this for clarity's sake?

cc @fditrapani

edit: I just tested and confirmed that an existing WordPress.com user can add a new site and will be placed in the store nux flow automagically so we just need the add-a-store-to-an-existing-site flow

[justinshreve]

We now have a NUX flow for new users that get them setup with an AT WooCommerce install (including international users --> wp-admin which recently launched).