Signup: Minor transitions, contrast, and layout tweaks.

[shaunandrews]

This PR aims to bring our contrast rations for text up to WCAG (http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast) AA guidelines. This is a subtle change mostly, but will (hopefully) make all of our copy easier to read.

Here's a GIF showing a before and after example in the first step of signup:

Watch the step counter and "Family, Home, & Lifestyle" to see the very subtle difference.

This also removes Drake from the domains screen, adjust the colors to be AA compliant, and moving the spacing (padding/margins) to fit in our 8px grid.

Domains Before:

Domains After:

This also speeds up the transitions between screens, and uses a scale in addition to the existing translate3d.

Test live: https://calypso.live/?branch=update/signup

[folletto]

This also removes Drake from the domains screen

Thank you!

Overall, design wise: 👍

---

Question: can't we just remove... everything below the box? Does this screen really needs the "What are my options?" bit? Isn't automatically clear once one starts typing?

[shaunandrews]

Question: can't we just remove... everything below the box? Does this screen really needs the "What are my options?" bit? Isn't automatically clear once one starts typing?

I tend to agree, but didn't want to change things too drastically for fear of affecting conversion. Maybe I already changed it drastically, and should just go all the way. Maybe in a separate PR.

[folletto]

I tend to agree, but didn't want to change things too drastically for fear of affecting conversion. Maybe I already changed it drastically, and should just go all the way. Maybe in a separate PR.

Makes sense. Thanks!

[melchoyce]

Colors look good. 👍

The "options" part of domains feels a little floaty, especially with the super wide domain bar. Need to take a closer look once calypso.live boots up, but I'm thinking:

• Make the search bar a little more narrow
• Wrap the "What are my options" header into a headercake
• Center "Already own..." mapping text
• Mapping text could also use an icon to help call it out — maybe Globe, Flag, or Location?

[klimeryk]

Stumbled upon this when triaging Domains label - I'd recommend, before doing any drastic changes (not that this PR is proposing such... yet 😉), to:

• Analyse the history of the component (some changes were probably made based on A/B tests - it'd a shame to throw all that work away).
• Analyse (if available) relevant analytics. For example, the Map it action triggers events in tracks and GA - maybe we pull some nice info from there like how many users actually click it before search for a domain?

All I'm saying, based on just the discussion in this PR (so a very narrow scope, so sorry if I got the wrong idea), to make best use of previous work and available knowledge 😀

Just my 2 eurocents 😉

[folletto]

FWIW, for reference, this was an alternative original design made by @breezyskies before we went opensource:

@klimeryk yes, that's the right approach. I mentioned the option to go nuclear there because we discussed in the past to already do that, so I was just re-surfacing it. See also 10097 and 10562 in the repository before open sourcing. I think that test that had the design I reposted above was never completed – I just found a reference it was "stopped", but not the results.

[shaunandrews]

I updated the domain step based on the feedback above. Hopefully it feels less "floaty" now.

[shaunandrews]

Rebased and squashed. In favor of keeping this PR straightforward, I've pulled out the layout changes to the domains step and just focused on color/contrast.

[michaeldcain]