michaelpick
commented
2 years ago Thanks for the prompts and feedback, @pablohoneyhoney! I'm working through some ideas for iteration on this and will share them here ASAP.
Open pablohoneyhoney opened 2 years ago
michaelpick
commented
2 years ago Thanks for the prompts and feedback, @pablohoneyhoney! I'm working through some ideas for iteration on this and will share them here ASAP.
DavidRothstein
commented
2 years ago Premium Themes Add beautiful, premium design themes to your site. $50.00 each. Or just $2.00/month for the full collection.
...And the pricing break down is rather confusing.
:+1: See also a previous comment about why we really might not want to mention the "$50.00 each" there: pdgrnI-1m8-p2#comment-2406
lucasmendes-design
commented
2 years ago Thanks for the feedback
They should be consistent with Select All. And reinforce what you are getting in the button. Select Premium Themes or Get Premium Themes
Got it 👍🏼
Added to your plan is also confusing. You had a Free site.
We had a discussion about the plan's name and the concept of Add-ons. We used the term "add to your plan" because one thing is attached to another (even with a Free plan you can buy and pay monthly). We also thought to change the name from "Free" to "Flexible" to match the concept and the copy. I'm wondering what do you think about that @pablohoneyhoney ?
The user chose start with a free site, so we should continue that verbiage here for better validation, not refer to a plan.
👍🏼
I've mentioned this in other places. We should spin this to a positive take (and aligned with Tumblr's phrasing). Ad-free rather than remove.
This same rationale works better on our Pricing page, I believe we should change it.
michaelpick
commented
2 years ago Sharing a few ideas and suggestions below @pablohoneyhoney, @lucasmendes-design.
For ease of reference, I'll break them into separate comments.
Feedback, iteration requests, or questions welcome, of course!
michaelpick
commented
2 years ago We currently appear to use sentence case for add-ons, so that it’s rendered ‘Add-ons’ in isolation or at the start of a sentence, but ‘add-ons’ midway in a sentence.
For specific add-on names it looks like we also use sentence case, so starting a sentence we’d render one of the add-ons as ‘Premium themes’, but if used midway into a sentence, this would be ‘premium themes’. Is that correct, and are we consistently applying it?
We’re not terribly consistent about this, as I’ve seen other features, like ‘Professional Email’ set in title case. Plugins, on the other hand, are rendered in sentence case, and thus lowercased in the context of a sentence. Pro and Starter, as plan names, are currently title-cased (and thus capitalized wherever they sit in a sentence.) I’m not sure that this context has been captured in any current brand or style guides, but may be wrong.
It would be good to decide on and standardize the usage (or a simple taxonomy) of product titling
michaelpick
commented
2 years ago Boost your plan with add-ons Expand what's possible with your free WordPress.com site, one feature at a time. The cost of these add-ons can be applied towards a paid plan when you're ready to upgrade.
Boost your free site with add-ons Expand what you are able to do with these specific functionalities that can be added to this free site. These add-ons will be applied towards a paid plan when you're ready to upgrade.
Headline (variations):
Note: the job of the headline is get us to read the supporting copy. Keeping it simple and snappy before expanding with clarification in directly supporting copy can help arrest attention and increase engagement. Apple do a good job of pairing this concise – often playful – headline with longer-form supporting, explanatory copy.
Go further with Add-Ons
((Simple; opens a curiosity loop via FOMO and intent alignment))
Take your free site further with Add-Ons
((As above, via the cognitive bias towards reciprocation when given something free))
Take your site further with add-ons
((As above, but with greater focus on both YOU and YOUR SITE))
Power up your free site with add-ons
((Leans on a well-known, slightly more playful term ‘power up’))
Boost your site’s capabilities with flexible add-ons
((Speaks directly to end result at the cost of brevity and a dryer tone))
Level up your free site with {powerful/flexible} add-ons
((Another readily graspable term ‘level up’ leans on existing experiences and understanding. Then throws focus to the flexibility or power gains which are both terms that have come up a lot in customer research))
Boost your site with add-ons
((Context-packed: emphasis on ‘boost’ AND ‘your site’))
Give your site a boost with add-ons.
((Variation of above))
Body copy (variations):
Add-ons are a flexible, affordable way to add individual features to your free site.
((Explanatory but jargon-free; calls out flexibility and affordability as two of the things mentioned often in customer feedback))
Add-ons are an affordable way to add just the features you need. No less. No more.
((Focus on the affordability and a clear explanation. Emphasize that the user is in control with the conversational, staccato ‘No less. No more.’ speaking to a sense of not being charged for things you don’t feel you need))
Hand pick powerful features to give your free site an extra boost.
((Amps up the tangibility ‘hand pick’ while suggesting agency and flexibility, reinforces with ‘powerful’ to drill home the value of add-ons; mentions ‘free site’ to activate the reciprocity cognitive bias; simplifies the offering with ‘extra boost’))
Add additional features to your free site to expand what's possible.
((Highlights the action with add; adds clarity with’ additional features’; keeps it conversational and nudges ambition with ‘expand what’s possible’))
Subscript/small print/footnote:
The cost of your add-ons will be applied towards a paid plan if you choose to upgrade in future.
michaelpick
commented
2 years ago Premium themes Add beautiful, premium design themes to your site. $50.00 each. Or just $2.00/month for the full collection.
No example, but mention that:
Headline
Body copy (variations):
Add a collection of premium design themes to your site for just $2/month
((Use of collection to avoid any confusion with EVERY premium theme available; states value pricing))
Add a collection of premium design themes to your site for just $2/month (usually $50/theme)
((Carries over the risk of the dual pricing, but switches the latter to anchoring of the former’s value))
Add a collection of hand-crafted, premium design themes to your site
((Variation. As the pricing will also be displayed, this may reduce redundancy. Added ‘hand-crafted’ to further support the premium angle, but this could be dropped for brevity))
Add a hand-picked collection of exclusive premium design themes to your site
((Switch to ‘hand-picked’ to suggest curation; use of ‘exclusive’ to play on cognitive bias towards rarity/scarcity/status))
Stand out and switch things up with a collection of premium design themes
((Lead with social benefit and site goal of standing out; add assonance for mnemonic qualities; call out that you can switch up your design))
Set your site apart with exclusive premium design themes
((Pares the above to focus on standing out; draws on exclusivity bias, assuming that’s true))
Select from and switch between a collection of premium design themes at any time
((Highlights that you get a number of themes you can change going forward))
Stand out and switch between a collection of unique premium themes for just $2/month.
((Variation of above))
The constraints here are:
michaelpick
commented
2 years ago Remove Ads Remove ads for a clean, uncluttered site that puts your content center stage.
Ads-Free Let your audience browse your site free of ads.
Headline:
Ad-free
((or Ad-Free if we decide to title case individual add-ons))
Let your audience browse your site, ad-free.
((I’m not a huge fan of ‘letting’ people do things, it feels ever so slightly paternalistic. However, it does make for concise copy. This approach also paints a nice mental picture of the reader browsing through your site.))
Let your site visitors enjoy an ad-free experience.
((Doubles down on the mirror neuron empathy effect, making us picture our visitors actively enjoying this upgrade. Replaces ‘audience’ with ‘site visitor’ for greater breadth and economy of copy, allowing us to dispense with further copy to explain that they’re visiting or browsing our site))
Give your site visitors an ad-free experience.
((Variation of above with further brevity, and leaning into the positive experience of ‘giving’))
Give your site visitors a clean, ad-free experience.
((Variation, adds ‘clean’ to further paint a mental picture, inferring the opposite of clean – messy or distracting))
Give your site visitors the gift of ad-free browsing. ((Variation of above, further doubling down on giving with ‘gift’))
Give your audience an ad-free experience across your site.
((Maintains ‘giving’ sentiment, reverts to the cozier‘ audience’; paints a mental picture of site-wide change with ‘across your site’))
Ensure a clean, ad-free experience for your site visitors.
((Variation that leans on expelling anxiety vs. Positive sentiment of giving))
Put your content center stage by making your site ad-free.
((Appeals more directly to site goals and self-interest in the success of our site. Intention first, feature second.))
Create an ad-free experience for your audience.
((Leans into self-identification as creator/someone with personal agency))
Go Ad-Free to keep attention on what matters most: your content
((Variation of above that leads with a little bit more of an active flavor))
Put your content center stage. Go Ad-Free.
((Puts the user goal and benefit first; follows with simple staccato imperative/call-to-action.))
michaelpick
commented
2 years ago Custom CSS Take customization of every design detail on your site to the next level by tapping into the power of CSS code.
Custom CSS Control the CSS code of this site for more customization.
Headline:
Custom CSS
Body variants:
Control your site's CSS code for advanced design customization
CSS code unlocks the ability to customize your site design at a pixel-by-pixel level
Access CSS code editing tools for advanced design customization
Dive deep into design customization with direct access to CSS code editing
Take additional control of your site’s design with access to CSS code editing
Take control of the CSS code for your site for advanced design customization
Directly edit the CSS code of your site for deep design customization
michaelpick
commented
2 years ago Let me know if you'd like me to take a look at CTA and transactional microcopy, too and I can add a few additional thoughts.
If it's more helpful, I'd be happy to gather my personal preferences/suggestions from the above, but I wanted to give you the initial latitude to foster conversation.
lucasmendes-design
commented
2 years ago Amazing Michael, I'm having a look and will put some of the copy in context to better visualize these options 👍🏼
lucasmendes-design
commented
2 years ago Hi @michaelpick, here is an example of your suggestion.
About the tooltip, is this what you envisioned? I think it's a great idea to explain to our customer what is CSS. Sometimes we take for granted some terms that our users don't understand.
michaelpick
commented
2 years ago Awesome – thanks for sharing @lucasmendes-design! I love the tooltip implementation and that is the kind of thing I had in mind (only better!)
How do you feel about line length of supporting/explatory copy for the add-ons? I guess to some extent it will be determined by viewport, but I'd be happy to iterate on any copy line lengths if it helped even things out (either for Ad free or the other two.) It may not be a concern, and isn't my domain, so I bow to your judgement!
lucasmendes-design
commented
2 years ago How do you feel about line length of supporting/explatory copy for the add-ons?
if this is not a problem @michaelpick , I think we can increase the length (just a bit) of the copy for Ads Free. The ideal length for Ads Free is two lines, IMO.
I choose this copy because of this Explanatory but jargon-free; calls out flexibility and affordability as two of the things mentioned often in customer feedback. This concept is good because add-ons are not well explained anywhere, plus, our users are non-tech savvy users.
Maybe this is not so relevant but maybe we can start the subtitle without the add-ons. I think ending the title with "add-ons" and starting the subtitle with "add-ons" is breaking the flow of reading. Wdyt? 🤔
michaelpick
commented
2 years ago Thanks, @lucasmendes-design! Here's what I've got:
Your suggestion makes sense. By character count the current copy runs:
Current copy: Ensure a clean, ad-free experience for your site visitors
A few ideas to increase the line length of the latter while supporting the UX:
Let me know if none of those hits the spot and I can iterate forward.
Maybe this is not so relevant but maybe we can start the title without the add-ons. I think ending the title with "add-ons" and starting the subtitle with "add-ons" is breaking the flow of reading. Wdyt?
With the different context (introductory vs. explanatory) some redundancy may be okay in this context, but I take your point! A couple of ways you could solve for this might be:
Power up your free site Add-ons are a flexible, affordable way to add additional features to your free site
Or:
Power up your free site with add-ons A flexible, affordable way to add individual features to your free site
Of the two, I think the second flows better and offers a little more clarity.
I wanted to circle back to the 'Ad-free' vs. 'Ads free' feature naming as mentioned in a previous (too long 😉) comment:
I'd recommend we consider using 'Ad-free' vs 'Ads Free' to avoid confusion and play into an existing, well-established pattern likely to reduce cognitive load or confusion. If that's not tenable for whatever reason, I'd still recommend hyphenating (Grammarly is trying to correct this as I write!) as it can help with disambiguation.
I did a very fast and loose test of this by googling some comparative terms and checking a few sites associated with opting out of ads, and found this to be pretty much universal, to the point where most dictionaries have had the term added in recent times.
A few examples:
Google trends:
Cambridge dictionary (suggests ad-free if you search for ads-free):
Google copy for their nest audio/YT Music service:
For the sake of consistency with Tumblr:
Searching 'ads free' for Netflix returns 'Ad Free':
Ditto for Netflix (note that Google is taking my intent and finding the best content match):
Spotify results for ad-free and ads-free:
Top YouTube results for Ads-free:
I also found, on searching for Ads Free, that people were looking for a free way to advertise, as expected in my last comment:
The only counter-example I could find was Amazon, who roll with 'With Ads' or 'Without Ads' for their Kindle devices, but even then this is at the end rather than the beginning of a product description, where the plural becomes a little more tenable.
lucasmendes-design
commented
2 years ago Thanks for putting all this together. This is gold ⭐️
I create an example here and change the copy. I think I missed the comment about Ad-free; sorry for that. I'm pretty much convinced that we should change.
pablohoneyhoney
commented
2 years ago A good example of rapid collaboration and permutations. Nice work!
[ ] Let's add a period to the body copy sentence after ...free site, right?
[ ] And there's something unbalanced, mialigned with this combination of price and button.
Perhaps something simpler (no Recoleta)?
Maybe the price line is colored blue?
Perhaps the price indicator doesn't show if none are selected.
The CTA says Not now, if none are selected. Skip in this context seems you don't get back to it later. And we want to.
When visible the price is below the button, so the button is a visual anchor?
pablohoneyhoney
commented
2 years ago BTW, how would these tweaks behave in smaller breakpoints?
simison
commented
2 years ago 
And there's something unbalanced, mialigned with this combination of price and button.
That might be worse in some languages as the text gets longer: "0 EUR /kuukausi, laskutetaan vuosittain"
Putting the text under the button, with "$0" sized the same as the rest of the text might do the trick indeed.
lucasmendes-design
commented
2 years ago Thanks for the feedback @pablohoneyhoney and @simison 🙏🏼
I took this pattern from the plugins page. I believe in different languages, we will have problems on that page too. Especially the CTA there "Purchase and active".
"$0" sized the same as the rest of the text might do the trick indeed. Perhaps something simpler (no Recoleta)?
I think this is the way to go.
The CTA says Not now, if none are selected. Skip in this context seems you don't get back to it later. And we want to.
Good! I'll change it to "Decide later".
This is the flow I'm currently seeing (will open a separate issue for UX/Visual details):
Things we need to correct verbally @michaelpick @lucasmendes-design
CTAs
Select Premium ThemesorGet Premium ThemesRemove add-onstate should be consistent with the selection state, verbally.Texts
Heading
The user chose start with a free site, so we should continue that verbiage here for better validation, not refer to a plan. For example:
(Current)
(Current)
It seems the other themes aren't beautiful. And the pricing break down is rather confusing. I'm not sure how to best approach this one. @ianstewart
(Current)
I've mentioned this in other places. We should spin this to a positive take (and aligned with Tumblr's phrasing). Ad-free rather than remove. For example:
(Current)
We should be more direct here, especially for the audience that would be interested in this capability. For example: