Webshop für
nph deutschland e.V.

In die Website integrierter Spendenshop

Für die Organisationswebsite des internationalen Kinderhilfswerks nph deutschland e. V. hat punkt.de eine Shop-Erweiterung umgesetzt, die es Spendern ermöglicht, individuelle Hilfsgüter zu finanzieren. Weil es dem Team wichtig war, das Kinderhilfswerk und seine Arbeit zu unterstützen, hat es dabei einen Teil seiner Entwicklungszeit gespendet. Das Ergebnis überzeugt auf voller Linie – und wurde 2016 mit dem TYPO3 Community Award ausgezeichnet.

Die Ausgangssituation

Für Wohltätigkeitsorganisationen wird es immer schwieriger, Spender zu mobilisieren. Denn diese sind kritischer geworden: Sie wünschen sich absolute Transparenz darüber, wofür ihr Geld verwendet wird – und ob es auch wirklich ankommt. Nicht zuletzt deshalb wird heute lieber gezielt für kleinere Hilfsgüter als für größere Hilfsprojekte gespendet. Als Reaktion auf diese Entwicklung hatte nph deutschland e.V. den Spendenshop „MyGoodShop“ mit einer anderen Agentur ins Leben gerufen, der es Spendern ermöglichte, einzelne Hilfsgüter wie Nahrungsmittel oder Medikamente zu finanzieren. Dieser Webshop war jedoch losgelöst von der Organisationswebsite mit ihren umfangreichen Informationen zu den Projekten des Kinderhilfswerks, was bei Spendern häufig Verwirrung auslöste. Dementsprechend war das Ziel der Zusammenarbeit mit punkt.de, einen neuen, in die Organisationswebsite integrierten Webshop zu schaffen, um einerseits Erscheinungsbild und Technik zu vereinheitlichen und andererseits Spenden-Produkte und Spenden-Projekte näher zusammenzubringen. Gleichzeitig sollte der neue Webshop leicht gepflegt werden können und den Spendenprozess für User so einfach wie möglich gestalten.

Die Herausforderung

Da die Organisationswebsite von nph deutschland e. V. das CMS TYPO3 verwendet, musste der Webshop in dieses System integriert werden, damit Shopinhalte auf der Seite angezeigt werden, Verlinkungen möglich sind, Inhalte nur in einem System gepflegt werden müssen und der Shop bei Bedarf – wenn der Traffic im Shop zu groß wird – auf einem eigenen Server betrieben werden kann. Weil sich die Funktionsweise eines CMS erheblich von der eines Shop-Systems unterscheidet, galt es, das richtige technische Gerüst zu finden, um eine inhaltsbasierte Form der Kommunikation wie sie auf einer Organisationswebsite zu finden ist mit den transaktionsbasierten Mechanismen eines Webshops zu verbinden. 

Gleichzeitig unterschied sich der von nph deutschland e. V. benötigte Webshop stark von „herkömmlichen“ Webshops: So wurden beispielsweise keine Produktvariationen wie Größe oder Farbe und keine Lieferadresse, dafür aber Filter nach Einsatzgebieten, Hintergrundinformationen zu jedem Produkt und Spendenurkunden benötigt. „Spenden ist anders als Einkaufen“, weiß Detlef von Houwald, Online-Fundraiser bei nph deutschland e. V. „Bei unserem Webshop sollte es daher nicht darum gehen, User dazu zu bringen, viele teure Produkte zu kaufen, sondern ihnen ein gutes Gefühl zu vermitteln. Das wiederum hatte natürlich Konsequenzen für den Aufbau und die Funktionalität des Shops“. 


Der ganze Prozess war unheimlich gut durchdacht und sehr strukturiert.
Detlef von Houwald, 
Online-Marketing Spezialist
Der nph Spendenshop wurde mit Aimeos in TYPO3 integriert.
Extrem transparent, konstruktiv und schnell – so lässt sich die Kooperation mit punkt.de beschreiben.
Detlef von Houwald, Online-Marketing Spezialist
Design made by made in (aus Frankfurt)
nph SpendenShop Design wurde von der Interaktive Design Agentur made in umgesetzt
Die Bezahlfunktion wird über eine Schnittstelle zu PAYONE realisiert
Spendenshop Schnittstelle ist PAYONE

Die Lösung

Vor der Realisierung des Projekts hat punkt.de gemeinsam mit nph deutschland e. V. und der Partneragentur made in, die für das Design des Webshops zuständig war, einen Wireframe erstellt, um Ideen zu sammeln und gleich auch deren technische Machbarkeit zu prüfen. „Der ganze Prozess war unheimlich durchdacht und gut strukturiert“, berichtet von Houwald. „Mit dem fertigen Wireframe sind wird dann an die eigentliche Arbeit gegangen.“ Für die Umsetzung des Webshops haben sich punkt.de gemeinsam mit nph für das Shop-System von Aimeos entschieden. Das System regelt den Einkaufsablauf von der Produktauswahl über den Warenkorb bis hin zur Bezahlung. Zudem existiert eine nahtlose Integration ins TYPO3-Backend, was den Redakteuren die Verwaltung des Shops im bekannten TYPO3-Backend ermöglicht. Ein weiterer Vorteil: Einzelne Elemente des Shops können durch Plugins über das gewohnte TYPO3-Backend eingebunden werden. Nichtsdestotrotz waren viele spezielle Anpassungen nötig, um den Bedürfnissen eines Spendenshops gerecht zu werden. So wurden Features wie Slider, Teasertexte oder die Nutzung von Gutscheincodes implementiert.

Die Bezahlungsfunktionalität wurde während des Projektes durch eine Schnittstelle zum Payment Service Provider PAYONE erweitert. Das zertifizierte Unternehmen (https://www.payone.de/plattform-integration/pci-dss-zertifizierung/) bietet verschiedene Zahlungsmodalitäten und stellt sicher, dass die Zahlungsdaten der Kunden bei PAYONE sicher gespeichert werden.

Auch für die Redakteure ist der Eingabeaufwand durch teilautomatisierte Prozesse geringer: Die Produkte lassen sich leicht pflegen, weil vorgegebene Kategorien und Attribute nur ausgewählt und nicht immer neu erstellt werden müssen. Das gleiche gilt für FAQ-Einträge. Außerdem werden bei jedem Produkt automatisch Empfehlungen für andere Produkte aus derselben Kategorie angezeigt, außer der Redakteur möchte, dass bestimmte Produkte angezeigt werden, dann kann er bestimmen welche. Hat ein Spender ein Produkt finanziert, wird auch die Spendenurkunde automatisch generiert und verschickt. Ebenso automatisch funktioniert die Verdopplung der Spenden durch Partner von nph deutschland e. V. bei einigen Hilfsgütern und die Anzeige des Spendenfortschritts bei begrenzten Produkten – das Setzen eines kleinen Häkchens genügt. Ein weiteres Plus: Die Shop-Statistik wird direkt im Backend angezeigt. 

Beispielseite mit Produkten und Teaser-Text im nph Spendenshop auf TYPO3 und Aimeos-Basis.
Im Spendenshop gibt es verschiedenen Kategorien zum auswählen
Der Spendenkorb mit Zusatzfunktionen wie der Verdoppelung von Spenden.

Die weitere Zusammenarbeit: ein Continuous Relaunch

Der Webshop ist seit Oktober 2016 online, doch nph deutschland e. V. hat noch viel vor. „Die Shop-Funktionalitäten werden schrittweise erweitert“, erklärt von Houwald. So sollen User ihre Merklisten als „Wunschlisten“ an Freunde und Verwandte weiterleiten können und auch weitere Sprachversionen sollen folgen. „Wichtig ist für uns auch, dass wir Projekte und Produkte noch enger miteinander verzahnen, zum Beispiel indem auch auf den Projektseiten passende Produkte angezeigt werden“, so von Houwald. Weil immer mehr Spender die Website und den Shop mit mobilen Geräten besuchen, sollen beide auch nun noch vollständig mobil optimiert werden. Zusätzlich zur Entwicklung findet ein SEO-Monitoring statt.

Dass nph deutschland e. V. dabei weiterhin mit punkt.de zusammenarbeiten wird, steht für den Online-Fundraiser außer Frage: „Extrem transparent, konstruktiv und schnell – so lässt sich die Kooperation mit punkt.de beschreiben.“ Besonders beeindruckt und dankbar zeigt sich nph deutschland e. V. vom persönlichen Einsatz der punkt.de: Weil es punkt.de sehr am Herzen lag, das Kinderhilfswerk zu unterstützen, hat das Team einen Teil des Projekts ehrenamtlich umgesetzt und auch die Schnittstelle von Aimeos zu PAYONE gesponsert. Mit Erfolg: Im Oktober 2016 wurde der Webshop mit dem TYPO3 Community Award in der Kategorie Small Websites ausgezeichnet. „Das Tüpfelchen auf dem i unserer bisherigen Zusammenarbeit“, resümiert von Houwald.

Case Studies
Neueste Blogbeiträge
foreach ($problems as $challenge)
Paul Weiske, Entwicklung bei punkt.de
Arbeiten bei punkt.de