Dotcom Upsells: Better Design and Strategy

[nuriapenya]

We need to revise our overall upsell system. Not only from a design perspective but also from a strategic point of view.

Things to consider

How do users upgrade?
Key areas: Domains, Premium themes, Custom Styles, Gated features, etc

General

• Clearly differentiating between paid and free features
• Gating (things that can be used until X and they you have to pay)
• Plan-specific features
• When prompting to upgrade, should we always show all plans? Maybe some users only need certain things.
• Consistent UI (e.g. Copy, icons, colours)
• Consistent UX (e.g. Opening Plans or Checkout within a modal so users don't loose context)

Domains

• What is the value of a custom domain and how do we present that?
• What happens if a user gets a custom domain and connects it to a free plan?
• Can a custom domain be connected to a free site?
• Can a user launch a site or make a private site public without deciding on a custom, proper free, or randomly assigned free domain?
• How do we position connecting an external domain, given that 32% of all 24-hour plan subscribers use one? p58i-ifD-p2

Relates to:
#95382

@taipeicoder @Copons and the team already did a lot of background work in here:

Context: p58i-i4X-p2
Auditing Upgrade CTA Banners: pbxlJb-6rj-p2
Auditing Empty State and Full-Page Upsells: pbxlJb-6sE-p2
Auditing Referral Links and Feature Ads: pbxlJb-6uh-p2
Auditing Plans, Domains, and Email Upsells: pbxlJb-6BW-p2
Auditing Upsells: Removing Low-Performers: pbxlJb-6wX-p2

Another reference: p9Jlb4-eWT-p2

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Plans & Upgrades: The issue is focused on revising the upsell system, which directly relates to the plans and upgrade processes available to users.
• [Feature] Checkout: The issue discusses upgrading and the checkout process, indicating the need for a better user experience in purchasing plans.
• [Feature] Domain Management: There are specific points raised about custom domains, indicating the need to address domain management in relation to upsells.
• [Feature] Pricing: The issue touches on the considerations for how users are prompted to upgrade, which relates to the pricing structure and perception of value.

[jameskoster]

Tangentially related: #98080

[crisbusquets]

Related issue (/themes): pfYzsZ-1i6-p2#comment-1260

[crisbusquets]

Relevant P2: pbxlJb-6sE-p2

[crisbusquets]

Related issue: #95931

[crisbusquets]

Another slightly related issue: #98039

[nuriapenya]

First pass into this project

I mapped in this Figma a visual summary of all the inconsistencies, added some documentation to other audits where we also show some user insights data, and added some notes to consider.

Next steps:

• Analyse and reference benchmark
• Discuss strategy and ideas, what are we try to solve?
• Start ideate some design solutions.

[jameskoster]

Lots of elements to this! Sharing an early brain dump:

Tone

• Ensure upsell language consistently aligns with the brand voice (if we have one?).
  • General guidelines for language; use of technical terms, jargon, etc. potentially centred around goals (https://wp.me/pet6gk-1Sk).
• Identify opportunities to standardise and upstream in the design system.

Pattern Selection Guidelines

• Define criteria for when to use banners versus other upsell techniques (e.g., modals, empty states, landing pages).
  • Consider user journey stages and contextual relevance when documenting pattern usage guidelines.
• Potentially define limits for things like number of banners on a single page, to avoid overwhelming or distracting users.

Component Designs

• If required, create a new banner 'component' for wp-admin that supports flexibility for various upsell types.
  • Ensure the component includes features like dismissibility, responsiveness, accessibility, and configurable visual styles (optional illustration/icon, etc).
  • Ensure consistent type configuration and appearance.
• Design layout configurations for upsell messages that appear outside of banners e.g. modals, empty states, etc.
• CTA's
  • Sentence case or title case for buttons?
  • Button variant configurations.
  • Define a small set of concise, action-oriented labels to be used consistently across.

[jasmussen]

Noting that there's been a desire to be able to dismiss the unclaimed domain credit upsell. That could look like this:

That's a right-float X button with some negative top/right margin to position it against the text. The motivation here is to use an icon, similar to every other dismissible interface we use, but also to make this scale in a more reasonable way to other languages where the limited 160px space does not afford much.

An alternate phrasing is shorter, and fits on one line in the more classic Calypso interface that has the wider 272px nav bar. Unfortunately that still stacks in the thinner nav bar, and even causes a typographic widow, so is alas one to avoid:

[alvezfrancese]

Hi @jameskoster! Great feedback!

We (that is: @michaelpick and I) are currently gathering information and putting together a more thorough document, but we've shared some guidelines you may find useful in the past:

• Dotcom Landing Pages: A Modular Style Guide
• Dotcom Voice and Tone: An Open Discussion
• Dotcom Brand Voice in a Nutshell

[nuriapenya]

More information around upsells metrics in My Home: pfYzsZ-1CC-p2

And I added here some ideas for contextual upsells (e.g. Fiver): pfYzsZ-1CC-p2#comment-1588

[jameskoster]

A dismissible banner in the block inspector can work well, we've previously surfaced information this way in core.

One consideration for the upsell in the admin screen is that if/when core adds a Site Logo setting there will be duplicate "Site Logo" fields. Similarly if the user follows this action and creates a logo, they might assume they can apply it in this location which isn't currently the case. Of course we could add the Site Logo setting ourselves, but then we're back at the duplication issue if core adds a logo setting here.