wp-calypso
wp-calypso copied to clipboard
Automattic
Install Plugin: Improve UI on free plan sites
Description
- The layout is confusing with too many boxes, and boxes within boxes.
- The primary action is easy to confuse with "new" label.
Seems related to https://github.com/Automattic/dotcom-forge/issues/7727
Also feels related to: https://github.com/Automattic/wp-calypso/issues/92252
@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 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
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:
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.
- The introductory text informs the user about additional benefits they’ll receive if they upgrade.
- There’s a more explicit note warning about changes to their domain.
- The effect of the upgrade to the domain is highlighted in the text.
- The font size of the "contact support" text is reduced for better visual balance.
- 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
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)
@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
@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
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.
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!
