Bangladesh 2018

unicef.ch Donations

simple and flexible

Donation Widget Responsive

The Committee for UNICEF Switzerland and Liechtenstein was founded in 1959 as an association and is one of numerous national UNICEF committees. UNICEF is a development policy body of the UN and is financed exclusively by voluntary contributions from governments and private donations. The main task of national committees, as independent NGOs, is to raise funds for international programmes and to provide information on the situation of children around the world.

In order to carry out this task in the best possible way, UNICEF wants to become more agile and modernize technology in the course of the digital transformation. As a first step into agility, a first minimal relaunch of the website was done with Drupal 8 to make modern content creation tools available to editors. The donation process, starting with the donation widget, e.g. on project pages, remained untouched by this first milestone and was still handled using the old system.

The content has already been optimized with the new system in several iterations, which made it clear how the donation process should be optimally integrated into the content and which tools and degrees of freedom in the placement of the donation process are valuable for editors.

In the old, complex setup, a new donation purpose had to be entered in 3 systems so that it could finally be integrated into the website with a donation widget.

UNICEF decided after an evaluation to replace its old ERP system with over 20 years of operational data with SalesForce. As a result of this changeover, the new integration of the donation processes is also taking place.

UNICEF Corinne Tarnai

The Primer Donation solution allows me to customize and integrate donation widgets into the content very quickly and easily. The newly gained flexibility makes my daily work easier.

Corinne Tarnai, Informatics UNICEF Switzerland and Liechtenstein

Now that a solid basis has been created with the relaunch on Drupal 8, the company wants to move forward with the next steps in a timely manner and profit to the maximum from the potential of the new system.

The most important call-to-action elements are to be optimized along their entire conversion funnel. The donation widget and forms should be emphasized and distractions reduced, adapted to the new CI.

The donation process is to be optimally integrated into the platform and thereby improve the usability for end users and editors.

The donation process is to be decoupled from the existing ERP system, so that an early introduction of the donation process is possible, without dependence on the project progress for the replacement of the ERP system.

Editors should be able to create new landing pages to be optimized for specific target groups using purely content-based tools without having to consult another system. For example, through specific addressing, visuals, other recommended donation amounts or testimonials from the target group in the checkout as elements of trust.

The replacement of Drupal 7 should be completed with this project.

The first campaign with the new donation widget was a complete success. The volume of donations was increased thanks to the greatly improved conversion rate and the optimization of the recommended donation amounts.

Collect donations

The newly created donation widget can be used in many ways and for end users* is maximally reduced to the selected use case. This ensures the best usability and accessibility at all times.

The downstream completion of the donation is deliberately done on a separate page to remove all distractions, as e.g. an accidental click on a link while filling out a form could lead to frustration and thus aborts. The image world can be preserved e.g. with a hero element or testimonials via the checkout process to the thank you page.

The donation purposes and their associated metadata can be managed centrally. Thanks to a clear list of all business cases, consistency can be easily ensured when making adjustments.

For editors, the donation widget is a normal content element that can be freely placed during content editing. The code does not make any assumptions about the different business cases, so editors can freely use all variants of it. This is a big advantage in contrast to the earlier donation widgets, which handled a lot of special business cases in the code and were therefore not editable in the content.

The donation widget can be integrated and displayed differently in the content: It can appear simple or be integrated into the image world of a Hero element. It can be used as a call-to-action in the header, as a interrupter element in the content or at the end as a follow-up.

For experiments (e.g. with A/B tests), variants can be worked out purely in terms of content using the available tools. This is an optimal foundation for the continuous optimization of the contents.

The stability of the entire donation process is ensured by automated Behat Tests (26 scenarios, 1517 steps), visual regression tests and monitoring during operation.

Contact forms

Consciously we decided to use Drupal Webforms, because it offers more possibilities for the creation of forms with logic and several steps and the presentation in the CMS is automatically optimized.

Combined with the SalesForce Services Cloud, form submissions can be automatically created as cases in SalesForce via API and trigger all the usual mechanisms. Thus, the advantages of both systems are optimally benefited.

The appearance of the forms was optimized in several iterations step by step until they were finally perceived by users as simple. A simple procedure for optimizing forms was developed, which was published in the Primer documentation as a guide. This ensures that the quality of the forms is maintained even when editors adapt them. One example is the use of white space to group form elements - instead of the usual boxes with frames, which increase visual complexity.

The previously complex forms are to be simplified and thus the hurdles to their use lowered. To achieve this, they were broken down into simple forms for one business case each. These forms were embedded contextually on the pages. This way they pick up the users directly where they develop an awareness of the need. If necessary, the customer service can follow up on information and thus develop customer loyalty through personal interaction.

A big challenge was that the new standard function for donation processing should have an optimal usability for end users and should be as flexible as possible for editors. To meet these requirements, more than 100 donation processes from different NPOs were examined and possible solutions were compared and the underlying considerations were documented. The resulting solution meets all expectations and can now be continuously developed and individualized.

Initially the replacement of the core system was planned to coincide with the roll-out of the new donation widget. This would have resulted in a complex and costly release process. The content, for example, would have had to be adapted directly after the release under high time pressure.

The staging created several advantages in the project, from which multiple benefits were derived:

  • The new widget was available long before the new ERP was ready.
  • The content work for the placement of the new donation widget and optimization of the contextual checkout process could be prepared without time pressure.
  • The early release of the donation widget enabled campaigns to benefit from the new donation process with much better conversion rates before the new ERP system was in place
  • Experience was gained and improvements implemented during the project.

During the changeover for the release of SalesForce, the donation process only had to be interrupted for 15 minutes.

With the completion of this project, the operation of the previous Drupal 7 instance (action.unicef.ch), which was still responsible for donations processing after the first stage of the relaunch to Drupal 8, can be discontinued.

For Primer a new standard function for handling donations was developed during this project. Due to our experience with Drupal Commerce, the donation process could be optimally integrated into the framework. The elegant technical solution was presented at the Drupal User Group Zurich by CTO Sascha Grossenbacher, so that it can be used as a guide for other projects:

https://slides.com/saschagrossenbacher/commerce

In addition to UNICEF, several NPOs in Switzerland have also chosen SalesForce as their CRM and it is expected that others will follow suit and follow the same path. FinDock is an increasingly popular solution for processing payments in the SalesForce ecosystem, which now also offers Swiss payment methods (e.g. credit cards via SIX Saferpay, ISR payment slip).

It was therefore obvious to implement the integration of the means of payment from SalesForce / FinDock into Drupal Commerce in partnership with FinDock as Open Source software. Other projects can use this module freely and develop it collaboratively in the future. As a starting point for the collaboration, a wish list for further development was worked out. The resulting transparency allows the development costs for e.g. the upcoming migration to the API version 2.0 to be shared between several parties.

The FinDock integration is already being used in other projects and other NPOs are already using the new donation solution from Primer.


Primer has once again proven to be the optimal basis. Thanks to the wide range of standard functions, it is possible to focus on individual requirements during the project. Due to the high degree of standardization, the platform remains efficiently maintainable despite strong individualization, which significantly optimizes the total cost of ownership.