Riverty/Afterpay | Other solution for a birthday picker

[mdlatzee]

Is your feature request related to a problem? Please describe. Payment method > Riverty/Afterpay When selecting this payment methode. A 'date of birth' is required. When this field is selected a datepicker is shown. On desktop there isn't a problem. But the datepicker on Android and IOS aren't really user friendly. This has multiple factors;

the 'start date' is the date of the current day. As this is a 'birthday' selector, this is never going to be the current date IOS; the selector has no way to select a year, so you have to swipe month, to month, to month, etc. Android: you get a calender view, where a date selector is more friendly.

Describe the solution you'd like There are 2 solutions possible;

• the day, month and year fields are seperated so you fill in one by one.
• there is a different selector called on. Not a date picker, but a datepicker dialog (android) or Picker - date (IOS)

Additional context More about the picker in IOS (native) https://developer.apple.com/design/human-interface-guidelines/pickers More about the datepicker dialog in Andriod (native) https://developer.android.com/develop/ui/views/components/pickers

[mdlatzee]

Original post in; https://github.com/Adyen/adyen-magento2/issues/2235

[mdlatzee]

Can you please share an update on this issue/improvement?

[ribeiroguilherme]

Hey @mdlatzee ,

For birthday picker, we are using native browser solution. It behaves differently in each mobile platform though, but regardless of that, you must be able to select the year - you don't have to swipe month by month. You can achieve that on both Android and iOS platforms.

If, for any reason, it doesn't work as expected on your device, please share a recording and device specification, so we can investigate further. We tested on Android 13, 14, and iOS 16 and it worked as expected on all of them.

[mdlatzee]

Hi @ribeiroguilherme

You certainly applied the standard implementation of the HTML date picker. But as multiple researches within UX are pointing-out, this isn't really user friendly. See;

https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/ https://smart-interface-design-patterns.com/articles/birthday-picker/ https://uxdesign.cc/rethinking-the-date-picker-ui-99b9dcb303ad https://icapps.com/blog/ux-dateofbirth https://designsystem.digital.gov/patterns/create-a-user-profile/date-of-birth/

[ArjenLa]

Hi @mdlatzee ,

Arjen here, the product designer for Checkout WEB/iOS/AND, thanks for opening up this ticket, valid feedback. The datepicker has been in it's current form for a while now and has not been iterated on from a UX point of perspective. For our native solutions in iOS and AND i'll make sure we will implement the best datepickers as advised by Apple or Material 3 (for AND), so that should solve that issue. (and thanks for sharing the links with research and patterns, much appreciated)

Just for my understanding, can you eleborate if you are experiencing the UX issue for iOS and AND in the native integration or the WEB integration on both platforms? Just so i know i'm going to instruct the right people?

[ArjenLa]

And how about we start the datepicker with today's date 18 years ago (if possble), as you need to be at least 18 to use this PM.

[mdlatzee]

Hi @ArjenLa

Thanks for looking into the the UX-side of this issue.

We use a WEB implementation via a Adyen build module within Magento. With this implementation you have some control of the payment options within in the configuration, but it is mainly customized by code.

Starting the datepicker at a minimum age is something we are looking at. But the datepicker within this is still a complex controller, as most of the people still have to change the year.

[mdlatzee]

@ArjenLa do you have any idea on the timeline for this issue?

[ArjenLa]

@mdlatzee hi, I don't have a timeline but i'll bring it to the team today, i'll aim to get an answer on your request today!

Cheers,

[ArjenLa]

@mdlatzee We've tested the datepicker on web implementations for WEB/iOS/AND and they all facilitated a way to pick a year, can you specifically mention which devices or browsers you were using that did not facilitate this?

For the starting date, we will look into the default selection of the year, however we must take into account that we have people trying these payment methods that are not eligible by age, hence we need make a good default pick.

I'd agree that the default datepickers are not the most optimized pickers in terms of UX, however, when looking at the effort vs. de impact that a custom/optimised datepicker will give us, we don't see that high on our priority list.

We will into this in the future but not for the time being unless a critical UX issue is surfaced (such as not being able to change the year)

Cheers,

Arjen

[mirandademeijer]

Hi Arjen,

Thanks for looking into this ticket.

We have already looked into our data and we have a very low conversion rate on the payment step of our checkout in the Netherlands. We compared this CR with the data of other countries were we didn't activate Riverty and the difference is inacceptable:

Next to this data we also have quantitative feedback from our customers from surveys where they explain they exited the checkout, because they couldn't figure out how to use the date picker.

I think this sufficiently proves this is a significant UX-problem and we see this at the moment as the biggest problem in our checkout.

We would therefore like to insist for the adjustment of the date picker in the short term, so the conversion rate will reach acceptable levels again.

Best, Miranda Demeijer Site manager e-commerce Zeeman

[ArjenLa]

Hi Miranda,

Thank you for the information and elaborate feedback!

The shared data does not yet convince me that the excessive large drop-off compared to other countries is purely caused by the date picker (does not mean it's not contributing to it, I understand that).

I will need more detailled data and user research insights before I can advocate for this suggested change internally, primarily because Zeeman is the only merchant surfacing this issue currently.

I was expecting the date picker issue to arise when conducting qualitative research (small scale), hearing that it was found as a core issue during quantitive research (large scale) is very interesting, as this to me would indeed conclude a big problem in the UX of the date picker component.

i'm absolutely onboard with updating the component to a better custom component (which I will design) if you can provide me with extensive detailled data / research showing the date picker from our integration is causing a drop-off in conversion.

I do apologize for this tedious experience, the development effort to change this native component to a custom component (or even an updated version) is considered high and impactful across our payment methods en products, therefor I need to challenge this request.

Best,

Arjen

[AnnetteVerhoeven]

Hi Arjan, Since Zeeman is one of the few, if not the only, merchant at Adyen that offers Riverty, I cannot say I am very surprised that your other merchants do not face this issue. What does surprise me, is that it actually takes research data to prove the obvious in this case. It is quite clear that the date selector is not suitable for picking date of birth. Consumers who are not aware that they can click on the month actually need to scroll back month per month to reach their birth date. Riverty is a large payment provider for Zeeman, so the stepout we experience in the payment step actually affects our results. We will discuss this issue with Steven in our next meeting, hopefully this will lead to a solution. Best regards, Annette Verhoeven

[ArjenLa]

Hi Annette,

I understand Zeeman's perspective in this matter.

Your feedback and data is vital to us, If you have any additional data or insights that you can share I look forward into receiving them as it helps us improve our products and can help me prioritize this matter.

I've added the request to our design backlog and we will monitor other merchant feedback concerning this matter.

We will keep testing this issue on our side and we will keep collecting insights.

Best,

Arjen Landstra

[AnnetteVerhoeven]

Hi Arjen, (sorry for misspelling your name earlier) I respect that you would like to reinforce the need for this change by monitoring other merchants' feedback, but that might become a long wait, since Zeeman is probably the only Adyen merchant that offers Riverty. Furthermore, I'm not sure what you mean when you indicate that you plan to keep testing the issue on your side? Changing the date selector to a more suitable, standard date selector seems like a small change to process. If we have more data on this issue, we will definitely provide it, but in the meantime I do hope that this ticket can be fixed anyhow. Thanks, Annette Verhoeven

[ArjenLa]

Hi Annette!

Not to worry, that happens often, i've been named worse!

For your understanding, this suggested change would be considered a 'breaking change', meaning merchants that have altered the logic or the component will be forced to update to prevent it from breaking. Because of this, updating the date selector to a more suitable one, is unfortunately not a small change.

However, we are currently working on our newest version of the WEB integration, i've made remarks internally that we should look into the date picker for the upcoming version.

To your question, we've tested your feedback on several platforms, devices and in browsers, but have not covered everything yet, we will continue doing that to make sure a year is selectable.

Any additional details or data would be greatly appreciated! All shared data, links and suggestions will be looked into and handled with care.

i'd like to make clear that should this not have be a breaking change, I would have advocated for a change to happen immediately. Even though a year can be selected, as a UX/UI designer I definitely understand the lack of UX for some of our users in the current component.

Best,

Arjen