Marketplace: announcement modal for Starter plan eligibility

[cpapazoglou]

Details

Launching premium plugins on Starter plan is something we want to broadly announce (pdG1ka-at-p2). Let's figure out the best way to do so, probably by using the announcement modal component.

• [x] Only shown to sites with starter plan.
• [x] Shown in plugins page and home page.

[cpapazoglou]

@vinimotaa can you provide the design and the copy?

[emmnyc85]

I am holding off on providing an update on copy until we address this: pdgrnI-1mi-p2#comment-2372

tl;dr - are we going to build a plan for launching buying marketplace products on all plans in July? If so, we will rework the marketing plan

[vinimotaa]

@cpapazoglou @emmnyc85

We'll probably follow @SaxonF 's suggestion - design-wise we'll follow something we already have in place. So we're just depending on the content/CTAs so the we can design a few variations and have a discussion

[emmnyc85]

My recommended language is as follows. We'll be able to use this as well for the other plans when they launch with limited atomic too.

Option 1:

You can now extend your site's capabilities with premium themes and plugins. Available for purchase in our marketplace.

CTA: Explore now

Option 2:

We've made both premium themes and plugins available for purchase in our marketplace.

CTA: Explore now

Feedback from me:

• I think Option 1 is more effective as it focuses more on user value
• In Option 1, I included 'available for purchase in our marketplace' so that customers are not surprised to learn they need to pay for these

[vinimotaa]

Hi @emmnyc85, thanks for the content.

For this broad announcement this is what we can do; follow a similar approach we had when we launched the Marketplace.

• One-time popup window for returning users
• One-time popup window once a logged-in user goes to any part of WordPress.com
• A CTA that will take users to the Marketplace
• (Suggestion) A CTA that can take users to our Blog Post
• A "close" button to dismiss the notification

Please let me know your thoughts!

cc @cpapazoglou @SaxonF

[emmnyc85]

Thanks, @vinimotaa. Some items below:

Copy: I realize it's very redundant.

• Title: Install plugins and themes for your site!
• Copy: You can now extend your site's capabilities with premium themes and plugins. Available for purchase in our marketplace.
• CTA: Explore now

Your suggestions: I'm not fully following. For now, we just want these popup modal(s) to generate awareness and drive people to the plugin page (once limited atomic launches for them). at the moment, there's no need to think about driving customers to a blog post - that will come later.

• How do you first two items listed differ?
• No need for the additional CTAs at the moment unless you have a strong POV and want to share about where this or thede would go.

Thanks again!

[vinimotaa]

Thanks @emmnyc85!

Here's the iteration;

The suggestion to take them to a blog post was to give them a bit more of context to what that means - going from an assumption a user isn't fully aware of our different "ifs" when it comes to different plans/permissions :)

[emmnyc85]

Thank you!

• Looks good
• I hear you on blog post but we won't have that ready yet. At the moment this is a limited launch to people on specific plans vs. an all out announcement, the latter of which will come later

[emmnyc85]

Maybe we should add a banner in the /plugins page to drive better awareness? What could that look like @vinimotaa? That could reiterate the message that this is available for premium plugins and themes and avoid confusion about that

[emmnyc85]

Also - can we change your image to read 'premium plugins and themes' instead of 'premium themes and plugin' please, @vinimotaa? 🙏 Thank you!

[vinimotaa]

Hey @emmnyc85

This is also something I worked on as an alternative to the pop up - copy and CTA not final.

Will tag @SaxonF for feedback as we discussed that this might not be the best spot to handle this messaging.

[vinimotaa]

This is the updated version of our pop up design;

Source can be found on this Figma file

[emmnyc85]

Thanks, @vinimotaa

For the messaging within /plugins, we could the title/header to: Install premium plugins and themes for your site. Then the CTA takes them right to the premium / paid selection

I do worry about customer confusion with these updates and not realizing that they can't purchase or use free plugins

[vinimotaa]

@emmnyc85 I think this is how we have now on this design? Is there anything else to be changed?

[cpapazoglou]

@emmnyc85 I think this is how we have now on this design? Is there anything else to be changed?

@vinimotaa The announcement modal is still available (https://wpcalypso.wordpress.com/devdocs/blocks). Do you prefer using a modal or this banner? Can you provide the component name for this banner?

[SaxonF]

I would lean towards just using the modal for the announcement. The banner feels too intrusive but we could look at doing something inline attached to the "top premium plugins" section if we thought it was completely necessary e.g. a "new" badge next to the header or similar. I'm not convinced it would make a tangible difference though.

In terms of copy, is "themes" necessary here? Are we announcing anything new with themes? I also don't know if we are ready to position themes as included in the marketplace just yet.

[emmnyc85]

@SaxonF - we are planning to announce that they can purchase first party themes.

However, to keep things simple and make sure the premium angle is clear..let's go with adjusting the title as follows Title: Install premium plugins on your site Copy: [keep as is] CTA: [keep as is]

When we do the broader/bigger announcement to all customers, we will make it clear about 1st party / premium themes

Given both @SaxonF's and @cpapazoglou's feedback, let's not to do in-product CTA and only focus on the modal

[vinimotaa]

Thank you for your feedback everyone!

Here's the iterated version;

Figma Link

[cpapazoglou]

Let's remove "themes" from the copy and hold off merging it after pdtkmj-dL-p2 is launched.

[cpapazoglou]

@emmnyc85 I believe we should only target the following segment?:

• starter plan sites

[emmnyc85]

Correct, @cpapazoglou. Let's aim for 7/13 launch as that's a week after the product change occurs, and we want to ensure it functions effectively first

[vinimotaa]

Would that be something like this?

@cpapazoglou @emmnyc85

[emmnyc85]

Thanks, @vinimotaa. Let's please remove 'You can now' and just start with 'Extend' and see if that gets us to 2 lines, instead of 3 :)

[vinimotaa]

Nice!

My only thought on this is that - from this copy, it doesn't sound like a "benefit was unlocked" for me, but more like, "oh, by the way, you can purchase our plugins".

Any thoughts?

[emmnyc85]

Thanks, @vinimotaa. How would you adjust? I wrote this to make it clear that they need to purchase vs setting the wrong expectations. I'm sure there are better ways to approach though. Interested for your thoughts

[vinimotaa]

Access to Figma:

https://www.figma.com/file/f84fqtCG4pCnCh2Hq0But5/Marketplace-Refinements?node-id=2442%3A35703

[emmnyc85]

Thanks, @vinimotaa. What are our copy recommendations? It says new right above the headline text too

[emmnyc85]

Just to keep track:

• We removed 'and themes'
• I just added a comment / ask to change 'in our marketplace' to 'on the plugins page' as that is clearer for the customers. They have no knowledge of a marketplace or where it lives cc: @vinimotaa

[vinimotaa]

Copy updated @emmnyc85!

https://www.figma.com/file/f84fqtCG4pCnCh2Hq0But5/Marketplace-Refinements?node-id=2442%3A35703

[emmnyc85]

Thanks, @vinimotaa. Should the plugins page be hyperlinked just in case that's where a user decides to try to click? Or will drawing attention to that cause confusion?

[vinimotaa]

@emmnyc85 I don't think is needed - generally, a modal has only one goal and the main CTA. I'd rather simplify to;

• When a user clicks on "Explore" they go to the Marketplace
• When a user clicks on "x" or outside the modal, it dismiss it

[emmnyc85]

Got it - thanks for clarifying!

[cpapazoglou]

@vinimotaa I noticed that typography and the background color of the image are different than the original AnnouncementModal component found here https://wpcalypso.wordpress.com/devdocs/blocks. Is that on purpose? If yes, can we make sure that:

1. When the design of the component changes, communicate clearly which are the changes. We might need a separate issue for this.
2. Use colors found in our design systems, I can see #F0F7FC for the background but don't know to what it matches on our design system

FWIW, it looks like this without any design change

[emmnyc85]

@vinimotaa - What @cpapazoglou shared above doesn't render great. The text is off. Let's make sure it looks like your version

[vinimotaa]

@cpapazoglou - thanks for highlighting the blue, and that's fine to keep the one we have in place. As per typography size, I've been using the size and type from our design system. What I have changed from the original modal overall was the title size to accommodate longer titles. The first modal (you can see below) uses a 44px font which I think is way too big for the size of the title we have.

Would that be ok to keep these 2 modal versions? So we have them for 2 different cases?

Another detail we can improve on is the proportion of the copy side (white column) and make it bigger. Not sure if you work with proportion or pixel for this, but this could be 60%/40%?

What is the best way I can share the specs with you?

[vinimotaa]

Using the original Figma component, this is how it would look like:

[emmnyc85]

can we make the header look better please? it's over 4 lines and should be on 2-3 probably, @vinimotaa

[cpapazoglou]

@emmnyc85 I will change the font-size and proportion of the copy side and we should be OK.

@vinimotaa, for the future a figma link with notes for each change should be enough.

[emmnyc85]

@cpapazoglou thank you! will you please share an updated image here? I need it for a separate P2 update too ;)

[cpapazoglou]

Here you are @emmnyc85

[emmnyc85]

Thanks, @cpapazoglou. A couple last min considerations:

• Should we change the image on the right to something celebratory a la 🎉
• The 2nd and 3rd lines of text plugins to Available don't look great. Should there be a tiny increase in space between the two?

cc: @vinimotaa

[cpapazoglou]

The 2nd and 3rd lines of text plugins to Available don't look great. Should there be a tiny increase in space between the two?

I am not sure what you mean, this is one paragraph. I think we are over optimising for english texts.

[vinimotaa]

Hey folks, I think if we increase bit the text box it would help. It seems we have some real estate available on the white hand side;

[emmnyc85]

Understood, @cpapazoglou. Will leave to our expert, @vinimotaa, to make any adjustments

@vinimotaa if you make any changes, will you please share the final version here?

[cpapazoglou]

@vinimotaa this is the text box area

Again, we should avoid optimising the designs for each new announcement. The design should be universal and adapt well for all languages.

[vinimotaa]

Got it @cpapazoglou - that looks fine to me. This should be able to host any announcement/message we might have in the future.

@emmnyc85 for illustrations, this is the closest we have to illustrate this message. It seems we won't be able to make any illustration request as of now.

[emmnyc85]

Thank you both!

[vinimotaa]

@cpapazoglou @emmnyc85

Hey folks, I just came across the modal pop-up we implemented - is the "Explore" button working on your end? It seems I clicked on "Explore" and the modal simply closed - is that intentional to use the "Explore" button to close the modal? Or the plan is to take users to the Plugins page?

[emmnyc85]

We should take the users to the plugin page

On Fri, Jul 15, 2022 at 4:29 PM Vini Mota @.***> wrote:

@cpapazoglou https://github.com/cpapazoglou @emmnyc85 https://github.com/emmnyc85

Hey folks, I just came across the modal pop-up we implemented - is the "Explore" button working on your end? It seems I clicked on "Explore" and the modal simply closed - is that intentional to use the "Explore" button to close the modal? Or the plan is to take users to the Plugins page?

— Reply to this email directly, view it on GitHub https://github.com/Automattic/wp-calypso/issues/64972#issuecomment-1185602627, or unsubscribe https://github.com/notifications/unsubscribe-auth/AU2CAGAW6G5HZ3VSNSY567DVUFYULANCNFSM5Z5Z72DA . You are receiving this because you were mentioned.Message ID: @.***>

[emmnyc85]

*PAID plugins page :)

On Sat, Jul 16, 2022 at 12:33 PM Eric Miller @.***> wrote:

We should take the users to the plugin page

On Fri, Jul 15, 2022 at 4:29 PM Vini Mota @.***> wrote:

@cpapazoglou https://github.com/cpapazoglou @emmnyc85 https://github.com/emmnyc85

Hey folks, I just came across the modal pop-up we implemented - is the "Explore" button working on your end? It seems I clicked on "Explore" and the modal simply closed - is that intentional to use the "Explore" button to close the modal? Or the plan is to take users to the Plugins page?

— Reply to this email directly, view it on GitHub https://github.com/Automattic/wp-calypso/issues/64972#issuecomment-1185602627, or unsubscribe https://github.com/notifications/unsubscribe-auth/AU2CAGAW6G5HZ3VSNSY567DVUFYULANCNFSM5Z5Z72DA . You are receiving this because you were mentioned.Message ID: @.***>