search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.41k stars 1.99k forks source link

Install Plugin: Improve UI on free plan sites #93606

Open taipeicoder opened 2 months ago

taipeicoder commented 2 months ago

Description

Image

davemart-in commented 2 months ago

Seems related to https://github.com/Automattic/dotcom-forge/issues/7727

davemart-in commented 2 months ago

Also feels related to: https://github.com/Automattic/wp-calypso/issues/92252

davemart-in commented 2 months ago

@javierarce just checking in if you think this is an issue you'd like to take a pass at designing a less boxy design for, or if we should just assign it to an engineer and use our best judgement?

javierarce commented 2 months ago

@javierarce just checking in if you think this is an issue you'd like to take a pass at designing a less boxy design for, or if we should just assign it to an engineer and use our best judgement?

I think it would be nice to simplify this. I can work on a proposal for this modal and the one in #7727

javierarce commented 1 month ago

I've been reviewing the entire process of uploading a plugin and I was wondering if we could display a modal when the user clicks the Upload button instead of redirecting them to a different screen:

image

This modal would be similar to the one that appears when a user clicks the "Purchase and activate" CTA on a plugin page.

If the user decides to upgrade their plan, we could redirect them to https://wordpress.com/plugins/upload/{site} to continue the upload process.

Here are the tweaks I made to the modal. I think we could apply these changes to the other modal as well.

image

  1. The introductory text informs the user about additional benefits they’ll receive if they upgrade.
  2. There’s a more explicit note warning about changes to their domain.
  3. The effect of the upgrade to the domain is highlighted in the text.
  4. The font size of the "contact support" text is reduced for better visual balance.
  5. The badges use the ligther style we developed for the Site Logs, and they should look less like buttons

I've also tweaked the paddings inside the domain boxes: the current paddings are 10px 24px and my proposal is to set them to 12px 16px.

Regular flow

For reference, this is a regular flow. We display the same information twice, and I think we could simplify the process and avoid showing the modal again.

https://github.com/user-attachments/assets/c52ba749-2265-40f2-985a-00750a683b67

Bugs

While testing the upload plugin flow, I detected a couple of problems. The first one happens if there's a third party plugin in the shopping cart.

https://github.com/user-attachments/assets/6a182571-0f9e-4f8f-9707-3be1a90850c6

I've also found a different bug in the flow, but I haven't been able to reproduce it again

https://github.com/user-attachments/assets/92202c00-7b23-4a8b-8bc6-8dd760517587

Figma file

davemart-in commented 1 month ago

This looks like it's ready to pick up.

javierarce commented 1 month ago

Here's the mobile version. I did some minor tweaking to fix some problems in the current modal (essentially, reducing some paddings & margins, and making sure the badges don't overlap the domains)

image image

BogdanUngureanu commented 1 month ago

@javierarce I have some mixed feelings about using a modal instead of an on-page nudge:

Personally, I prefer the upsell nudge in the Theme upload because it's simple (from Ui and code PoV): click on this and upgrade to be able to upload the theme.

From stats PoV, a simple upgrade nudge like the one from Theme Upload is more performant than the current one we have in Plugins. Private data shared on slack: p1726148035172049-slack-C04DZ8M0GHW

Screenshot 2024-09-12 at 16 41 28

rcrdortiz commented 1 month ago

@javierarce I have some mixed feelings about using a modal instead of an on-page nudge:

  • Codewise we'll need a conditional to either display the upgrade nudge vs redirecting to the upload screen.
  • It's harder to re-use it in other screens where we have something similar (e.g. Theme upload)
  • It contains a lot of information and warnings upfront that are not needed for the purchase. This might overwhelm the user and decide to not upgrade (e.g. the site address is scary. Although, if they upgrade for a yearly plan they'll get a free domain, so that notice won't actually show again).

Personally, I prefer the upsell nudge in the Theme upload because it's simple (from Ui and code PoV): click on this and upgrade to be able to upload the theme.

From stats PoV, a simple upgrade nudge like the one from Theme Upload is more performant than the current one we have in Plugins. Private data shared on slack: p1726148035172049-slack-C04DZ8M0GHW

Screenshot 2024-09-12 at 16 41 28

I think we can remove all those messages, especially since we don't display them when entering the theme installation flow. We should make both the "Install Plugin" and "Install Theme" buttons use the same modal. @javierarce, can we come up with a single modal that works for both cases?

The ideal flow would be something like: I click on Install Theme and Upload Plugin and I see the exact same upgrade modal. Screenshot 2024-09-12 at 15 53 10

Screenshot 2024-09-12 at 15 53 41

mmtr commented 1 month ago

I agree with the messages above. I don't think we should show the .wordpress.com > .wpcomstaging.com domain change warning before purchase, because that message is scary and users might be less likely to upgrade (and, as pointed out by @BogdanUngureanu, we already have evidence that this is case if we compare the theme upload flow with the plugin install flow).

@javierarce can you come up with an alternative design so the upgrade nudge is displayed first, and the domain change warning is displayed after purchase? Ideally something that works for both the theme install flow and the plugin install flow as @rcrdortiz proposed.

It can be either an inline message, or a modal, or something completely different, whatever you think is best for these new circumstances.

Thank you!