Hope 103.2 is a Christian Community Radio station, and relies on donations from its listeners to sustain the service. Many of these donations are made via the website. After four years of effectively the same donation form layout, I spent some time in the first half of 2018 designing and building the new page from scratch.
The design was inspired by equivalent pages created by some well-known international charities. I sat in meetings with our heads of fundraising, web, and fundraising consultants as we surveyed dozens of existing donation pages to determine what we thought might work (and also what wouldn’t for us). We looked at research from usability experts. We looked at what our peers in the sector had been doing lately. We looked at research our fundraising consultants had compiled.
In the end, we created a wireframe based on all these discussions. We also discussed and agreed upon our requirements around donation types, pre-selected options, specific language, graphic design and all manner of other elements.
It was then my task to build the actual form, in time for June Appeal for both Hope 103.2 Sydney and 96five Brisbane.
We aimed to use as many of our existing tried-and-tested technologies, including Gravity Forms, WordPress, Zurb Foundation framework, and my Profiler / Gravity Forms plugin. In addition to this, I wrote roughly 1800 new lines of PHP, Javascript, HTML and CSS (plus removed or refactored a lot of existing code for the old page).
Here’s what the pages look like:
The form is designed to operate the same way on desktop and mobile – always expand downwards in a single column. This made the design process easier, and provides for a consistent user experience.
The main difference between desktop and mobile is replacing full-screen background image with a simple header images on mobile.
Once you have successfully donated, there is a followup form to capture any comments and mailing list subscriptions. This second submission is sent back to the CRM and merged with the initial donation details. This form is totally optional.
(Please excuse the crude Photoshopping I had to do to get the whole page to fit in one image without repeating the fixed background image)
When you submit this final form, you’ll land on a final content page that features some of the content on our website.
Page Setup and Customisation
It was clear from the outset that we needed to make this page easy to configure and customise. The old page was configured via some simple WordPress shortcodes, but was otherwise inflexible and confusing to setup. Each version of the page resulted in a new Page in WordPress, and any changes to default amounts resulted in a new Gravity Forms form (which required a lot of testing). This gets messy when you run an on-air appeal with a different landing page every day, and extra pages to track different communication segments.
The new customisation requirements fell into three categories:
- Graphic design and page copy
- Form behaviour
- CRM Integration
To address these areas, we created a new Custom Post Type in WordPress, specifically for Donation Pages. Each of these pages gets a specific URL, but also has the option to be the ‘Default’ page (i.e. the page rendered when you go to /donate on the site) or the fallback page (used whenever the default page has expired).
We added extra columns to the WordPress CPT Index Screen to show the slug and an ‘Internal Title’ (a special internal-only title used to help organisation).
When you are editing a donation page, there are a large number of fields you can edit, including:
- Public Title/Heading
- Internal Title
- Default Gift Type (Once-off vs Regular)
- Colours
- CRM Integration Codes
- Default gift amounts
- Default?
- Expiry date
- Page content (main page and thank-you page)
- Featured Images (Desktop & Mobile)
These fields are all customisable, but there are also default values for the majority of them – so it’s easy to create a page without worrying about the specifics.
These defaults are setup via a special WordPress Customiser panel. The idea is that these details will almost never need to be changed, but they are available if needed.
Split Testing
To test the new design, we created a split version that more closely resembled our old three-column layout. We used Google Optimize to redirect some users to the split page. Over the course of June, we observed a ~25% higher completion rate using the new form, as well as a higher average gift amount.
The codebase was identical, save for some minor CSS changes to re-stack the three segments into three columns and remove the ‘Next’ button.
Tracking and Monitoring
An additional feature we added to this new page was Failed Payment monitoring (via email alerts), and form validation failure rate tracking via Google Analytics Events. This gave us realtime insights into how the page was performing. I monitored these two sourced throughout our appeal period, watching for any spikes in error rates. Thankfully, the page held steady at a very low rate.
Usability Testing
Before go-live, the form was tested extensively by our staff and volunteers. Our web manager designed a series of different scenarios, and we went around the building testing each scenario on a variety of different devices and browsers. The results were interesting, and directly influenced the end product.
I wholeheartedly believe this new page is a significant improvement over the old one, and it only got there due to the time spent doing this thorough testing. Given the immediate influx of traffic we were expecting immediately after launch, we had no option but to get this right the first time.
Homepage Appeal Elements
Another concurrent project was to make the appeal elements on the homepage easily customisable. Traditionally, I’d been hard-coding a lot of the design work into an appeal-specific WordPress plugin. However, I took this opportunity to setup some further WordPress Customizer panels that allow you to upload graphics, change colours, alter text, and even pull in tally data from a different datasource.
Here’s an example of the page from 96five Brisbane:
Much of what you see on here is fully configurable. This makes it easier for our graphic designers to create the elements themselves, and load it into WordPress. After something like five years of building appeal-specific widgets, I’ve finally taken myself out of the equation for this setup work – and providing end-users with this sort of power is really what being a technology person is about.
This new donation page processed over one million dollars in June alone. Not only is it a solid product, but I think it also looks pretty slick.