Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By Edo on
The Stroke Association is a leading UK charity supporting those affected by stroke. They support stroke survivors to make the best recovery they can; they campaign for better prevention and care; and they fund research to develop new treatments and ways of preventing stroke.
The Stroke Association commissioned Sift Digital as their digital agency in 2013. An initial phase of work included a code audit of their existing Drupal 6 website, along with a requirements gathering exercise for a rebuild in Drupal 7.
The partnership with Sift Digital came about through a long standing mutual respect for each other’s work. Sift Digital’s strong reputation working with world-leading charities, and expertise in the field of online communities allowed them to shape a solution which delivered everything Stroke Association were looking for.
User research undertaken with stroke survivors also allowed Sift Digital to design the website with accessibility at the front and centre - especially with regards to the motor and cognitive problems which follow a stroke.
Why Drupal was chosen:
The Stroke Association had the following objectives for this project:
- To get the right information to the right people
- Facilitate the creation of a community around stroke
- Promote and enable access to the Stroke Association’s services to the relevant audiences
- Generate revenue for, and increased lifetime value to, the Stroke Association
The Stroke Association has multiple teams spread across the country that manage the different parts of what the Stroke Association do. All of these teams needed to be able to administer their own parts on the website. The teams are roughly split into to the following teams:
- Web content
- Events (fundraising and training events)
- Donations
- Shop and fulfilment
- CRM (thankQ)
Each team had their own set of requirements for what they needed from the website. For example the web content team needed to be able to add compelling content to the website using images and videos while the events team needed to be able to create registration forms for the specific events they were adding to the website for users to book onto.
Drupal was clearly the right choice to deliver all this as it afforded a flexible permissions system and a solid framework on which custom functionality could be built as well as a suite of community developed modules that could be relied on to provide large chunks of functionality.
A good example of this is Drupal Commerce that powers the shop and provides a structured set of hooks and APIs that can easily be extended with custom code and fantastic Rules integration.
Drupal also happened to be the CMS that Stroke Association’s previous website had been built on, so it was familiar to the team.
Describe the project (goals, requirements and outcome):
The Stroke Association had a number of complex requirements:
- Online shop
- Community forums
- Online donations
- Fundraising event registration
- All integrated with their existing CRM system (thankQ)
- Local support group micro-sites
- A website that works well on all devices
- A layout that is easy to use for stroke survivors
Online shop
The online shop was a major requirement for the Stroke Association as it is a major source of income. The requirements were pretty straight forward; they needed the shop administrators to be able to add products that users would be able to buy.
Complexity came with the Stroke Association's shipping rules (https://www.stroke.org.uk/shop/delivery-information) where the shipping amount would depend on both the geographical region the user was based and the quantity and type of product the user was purchasing.
Furthermore the Stroke Association has two fulfilment houses depending on the type of product the user has purchased. An email alert was required to be sent to one or both with the order details for fulfilment.
Sift Digital decided to route all event registration and donation payments through Drupal Commerce to re-use the existing Worldpay integration. The requirements and challenges of this are explained below.
Outcome: Sift Digital configured Drupal Commerce to allow the Stroke Association team to administer products and provided training on how to use Drupal Commerce. The complex shipping rules and fulfilment emails were handled with custom Rules.
Community forums
The Stroke Association's old forum was unfit for purpose. Users were not able to create new threads which meant existing threads would be hundreds of posts long and lurch wildly from subject to subject. Users were frustrated as the previous version of the forum was extremely popular with stroke survivors.
The requirements here were to allow users to sign up to a community forum where they could update their details, create new threads, reply to other user's threads and posts and private message other users.
The user profiles needed to be integrated with thankQ and changes in the users profile were required to make an update to the contact information in thankQ too. The integration with thankQ was based on custom rules that made the thankQ API calls when a user updated their profile.
Sift Digital used the Harmony forum and private message modules to provide the community aspect of the forum. Harmony forums responsive tables meant that the forum could be accessed on any device which satisfied the 'all devices' requirement.
The integration with thankQ was based on custom rules that made the thankQ API calls when a user updated their profile.
Outcome: Forum users are returning and commenting on how they are enjoying the new forum. Additionally the Stroke Association has more accurate stroke survivor details in thankQ meaning they can support them better.
Online donations
Like most charities, the Stroke Association rely on donations. The requirement here was to allow the Stroke Association donations team to add pages to the site that had compelling imagery and text, which was also integrated with thankQ. Another requirement for the donations team was to be able to add specific 'appeal' donation pages.
Additionally two special donation pages were required for users who wanted to donate 'in memory' of someone who had passed away or 'in celebration' of an event such as a wedding or anniversary.
Outcome: Sift Digital created a custom content type for the donation page where the donations team could add the images and text for each of the three donation amounts. This was displayed to the user and clicking an amount would populate the donation field.
The user then has the option to donate this amount as a single donation adding the amount as a product to their basket and sending them to the checkout. They also have the option to donate the amount as a monthly donation, which would send them off to an external supplier site (RSM) with the amount populated on the direct debit setup form they are presented with.
For 'in memory' and 'in celebration' donations the user is presented with additional fields on the donation form where they enter the details of why they are donating and on whose behalf. This information is added to the donation line item in their basket and passed through the checkout.The 'in memory' and 'in celebration' details the user enters are passed to thankQ when the user completes the checkout.
This information is prepared and sent to thankQ using custom Rules that Sift Digital developed.
Fundraising event registration
The Stroke Association run fundraising events like fun runs, bike rides and zip wires. They wanted users to be able to sign-up to these events on the website and to be able to pay for their place if required.
Each event was required to have multiple purchase prices for things like early bird, the distance of the run the user was signing up for, etc.
The event registration information needed to be sent to thankQ as the events team wanted one place to manage the registrants details.
Sift Digital identified the Commerce Registration module as a good fit for this requirement as it meant that the events team could manage the registration forms specific to each event and integrated with Drupal Commerce so that the event registrations could be treated as a product and 'bought' through the shop.
There was an additional requirement to validate the thankQ data that the events team were inputting into Drupal. The events team enter a thankQ event ID on the event node then the SKU for each registration type 'product' would be the event attendee type code from thankQ.
To make sure event registrations were matched against the right attendee type code, Sift Digital added a validation check when the event was submitted that would lookup the event in thankQ and check that the SKUs for each registration type 'product' existed in thankQ.
Outcome: Users are able to sign up to events on the website rather than sending paper forms which saved the Stroke Association lots of manual work and time in entering it into thankQ.
Local support group micro-sites
The Stroke Association help run local supporter groups across the country. The requirement was to allow the users that run these local supporter groups, who are often stroke survivors themselves, to post news and events to the local supporter group micro-site, as well as adding information about the group and where and when they meet up.
To make each local supporter group unique the administrators should be able to upload a custom logo, homepage image and change the colour of the theme from a choice of three colours.
To help the local supporter groups administrators in populating the site an additional role was suggested: 'local supporter groups editors'. These editors could then publish news and events, but the local supporter groups administrators had the ability to customise the look of the local supporter group and edit the meet up and contact information.
Sift Digital identified the Organic Groups module as a good fit for these requirements. The two roles and permissions were setup and content types for the local supporter groups were setup.
A custom local supporter group theme was created to give them their own look and feel separate from the main site.
The theme colour switch was carried out in a hook_custom_theme() implementation as the contrib modules that exist for switching the theme didn't quite fit the requirements and would have been a lot of work to modify.
Outcome: The local supporter groups administrators and editors have been populating their local supporter group pages and the feedback has been positive.
ThankQ integration
The Stroke Association required that all donation, event registration and registering user information was sent to their CRM thankQ. This would act as the central repository for all supporter information. At the moment staff at the Stroke Association have to manually copy information from the website and add to thankQ.
Working with The Access Group who manage the Stroke Association's installation of thankQ, the technical details around thankQ's SOAP API were documented. The Stroke Association had some modifications made to the API so that they could capture the 'in memory' and 'in celebration' details which isn't part of the thankQ API as standard.
The touch points between Drupal and thankQ were:
User registration
Event registration
Donations
Newsletter signup
Sift Digital identified the most complex integrations were around donations and event registrations. As they went through the Drupal Commerce shop the integration were based heavily on Rules given Drupal Commerces excellent Rules integration.
For each user registering for an event or donating, a thankQ contact was created so they could be linked to the registration or donation in thankQ. If a contact already existed, the details they submitted on the registration form or checkout were sent to thankQ as an update.
Rules were created for each touch point that took the order details or user details and performed the logic required before calling the thankQ API call.
Outcome: Information has been flowing smoothly to thankQ from the site since go live. This has dramatically reduced the amount of time the Stroke Association need to copy information from Drupal to thankQ.
A website that works well on all devices
The Stroke Association required a website that works well on all devices as their previous website was not responsive.
Outcome: Sift Digital developed a custom theme based on Zen that is fully responsive using gulp as a SCSS and JS preprocessor to give users quick load times.
To give mobile users the best experience the Media Wrapper module was developed to serve the user the best sized image based on their device. This mean that mobile users had small, fast loading images while desktop users got larger ones.
A layout that is easy to use for stroke survivors
One of the primary audience groups for the website was stroke survivors. We completed both qualitative and quantitative research with these users. This consisted of a questionnaire with a large amount of users and in-depth interviews with a small group of users along with watching them use the interactive prototype we had produced previously.
Some of the problems that the stroke survivors interviewed encountered included Aphasia, impaired movement, vision, tiredness and fatigue. Aphasia is a condition that affects the brain and can negatively impact peoples reading, writing and speaking ability.
Some of the design decisions incorporated to help address these problems included:
- A relatively flat site hierarchy is used throughout
- Complex Interactions such as fly out menus and hover effects are kept to a minimum
- Articles are split into a series to allow users to engage and navigate the content without having to read large blocks of text
- Providing links to the next article in a series at the end of each article, to help keep the user engaged in the content
- Providing contextual navigation in the footer - Reinforcing to the user where they are located in the site structure and what other content is available in the section
The Book module was used drive the in-page navigation. The blocks that have been added to the site to related publications are based on taxonomy to provide users with related content.
Outcome: Pages visited per session have increased 19%, as has time spent on the site, while the bounce rate has declined.
Technical specifications
Drupal version:
Drupal 7.x
Key modules/theme/distribution used:
Why these modules/theme/distribution were chosen:
Harmony
Harmony forum was selected as the forum solution for the Stroke Association site as a replacement for Sift Digital’s traditional approach of combining core forum with advanced forum and a suite of custom modules to provide a complete forum experience.
Although Harmony forum was in beta when development started the advantages it provided with it’s entity based approach meant development would be much quicker and the end solution much easier to maintain.
It also provided Sift Digital the opportunity to contribute to a fledgling project that would be used on future community projects while giving back to the Drupal community.
Commerce & Commerce registration
Commerce was selected as the e-commerce solution for the Stroke Association’s shop. The decision to choose Commerce was based on it’s out of the box functionality and extensibility.
One other consideration for Commerce was that Sift Digital needed to provide event registration and management functionality that would integrate with an e-commerce solution allowing users to buy places on an event that the Stroke Association was running.
For this functionality Sift Digital selected the Commerce Registration module which provided integration out of the box.
Postcode anywhere
To improve the user checkout experience the Postcode Anywhere module was selected to allow users to fill out their address by using an autocomplete field. This single field searches any part of the address based on the user’s input allowing users to easily enter their address.
Web service client
This module provided the basis for our custom web service integration with the client's CRM of choice thankQ. Its flexibility and integration with Rules meant it was a good fit for our requirements, but it does not by default provide much in the way of error handling. With that in mind we extended the base SOAP client to add more flexible exception handling and the ability to perform automated retry of failed requests.
Community contributions:
As part of the development Sift Digital provided patches to the Harmony core module, the atjs module, the commerce registration module, the commerce worldpay module as well as developing two in house modules that may be released to the Drupal community in the future.
In addition Tom Metcalfe has been added as a module maintainer for the commerce registration module and has worked to get the module out of beta and into a full release.
Organizations involved:
Team members:
Project team:
The Digital Team at the Stroke Association were Caroline Reid, Mat Twaddell and Petra Polic
The project management team at Sift Digital were Kieran Forde and Mary De Grey
UX research and design was carried out by David Barker
Sectors:
Non-profit
