UNICEF hilft Kindern

UNICEF Relaunch

schnell - agil - effizient

unicef responsive design

Kunde

UNICEF

Go Live

Oktober 2018

Das Komitee für UNICEF Schweiz und Liechtenstein wurde 1959 als Verein gegründet und ist eines von zahlreichen nationalen UNICEF Komitees. UNICEF ist eine 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 NGOs, 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, orientiert sich UNICEF Schweiz und Liechtenstein im Zuge der digitalen Transformation grundsätzlich neu. Sie möchten die Grundlage schaffen für agile Arbeitsweise und planen daher die Ablösung zahlreicher Kernsysteme mit modernen Technologien.

Der Relaunch der Website ist der erste Meilenstein auf diesem Weg. Die Lebensdauer der bestehenden Website neigt sich dem Ende zu (Support von Drupal 7 endet im November 2021) und die Technologie hat sich seit dem letzten Relaunch 2013 stark weiterentwickelt.

Die Website-Besucher sollen schneller und intuitiver zu den Inhalten finden, die sie interessieren. Der Look soll moderner werden und ein mobile-first Ansatz ist für die zahlreichen Smartphone-User ein Muss. Zudem soll die organisch gewachsene Inhaltsarchitektur reduziert und wieder konsistent strukturiert werden.

Für Editoren soll die Website leichter und intuitiver zu bedienen sein, aber zugleich mehr Flexibilität und Selbstständigkeit in der Content-Gestaltung gewähren. Durch den Einsatz von flexibleren Inhaltselementen soll die Anzahl vorgängig starrer Inhaltstypen stark reduziert werden und die Benutzerfreundlichkeit optimiert werden.

Um die angehende Ablösung der bestehenden Systeme (z.B. ERP, CRM) zu vereinfachen, soll die Website von Drittsystemen entkoppelt werden. Erwünscht ist weiterhin eine nahtlose Integration, ohne direkte Abhängigkeiten zu schaffen. Dadurch schränken die Drittsysteme künftig die Agilität der Web-Prozesse nicht ein und es können unabhängig Anpassungen vorgenommen werden, ohne direkte Auswirkungen auf andere Systeme.

Durch die Berücksichtigung dieser Punkte und dem Einsatz der modernen Plattform Drupal 8 wird die Basis für eine lange Lebensdauer gelegt.

Um die Vielzahl der Anforderungen für den Relaunch der Website und der integrierten Systeme zu reduzieren, wurde entschieden, die Ablösung des vorhandenen UNICEF-Setups in mehrere Teilschritte aufzuteilen. Dabei wurden mit dem ersten Schritt alle Inhaltsseiten auf Drupal 8 migriert und komplexe, tief integrierte Prozesse auf der bestehenden Drupal 7 Website erhalten.

Dieses agile Vorgehen hat sich bewährt: Mit einem minimalen Budget konnte nach nur 4 Monaten die neue Website publiziert werden.

Editoren können mit den neuen leistungsfähigen Werkzeugen zur Inhaltserstellung arbeiten und Erfahrungen im Umgang mit Drupal 8 sammeln. Die Anforderung zur Weiterentwicklung können basierend darauf präziser ermittelt werden und typischerweise werden auch kosteneffizientere Lösungen gefunden.

Durch die Übernahme des Design-Konzepts einer bestehenden UNICEF-Website konnte im Projekt viel Komplexität reduziert werden -  z.B. in Entscheidungsprozessen. Ihr modernes und aufgeräumtes Erscheinungsbild überzeugte durchgehend, nachdem sie das neu erarbeitete Design in mehreren Iterationen basierend auf User Tests optimiert haben.

Dieses Design führt eine farbliche Reduktion sowie eine stärkere Bildsprache ein. Das neue, aufklappbare Menü bietet dem Websitebesucher durch Strukturierung gleichzeitig Übersicht sowie direkte Deep-Links. Auch die Frontseite wurde stark reduziert und überzeugt nun durch einen klaren Fokus auf das Thema Nothilfe.

Primer ist - nach über 6’000 Stunden Entwicklungszeit - die optimale Basis für dieses Projekt. Das CMS erleichtert die Arbeit von Editoren, da es “out-of-the-box” bereits eine Vielzahl an Werkzeugen zur einfachen und effizienten Inhaltserstellung mit bringt. Das Design-Framework setzt Mobile-First konsequent um und die Darstellung wird für alle Geräte optimiert.

Viele Elemente des neuen UNICEF-Designs sind im Werkzeugkasten bereits vorhanden und mussten nur im Erscheinungsbild angepasst.

Zudem konnte die Anzahl der benötigten Inhaltstypen von über 20 auf fünf reduziert werden und die gestalterische Freiheit wurde mit Hilfe von Paragraphs (Baukastensystem) stark erhöht. Dies gibt UNICEF die Möglichkeit, künftig agil zu arbeiten -  mit Inhalt und Seitenaufbau zu experimentieren, Erfahrungen zu sammeln und den Inhalt dementsprechend iterativ zu optimieren. Zum Beispiel wurde das Spenden-Widget als Inhaltskomponente eingeführt, welche von Editoren auf jeder beliebigen Seite hinzugefügt werden kann, um einen Spendenprozess zu integrieren. Dies befähigt die Editoren, unterschiedliche Landingpages (A/B-Testing) für eine Spendenkampagne zu erstellen, aber auch Spendenteaser zu bestimmten Themen in den dazugehörigen Newsbeiträgen zu platzieren.

Auf der neuen Website gibt es keine Abhängigkeit mehr von Drittsystemen. Formulare können nun direkt auf der Website erstellt werden und die Daten - wenn gewünscht - an Drittsysteme weitergesendet werden. Dies bietet UNICEF Schweiz und Liechtenstein die Möglichkeit ihren Website-Relaunch zügig durchzuführen - unabhängig von langwierigen Entscheidungsprozessen bezüglich ERP- und CRM-Ablösung. Stattdessen können sie nun bereits mit der neuen Website arbeiten und ihre CRM/ ERP-Bedürfnisse evaluieren und Anforderungen neu definieren.

Dieser Weg hält ihnen viele Möglichkeiten offen und bietet einen optimalen Einstieg in eine agile Zukunft. Die Website wird laufend weiterentwickelt und an der Ablösung des Spenden-Widgets, der Übernahme aller Prozesse und der Anbindung an ein neues CRM/ERP-System wird bereits gearbeitet.


Die grösste Herausforderung des Relaunches liegt darin, eine agile Arbeitsweise zu etablieren. Dies erfordert eine organisatorische Transformation, eine Veränderung des Denkens und der Arbeitsweise im Projekt und darüber hinaus in der Folgephase.

Die neuen Hilfsmittel der Website sind eine wichtige Voraussetzung für die Agilität. Viel wichtiger ist aber, dass alle Beteiligten die bestehende Arbeitsweise hinterfragen, neue Ideen einbringen und sich selbst iterativ mit dem Projekt weiterentwickeln. Die Begleitung dieses Prozesses ist für den Erfolg essentiell.

Um die Autoren und Editoren dabei zu unterstützen, war es wichtig, eine klar strukturierte Arbeitsweise zu ermöglichen, welche die technische Komplexität reduziert. Zu diesem Zweck wurde entschieden, dass alle inhaltlichen Arbeiten neu auf Drupal 8 erfolgen und die Drupal 7 Seite durch Verlinkung hauptsächlich nur noch zur Abwicklung der Spenden, Event-Anmeldungen und Shopbestellungen verwendet wird. Eine Ausnahme bildet die P2P-Plattform Cycling For Children (gib-alles.ch), welche vorläufig komplett auf Drupal 7 belassen wird.

Diese Trennung wurde gleichzeitig auch zur technische Herausforderung. Die alte Drupal 7 Website wurde auf eine Subdomain action.unicef.ch verschoben und schrittweise Regeln für Umleitungen und Indexierung festgelegt. Benutzer sollen die Trennung minimal wahrnehmen und die Reputation der Suchmaschinen (SEO) erhalten bleiben.

Die verbleibenden Elemente und Prozesse können nun erfahrungsbasiert neu priorisiert und in spezifischen Folgeprojekten schrittweise abgelöst werden.


Der Einsatz von Primer soll für UNICEF wesentliche Verbesserungen im Bereich Inhalt-Erstellung bringen. Im Projekt wurde deshalb die Produktivität der Werkzeuge analysiert und die Funktionalität und Usability von Primer / Paragraphs diesbezüglich wesentlich verbessert.

Nach einer ersten Migration der Inhalte durch Copy-Paste wurden diese im Anschluss schrittweise aufgetrennt, ausgezeichnet und mit neuen Elementen angereichert. Dieser Prozess wurde als schwerfällig empfunden.

Vor dem Projekt konnte MD Systems Paragraphs bereits mit dem neuen “Add” Dialog und den Operationen “Duplicate” sowie “Add above” bereits wesentlich optimieren. Neu entstand die Idee, dass man mittels einer speziellen Operation einzelne Paragraphen in andere Typen verwandeln könnte, um die Evolution des Inhaltes besser zu unterstützen. Dies würde Text Copy-Paste mehrerer Felder, erneute Suche von Bildern im Medien-Browser oder separates Löschen des alten Paragraph unnötig machen.

Nach einer ersten prototypischen Entwicklung der Idee wurde die Usability in mehreren Iterationen basierend auf Benutzer-Feedback zu einem optimierten “Convert”-Dialog vorangetrieben.

Das Feature wurde iterativ für Paragraphs Open Source publiziert und in Primer für alle Paragraph-Typen integriert.

Die Verbesserungen führten zu einer wesentlichen Steigerung der Produktivität.


Primer hat sich als optimale Basis für unicef.ch bewährt. Dank der breiten Palette an Standardfunktionen ist im Projekt ein Fokus auf die individuellen Anforderungen möglich. Aufgrund dem hohen Standardisierungsgrad bleibt die Plattform trotz Individualisierung effizient wartbar, womit die Gesamtbetriebskosten wesentlich optimiert werden.