GoCardless payment flow

Whilst working on the dashboard relaunch at GoCardless, it became clear that the payment flow — the form customers use to pay businesses that are using GC — was going to need overhauling. It sees some pretty heavy traffic (over 100,000 submissions a month), and so it should be as easy to use and accessible as possible.

The old form was long, and research told us users were finding it arduous — particularly because they had to sign up for an account when making a payment. Removing the sign up requirement became the catalyst that sparked the whole project. On top of this, we were pretty sure we could make the entire flow much clearer, and work a lot harder for users.

I worked on this with GC design and front-end duo Sam Willis and James Shedden, who deserve a huge amount of respect for making what is a ridiculously complex piece of code work across browsers, devices, and even in Internet Explorer 7!

The payment flow has a few unique characteristics that made it different to most other projects I've worked on: it has to comply with government regulation, it has to work in different launguages, for different payment schemes (with different local requirements), and it has to work everywhere. If you're a German customer, paying an English business from France, it's going to work. This meant every seemingly trivial decision had massive ramifications (want to display a user's bank logo to show we recognise it? There are over 100 widely used banks in Europe, so we better get a vector for each).

We managed to accommodate all of the constraints whilst reducing the number of fields from 11 down to 6 — without breaking FCA guidelines. We used a combination of things including: a new responsive UI; helpful tools like address look-up and bank logo detection; switching out inputs depending on the locale; and user-agent sniffing to get the right language.

All of this means users are now completing the form more often, and much quicker, leading to a boost for both GoCardless, and its merchants.

If you want to overhaul your web product, or have a project you'd like to discuss, you can email me on hello@anothertompetty.com.