Neue Deutsche Medienmacher*innen

Neu hier? Die Community für einen erfolgreichen Start in Deutschland

Im Jahr 2023 gab es rund 1 933 000 Zuzüge und 1 270 000 Fortzüge über die Grenzen Deutschlands. Handbook Germany: Together ist ein Projekt der Neuen deutschen Medienmacher*innen, welches eine zentrale digitale Anlaufstelle für Zugewanderte und Geflüchtete darstellt und einen Zugang zu richtigen Informationen und Beratung schafft, um eine echte Teilhabe und Chancengleichheit von an Anfang zu ermöglichen.

Das mehrsprachige Team aus Journalist*innen mit vorwiegend eigener Migrations- und Fluchtgeschichte informiert in neun Sprachen (Arabisch, Englisch, Deutsch, Farsi, Französisch, Pashto, Türkisch, Russisch und Ukrainisch) zum Leben in Deutschland. Aktuelle und nutzerspezifisch aufbereitete Informationen zu allen Phasen der Integration und des Lebens werden in Artikeln, Videos und Social-Media-Posts behandelt.

Mit unserem Konzept, einem ausgereiften Gestaltungsentwurf und einem überzeugenden Pitch vor Ort konnten wir den Ausschreibungsprozess für uns entscheiden. Nach Erhalt des offiziellen Zuschlages hatten wir im ersten Kick-Off-Workshop die Gelegenheit, uns persönlich kennenzulernen und erste konzeptionelle Überlegungen zu entwickeln.

Zentrale Aufgabe des Konzepts ist es, die Benutzerfreundlichkeit zu optimieren und konsequent sicherzustellen – von der Wissensvermittlung durch themenspezifische Artikel bis hin zur Terminvergabe in einer 1:1 Online-Beratung für individuelle Fragen und Anliegen. Aufgrund einer hohen Handynutzung unserer Zielgruppen, verfolgten wir einen mobile-first Ansatz bei unserem Navigationskonzept. 
Der Einstieg in die Konzeptphase markierte die gemeinsame Erstellung von Personas, um ein Einfühlungsvermögen in die Zielgruppen zu entwickeln und die Nutzenden von Anfang an in den Mittelpunkt des Designprozesses zu stellen. Die Erarbeitung sogenannter Pain Points und eine Sammlung von Ideen und Wünschen seitens der Mitarbeitenden für und an das zukünftige Portal ebnete den Weg für die Erstellung der Wireframes. Die zielgerichtete Führung der Nutzenden zu den gewünschten Informationen und die Unterstützung bei der Wissensbeschaffung standen dabei klar im Vordergrund. 

Dafür wurden Übersichtsseiten zu den jeweiligen Kategorien (bspw. Leben, Arbeiten, Bildung) erstellt, die eine schnelle Orientierung über zusammengehörige Themen und die dazugehörigen Fragen im Forum ermöglichen. Prominente Platzierungen der Filtermöglichkeiten sowohl in der globalen Suche als auch im Forum unterstützt die Nutzenden bei ihrer Recherche nach den nötigen Informationen.

Ziel des Design-Prozesses war es, ein konsistentes und modernes Interface zu kreieren, um die Zusammenführung zwei verschiedener Plattformen (Website und Forum) auch visuell zu vereinheitlichen, um somit Nutzenden die Zusammengehörigkeit beider Projekte zu signalisieren. Der Anspruch war ein freundschaftliches Design zu entwickeln, das auf Augenhöhe begegnet und zeitgleich einen Safespace eröffnet. Es galt zu kommunizieren, dass Handbook Germany: Together die Anlaufstelle ist, wo User Rat und Unterstützung zu allen Fragen in Deutschland finden. Mit dem Element der Sprechblase wird das offene Ohr der Community kommuniziert und knüpft an die Gestaltung des Logos an. Aufgrund der Komplexität der Themen wurde ein einfacher Look & Feel angestrebt. 

Die bestehenden Farben des Corporate Design und des Logos (Orange und Blau) wurden aufgegriffen und zeitgemäß angepasst. Eine Erweiterung der Farbpalette um warme und weiche Töne erwies sich als notwendig, um die im Kontrast stehenden satten Töne zu komplementieren. Mithilfe der Farben suggerieren wir Zuversicht und Hoffnung in den belastenden Situationen. Sie bringen Frische rein und schaffen den Spagat zwischen Sicherheit/Verlässlichkeit und Offenheit/Freundlichkeit. 

Ziel ist ein Zusammenspiel aus informativem und seriösem Auftreten, verbunden mit einer modernen und zugänglichen Gestaltung. Dies wird zum einen durch klare, minimalistische Icons ohne abgerundete Ecken und verspielte Elemente erreicht – sachlich und informativ und verständlich auch für Menschen, die nicht gut lesen können. Zum anderen sorgen gezielt eingesetzte Rundungen bei den Buttons für eine einladende und freundliche Wirkung. Das Design animiert durch klare Aktionen die Nutzenden dazu, sich aktiv im Forum zu beteiligen und die Unterstützung innerhalb der Community voranzutreiben.

Das Projekt wird in neun unterschiedlichen Sprachen unterstützt. Bei der Auswahl der Typografie für die jeweilige Sprache wurde explizit auf gute Lesbarkeit geachtet und darauf, dass schwer zu differenzierende Buchstaben- und Zahlenabfolgen klar zu unterscheiden sind. Zudem legten wir bei der Entwicklung aller Elemente großen Wert darauf, dass diese auch von Rechts nach Links funktionieren würden, um für Arabisch, Pashto und Farsi verständlich zu sein.

Die technische Ausganglage bestand aus zwei komplett getrennten, unabhängigen Webseiten. Handbook Germany verwendete Drupal 7 als CMS-System, das dazugehörige Forum basierte auf OpenSocial. Ziel war es, die gesamte Struktur auf eine Headless-Architektur umzustellen, um die beiden Frontends und damit die Inhalte der Webseiten zu vereinen, und darüberhinaus eine Plattform zu schaffen, an die weitere Services angeschlossen werden können. So sollte mit Keycloak ein Single-Sign-On-System integriert werden, wodurch Nutzer*innen in Zukunft nur noch einen Login für die verschiedenen Services benötigen würden. Im Zuge der Ausschreibung sollte zudem eine Online-Beratung auf Grundlage von Symfony konzipiert und umgesetzt werden, deren Frontend Teil der Plattform werden sollte.

Im ersten Schritt wurde für Handbook Germany ein Drupal 10 Update durchgeführt, um das Backend für den weiteren Betrieb bis zum Relaunch aktuell zu halten. Das bestehende Open-Social Backend des Forums wurde dagegen komplett neu in Drupal gebaut und bestehende Inhalte wurden in das neue System migriert. Das Headless-Frontend basiert auf Next.js. Eine besondere Herausforderung war es, Frontend und Backend über Schnittstellen miteinander zu verknüpfen. Dadurch war es möglich, Inhalte aus dem Forum auf den Seiten von Handbook anzuzeigen und umgekehrt. Auch die auf Solr basierende Suche konnte dadurch mit beiden Inhalten angereichert werden. Inhalte beider Seiten sind auf der Suche such- und filterbar. 

Für die Übersetzung der Inhalte und Labels auf den Seiten nutzten wir das Tool „Lokalise“, in das Übersetzungsdateien mit den entsprechenden Keys in- und mit entsprechender Übersetzung exportiert und importiert werden können. So konnten wir sicherstellen, dass auch im System statisch verankerte Begriffe in Buttons, Formularen etc. übersetzt und von der Handbook Germany Redaktion ohne großen Aufwand aktualisiert werden können.

Um die vielen Funktionen der Website und die hohe Anzahl an Useraktionen abzusichern und das Risiko bei Deployments zu minimieren, haben wir automatisierte Akzeptanztests eingeführt. Sie simulieren echte Nutzungsszenarien, wie: Ein User stellt eine Frage, andere Nutzerinnen bekommen eine Benachrichtigung und automatisch wird eine E-Mail verschickt. Diese Tests werden einmal erstellt und laufen bei jedem Deployment automatisch durch. So prüfen wir, ob alle wichtigen Funktionen der Seite – besonders die Kommunikation mit den Nutzer:innen – weiterhin zuverlässig arbeiten. Durch diese Tests können wir Fehler frühzeitig erkennen und beheben, bevor sie live auftreten. 

Neben den Usern, welche die größte Nutzungsgruppe darstellen, gibt es zahlreiche weitere Gruppen, welche durch ein komplexes Rechte-Rollen-System je nach Plattform zu unterschiedlichen Berechtigungen führt. So wird das Backend von Handbook ausschließlich von der Redaktion bedient. Im Forum bewegen sich hauptsächlich drei Nutzergruppen, die User, die Community-Manager*innen sowie die Berater*innen. Sie alle benötigen ein Profil in unterschiedlichen Ausprägungen und haben unterschiedliche Userflows. Die Onlineberatung steht nur bestimmten User*innen offen, die von Berater*innen zu einem Gespräch eingeladen wurden. 

All diese Regelungen werden via Keycloak verwaltet und je nach Backend-System mit spezifischen weiteren Rechten angereichert. Die Einbindung der Authentifizierungssoftware an die bestehenden und neuen Systeme stellte eine der größten Neuerungen im Projekt dar. Vorhandene Nutzerdaten und Rollen wurden migriert, der Login auf allen neun Sprachen inklusive personalisierter Mails umgesetzt und der Sign-In via Facebook und Google ermöglicht.

Wenn eine Frage, die im Forum gestellt wurde, zu komplex ist, können sowohl Community Manager als auch Berater*in eine Onlineberatung initiieren. Hierfür muss der User ein Formular ausfüllen. Anhand der Antworten wird der User allen Berater*innen angezeigt, welche seinem Thema, seiner Region und seiner Sprache entsprechen. Die Berater*innen können im Anschluss einen Termin vereinbaren. Auch das Verschieben und Stornieren des Termins sowie der Austausch von Dokumenten ist für beide Seiten jederzeit möglich. Über den aktuellen Stand werden die beteiligten Personen per Mail und Dashboard nach Login auf dem Laufenden gehalten.

Technisch gesehen basiert das System auf Symfony in Kombination mit dem Open Source Video-Tool Jitsi. Bei beiden Tools standen Anonymität und Datenschutz im Mittelpunkt. So sehen Berater*innen die Namen der User erst, wenn ein Termin bestätigt wurde. Jitsi bietet zudem die Option der End-to-end Verschlüsselung, welches das Tool besonders sicher macht. 

Das Projekt wurde mit Hinblick auf die Kriterien durch WCAG 2.1 AA umgesetzt. Um den hohen Anforderungen des Projekts an Barrierefreiheit gerecht zu werden, arbeiteten wir von Beginn mit dem Verein „Die Sozialheld*innen“ zusammen, die uns fachkundig berieten. Bereits während der Designphase wurden Kontraste und Schriftgrößen auf Barrierefreiheit getestet. Durch Zugriff auf Testumgebungen, etablierte sich schnell ein Testprozess mit mehrmaligen Überprüfungen. Anhand von Berichten zu den Testergebnissen wurden die nötigen Anpassungen vorgenommen. Abschließend bietet der Bericht aus dem finalen Stand die Basis für die Barrierefreiheitserklärung. Diese Vorgehensweise stellt sicher, dass die Frontend-Komponenten für alle optimal zugänglich sind. Zusätzlich wurde der Code nach Best Practices strukturiert, um die Zugänglichkeit für verschiedene Eingabemethoden wie Tastatur oder alternative Steuerungen zu gewährleisten.

Seit dem Livegang im November 2024 ist viel passiert. Wir haben nicht nur über den fortlaufenden Support zahlreiche kleinere Features realisiert, sondern mit der Local Search die Plattform um ein weiteres Tool bereichert, welches den Nutzenden Orientierung bieten soll. Ein erfolgreich durchgeführter PEN-Test hat zudem zu kleineren Nachbesserungen geführt und die Seite noch sicherer gemacht. Wir sind gespannt, wo die Reise noch hingeht, und freuen uns, Handbook Germany:Together weiterhin unterstützen zu können.