Launch: 01.01.2014    •    URL: www.jugend-in-aktion.de
 

Anfang Oktober 2013 kam unser Kunde JUGEND für Europa mit der Aufgabe zu uns, die bestehende Website jugend-in-aktion.de rundum zu erneuern. Der Anlass: Am 1.1.2014 werde das neue Jugend-Förderprogramm der Europäischen Union mit neuer Struktur und überarbeiteten Zielsetzungen starten. Das seit 2007 aktive Programm werde damit abgelöst, dementsprechend müsse die Website pünktlich zum 1. Januar umgestellt werden. Allerdings sei das finale Programmhandbuch für das kommende Programm 2014-2020 frühestens Mitte Dezember zu erwarten.

Für uns stand damit fest, dass wir einen möglichst offenen und flexiblen Prozess etablieren mussten, um während der Umsetzungsphase alle Neuerungen in den verschiedenen Entwürfen des Handbuchs zeitnah aufgreifen und nur zwei Wochen nach Erscheinen des verabschiedeten Programms die zugehörige Website launchen zu können.

Am Beginn des Projektes stand zunächst eine Recherche- und Analysephase, während der wir uns unter anderem intensiv mit der bereits kommunizierten Grundstruktur und den Rahmenbedingungen des Programms auseinandersetzten. Als Unterstützung beim Lernen sowie bei der Kommunikation im Team und mit dem Kunden diente ein UML-Diagramm (Unified Modelling Language) der Programmstruktur, das wir während der Analyse entwickelten und in dem wir laufend neue Erkenntnisse dokumentieren konnten.

Parallel dazu wurde im engen Austausch mit JUGEND für Europa über die genaue deutsche Adaption des Programms diskutiert. „Sollten wir von Key Actions, Actions und Activities sprechen? Geht es nicht viel eher um Förderpakete bzw. Fördermöglichkeiten?“ Fragen wie diese sind für uns ebenso relevant wie für unseren Kunden, weil wir immer darauf bedacht sind, dass sich eine ubiquitous language (allgemeingültige Sprache) durch alle Teile des Projektes zieht. Dazu gehört neben Navigationspunkten, URLs und Überschriften auch der technische Programmcode.

Ergänzend kamen in diesem Vorprojekt noch Analysen von ähnlichen Informationsangeboten anderer europäischer Nationalagenturen sowie von Erfahrungswerten aus dem Betrieb der alten Website für das Programm 2007-2013 (unter anderem Nutzerfeedback und Statistikauswertungen) hinzu.

Aus den Anforderungen und Analyseergebnissen erstellten wir dann ein Product Backlog, welches das Gesamtpaket „Website-Relaunch“ in übersichtliche Funktionspakete, sogenannte Features, zerlegt. Das Ziel bei der Festlegung der Arbeitspakete war dabei, mit Abschluss jedes Features eine vollständig funktionsfähige Website zu haben, die jederzeit online gehen könnte. 

Diese Aufteilung nehmen wir bei allen unseren Projekten vor, für jugend-in-aktion.de und die schwierigen Voraussetzungen war sie aber besonders hilfreich. Jedes Feature erhielt eine eigene Seite mit allen Informationen und Medien (Bilder, Skizzen, Tabellen etc.) im Projektwiki, auf das das ganze Projektteam und die Ansprechpartner beim Kunden Zugriff haben. Auf die Aufschlüsselung des Projekts in Features folgte früh eine grobe T-Shirt-Größen-Schätzung als Grundlage für die weiteren Entscheidungen zum Volumen des Gesamtauftrags und der Reihenfolge, in der die einzelnen Features realisiert werden sollten.

Die ersten Features von jugend-in-aktion.de:

  • Grundeinrichtung der Website
  • Rahmendesign
  • Navigationskonzept
  • Startseite

Funktionen wie eine Publikationsliste, eine Kontaktseite oder ein Dokumentencenter wurden dagegen mit einer geringeren Priorität eingestuft. Der Fokus lag darauf, am 1. Januar mit einer in sich vollständigen Website online zu gehen, die in den folgenden Wochen um weitere Funktionsmodule erweitert werden könnte.

Gerade wegen der beweglichen Ziele und Unvorhersehbarkeit einiger politischer Entscheidungen war es wichtig, eine ständige und enge Kommunikation mit allen Beteiligten zu gewährleisten. In wöchentlichen Workshops präsentierten, diskutierten und bewerteten wir aktuelle Prototypen und arbeiteten gemeinsam mit unserem Kunden an Spezifikationen und Entwürfen für weitere Features. Zwischen den Workshops war die asynchrone Abstimmung über Kommentare und Updates auf den jeweiligen Wikiseiten der Features, an denen gerade gearbeitet wurde, eine immense Hilfe.

Eine weiterer Erfolgsbaustein in diesem Projekt war die frühe Entscheidung, für das Rahmendesign und Layout auf den CSS-Styleguide zurückzugreifen, den wir für die Website der Nationalagentur sowie ihre Veranstaltungswebsites bereits im vorigen Jahr entworfen hatten und den wir als fertiges Paket integrieren konnten. Dadurch konnten wir Workshopergebnisse von Anfang an in realistischen HTML-Prototypen testen — natürlich komplett responsive.

Das Herzstück der Website ist der Bereich „Förderung“, in dem die unterschiedlichen Fördermöglichkeiten für Projekte vorgestellt werden. Hier stand im Vordergrund, den Interessenten zügig einen klaren Überblick zu verschaffen und trotzdem auch in der Tiefe alle nötigen Informationen für einen erfolgreichen Projektantrag anzubieten. 

Um für diese Kernfunktion eine optimale Lösung zu finden, entwickelten wir verschiedene Layouts und Click-Dummys, die unser Kunde mit seiner inhaltlichen Fachkenntnis bewertete. Auch die Anordnung der Informationen auf unterschiedlich großen Bildschirmen (Handy, Tablet, Desktop) spielte eine wichtige Rolle und wurde mit Hilfe der flexiblen HTML-Prototypen laufend getestet.

Die gemeinsam erarbeitete Lösung vereint nun mit der Kombination aus Kurzvorstellung, schnellem Zugriff auf Dokumente, Hinweisen auf externe Tools sowie direktem Kontakt zum Betreuungsteam alle wichtigen Informationen zu einer Fördermöglichkeit auf einer Seite. 

Auch hinter den Kulissen hat sich die gründliche Vorbereitung ausgezahlt. Dank der detaillierten Analyse und des klaren fachlichen Datenmodells lässt sich nicht nur der Quellcode leicht verstehen und weiterentwickeln – im Content-Management-System finden sich die Begrifflichkeiten aus der Fachwelt ebenfalls wieder. Auch nach Überzeugung unseres Kunden ist das System so intuitiv geworden, dass neue Kollegen sogar ohne Einweisung in der Lage sein werden, z. B. Fördermöglichkeiten, Antragstermine oder Dokumente zu pflegen.

JUGEND für Europa und wir sind stolz auf das gesamte Ergebnis, das auch bei den internationalen Programm-Kollegen auf sehr positives Feedback gestoßen ist. Es gab zwei große Komplimente von den Kollegen aus der Schweiz:

"Ich bin begeistert von eurer Website. Wirklich toll wie die Informationen aufbereitet sind und wie was dargestellt und priorisiert wird."

und aus Österreich:

"Neidvoll blickt Österreich auf Deutschland, gratuliere euch zum neuen E+ Jugend in Aktion-Websiteauftritt! Finde ich sehr super strukturiert und leicht verständlich! Wir werden, wenn wir dürfen, einiges von euch abschauen!"

Das endgültige (englische) Programmhandbuch erschien übrigens am Ende der zweiten Dezemberwoche, die offizielle deutsche Übersetzung wurde Mitte Januar veröffentlicht. jugend-in-aktion.de ist trotzdem am 1.1. online gegangen, sogar inklusive der optionalen Features Dokumentencenter, Direktkontakt und Informationsseiten über für den Projektantrag wichtige Datenbanken.

Weitere Informationen und News zu dem Projekt www.jugend-in-aktion.de finden sich auf der Projektseite.

Wir freuen uns über Feedback und Diskussionen via @polarbirke oder @webfactory!