Improving Mayhew’s Online Donation Journey

With the overall aim of increasing donations and delivering an effortless donation experience across any device, we’ve seen positive early results and we’d like to tell you a little bit about how we put it together.

Introduction

Previously, Mayhew’s online donations consisted of multiple single-page forms that plugged directly into their CMS. Our work endeavoured to transform this disconnected experience into a simple, multi-step bespoke donation journey whilst maintaining the high level of compatibility and robustness covered previously.

As the backend of the site uses WordPress and donations are processed by Gravity Forms, a challenge for us was finding a way to create a completely bespoke form with dynamic elements and page splitting, without altering the way that donations are handled internally by the fundraising team.

Our solution to this was to decouple the frontend of the form and build the interface ourselves, as well as creating an endpoint within the WordPress REST API to enter data into Gravity Forms.

Decoupling the site in this way gave us two major advantages – Firstly it allowed us to make use of React/Redux for the frontend, providing us with the ability to create a dynamic interface, and secondly, it allowed us to process and validate data within the API endpoint which increases security.

The Product

The final product consists of a multi-step donation funnel featuring automatic address completion via postcode search, on-page navigation, AJAX-driven form submission and payments, complex input & page validation, conditional sections and session persistence. React is the driving force behind almost all of this, with Redux providing state management between the steps in the donations funnel.

Our main addition to the journey is an upsell component, allowing Mayhew to present options to their donors such as an additional ‘treat a pet for £3’. We also introduced the option for donors to cover the fees set by the payment processor (e.g £0.26) in order for Mayhew to receive the full intended donation.

We’ve also drawn more focus to giftaid in the journey, better communicating to the donor the how Mayhew benefit by opting in.

On the backend, the API takes the data that has been provided by the donor and manipulates it in order to provide a layer of security over the payment values before they’re taken. The values shown to the donor on the frontend are submitted in their raw values – The donation value, the number of extras, and whether to include fees or not.

The total is not submitted – It’s calculated on the frontend as a visual aid, and again in the API with the raw values and prices taken directly from the CMS. The calculation is identical on both sides, so we can ensure that the values will always match; however, this method ensures that any attempt to alter values on the frontend will not be reflected at the payment stage.

On the topic of security, the Strong Customer Authentication (SCA) regulations introduced in September 2019 means that many online payments require more than just a credit/debit card. Whilst authentication itself is handled by the card issuer, the new donations funnel needed to be able to support the multi-step authentication flow required in order to be SCA compliant.

To do so, we created a new integration with Stripe that allows information about payment status and required actions to continually transfer between the frontend and the API until authentication has been completed and a pass/fail decision has been reached.

Conclusion

Whilst we’ll be monitoring and further refining the journey in the future, this project has been a fantastic opportunity for us to expand our skill set and provide a huge overhaul to Mayhew’s donations.

In the first month of going live, we’re pleased to report that 35% of donations included at least one of the ‘treat a pet for £3’ upsells, with some donors adding several of these, adding up to more than their initial donation!

We’ve also seen 48% of donors choosing to cover the payment processor fee, which will add up and save Mayhew financial costs long term.

So far, our upsell updates have increased total donation value by 13.94%

We’re all about creating experiences that work, for the people who matter. If you’d like to build a donation process that’s fit for your Charity and donors, adaptable can build a product that is right to do just that.