Wp-calypso: Add New Site: simplify the “Add a New Site” screen

[designsimply]

Steps to reproduce:

1. Sign in to https://wordpress.com/ and go to My Sites > Switch Site.
2. Click "Add New Site" at the bottom of the sites list.

Result:

^{Seen at https://wordpress.com/jetpack/new?ref=calypso-selector using Safari 11.0.3 on macOS 10.13.3.}

Possible solution: simplify to use a stacked/integrated flow like this:

/hat tip 🤠 @beaulebens for the sketch and original report at p4k3M4-2uX-p2

[davewhitley]

If we haven't already, it's worth looking at what we do on iOS/Android since that flow is the simplest one we have.

[designsimply]

Excellent idea. Here's how adding a site looks for WPAndroid:

^{Tested with Pixel, Android 8.1.0, WPAndroid alpha-96.}

[designsimply]

Here's how adding a site looks in WPiOS:

^{Tested with iPhone 6S, iOS 11.2.5, WPiOS 9.3.0.20180201.}

[eliorivero]

Maybe we should drop the Create wordpress.com site and just use "Create new site" and "Add my self-hosted site".

[rickybanister]

@keoshi If you're looking at doing a more refined mockup of this I think it may make sense to remove the URL step from this screen to put both call to action buttons on equal footing. It will also be easier to maintain if this screen is simply an in-road to /jetpack/connect. That way we can iterate on the url step there independently of this UI, we can try new things and not worry about updating it in two places, etc. With remote installation coming I think that makes sense anyway.

[keoshi]

Sounds good, will take care of this soon.

[keoshi]

@drw158 @designsimply We actually tested that first before committing to this version, it was a simple popover with dotcom and JP options: p58i-5KQ-p2

We also tested this dual-pane version; more context here: p6TEKc-KI-p2

For now I'm going to simplify this view by having just one pane and streamline the content.

[joanrho]

FYI this is being worked on by @keoshi in #23093