Wp-calypso: Customer Home: Move Checklist items from left to right

[jancavan]

Steps to reproduce

On a new site. This is what the Checklist should look like:

Let's move the Checklist items from the left to the right like so:

This gives more focus on the main cards and tasks vs the list of items in the Checklist.

Related discussion: CS0C44U07-p1594415624033500-slack

cc @rickybanister @danhauk @lcollette

[sfougnier]

Desktop
Shifted checklist to the right of the highlighted task card on desktop. See the full flow here.

Mobile
The current experience highlights the list menu first, requiring users to tap into the task. I think this is still viable but took the opportunity to explore integrating the list with the tasks. Perhaps there is a possibility to keep the list and task separated, but highlight the specific task on landing rather than the full list?

An alternative approach that highlights each step in order to align mobile with the intent of desktop. If we want to place emphasis on the task rather than the list, automatically expanding each task in an accordion style list may help achieve that.

Full flows here

[rickybanister]

Looks lovely.

Are there any suggestions you have for giving more life to the actionable side of the checklist at larger widths?

Some of them feel a bit anemic with all that unused white space.

[davemart-in]

I removed this from the Manage Group backlog. My assumption is that this is something that can be achieved without the need for engineers. If you need a hand with anything, please let me know. Thanks!

[jancavan]

There's an existing PR related to this issue: https://github.com/Automattic/wp-calypso/pull/44124. Can someone please review if any more changes need to be made? @sfougnier @sixhours @lcollette

[sfougnier]

The changes in the existing PR look fine, but I think it would be good to consider how this update can impact mobile. @sixhours and I chatted through the feasibility of this update to the mobile checklist at the end of last week. If we feel this is a good update I think it's worth taking advantage of this to improve the mobile experience as well.