Reviewing Texts in the Add-ons page for Free Flow

[pablohoneyhoney]

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

• They should be consistent with Select All.
• And reinforce what you are getting in the button. Select Premium Themes or Get Premium Themes
• Added to your plan is also confusing. You had a Free site.
• Remove add-on state should be consistent with the selection state, verbally.

Texts

Heading

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.

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)

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.

(Current)

Premium Themes
Add beautiful, premium design themes to your site. $50.00 each. Or just $2.00/month for the full collection.

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)

Remove Ads
Remove ads for a clean, uncluttered site that puts your content center stage.

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:

Ads-Free
Let your audience browse your site free of ads.

(Current)

Custom CSS
Take customization of every design detail on your site to the next level by tapping into the power of CSS code.

We should be more direct here, especially for the audience that would be interested in this capability. For example:

Custom CSS
Control the CSS code of this site for more customization.

[michaelpick]

Thanks for the prompts and feedback, @pablohoneyhoney! I'm working through some ideas for iteration on this and will share them here ASAP.

[DavidRothstein]

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.

👍 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]

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]

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]

Casing for the term ‘add-ons’ and other product naming

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]

Page heading

Current copy

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.

Example shared above

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.

Suggested copy

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.

Notes

• Removed mention of ‘plans’ in the headline
• Pared example copy to increase clarity and readability (while maintaining intent)
• As the reassuring copy about upgrading at a later date is secondary, I recommend considering moving it to either a footnote (with an asterisk/number – Apple makes good use of these) or subscript/small print copy under the feature)

[michaelpick]

Premium themes copy

Current copy

Premium themes
Add beautiful, premium design themes to your site. $50.00 each. Or just $2.00/month for the full collection.

Example shared above

No example, but mention that:

• Risk of implying other themes aren’t beautiful
• Confusing copy with multiple pricing ($2/month OR $50/theme)

Suggested copy

Headline

• Premium themes
• Premium Themes ((<— if we’d like to standardize on title case))

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))

Notes

The constraints here are:

• Not throwing shade on non-premium themes
• Avoiding suggesting that you get every premium theme under the sun
• Balancing the clarity of what you get ()to avoid negative surprises) with desirable goals and outcomes for Free users

[michaelpick]

Remove Ads / Ad-Free copy

Current copy

Remove Ads
Remove ads for a clean, uncluttered site that puts your content center stage.

Example shared above

Ads-Free
Let your audience browse your site free of ads.

Suggested copy

Headline:

Ad-free

((or Ad-Free if we decide to title case individual add-ons))

Body (variations):

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.))

Notes

• Shifted copy from negative to positive as mentioned in feedback. One risk here is that users on other plans can opt-in to WordAds, which may clash with the notion of ‘Ad-Free’ (rather than just removing our house ads)
  — Made use of ‘Ad-Free’ as a more commonly used and understood term than the pluralized ‘Ads-Free’ (which sounds more like you’ll get some ads, free)

[michaelpick]

Custom CSS copy

Current copy

Custom CSS
Take customization of every design detail on your site to the next level by tapping into the power of CSS code.

Example shared above

Custom CSS
Control the CSS code of this site for more customization.

Suggested copy

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

Notes

• I think we need to tread a line here given what we know about the makeup of our Free user base (i.e. the majority are not hugely technically savvy)
• OTOH, the last thing we want is people upgrading to a CSS upgrade who have no idea what CSS and don’t plan to learn to use it (or at least work with our HE’s to implement it, which wouldn’t be directly possible for Free users, other than via the forums)
• I’ve shared some ideas above that attempt to bridge that gap while keeping things simple
• Another option might be to consider a tooltip for CSS to keep the copy tighter
  • For example:
  • CSS is an advanced way to finesse every detail of your site’s design with code
  • CSS is code used to make advanced, granular changes to your site’s design

[michaelpick]

Other

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]

Amazing Michael, I'm having a look and will put some of the copy in context to better visualize these options 👍🏼

[lucasmendes-design]

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]

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]

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]

Thanks, @lucasmendes-design! Here's what I've got:

Ads free explanatory copy

Your suggestion makes sense. By character count the current copy runs:

• 76 characters for CSS supporting copy
• 80 characters for Premium themes
• 57 characters for Ads Free

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:

• Ensure a clean, distraction-free experience for your site visitors. (67c) <-- swaps out the potentially redundant 'add-free' already mentioned in the headline but may still run short
• • Ensure a clean, ad-free browsing experience for your site visitors (66c) <-- add browsing to elucidate on the experience mentioned, but may still fall short
• Remove distractions and ensure a clean, ad-free experience for your site visitors (81c) <-- about the same length as the others, but leaves ad-free intact
• Opt-out of on-site ads to ensure a clean, ad-free experience for your site visitors (83c) <-- shifts focus to the act of opting-out as a positive, which gives the reader a sense of agency. Could potentially remove 'on-site' and still make this work. See below:
• Opt-out of ads to ensure a clean, ad-free experience for your site visitors (75c) <-- cleaner variant of above, but may run a little short
• Ensure a clean, distraction-free experience for your site visitors by opting out of ads (87c) <-- may run over by a few characters, but
• Ensure a distraction-free experience for your site visitor by opting out of ads (79c) <-- slightly shorter variant achieved by removing 'clean'

Let me know if none of those hits the spot and I can iterate forward.

Primary headline/subhead

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.

One more thing 🤓

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]

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]

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]

BTW, how would these tweaks behave in smaller breakpoints?

[simison]

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]

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".