Foto CJD Deutschland e.V.

CJD Deutschland e.V.
Barrierefreier Nonprofit Relaunch

Vorreiter für Barrierefreiheit und digitale Inklusion

Challenge: Barrierefreier Vorreiter in der digitalen Sozialwirtschaft

Die auf Basis von Drupal als Microsite-Installation entwickelten Websites des CJD legen die Basis für eine vertriebsorientierte und gleichzeitig barrierearme Zukunft des sozialen Bildungsträgers:


Durch den Fokus auf Barrierefreiheit und Benutzerfreundlichkeit wird sichergestellt, dass jeder – unabhängig der individuellen Einschränkungen – einen leichten und einfachen Zugang zu Informationen und Angeboten erhält.


Die Seite zählt durchschnittlich 15.000 Visits pro Monat und über 700 individuelle Angebote. Mit etwa 11.000 Mitarbeitern zählt das CJD zu den größten NGOs im Bildungs- und Sozialbereich Deutschlands.

Die zahlreichen Inhalte und komplexe Angebotsstruktur müssen digital verständlich, optimiert und barrierefrei auf die Bedürfnisse der Zielgruppen zugänglich gemacht werden, die Anzahl der Großspenden erhöht und die Stellenbesetzungen besser unterstützt werden. Folglich sind die Zielgruppen-Cluster groß und vielschichtig: In Alter, in Beeinträchtigung und in Intention der Webseiten-Nutzung, ob man für sich selbst, Familienangehörige oder als Mitarbeiter von Ämtern Angebote sucht, Groß- oder Kleinspender ist oder werden möchte.


Das gemeinsame Credo von CJD, 21TORR unserer Schwester und Drupal-Agentur arocom: Als Digital-Vorreiter im Bereich NGO und digitaler Sozialwirtschaft wahrgenommen zu werden und andere innerhalb der Branche dazu zu animieren, Barrierefreiheit und digitaler Inklusion noch mehr Stellenwert einzuräumen.

Die barrierefreie Webseite des CJD Deutschland e.V.

Approach: Barrierefreiheit & Inklusion: Bewusst einschließen, anstatt unbewusst ausgrenzen

Der Grundsatz des CJD: Wir setzen uns für eine Zukunft ein, in der jeder Mensch die Möglichkeit hat, sich frei zu entfalten und ein selbstbestimmtes Leben zu führen.


Als einer der größten sozialen Bildungsträger in Deutschland fokussiert sich das CJD auf die Unterstützung von Menschen in schwierigen Lebenslagen und/oder mit körperlichen oder kognitiven Beeinträchtigungen. Es stellt Programme und Maßnahmen um Menschen dabei zu helfen, ein selbstbestimmtes Leben zu führen.

Die vielfältigen Angebote umfassen Arbeits- und Beschäftigungsmöglichkeiten, berufliche Bildung und Rehabilitation, Elementarpädagogik und Familienbildung, Hilfen für Kinder, Jugendliche und Familien, schulische Bildung, Wohnmöglichkeiten mit Begleitung sowie weitere Dienstleistungen.


Diese starken Werte gilt es im Sinne digitaler Barrierefreiheit und digitaler Inklusion als oberste Prämisse in Konzeption (UX), Interface Design (UI) und technischer Umsetzung zu berücksichtigen. Damit jeder Mensch die Möglichkeit hat, sich frei zu entfalten, ein selbstbestimmtes Leben zu führen und unabhängig individueller Einschränkungen einen leichten und einfachen Zugang zu Informationen und Angeboten erhält.

Designsystem der barrierefreien Webseite des CJD Deutschland e.V.
Icons für die barrierefreie Webseite des CJD Deutschland e.V.
Gestaltung der Icons im Detail für die barrierefreie Webseite des CJD Deutschland e.V.
Piktogramme für die barrierefreie Webseite des CJD Deutschland e.V.

Solution: Das Zusammen wirkt – ein digitales Herzensprojekt auf Augenhöhe

Innerhalb des interdisziplinären Teams aus CJD, arocom (technische Umsetzung) und 21TORR (konzeptionelle Umsetzung in UX/UI) hatten wir gemeinsam ein Ziel: Ein erster Schritt in die digitale, vertriebsorientierte und gleichzeitig barrierearme Zukunft für das CJD.

In nur sieben Monaten Entwicklungszeit ging der Relaunch innerhalb einer cross-funktionalen, agilen Sprint-Umsetzung nach Scrum live.


5-D Prozess für maximale Bedürfnisorientierung

Innerhalb des aus der Design Thinking Methodik bekannten Frameworks des 5-D Prozesses wurde das Projekt in zwei aufeinanderfolgende Teilpakete geclustert:


Phase 1: Discover and Define
Unterteilt in die Erarbeitung einer ganzheitlichen Produktvision, Design Discovery mit Nutzerbefragung, User Story Mapping, Erarbeitung von Conversion Funnels und barrierefreiem Look & Feel für die Zielgruppen, inklusiven Personas und einer auf Skalierung und Integrierbarkeit bedachten Tech Discovery wurde die Basis für die nachfolgende Sprint-Umsetzung gelegt.


Phase 2: Design, Deliver & Deploy
Iterative Umsetzung des erarbeiteten Produkt-Backlogs für eine interdisziplinäre Arbeitsweise aus Product Owner (Kunde), Design- und Dev-Team sowie die Migration der Inhalte.


Zugänglichkeit, Barrierefreiheit & digitale Inklusivität im UX/UI
Besonderes Augenmerk lag auf Barrierefreiheit und Inklusivität im UX und UI, um Nutzergruppen bewusst ein-, anstatt diese unbewusst auszugrenzen. Dies schlägt sich sowohl in Struktur und Informationsarchitektur, in Interaktionsgestaltung, barrierefreiem Design System und UI Design als auch in der Zugänglichkeit von Inhalten und Website-Struktur nieder.


Barrierefreie Vertriebsorientierung
In der Sozialwirtschaft, die ohne „klassische Produkte“ auskommt, ist eine auf Konversion ausgelegte Website herausfordernd. Durch den konzeptionellen und technischen Aufbau der Angebote, dessen Suche und Auffindbarkeit hinsichtlich der persönlichen Bedürfnisse entlang der Produktvision gemeinden wir bewusst analog der WCAG 2.1 und BITV 2.0 Richtlinien ein. Denn Barrierefreiheit bedeutet hohe Benutzerfreundlichkeit und leichte Zugänglichkeit. Eine intuitive Bedienbarkeit wiederum hilft allen NutzerInnen. So werden Hürden in der Customer Journey abgebaut und die schnelle Konvertierung für das passende Angebot ermöglicht.


Benutzerfreundlichkeit auch im Backend
Auch Content-Redakteure sind Nutzer: Durch das einfach und leicht bedienbare Backend können die über 100 Kommunikatoren der CJD-Verbünde ihre Inhalte ohne umfangreiche Schulungen selbstständig pflegen. Das sorgt für Akzeptanz und schnelle Eingemeindung der Verbünde innerhalb der Microsite-Architektur.


Dedizierter Spendenbereich
Der dedizierte Spendenbereich für Fundraising bietet Informationen über die Arbeit der NGO, die Verwendung der Spendenmittel und verschiedene Möglichkeiten zur Unterstützung, wie beispielsweise Online-Spendenformulare, Informationen zu geplanten Veranstaltungen und Angebote, die finanzielle Unterstützung benötigen. Vor allem aus UX-Sicht ist der separate Spendenbereich entscheidend, um im Sinne der Zielgruppen-Segmentierung Groß- und Kleinspendern und deren Conversion-Funnels gerecht zu werden, Transparenz zu schaffen und so die Bereitschaft zur Unterstützung der NGO zu fördern.

CJD Screencast
Dirk Danker, [object Object] undefined
Dirk Danker
Zentralbereichsleiter Marketing, Unternehmens­kommunikation und Fundraising
Liebe arocoms, liebe 21TORRs, es ist alles gesagt. Danke für den hervorragenden Job. Das CJD ist in der Tat ein Herzensprojekt. Auch meins. So machen wir weiter.
Florentin Stövhase, Teamleiter Digitale Kommunikationslösungen & Online Marketing undefined
Florentin Stövhase
Teamleiter Digitale Kommunikationslösungen & Online Marketing
Begleitet wurden wir von zwei Partnern, die wie 👊 aufs 👀 zu uns passen: arocom und 21TORR. Vielen Dank für euren unermüdlichen Einsatz und das Commitment, mit uns auf diese spannende Reise zu gehen. Danke für eure tolle Arbeit. Ich hätte mir niemanden besseres für dieses herausfordernde Projekt vorstellen können.