Wp-calypso: Plans Redesign: Design Tweaks

[apeatling]

Changes

• Move explantion text and buttons to below each plan header. These sections should _always be equal height_ across plans so that everything aligns.
• Modify the paragraph of text for each plan, so they are similar lengths.
• Change the button on a lower plan to say "Downgrade Plan", and make it a secondary button.
• Change "Upgrade" on primary buttons to "Upgrade Plan".
• Keep a single button at the bottom of each plan so there is a call to action after scrolling.
• Re-order the plan features so that they are in a more compelling waterfall format
• Change the wording on some plan features to make them more understandable.
• Bold features that are an upgrade on a smaller plan, so they stand out as upgrades.
• Added information bubbles to each feature entry that will give a little more information about a feature when clicked.
• Removed the "Free Site" entry, because that is basically a given, although I am happy to hear arguments the other way :)
• Tweak the header design, PR here: https://github.com/Automattic/wp-calypso/pull/6375

[lamosty]

Nice work @apeatling. Do we need the bottom action buttons now that we have ones in the top of the plans? Seems a bit crowded to me.

[apeatling]

I think it's best to keep the call to action at the bottom, after they have gone through and decided on a plan, it's right there. Also for some resolutions, the top buttons will be off screen once you hit the bottom.

[lamosty]

I see and agree. One more argument for the above: if they read FAQ which is/will be located below the plans and they decide to upgrade, they would have to scroll a lot to get to the top buttons.

[apeatling]

I've updated this to show information bubble access. They show on every feature entry so there is some duplication. I think it is necessary here otherwise we're making people think and have to look across to a cheaper plan to get the info bubble.

I will work on some text for each one.

[gwwar]

@apeatling could we add the downgrade functionality in another iteration? This isn't implemented yet and would take some time.

[gwwar]

Modify the paragraph of text for each plan, so they are similar lengths.

We can optimize for en, but I wouldn't expect this to happen for all locale translations. We should make sure that the vertical alignment looks correct when we do have paragraphs that are different lengths.

[shaunandrews]

These sections should always be equal height across plans so that everything aligns.
Modify the paragraph of text for each plan, so they are similar lengths.

I think these two things are gonna cause some trouble when considering translations. Its not very "bulletproof" to try and contain the height of columns like that—even if we give it a fixed-height in CSS there's still a possibility of text overflowing and being hidden.

Removed the "Free Site" entry, because that is basically a given, although I am happy to hear arguments the other way :)

I'm not sure what you mean by "a given." If I'm on the free plan is there no indication of what plan I'm on? Are we attempting to remove the notion of a free "plan," perhaps replacing it with a "plan-less" account? What will new users see—will they be given the option of choosing a free plan?

[rralian]

@shaunandrews he's talking about having removed this bullet-point, which is added to each plan card.

[apeatling]

@shaunandrews That was unclear, yes I meant exactly as bob posted above. On the paragraph height issue, you're correct. We definitely need these to line up somehow, otherwise it is going to feel messy and confusing. I'm sure there is some JS magic we can work out to make sure all columns align to the largest paragraph section? /cc @gwwar

[gwwar]

I'm pretty sure there's a CSS fix. Most likely with the child elements also using display:flex

If need be we could do a js fix for this, though I'd leave it as a last resort.

[shaunandrews]

Ah, I'm a fool. Ignore me. :)

[gwwar]

cc @bubel I think we'll be needing Jetpack copy for the info popups

[gwwar]

We can break out work on this in 2 pieces:

• The new info popup on the feature items (with the required copy) (@retrofox)
• The new call to action on the header / text alignment ( @gwwar )

[bubel]

@gwwar Roger that, I'll get working on it.

[gwwar]

Thanks @bubel ❤️

[bubel]

@gwwar I have the feature descriptions ready to go. Where shall I put them?

[gwwar]

Thanks @bubel feel free to put them in this issue or ping @retrofox in slack

[retrofox]

Just FYI @bubel I've created #6476