Children's Hospice Southwest Modern Drupal Upgrade
The challenge
Children’s Hospice South West needed a cost-effective plan to upgrade their site to latest Drupal.
Their site had a number of API integrations, most notably with Salesforce, which would need to be refactored or rebuilt - and there wasn’t scope for the budget to take a huge hit if things went wrong.
Salesforce powers almost all the donations, event bookings and purchases on the site, and we would need a flexible toolset to allow editors the power to create and manage those transactions locally.
Fast build time thanks to smart choices
Clearer customer journey experience
Gorgeous on-brand designs made in-house
Our response
Pragmatic discussions are one of our strengths, and naturally part of our approach. As standard with any Drupal upgrade, we engaged our team to identify the best routes forward and bring them to the table.
Recognising that Drupal Commerce would introduce a lot more complexity than was desired, we concluded that the fastest and most flexible way to allow custom forms that are easily modifiable was the webform module. We built some bespoke integrations to connect up Webform with Salesforce using the Salesforce module ... and voila!
Editors can create, edit, un/publish and manage transactions as easily as any other content on the site, and customers get a consistent experience across a range of different transaction types.
Using existing tools at hand, rather than reinventing the wheel, gave CHSW better tools at a lower cost than the alternatives.
Opportunity to redesign
To make the most of the upgrade, our in-house designer was commissioned to redesign the main Donations experience. Possibly the most important page on the whole site, it needed to look and feel great. With improved UX and revised components, the new Donations design stands out with bold colour, looking the part👌
A simpler multistep form
The Donations process, previously in a single page form, was rebuilt as a multi-step form process.
Clean and simple, the new flow is easier to engage with and less overwhelming - especially for mobile users.
Clearer and Safer
A simple progress tracker, clear form elements and a summary all contribute to the form’s safe and clear look and feel whilst the summary box beneath allows a quick view donation summary.
Supporting higher Gift Aid engagement
The Gift Aid elements in particular now present the key information and interaction more clearly, while still showing the key Terms and Conditions.
Changing from a single checkbox to requiring a YES or NO response may also improve engagement, whilst presenting minimal friction.
Salesforce Integration
Bespoke doesn't mean complicated
A cleverly-made Salesforce data integration with Webform module
Given that the Salesforce module can already handle most of the data needs of syncing data between the site and the Salesforce account, the actual purchase workflow was the thing that needed designing.
As already mentioned, Drupal does do Commerce (and we are well experienced with it! See our portfolio) - but a full commerce setup brings a lot of other complexity and baggage to a site that doesn’t only sell things. We also wanted a dead simple solution that would allow their team easy editorial control of the forms and flows, not a maze of entities and long settings forms.
Having built some seriously complex purchase flows with custom forms in the past, we have no technical fears of diving in and going “full custom”, but, again, that wouldn’t innately provide flexibility to editors - and the more custom code you write, the more you have to maintain later down the line.
How we did it
Webform integrations and customisations
Drupal’s Webform module is the module for allowing users to create and manage custom forms. It provides a huge wealth of mature functionality, all with flexibility and granular control over permissions. Using this foundation would give our editors a really good experience, and that’s something we value.
For flexible form building that can still talk to Salesforce, we built two key groups of customisations:
Salesforce data handling
Our extended component forms allow editors to map any collected field data to a destination in Salesforce, and have the data sent over automatically on submission.
Well within the expected timeframe, we created the integration code needed to pull Salesforce data to the webform editor and submit the transaction data over to Salesforce.
Custom components
A collection of custom Webform components and submit handlers enabled editors to collect things like Addresses or Gift Aid information, as easily as any other data.
Payment gateway integration
The final piece of the puzzle was getting Webform working with the third-party payment gateway.
No off-the-shelf solution existed, so we created bespoke functionality that integrates their preferred payment gateway with the Webform module!
Editors can easily control and override which fields on each form can be used to provide the required user data to the payment gateway.
Customers get a seamless experience where they submit a webform, get sent to the payment gateway and then are returned to the site once payment has been completed.
Event registration flow
The Events Booking flow is a bit more complex, with a range of different variations in the data that need collecting from the user, checking against Salesforce and posting on completion. For this, we did build a custom form setup, which handles autosaving the input to Salesforce after each step, forwarding to the payment gateway and displaying an appropriate result page on completion.
We used the power of Drupal's inherent flexibility for data storage to create custom entity types that would handle storing and synchronising Salesforce ticket data used to drive the custom event registration flow.
We retained editorial control over various text and field mapping options through dedicated Event and Template content types; working with CHSW’s web team, we tested and reviewed feedback to keep the processes clear and enjoyable.
