Bangladesh 2018

unicef.ch Spenden

einfach und flexibel

Donation Widget Responsive

Das Komitee für UNICEF Schweiz und Liechtenstein wurde 1959 als Verein gegründet und ist eines von zahlreichen nationalen UNICEF Komitees. UNICEF ist ein entwicklungspolitisches Organ der UN und wird ausschliesslich durch freiwillige Beiträge von Regierungen und privaten Spenden finanziert. Die Hauptaufgabe nationaler Komitees ist es dabei, als eigenständige NPOs, finanzielle Mittel für internationale Programme zu sammeln sowie über die Situation von Kindern auf der ganzen Welt zu informieren.

Um diesen Auftrag bestmöglich ausführen zu können, möchte UNICEF im Zuge der digitalen Transformation agiler werden und Technologie modernisieren. Als erster Schritt in die Agilität erfolgte ein erster minimaler Relaunch der Website mit Drupal 8 um Editoren moderne Hilfsmittel zur Inhaltserstellung zugänglich zu machen. Der Spendenprozess, angefangen mit dem Spenden-Widget z.B. auf Projektseiten, blieb bei diesem ersten Meilenstein noch unberührt und wurde weiterhin über das alte System abgewickelt.

Die Inhalte wurden mit dem neuen System bereits in mehreren Iterationen optimiert, wodurch klar wurde, wie sich der Spendenprozess optimal in den Inhalt integrieren soll und welche Werkzeuge und Freiheitsgrade in der Platzierung des Spendenprozesses für Editoren wertvoll sind.

Im alten, komplexen Setup musste ein neuer Spendenzweck in 3 Systemen erfasst werden, damit dieser schliesslich in der Website mit einem Spenden-Widget integriert werden konnte.

UNICEF entschied nach einer Evaluation, ihr altes ERP-System mit über 20 Jahren Betriebsdaten durch SalesForce abzulösen. Aufgrund dieser Umstellung erfolgt auch die neue Integration der Spendenprozesse.

UNICEF Corinne Tarnai

Die Primer Spenden-Lösung ermöglicht mir, sehr schnell und unkompliziert Spenden-Widgets anzupassen und im Inhalt zu integrieren. Durch die neu gewonnene Flexibilität wird die tägliche Arbeit für mich vereinfacht.

Corinne Tarnai, Informatik UNICEF Schweiz und Liechtenstein

Nachdem mit dem Relaunch auf Drupal 8 eine solide Basis geschaffen wurde, will man mit den weiteren Schritten zeitnah weiterkommen und maximal vom Potenzial des neuen Systems profitieren.

Die wichtigsten Call-to-action Elemente sollen - entlang ihres gesamten Conversion-Funnels - optimiert werden. Das Spenden-Widget und die Formulare sollen angepasst an das neue CI hervorgehoben werden und Ablenkungen sollen reduziert werden.

Der Spendenprozess soll optimal in der Plattform integriert werden und dabei die Usability für Endbenutzer*innen und Editor*innen verbessern.

Der Spendenprozess soll von dem bisherigen ERP-System entkoppelt werden, damit eine frühzeitige Einführung des Spendenprozesses möglich ist, ohne Abhängigkeit vom Projektfortschritt zur Ablösung des ERP-Systems.

Eine neue Landingpage soll mit rein inhaltlichen Werkzeugen für eine spezifische Zielgruppe optimiert werden können, ohne ein weiteres System zu konsultieren. Beispielsweise durch spezifische Ansprache, Bildwelten, andere empfohlene Spendenbeträge oder Testimonials aus der Zielgruppe im Checkout als Vertrauenselemente.

Die Ablösung von Drupal 7 soll mit diesem Projekt abgeschlossen werden.

Die erste Kampagne mit dem neuen Spenden-Widget war ein voller Erfolg. Das Spenden-Volumen konnte dank der stark verbesserten Conversion-Rate und der Optimierung der empfohlenen Spendenbeträge gesteigert werden.

Spenden sammeln

Das neu entstandene Spenden-Widget ist vielseitig einsetzbar und für Endbenutzer*innen maximal reduziert auf den gewählten Anwendungsfall. So wird immer die beste Usability und Accessibility sichergestellt.

Der nachgelagerte Abschluss der Spende findet bewusst auf einer separaten Seite statt, um sämtliche Ablenkungen zu entfernen, da z.B. ein versehentlicher Klick auf einen Link während dem Ausfüllen eines Formulars zu Frustration und somit Abbrüchen führen könnte. Die Bildwelt kann z.B. mit einem Hero-Element oder Testimonials über den Checkout-Prozess bis zur Dankesseite erhalten bleiben.

Die Spendenzwecke und deren zugehörige Metadaten können zentral verwaltet werden. Dank einer übersichtlichen Liste aller Geschäftsfälle kann die Konsistenz bei Anpassungen einfach sichergestellt werden.

Für Editor*innen ist das Spenden-Widget ein normales Inhaltselement, das bei der Inhaltsbearbeitung frei platziert werden kann. Der Code trifft keine Annahmen zu den verschiedenen Geschäftsfällen und so können Editor*innen alle Varianten davon frei einsetzen. Dies ist ein grosse Vorteil im Gegensatz zu den früheren Spenden-Widgets, welche eine Vielzahl an speziellen Geschäftsfällen im Code behandelte und dadurch nicht im Inhalt editierbar waren.

Das Spenden-Widget kann unterschiedlich im Inhalt integriert und dargestellt werden: Es kann schlicht erscheinen oder sich in die Bildwelt eines Hero-Elementes integrieren. Es kann damit als call-to-action sowohl im Header, als Unterbrecher-Element im Inhalt oder am Ende als follow-up eingesetzt werden.

Für Experimente (z.B. mit A/B-Tests) können so mit den verfügbaren Werkzeugen rein inhaltlich Varianten erarbeitet werden. Dies ist eine optimale Basis um die kontinuierliche Optimierung der Inhalte weiter voranzutreiben.

Die Stabilität des gesamten Spendenprozesses wird durch automatisierte Behat Tests (26 Szenarien, 1517 Schritte), visuelle Regressionstests und Monitoring im Betrieb sichergestellt.

Kontaktformulare

Bewusst wurde entschieden, Drupal Webforms zu verwenden, da es mehr Möglichkeiten für die Erstellung von Formularen mit Logik und mehreren Schritten bietet und die Darstellung im CMS automatisch optimiert ist.

Kombiniert mit der SalesForce Services Cloud können Formularübermittlungen automatisch als Cases in SalesForce erstellt werden und alle üblichen Mechanismen ausgelöst. So wird von den Vorteilen beider Systeme optimal profitiert.

Das Erscheinungsbild der Formulare wurde in mehreren Iterationen schrittweise optimiert, bis sie schliesslich von Benutzer*innen als einfach wahrgenommen wurden. Dabei wurden eine einfache Vorgehensweise zur Optimierung von Formularen erarbeitet, welche in der Dokumentation von Primer als Anleitung publiziert wurde. Damit bleibt die Qualität der Formulare auch erhalten, wenn Editoren diese anpassen. Ein Beispiel ist der Einsatz von Weissraum zur Gruppierung von Formularelementen - anstelle der üblichen Boxen mit Rahmen, welche die visuelle Komplexität erhöhen.

Die bisher komplexen Formulare sollen vereinfacht werden und somit die Hürden zur Nutzung gesenkt werden. Um dies zu erreichen wurden sie in einfache Formulare für je einen Geschäftsfall aufgebrochen. Diese Formulare wurden kontextuell auf den Seiten eingebettet. Dadurch holen sie die Benutzer*innen direkt da ab, wo sie ein Bewusstsein für das Bedürfnis entwickeln. Falls nötig kann der Kundendienst Informationen nachfassen und so durch persönliche Interaktion die Kundenbindung ausbauen.

Eine grosse Herausforderung war, dass die neue Standardfunktion zur Spendenabwicklung für Endbenutzer*innen eine optimale Usability aufweisen und für Editor*innen möglichst flexibel einsetzbar sein soll, sowie je nach Bedarf in Darstellung individualisiert und funktional erweitert werden kann. Um diese Anforderungen zu erfüllen wurden mehr als 100 Spendenprozesse von verschiedenen NPOs untersucht, mögliche Lösungsansätze gegenübergestellt und die zugrundeliegenden Überlegungen dokumentiert. Die so entstandene Lösung erfüllt alle Erwartungen und kann nun laufend weiterentwickelt und individualisiert werden.

Initial war die Ablösung des Kernsystems zeitgleich mit dem Roll-out des neuen Spenden-Widgets geplant. Dies hätte einen komplexen und aufwändigen Release-Prozess zur Folge gehabt. Dabei hätte bspw. auch der Inhalt direkt nach dem Release unter hohem Zeitdruck angepasst werden müssen.

Die Etappierung schaffte mehrere Vorteile im Projekt, von denen mehrfach profitiert wurde:

  • Das neue Widget stand zur Verfügung, lange bevor das neue ERP bereit war.
  • Die inhaltlichen Arbeiten zur Platzierung des neuen Spenden-Widgets und Optimierung des kontextuellen Checkout-Prozesses konnten ohne Zeitdruck vorbereitet werden.
  • Durch den frühzeitigen Release des Spenden-Widgets konnten Kampagnen bereits von dem neuen Spendenprozess mit wesentlich besseren Conversion-Raten profitieren, bevor das neue ERP-System im Einsatz war..
  • Es konnten noch während dem Projekt Erfahrungen gesammelt und Verbesserungen umgesetzt werden.

Bei der Umstellungen für den Release von SalesForce musste der Spendenprozess nur für 15 Minuten unterbrochen werden.

Mit Abschluss dieses Projektes kann der Betrieb der vorgängigen Drupal 7 Instanz (action.unicef.ch), welche nach der ersten Etappe im Relaunch auf Drupal 8 noch für Spendenabwicklung verantwortlich war, eingestellt werden.

Für Primer ist während diesem Projekt eine neue Standardfunktion zur Abwicklung von Spenden entstanden. Aufgrund unserer Erfahrung mit Drupal Commerce konnte der Spendenprozess optimal in das Framework integriert werden. Die elegante technische Lösung wurde an der Drupal User Group Zürich vom CTO Sascha Grossenbacher präsentiert, damit sie als Anleitung für  andere Projekten verwendet werden kann:

https://slides.com/saschagrossenbacher/commerce

Neben UNICEF haben sich mehrere NPOs in der Schweiz auch für SalesForce als CRM entschieden und es wird erwartet, dass weitere sich an den Resultaten orientieren und denselben Weg beschreiten. FinDock ist eine zunehmend populäre Lösung zum Abwicklung von Zahlungen im SalesForce Ökosystem, welche neu auch Schweizer Zahlungsmittel (z.B. Kreditkarten via SIX Saferpay, ESR Einzahlungsschein) anbietet.

Es war deshalb naheliegend, die Integration der Zahlungsmittel von SalesForce / FinDock in Drupal Commerce so umzusetzen und in Partnerschaft mit FinDock offiziell als Open Source zu veröffentlichen. Andere Projekte können dieses Modul so künftig frei nutzen und kollaborativ weiterentwickeln. Als Startschuss zur Kollaboration wurde eine Wunschliste zur Weiterentwicklung ausgearbeitet. Die resultierende Transparenz erlaubt es, die Entwicklungskosten für z.B. die anstehende Migration zu der API Version 2.0 zwischen mehreren Parteien aufzuteilen.

Die FinDock-Integration wird bereits in anderen Projekten eingesetzt und weitere NPOs verwenden auch schon die neue Spendenlösung von Primer.


Primer hat sich auch hier wieder einmal als optimale Basis bewährt. Dank der breiten Palette an Standardfunktionen ist es möglich, den Fokus während des Projekts auf die individuellen Anforderungen zu legen. Durch den hohen Standardisierungsgrad bleibt die Plattform trotz starker Individualisierung effizient wartbar, was die Gesamtbetriebskosten wesentlich optimiert.