Design Picker: include Premium Themes in Premium and above plans

[autumnfjeld]

Design Picker: Premium Themes

Premium Badge and Tooltip shown:

Current Copy on tooltip (needs to be confirmed that this is final)

"Premium themes are built by professional designers with quality, functionality, and ease of use in mind."

User Facing Acceptance Criteria

• [x] Show premium themes in the DP for premium, business, & ecommerce
• [x] Premium themes will not show for free or personal plans
• [x] Show badge beneath the thumbnail
• [x] Show tooltip on hover over the the badge
• [x] Design to Figma Specs: EuqfSnWpfYx8fgiBlVmbuA-fi-4183%3A1537
• [x] Get copy validation from @kristastevens , who can advise on copy for tooltip level

Dev Tasks

• [x] #59293
• [x] Add support for premium themes to PTK API, which provides the previews D72672-code

Related

Design Picker: include Premium Themes in all Personal & Free Plans with checkout flow #59229

[autumnfjeld]

@kristastevens This is the first pass at the tooltip copy:

"Premium themes are built by professional designers with quality, functionality, and ease of use in mind."

Sound good? Ideas for improvement?

[simison]

@autumnfjeld @ianstewart in the Gutenboarding user testing done by Boon (a while back now) this exact design was the source of confusion, and perhaps you could improve it in small tweaks?

Not saying this to block progress, just if you have already quick tweaks in mind it could be worth including them in this first iteration, or right next up at least. Would also love to see design explorations on how this could be better done.

Summary from user testing:

• Customers didn't notice the pills. They focused on designs and frequently didn't even notice the "premiumness" of a design.
• It was unclear to almost all customers what "premium" even means. We had a tooltip explaining it ("Requires a Personal plan or above") but it was way too much weight on relying discoverability on that tooltip, and doesn't work on touch devices anyway.
• Our paid themes needed any paid plan, and hence "Premium" term was confusing since it's the same as a plan name.

[simison]

@autumnfjeld regarding copy — for free customers it would be important to convey they need to pay for the theme. For customers who already paid, how can we convey the value of their purchase to reassure them it was a good decision?

[kristastevens]

This is a bit of a conundrum — we might want to consider the criteria by which something is considered a Premium theme. Currently the tool tip text says:

"Premium themes are built by professional designers with quality, functionality, and ease of use in mind."

Our free themes are also designed by professional designers with quality, functionality, and ease of use in mind.

What specific criteria differentiates a Premium theme from a fee one? This is where benefits and selling points would derive from.

That would help me write some clear copy for both the free / paid user that clearly communicates the benefits a Premium theme offers over a free theme. Is it a specific set of features that Premium themes unlock? My sense from our recent pod meeting is that the Premium designation can be a bit arbitrary (maybe I'm mistaken on this count) though I wonder if perhaps a discussion is needed at a higher level to engineer a strategy around the criteria that denotes a Premium theme vs. the criteria that denotes a free theme.

[autumnfjeld]

Great questions @kristastevens !!! I think you're right in that we should expressing something other than "quality, functionality, and ease of use" because that should be a baseline for all themes.

Here are some thoughts on how a premium theme might be more attractive to a user. I'm going to use clumsy language, but the idea is there. :)

• it is less common, could make your site stand out
• it will have more features, beyond the "basics" and "simplicity" of a free option
• perhaps it is designed to allow more flexiblity , so the end user is able to adapt and make variations of it
• more sophisticated (people know free means simple I think it is ok to emphasize this sort of idea)
• offers the latest and greatest of new WP.com features

[autumnfjeld]

@simison

regarding copy — for free customers it would be important to convey they need to pay for the theme. For customers who already paid, how can we convey the value of their purchase to reassure them it was a good decision?

This issue isn't for free plans. That will come in a subsequent iteration.

See the description above written for this work:

[autumnfjeld]

Our paid themes needed any paid plan, and hence "Premium" term was confusing since it's the same as a plan name.

@simison Up until last week when I heard the term "Premium Theme" I interpreted that to mean the actual definition of the word premium "A better than average theme" , I didn't tie it to a plan. (Yes, because I knew so little about what it meant! LOL) The word is "polluted" perhaps by those who know the plan names so well, but I imagine many people might just read "Premium" the way I did. What I would suggest is that in translations that the word get translated for themes in the Design Picker (obviously not for plan names), so that it represents the real word "premium".

It seems ok to me to say "Premium themes are available on some paid plans. Click here to find out more."

[autumnfjeld]

Summary from user testing:

The items in that list will be excellent to consider when we are trying to upsell to free plans.

[kristastevens]

Here are some thoughts on how a premium theme might be more attractive to a user. I'm going to use clumsy language, but the idea is there. :)

it is less common, could make your site stand out it will have more features, beyond the "basics" and "simplicity" of a free option perhaps it is designed to allow more flexiblity , so the end user is able to adapt and make variations of it more sophisticated (people know free means simple I think it is ok to emphasize this sort of idea) offers the latest and greatest of new WP.com features

This is helpful, @autumnfjeld, thank you!

@ianstewart would love the benefit of your history in themes here. From a strategic standpoint — what specifically sets a Premium theme apart from a free theme from the user's perspective? Are there specific features available only in Premium themes that might be attractive? What's the criteria we use to designate a theme as Premium? Thanks for your insight here!

[kristastevens]

Hi @autumnfjeld, I've got some copy options to choose from. Let me know what you think! Happy to tweak some more:

• Premium themes offer a sophisticated and fully customizable design aesthetic.
• Elevate your site's look and feel with a fully customizable Premium theme.
• Elevate your site's look with a stylish and functional Premium theme.
• Premium theme designs are modern, stylish, and fully customizable.
• Choose an elegant and stylish Premium theme to match your brand.
• Let your site stand out from the crowd with a modern and stylish Premium theme.

[autumnfjeld]

I'm diggin' this:

Let your site stand out from the crowd with a modern and stylish Premium theme.

[mreishus]

Looking into adding support for premium themes to the design picker (which is powered by the demo api: /rest/v1/template/demo):

It looks like the sites that are supported by the demo API have "starter" sites that are separate from the demo sites. These sites are listed in class-nux-starter-designs.php on wpcom. For example, here's rockfield:

In order to add, for example, Baxter, we'd need a baxter starter site. Does anyone know how to create these and what goes into them?

I have noticed the API lets you mix and match two different themes together for different results. For example, between edison and rockfield there are four possible combinations: (edison/edison, rockfield/rockfield, edison/rockfield, rockfield/edison). Currently unsure if the starter sites need anything special on them to accommodate this.

[p-jackson]

Closing. Support for premium themes in the design picker when the site already had a premium plan shipped on the 20th Jan 2022 pdgK6S-iY-p2