Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve upsell section design #887

Merged
merged 6 commits into from
Mar 16, 2022
Merged

Improve upsell section design #887

merged 6 commits into from
Mar 16, 2022

Conversation

girishpanchal30
Copy link
Contributor

Close Codeinwp/visualizer-pro#314

@pirate-bot
Copy link
Contributor

pirate-bot commented Feb 24, 2022

Plugin build for 201b923 is ready 🛎️!

@girishpanchal30
Copy link
Contributor Author

@selul Please review upsell section design and do let me know if you have any queries.

Thanks

@selul
Copy link
Contributor

selul commented Feb 24, 2022

@girishpanchal30 will leave this for @irinelenache to do, please move it to testing.

@irinelenache
Copy link

irinelenache commented Mar 2, 2022

@girishpanchal30 Tested and found a few things:

@girishpanchal30
Copy link
Contributor Author

@irinelenache Fixed 3 points, Please retest again

@mghenciu
Copy link
Contributor

mghenciu commented Mar 2, 2022

As Irinel mentioned, @girishpanchal30, we agreed to use only the 1-column upsell message:
image

A few other things I noticed after doing a quick test with the build:

  • when opening the Get Visualizer Pro button/menu, the link should open in New Tab. That's more of a general rule for upsell messages, to open them in a New Tab - instead of the current one (because this can be annoying for users).

Screenshot 2022-03-02 at 13 52 51

  • View more features button in the upsell, should take users to this Section. I know previously it was leading to the Pricing section, but now things are different because we have the Get Visualizer Pro button in the Sidebar.

  • I noticed now that the Upsell box looks good on a <1366px width, but on bigger screens the Upsell Box looks way too empty (second image)

image

Screenshot 2022-03-02 at 14 17 40

So to not waste the work you've already done with 2 columns, I would add the logic so if the Window width is bigger than 1366px, then show all 12 Visualizer Pro benefits, but in one column, and also only if width is >1366px make the column height: fit-content;. So it would look something like this:
image

On smaller screens <1366px, we'll keep only 6 checkmarks/benefits visible, and the Column height: 100%


As always, let me know if I can help with something else.
and sorry for asking last-mile changes, I'll try to avoid them in future.

@girishpanchal30
Copy link
Contributor Author

As always, let me know if I can help with something else.

@mghenciu Sure thank you

@girishpanchal30
Copy link
Contributor Author

Hello @mghenciu, I have applied your mentioned suggestion, Please check and do let me know if you have any queries.

cc @irinelenache
Thanks

@mghenciu
Copy link
Contributor

mghenciu commented Mar 3, 2022

Hello @mghenciu, I have applied your mentioned suggestion, Please check and do let me know if you have any queries.

cc @irinelenache Thanks

Tested now and it looks good, the changes I mentioned are implemented.
Thank you!

@irinelenache
Copy link

@girishpanchal30 Tested again and the mentioned issues are fixed, thank you 👍

A single problem:

  • This is how the upsell looks on my end:

image

Tested with Safari/Chrome on Macbook pro - Built-in Retina Display 13,3-inch (2560 × 1600)

@mghenciu
Copy link
Contributor

mghenciu commented Mar 3, 2022

@girishpanchal30 Tested again and the mentioned issues are fixed, thank you 👍

A single problem:

  • This is how the upsell looks on my end:

Tested with Safari/Chrome on Macbook pro - Built-in Retina Display 13,3-inch (2560 × 1600)

@irinelenache, It may be related to the fact that the laptop is 13 inch, and the Ratio is 16:10.
With a simulation in Chrome using the Resolution you mentioned, it looks ok:
image

Maybe we could adjust/increase a bit the media query @girishpanchal30 .

Essentially the idea here is to show only 6 benefits on small screens (laptops, small displays) and 12 benefits/checkmarks on larger screens, like for example a 3440x1440 Ultrawide Monitor. Probably you know best what media queries are good for such a case, and how to also keep in mind the Retina screens Irinel mentioned.

@girishpanchal30
Copy link
Contributor Author

@irinelenache @mghenciu I'm looking into this issue, I'll update you here...

@girishpanchal30
Copy link
Contributor Author

@irinelenache @mghenciu I have fixed mentioned issue, Please retest and let me know if you have any issues.
Thanks

@mghenciu
Copy link
Contributor

mghenciu commented Mar 8, 2022

I think it looks good @girishpanchal30, from my side.
Laptop (6 checkmarks):
image

Large screen (12 checkmarks):
image

@irinelenache
Copy link

@girishpanchal30 Tested again and everything looks fine for me too, thank you 👍

@selul selul merged commit c03c4d1 into development Mar 16, 2022
@pirate-bot
Copy link
Contributor

🎉 This PR is included in version 3.7.5 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Mar 17, 2022
@selul selul deleted the design/pro/314 branch October 12, 2022 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Indicate that an issue has been resolved and released in a particular version of the product.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants