Wp-calypso: Site Setup List (checklist): Add checklist step for updating Menus

[gwwar]

Until we have full site editing available, we should help guide customers on how to add and edit a menu item on their site.

Since doing so currently will take folks to the customizer, let's see if we can pair up with Jeff Rozic on another get started video for adding/editing menus.

Notes

• The checklist is backed by a server API. We need to know when a task is done (probably the server detecting an edit made to menus). So this will require server patches. It may be also be worth it to make this step skippable. (There should be existing examples of this).
• We may need to think about for whom this task is eligible for. (Double check that we don't unset the "doneness" of site setup for folks that have already run through this list).
• Please link to https://wordpress.com/customize/menus/ (Same as Edit Menus in quick links)
• Please add required analytics that we expect to this new task

Additional context: pbAPfg-aF-p2

[amamujee]

These should also be easily toggled on or off because with Gutenboarding and full site editing they may be handled in signup or in the editor in the future.

[danhauk]

Jeff has a video introducing menus on the radar for the next round of educational videos. I reached out to him and he's going to prioritize it. I also pointed him towards a few HEs that could help with content and created a succinct, clear video tutorial.

1. Using existing checklist as-is

Using the current functionality of the checklist (with a few small visual tweaks to clean it up a little), what do you think about making the video a kind of "step 1" in the task?

Screenshots

Clicking "Watch video tutorial" would open the modal with the support doc and video loaded. This is currently what we do with the free photo library.

In the modal, the next step is to point people to the customizer to do it themselves. We can link directly to the menus section in the customizer.

After saving and closing the customizer, we mark the task complete and bump it to the bottom.

Skipping

If a user chooses to skip this step, we place it in the completed column with a label that it was skipped. This helps them to remember why it's showing as completed if they come back later and don't remember doing that step.

2. Future checklist improvements

In the future, it would be great to extend the functionality of the checklist to more natively support richer content. It could look something like this:

Any thoughts on the interaction here? cc @lcollette @jancavan @sixhours

[jancavan]

@danhauk It's great that we are able to provide video for this step.

Would it be possible to just include a link to the video within the step so it's more optional? My worry about asking them to "watch it first" is it's not obvious that they can actually edit it after, at least from just seeing the "Watch video" button, it looks more "required" than optional. Some people may want to jump into editing immediately without having to watch the video.

[jancavan]

(2) looks great!

[danhauk]

Thanks @jancavan. That makes sense about it feeling required. Here's another version aligned with the existing checklist I didn't go with:

I decided against it because it requires extending the functionality of the checklist to have another action. If we're going to do that, I'd rather just make an update like (2) in the original comment.

@gwwar @kwight @mmtr Any thoughts on effort to extend the checklist functionality to allow for supporting a clickable image? Something like this:

[jancavan]

I decided against it because it requires extending the functionality of the checklist to have another action. If we're going to do that, I'd rather just make an update like (2) in the original comment.

Between the first option and the second that has two links, the latter feels better, but this makes sense.

The round video thumbnail also feels more in line with our brand. @danhauk

[lcollette]

Thanks for exploring what we can do now and where we could go, @danhauk!

@jancavan covered most of the feedback I had. Including the video is a good move! The circle seems too large for the space allowed and pulls attention away from the primary action. You could try adjusting the size and alignment to help the balance.

Let's circle back to this once the flow map is done but just want to say I like this because it makes a single task the focus yet also gives the user context and sets expectations. As we've heard in research sessions, users appreciate having that anchor.

Does that make sense?