Payment user flow revamp to improve the conversion rate

Bridge API provides a user flow to customers (e-shop, accounting sotfware) enabling their users to easily pay carts and invoices by wire transfers.

Our goal was to improve the payment flow conversion rate.

Product Management

UX Design

Type

B2B SaaS

Industry

Fintech

Role

Product Manager

Type

B2B SaaS

Industry

Fintech

Role

Product Manager

Type

B2B SaaS

Industry

Fintech

Role

Product Manager

Type

B2B SaaS

Industry

Fintech

Role

Product Manager

Expand payment by wiretransfer to new use cases

I worked as a Product Manager for this project, teaming up with a Product Designer.
I owned the problem definition phase, the user flows and wireframes and he owned the UI part. We lead user tests together.

At Bridge, wiretransfer payment feature was mainly used:

  • to pay invoices in accounting softwares

  • for money recovery for e-shop websites

We wanted to expand our use cases to diversify our revenue streams. After some research with the marketing team, the new promising use case to handle was to provide a wiretransfer payment method for e-shop websites.

Our first version of the payment user flow had a low conversion rate: 33%.

Even if we don’t own the entire journey, we needed to improve this conversion rate to improve customer and user satisfaction and to improve our profits by opening the feature to the e-shop use case.

Users have to possibility to switch from desktop to mobile before having to log into their bank interface
Users have to possibility to switch from desktop to mobile before having to log into their bank interface
Users have to possibility to switch from desktop to mobile before having to log into their bank interface
Users have to possibility to switch from desktop to mobile before having to log into their bank interface

By analysing Mixpanel data and running some usability tests, we quickly identified the biggest drops and pain points in the flow

Removing friction and reassuring users when connecting to their bank

The biggest pain point was that on desktop, users needed to know their bank credentials to confirm the payment, while they only needed Touch ID or Face ID on mobile.

This step is both a friction and a source of stress: what if I'm not redirected on the right website?

Removing friction and reassuring users when connecting to their bank

The biggest pain point was that on desktop, users needed to know their bank credentials to confirm the payment, while they only needed Touch ID or Face ID on mobile.

This step is both a friction and a source of stress: what if I'm not redirected on the right website?

Removing friction and reassuring users when connecting to their bank

The biggest pain point was that on desktop, users needed to know their bank credentials to confirm the payment, while they only needed Touch ID or Face ID on mobile.

This step is both a friction and a source of stress: what if I'm not redirected on the right website?

Removing friction and reassuring users when connecting to their bank

The biggest pain point was that on desktop, users needed to know their bank credentials to confirm the payment, while they only needed Touch ID or Face ID on mobile.

This step is both a friction and a source of stress: what if I'm not redirected on the right website?

Payment user flow mockup 3
Payment user flow mockup 3
Payment user flow mockup 3
Payment user flow mockup 3

When the users choose their bank, they can either scan the QR code and continue on their bank mobile app, or continue on their bank website

Revamping the whole user flow with new brand guidelines and reassuring copy

We also needed to revamp the interface with the new brand graphic guidelines during this project.

We decided to proceed in 2 steps:

  1. Revamp the user flow with the brand guidelines and less steps, simpler banks list and reassuring copy

  2. Allow desktop users to switch to their mobile to confirm the payment

Revamping the whole user flow with new brand guidelines and reassuring copy

We also needed to revamp the interface with the new brand graphic guidelines during this project.

We decided to proceed in 2 steps:

  1. Revamp the user flow with the brand guidelines and less steps, simpler banks list and reassuring copy

  2. Allow desktop users to switch to their mobile to confirm the payment

Revamping the whole user flow with new brand guidelines and reassuring copy

We also needed to revamp the interface with the new brand graphic guidelines during this project.

We decided to proceed in 2 steps:

  1. Revamp the user flow with the brand guidelines and less steps, simpler banks list and reassuring copy

  2. Allow desktop users to switch to their mobile to confirm the payment

43%

conversion rate

+10 points compared to before the revamp

43%

conversion rate

+10 points compared to before the revamp

Job is not finished, we still have work to do

While we were pretty happy with the results, we knew that to continue improving the conversion rate, we would need:

  • to increase the number of banks available

  • to customize the flow and copy depending on our customers use case and user journey

Job is not finished, we still have work to do

While we were pretty happy with the results, we knew that to continue improving the conversion rate, we would need:

  • to increase the number of banks available

  • to customize the flow and copy depending on our customers use case and user journey

Job is not finished, we still have work to do

While we were pretty happy with the results, we knew that to continue improving the conversion rate, we would need:

  • to increase the number of banks available

  • to customize the flow and copy depending on our customers use case and user journey

Job is not finished, we still have work to do

While we were pretty happy with the results, we knew that to continue improving the conversion rate, we would need:

  • to increase the number of banks available

  • to customize the flow and copy depending on our customers use case and user journey

Payment user flow mockup 1
Payment user flow mockup 1
Payment user flow mockup 1
Payment user flow mockup 1
Payment user flow mockup 2
Payment user flow mockup 2
Payment user flow mockup 2
Payment user flow mockup 2
Payment user flow mockup 3
Payment user flow mockup 3
Payment user flow mockup 3
Payment user flow mockup 3
Payment user flow mockup 4
Payment user flow mockup 4
Payment user flow mockup 4
Payment user flow mockup 4
Payment user flow mockup 5
Payment user flow mockup 5
Payment user flow mockup 5
Payment user flow mockup 5
Payment user flow mockup 6
Payment user flow mockup 6
Payment user flow mockup 6
Payment user flow mockup 6

Let’s make things easier — together

Whether you need support on a project or a designer to join your squad, let's chat 💬

Let’s make things easier — together

Whether you need support on a project or a designer to join your squad, let's chat 💬

Let’s make things easier — together

Whether you need support on a project or a designer to join your squad, let's chat 💬

Let’s make things easier — together

Whether you need support on a project or a designer to join your squad, let's chat 💬