BNPL In-Product Feature Announcement Experiment

[pierorocca]

Description

BNPL payment methods are a recent addition to WooPayments. Limited channels were used to communicate their availability to merchants including in the What's New in Woo newsletter. Later this year, targeted merchants will receive the notification via email.

An effective feature launch is communicated through a well coordinated, multi-channel campaign that targets existing, churned, and prospective merchants. While there's ongoing work to map out this comprehensive merchant notification journey for various personas, we'll launch an in-product feature announcement experiment to existing merchants.

Acceptance criteria

1. Targets only existing merchants with WooPayments plugin installed and activated, live in production and that have at least 3 purchases (on any gateway). Avoid showing to merchants in the sales funnel.
2. Does not target merchants that already have any of Klarna, Afterpay/Clearpy, or Affirm enabled
3. UK uses Clearpay instead of Afterpay branding
4. Only displayed to BNPL eligible countries - AU, NZ, US, AT, BE, CA, CZ, DK, FI, FR, DE, GR, IE, IT, NO, PL, PT, ES, SE, CH, NL, UK, US
5. Only shown once to each Administrator and Shop Manager users. OK to drop this if it allows us to make the 7.5.0 release.
6. Displayed in a lightbox presentation
7. Woo 60% purple color used for the main CTA button
8. Enable button deep links to the Payments accepted on checkout section of the WooPayments settings page. (Note over a year ago I had section IDs added to allow deep linking to specific sections and they don't appear to be there anymore?)
9. Data Telemetry - wcpay_wcadmin_bnpl_april15_feature_announcement_view, wcpay_wcadmin_bnpl_april15_feature_announcement_enable_click, wcpay_wcadmin_bnpl_april15_feature_announcement_learn_click.

Do we have any existing telemetry on the BNPL payment methods in the settings screen?

Confirmed - wcpay_payment_method_enabled, wcpay_payment_method_disabled are implemented and I'm seeing event data.

10. Tracks events respect merchant user analytics opt-out
11. Time boxed - Campaign expires after 90 days
12. Target page to be displayed on - Any WooPayments page except disputes
13. Trigger to display - The first to occur of 4 seconds passing or a user action taken such an on focus. OK to drop the on user action trigger if it allow us to meet the 7.5.0 release.

Designs

Sizes Desktop - 357 x 500 Mobile - viewport width and 3/4 height from bottom up.

Rough Layout (center aligned)

Buy now, pay later is here

Klarna logo Afterpay logo Affirm Logo

Boost conversions and give your shoppers additional buying power, with buy now, pay later — now available in your WooPayments dashboard*.

[Get started] (wide button) Learn more

*Subject to country availability (fine print, smaller font)

Additional context / assets

Klarna Badge Afterpay Badge Affirm logo Clearpay Badge

[frosso]

Targets only existing merchants[...] live in production

@pierorocca does this mean that we should not target test mode? Asking because it's a bit easier to test/work on while in test mode. But we could work around it.

[frosso]

@pierorocca in regards to the buttons - did you want to have a different UI convention than the other dialogs in the backend? Asking because it's faster to reuse the UI from the existing dialogs displayed in the admin. In the example below, I also changed the main CTA's button primary color to purple, but otherwise we could just use the more "canonical" blue, which IMO would look more consistent with all the other UI elements.

https://github.com/Automattic/woocommerce-payments/assets/273592/44f56a3d-b1f0-4605-8c3b-68f555e0fea9

[frosso]

Data Telemetry - wcpay_wcadmin_bnpl_april15_feature_announcement_view, wcpay_wcadmin_bnpl_april15_feature_announcement_enable_click, wcpay_wcadmin_bnpl_april15_feature_announcement_learn_click.

@pierorocca the event names are automatically prefixed with wcadmin_*, and we can't add another prefix before it. So I'm going to change the event names being recorded to wcadmin_wcpay_bnpl_april15_feature_announcement_view, wcadmin_wcpay_bnpl_april15_feature_announcement_enable_click, wcadmin_wcpay_bnpl_april15_feature_announcement_learn_click

[pierorocca]

@pierorocca does this mean that we should not target test mode? Asking because it's a bit easier to test/work on while in test mode. But we could work around it.

@frosso ideally not as then it would display the lightbox potentially to prospects/new merchants rather than targeting only existing merchants. Possible to put behind a feature flag so you can enable it on test mode for dev and testing?

[pierorocca]

@pierorocca in regards to the buttons - did you want to have a different UI convention than the other dialogs in the backend? Asking because it's faster to reuse the UI from the existing dialogs displayed in the admin. In the example below, I also changed the main CTA's button primary color to purple, but otherwise we could just use the more "canonical" blue, which IMO would look more consistent with all the other UI elements.

Very good point. Maybe one day we'll move away from using Shopify colors in the merchant admin. Yes let's stick with the existing admin design language.

[pierorocca]

@frosso here was the inspirational example from Wix. We could use design assistance here. In the interim could I see a few variations please?

Variation 1:

• Logos in the top position, top padded.
• Followed by a center aligned H1 for "Buy now, pay later is here".
• Then center align the main copy below it and let's try placing the copy on 3 lines with mode padding so it's not so close to the edges

Variation 2 - Tweaks to your design

• Center aligned H1 for "Buy now, pay later is here".
• Then center align the main copy below it and let's try placing the copy on 3 lines with mode padding so it's not so close to the edges

Variation 3 - With the logos attached in the issue which adhere to their brand guidelines

Can that horizontal line be removed or is that part of the existing design language for a modal?

[FangedParakeet]

@pierorocca, I knocked up a few of these variations using @frosso's branch.

Can that horizontal line be removed or is that part of the existing design language for a modal?

We are currently reusing an existing WooPayments ConfirmationModal element, which contains this horizontal rule; but I don't see any great obstacle from removing it in this particular modal, should that be preferred. I've provided all variations with both options for you below.

Here's the original that @frosso made, but with the horizontal rule removed.

Unmodified, but no horizontal rule

I've pushed all these variations as separate branches, so I'll include the branch names as well, if anyone wants to continue meddling with my minor modifications.

Variation 1

Branch: feat/bnpl-announcement-apr-variation-1

Logos on top, three-line text, everything centre-aligned

Same as above, without the horizontal rule

Also, I knocked up another version of this variation that uses the pill icons linked in the issue description.

Branch: feat/bnpl-announcement-apr-variation-5

Pill logos on top, three-line text, everything centre-aligned

Same as above, without the horizontal rule

Variation 2

Branch: feat/bnpl-announcement-apr-variation-2

Centre-aligned with three-line text

Same as above, no horizontal rule

Variation 3

I wasn't sure if you meant to just modify the original implementation to use the accepted pill icons or to modify the second variation to use these icons...so I just made both to be safe. 😅

Branch: feat/bnpl-announcement-apr-variation-3

Original modal with pill icons

Same as above, no horizontal rule

Branch: feat/bnpl-announcement-apr-variation-4

Variation 2, but with pill icons

Same as above, no horizontal rule

Hopefully, this is exhaustive enough to satisfy your curiosities, @pierorocca. Tried to whip these up today, so that if you have any more feedback, @frosso might be able to pick up when he wakes tomorrow and whilst I slumber. 🙏

[pierorocca]

Thanks @FangedParakeet! Unexpected and thank you.

I like this taller version. MIght need to be even taller so there's some breathing room or the logos need to shrink a but. My dimensions were too short.

1. Can we get "buying power" or "power" onto the second line, whichever looks more balanced?
2. Hard to tell because the Affirm logo has a white or transparent background, is it the same height as the other logos?

With these change can I see 1 version with title above the logos and one below? That'll be final iteration and we can hand it over to design for final QA.

[FangedParakeet]

Hard to tell because the Affirm logo has a white or transparent background, is it the same height as the other logos?

The logos all share the same height, but that Affirm logo has a bit of whitespace surrounding it: have replaced it with a cropped logo, so that all icons should now have equal height parity.

Here are the two final variations.

Branch: feat/bnpl-announcement-apr-variation-4

Header above logos, icons fixed

Branch: feat/bnpl-announcement-apr-variation-5

Logos above header, icons fixed

Note that I haven't tweaked any of the spacing on either of these variations--and there is definitely license to do so--but I'll leave that for the next iteration. 🤝

[pierorocca]

Ha nice. Affirm now looks giant. Thanks for confirming it was at the same height. I'd leave it uncropped and reduce the size of all the logos. They overpower. Some white space between the logos and the copy would be helpful.

[frosso]

Branch feat/bnpl-announcement-apr-variation-6:

• resized to smaller size & aligned logos
• slightly further reduced Affirm logo size
• added additional breathing room between logos and heading
• adjusted bottom padding on desktop

[pierorocca]

Looks good @frosso @FangedParakeet. I'll try to get Creative Studio to have a quick look. Otherwise if you don't hear from me LGTM. This will be shown only for a few seconds and never seen again so I'm not hung up on perfection.

[pierorocca]

Sorry on mobile, 3/4 looks ridiculously big. lol. Shrink it down to what looks good please. At least of half of what's shown above.

[FangedParakeet]

Made a few more tweaks this evening: fixed the sizing on mobile across a hopefully comprehensive gamut of potential devices. Also, I noticed that we were not using the Clearpay badge provided in the description here, so I updated that as well.

Modal as it appears on an iPhone 12

Same as above, but with the Clearpay logo

[pierorocca]

Still a lot of whitespace there. Go shorter :). Looks like we'll get some design assets by Friday morning our time. Does that work?

[frosso]

I initially had the icons prevent wrapping even on small screens, but then I noticed that if we did that a horizontal scroll would be added in some cases. So I am now allowing them to wrap only if there isn't enough room horizontally. It shouldn't happen often - just on some particularly skinny screens like a Galaxy Z Fold.

[pierorocca]

Noting here that we've used the design assets provided by Creative Studio rather than the designs shown here.