Changes proposed in this Pull Request
Fixes 1196341175636977-as-1199527862646253
.
- Add a new variant/iteration of the pricing page, dubbed
spp
(short for “simplify pricing page”).
- Add
jetpackSimplifyPricingPage
A/B test with test (changes in this PR) and control (no change) variants.
- Add new product copy for this variant.
- Create and reference new variant-specific
ProductGrid
and JetpackFreeCard
components.
- Create a new card for Jetpack CRM Free, and display it at the end of the product grid in the same section as Jetpack Free.
- Add new variant-specific logic to account for changes to product grid ordering.
- Change grid-wrapping style logic to look at the
popularProducts
list instead of sortedPlans
.
Testing instructions
Tip: In addition to toggling your A/B test assignment, you can also manually toggle between variants by appending cloud-pricing-page=<variant>
to your URL as a query parameter, where <variant>
is the variant name (e.g., “i5”, “spp”).
All interfaces
In all experiences (Calypso Blue’s Plans page, Calypso Green’s Pricing page, Jetpack Connect’s store/plans page):
- In the A/B test dev panel in the lower right of Calypso Blue, select the
jetpackSimplifyPricingPage
test and either the control
or test
radio button, depending on what you’d like to test.
- Verify that the product listing is in the correct order as defined in the reference mock-ups (below).
- Verify that all product copy (titles, sub-headlines, buttons, features) match the reference mock-ups.
- Verify that Jetpack CRM Free is always displayed at the end of the product grid.
- Resize your browser’s viewport to simulate both mobile and desktop screen widths. Verify that product grid items (especially Jetpack CRM Free) render correctly with no unexpected visual abnormalities.
- Verify that product card colors are appropriate for your selected environment.
Calypso Blue
- Select a Jetpack site and go to the Plans page.
- Verify that if a site owns any product that isn’t already listed, those products are displayed at the end of the product list and appear as expected.
Calypso Green / Jetpack Connect
- Verify that Jetpack Free is displayed under the same conditions as it currently is in production (if you’re currently in the Connect flow, or if you’re in Calypso Green without having selected a Jetpack site beforehand).
Screenshots
Popular products
More products
Jetpack CRM Free shown alongside Jetpack Free
When Jetpack Free should not be displayed (e.g., Calypso Blue, site owns at least one paid product, etc.)
Reference mock-ups
Unfortunately, no screenshots were provided by the developer.