How we’re improving the checkout process at Vyne

At Vyne, our focus has been to position our hosted checkout experience as part of a range of consumer and merchant experiences that can be hosted for convenience, embedded for a seamless flow, or integrated manually for the ultimate configurability. We focused on making it attractive for merchants and enjoyable for consumers.

Through our user research on our hosted checkout, we have identified some common pain points and use cases. Here are some of the questions we asked ourselves:

• What elements of the payment journey do users find complex?

• How does a first-time user navigate differently to a returning user?

• How are we helping users to read only what they want to read?

• Are there any parts of the merchant UI where content is duplicated?

• Does the payment flow change dependent on the device?

With account to account payments, merchants are able to pass payment details directly to consumers through Vyne. That means that consumers just need to select their bank from the Vyne hosted checkout and confirm payment in three taps.

For example, on our hosted checkout page, we reduced the number of options and implemented progressive disclosure in order to help reduce friction. The objective was to boost adoption for new users and increase user retention.

Here are a few features we’ve added in:

• Dynamic page: We display the most popular banks for quick selection for the majority of consumers, but they also have the option to search for their bank.

• Search bar: Users can easily find their preferred bank without having to go through the whole list, which reduces the time taken to make the payment.

• Feedback: We want to maximise the users sense of control, so we offer feedback to confirm users have completed a step. For example, show selected/press state when users have selected a bank.

Let’s look at some of those elements in more detail:

Handling first-time users and returning users

When we first thought about our redesigned hosted checkout, we wanted to make it clear and simple to our users how A2A payments work so there are no surprises - this is especially important for first-time users who are also new to Open Banking. We wanted to make sure the user journeys in our hosted checkout are as frictionless and intuitive as possible.

So the question is: how do we convey familiarity for a payment process that is so new?

One way we did this is by introducing a “How does it work” link, to help assure our first time users how account-to-account payments work and make them feel more confident with the journey. We also monitor drop off rates and consumer behaviour during the checkout process to understand how we can reduce uncertainties in the user's mind before they ask the question, as a way to increase conversion.

Another thing we focused on is handling error pages carefully. Since Vyne integrates directly to the bank's APIs, there may be errors or bank failures which don't provide information on the type of error which has occurred. So we created generic error pages that reassure the user and provide guidance onto next steps, giving users clear action that they can take as well as creating positive friction.

Introducing guided discovery

Having too many payment options to choose from is exhausting. In user behaviour, this is called the paradox of choice: where too many options paralyse the consumers' ability to make a decision.

We’ve focused on improving this by simplifying the checkout experience, limiting the choices on offer to the most popular banks and offering a search option. Some other items we included:

• Guidance: When paying on desktop, users are guided by showing the two clear options they have when making the payment. We use a preselected option to display the recommended method, simplifying the process for the majority of users but also offering choice and flexibility.

• Intuitive journey: Customer journeys are intuitive and the information is easy to understand, helping users make an informed customer decision.

Improving usability and discoverability

As per Miller’s Law, we organised the content into smaller chunks so that consumers can easily scan the payment details, identify the bank they want to pay with and complete the payment quickly. Consumers want to understand what they are doing, so we divided the flow into logical steps to make users better understand what actions they need to do.

We make sure to stick with industry standards because the sense of familiarity gives the users confidence in buying products using Vyne.

When paying with online banking, we focus on making it easy to switch between payment options, whether it’s with QR codes or online banking. All the actionable items to successfully complete a payment are above the fold and we emphasise hierarchy.

By implementing all these, we’ve managed to reduce the average payment completion time to just a few seconds.

Using a more accessible tone of voice

Copy and microcopy are an essential part of guiding the user through a payment journey. We use a reassuring tone of voice and prioritise transparency to clearly explain the value we provide and that the process is secure. We focused on a clear user journey and used visual hierarchy so users read what they want to read.

For example, on landing on the hosted checkout page, the first thing users notice is a hierarchy of cards. This improves the flow as the user's eyes move between cards, first looking at the title, and then looking at the content beneath. In the payment summary card, we highlighted the amount and improved the tone of voice, swapping out jargon like “beneficiary”, with “pay to” to make the page more inviting and user-friendly.

By reducing the average number of words in each step and using more accessible copy, this helped reduce confusion and increase conversions.

Streamlining desktop experience

Both mobile and desktop experiences should be seamless, so we picked up visual cues from our mobile experience and designed a new journey for a dedicated desktop experience.

When a user completes a payment on desktop, they will see a prominent QR code with on point instructions on how to continue the payment on mobile. Once the users scan the QR code on their mobile, the desktop page will refresh and provide a seamless handoff experience. It’s important to recognise whilst we have a fully functional and seamless desktop experience, it is faster to pay through mobile and we anticipate more traffic will prefer to use mobile in the future when buying online.

For those users who choose to pay via online banking, we came up with a tailored experience for the bank selection on the web. We use collapsable cards to ensure that the payment summary remains visible — and by clicking the disclosure arrows, users can see the full payment details at any point.

Final considerations

A2A payments are still a new payment method for most users, and since card payments are still the norm it’s up to the Open Banking movement to help change the status quo.

With A2A payments, we finally have a payment method that is built for modern day shopping experiences. A2A and Open Banking offer tremendous benefits for both consumers and merchants, but these will only be truly enjoyed once they are ubiquitous. For those merchants that are ready to take the leap, the best thing they can do is ensure such a great payment experience that new users become returning users. And that comes down to implementing great UX practices.