Wp-calypso: Beautify features on My Plans page

[lamosty]

Since merging #7538, My Plans page (/plans/my-plan) is divided into two columns instead of just one. However, the feature items on that page were not fully designed for such small width. While it is not that bad, I think the features could use some designer's eye (or two).

What I don't like the most are the large icons next to feature texts/buttons:

Maybe we could just make them smaller?

I'm pinging some designers for help. :) @adambbecker @shaunandrews

Thanks

[shaunandrews]

I wonder if it'd be worth switching up the layout here. There's a few strange things that happen on this screen, including:

• An upsell for a free domain, which doesn't go away once even if you have a domain setup already.
• Lots of grammar issues and inconsistencies.
• There's a mention of the Premium plan in "Video and audio posts", even if your on the Business plan.

Thats just a few. I think the layout is also a little strange, and as you mention the whitespace with the icons is all over the place. Here's a quick mockup of a more list-style layout:

A few notes about the mockup:

• It'd be great to bring over the plan color from the Plans screen.
• If they don't have a custom domain, we can call that out with a primary action button.
• The rest of the features are shown in with expandable cards. Not sure what it looks like when expanded yet.
• I left out the support callout, but I think that likely deserves some thought.

[shaunandrews]

Put a little more thought into the mockup, and cleaned thing up a bit, as well as including an example of what an expanded card could look like.

[lamosty]

My initial thoughts for this issue were to just get a bit better design for the two-column My Plans page (some minor changes) as we've just redesigned it (and put some week worth of work into that). Fortunately, it was not only a visual redesign but code refactor as well so it shouldn't be too hard to switch it to a new design if we decide we need that.

I'm really glad you dedicated some of your time for the new design. It looks quite nice. Unfortunately, we (Stark) don't currently have resources for this and would need an approval from Andy as well. Therefore, I'm postponing (not closing) this issue for another time. :)

[rralian]

@shaunandrews that's a pretty significant redesign after we just finished a redesign of that page. To be honest, I'm not sure we have the bandwidth for such a big change right now. But in the meantime the icons still feel kind of out of sync with the text. Do you think there's a simpler fix we can apply now, and then discuss a bigger redesign as a separate issue?

EDIT: Ha! I didn't see @lamosty's comment when I started writing this. Dangit github, you need realtime updates!

[beaulebens]

While we're pondering the design overhaul, can we just fix the layout issues with what we've got, so that it doesn't feel broken? This is what I see on my laptop currently:

• bad wrapping of the Manage Payment button
• no padding on those large icons