Multilinguales, barrierefreies Drupal-10 Portal mit modernem Design, Landingpage-Baukasten & hoher Performance für bessere Förderzugänglichkeit.
Die Österreichische Forschungsförderungsgesellschaft mbH (FFG) ist eine Organisation zur Förderung von Forschung und Innovation im Bereich der anwendungsorientierten und industrienahen Forschung in Österreich und befindet sich zu 100 % im Eigentum der Republik Österreich. Ziel ist es, den Wirtschaftsstandort Österreich durch gezielte Programme speziell im Forschungs- und Entwicklungsbereich zu stärken.
Seit Gründung im Jahr 2004 hat die FFG über 60.000 Unternehmen, Universitäten, Forschungseinrichtungen und Institutionen in über 65.000 geförderten Projekten begleitet.
ffg.at ist die offizielle Plattform der Österreichischen Forschungsförderungsgesellschaft (FFG), die neu gestaltet wurde, um Nutzer dabei zu unterstützen, Fördermöglichkeiten schnell, intuitiv und inklusiv zu finden. Was mit dem Bedarf an einigen übersetzten Seiten begann, entwickelte sich zu einem vollständig neu gestalteten, mehrsprachigen, barrierefreien und redaktionsfreundlichen Drupal-System mit einem modernen Frontend-Stack. Die redaktionelle Oberfläche wurde entwickelt, um maximale Flexibilität zu bieten und gleichzeitig das mehrschichtige und teilweise restriktive Berechtigungsmodell der Website einzuhalten.
Von Barrierefreiheitsprüfungen und Nutzertests bis hin zu komponentenbasierter Entwicklung, einem robusten Designsystem und einem benutzerdefinierten Landingpage-Builder für RedakteurInnen. Dieses Projekt definiert neu, wie Websites des öffentlichen Sektors Flexibilität, Benutzerfreundlichkeit und Leistung in großem Maßstab miteinander verbinden können. Die Website wird auf einem dedizierten europäischen Cluster gehostet, ist DSGVO-konform und für hohen Datenverkehr und schnelle Wiederherstellung optimiert.
Der Relaunch von ffg.at war nicht nur eine Neugestaltung, sondern eine grundlegende Umgestaltung der Struktur, Darstellung und Pflege von Förderinformationen. Ausgehend von einem einsprachigen Drupal 9-System haben wir die Website auf die neueste Drupal-Version aktualisiert und vollständige Mehrsprachigkeit implementiert, obwohl ursprünglich nur die Übersetzung einiger weniger Seiten gewünscht war.
Wir haben eng mit Wienfluss, einer spezialisierten Accessibility-Agentur zusammengearbeitet, um die Barrierefreiheit der gesamten Website zu überprüfen und deutlich zu verbessern. Auf Grundlage dieser Erkenntnisse haben wir strukturelle, inhaltliche und interaktive Änderungen vorgenommen, um den Bedürfnissen eines breiteren, vielfältigeren Publikums noch gerechter zu werden.
Das ursprüngliche Designkonzept wurde von der Digitalberatung definiert und diente als solide Grundlage, um alle Beteiligten frühzeitig im Prozess aufeinander abzustimmen. Darauf aufbauend übernahmen wir in der Prototyping-Phase die Weiterentwicklung des Designs, die Entwicklung der mobilen Ansichten und die Gestaltung der Komponenten zu einem kohärenten, flexiblen System. Diese kooperative Übergabe stellte Konsistenz sicher und ermöglichte es uns gleichzeitig, die Vision zu iterieren, zu optimieren und auf allen Geräten und in allen Anwendungsfällen zum Leben zu erwecken.
Die Figma-Komponenten sind eng mit unserem Storybook verknüpft, das als lebendiger Styleguide und zentrale Drehscheibe für die Frontend-Entwicklung dient. Zu jeder Komponente gibt es automatische Barrierefreiheitsprüfungen, responsive Vorschauen und editierbare Eigenschaften/Einstellungen. Drupal nutzt diese Komponenten direkt, ohne Duplikate oder Workaround-Logiken.
Eines der wichtigsten Features ist ein leistungsstarkes Landing Page Construction Kit für RedakteurInnen. Damit können autorisierte RedakteurInnen reichhaltige, modulare Seiten wie ffg.at/dih erstellen, indem sie wiederverwendbare Komponenten wie filterbare Karten, JSON-basierte Kalender (mit Ereignissen von externen Websites), ankerbasierte Navigation, Erfolgsgeschichten, Referenzierte und zentral verwaltete AnsprechpartnerInnen und andere Bausteine verwenden. Überschriftenmenüs und Strukturen werden automatisch generiert, wodurch Barrierefreiheit und Konsistenz gewährleistet sind.
Die Seiten „Förderungen Übersicht“ und "Förderungen Detailseiten“ wurden umfassend überarbeitet und agil neu gestaltet. Wir haben die Datenstrukturen konsolidiert und normalisiert und gleichzeitig ein facettiertes Filtersystem eingeführt, sodass Nutzer relevante Förderaufrufe jetzt noch einfacher finden können. Die RedakteurInnen behalten weiterhin Flexibilität bei der Verwendung strukturierter, wiederverwendbarer Komponenten.
Ziele: Die Plattform vollständig mehrsprachig und barrierefrei gestalten
Ergebnisse:
Folgenden Teile des Relaunchs wollen wir hervorheben:
Fokus auf Barrierefreiheit
Um Standards in Sachen Barrierefreiheit zu gewährleisten, haben wir Wienfluss, eine renommierte Agentur, die sich auf Barrierefreiheitsprüfungen spezialisiert hat, an unserer Seite gehabt. Dank ihrer umfassenden Bewertung konnten wir wichtige Bereiche für Verbesserungen identifizieren und die Website weiter optimieren. Durch iterative Verbesserungen haben wir das Design weiter optimiert, die Funktionalität angepasst und die Inhaltsstruktur noch benutzerfreundlicher gestaltet. Gemeinsam haben wir die Barrierefreiheit von ffg.at deutlich verbessert und bieten nun allen Nutzern, einschließlich Menschen mit unterschiedlichen Fähigkeiten, ein inklusives digitales Erlebnis.
Design und Benutzertests
Der Designprozess wurde in Figma durchgeführt, wo wir einen umfassenden, interaktiven Prototyp erstellt haben, der sowohl Desktop- als auch Mobilansichten abdeckt. Auf der Grundlage einer Reihe definierter Personas haben wir gezielte Nutzertests durchgeführt, um die Benutzerfreundlichkeit und Übersichtlichkeit des neuen Designs vor Beginn der Entwicklung zu überprüfen. Das Feedback aus diesen Sitzungen wurde sorgfältig analysiert und direkt in eine iterative Verfeinerungsphase einfließen lassen. Dadurch wurde sichergestellt, dass die endgültige Benutzererfahrung nicht nur zugänglich und intuitiv war, sondern auch noch besser auf die tatsächlichen Bedürfnisse und Erwartungen des vielfältigen Publikums der Plattform abgestimmt war.
Integration des Figma-Designsystems
Das Design wurde vollständig in Figma unter Verwendung eines strukturierten, komponentenbasierten Ansatzes mit Variablen, Eigenschaften und Variationen umgesetzt, der eng an unser Storybook-System angelehnt ist. Für jede Komponente in Storybook ist das entsprechende Figma-Design direkt verlinkt und sichtbar, sodass die Design-Assets für Frontend-Entwickler leicht zugänglich und referenzierbar sind.
Durch die Verwendung von Tailwind CSS-Variablen und Namenskonventionen direkt in Figma haben wir eine nahtlose Abstimmung zwischen Design und Entwicklung sichergestellt. Diese Konsistenz hat den Prototyping-Prozess erheblich beschleunigt und eine solide Grundlage für zukünftige Anpassungen geschaffen. Die Verwendung von Hauptkomponenten mit definierten Variationen ermöglichte eine schnelle Iteration bei gleichzeitiger Wahrung der Designkohärenz im gesamten System.
Frontend mit Storybook-Integration
Wir haben die Frontend-Ebene komplett neu entwickelt und dabei ein speziell auf unseren Kunden zugeschnittenes Theme verwendet. Um die Zusammenarbeit und Wartbarkeit zu verbessern, haben wir Storybook als dynamische Komponentenbibliothek integriert. Jede einzelne Verzeichniskomponente (SDC) befindet sich nun in Storybook und bietet Entwicklern, Kunden, Partnern und externen Teams umfassende Vorteile. Durch integrierte Barrierefreiheitsprüfungen, reaktionsschnelle Breakpoint-Vorschauen, detaillierte Dokumentation, überprüfbare Abstände und überprüfbaren Quellcode dient unser Storybook als lebendiger Styleguide. Benutzer können interaktiv mit Komponentenvarianten, Texten, Einstellungen und Props experimentieren, was eine kontinuierliche Weiterentwicklung und optimierte Arbeitsabläufe fördert. Wichtig ist, dass Drupal diese Komponenten nahtlos direkt aus Storybook nutzt, ohne Redundanzen oder zusätzlichen Wartungsaufwand. Das gesamte Styling nutzt Tailwind CSS und zentralisiert die Designkonsistenz durch Variablen, wodurch langfristige Skalierbarkeit und einfache Updates gewährleistet sind.
Übersicht über die Finanzierung und Detailseiten
Der Bereich „Förderungen“ auf ffg.at (https://www.ffg.at/foerderungen) wurde sowohl konzeptionell als auch technisch komplett neu strukturiert. Durch einen optimierten Ansatz beim Aufbau der Website haben wir die Inhaltsfelder vereinheitlicht und konsolidiert, die Informationsarchitektur überarbeitet und die Struktur optimiert, damit Nutzer schnell die für sie relevantesten Fördermöglichkeiten finden können.
Wir mussten jedoch stets die RedakteurInnen im Blick behalten, die Teile des vorhandenen Inhalts fortlaufend aktualisieren können mussten, während laufend neue Komponenten und Inhaltsstrukturen zur Verfügung gestellt wurden. Eine einmalige Migration war bei diesem Projekt nicht möglich.
Die Übersichtsseiten bieten nun übersichtliche, filterbare Vorschauen, die alle wichtigen Informationen auf einen Blick präsentieren. Auf den Detailseiten wurde das Layout der Inhalte neu gestaltet, um wichtige Daten wie Zielgruppen, Fristen und verfügbare Budgets in einem leicht zugänglichen und benutzerfreundlichen Format hervorzuheben. Ein facettiertes Filtersystem in Kombination mit einem durchdachten UI-Konzept ermöglicht eine intuitive Navigation durch die vielfältige Förderlandschaft. Maßgeschneidert für die Bedürfnisse von Einzelpersonen, Unternehmen und Forschungseinrichtungen gleichermaßen.
Von „nur ein paar Seiten“ zu einem vollständigen mehrsprachigen System
Was als einfache Anfrage begann, zwei bis drei wichtige Seiten auf Englisch verfügbar zu machen, entwickelte sich schnell zur Implementierung eines vollwertigen mehrsprachigen Systems. Um den wachsenden Anforderungen an die internationale Zugänglichkeit gerecht zu werden, haben wir während der Entwicklung die gesamte Website aktualisiert und für die Mehrsprachigkeit neu strukturiert. Dazu gehörte das Programmieren von benutzerdefinierten Update-Hooks, um bestehende Inhalte ohne Datenverlust zu erhalten und bereits umzustrukturieren, während sie für RedakteurInnen vollständig übersetzbar gemacht wurden. Das Redaktionsteam wurde mit detaillierten Dokumentationen und Schulungsmaterialien unterstützt, um einen reibungslosen Übergang zu gewährleisten. Was als kleine Verbesserung begann, wurde zu einem strategischen Upgrade, das die Website für eine globale Reichweite und langfristige Skalierbarkeit positionierte. Seit dem Relaunch sind bereits viele englische Inhalte verfügbar und werden nun ständig angepasst. Um jedoch durch die meisten Funktionen zu navigieren und sie zu entdecken, sind derzeit in der deutschen Version die meisten Inhalte verfügbar.
Landing Page-Baukasten für Power-EditorInnen
Um RedakteurInnen mehr Flexibilität zu bieten, haben wir ein individuelles Kit zum Erstellen von Landingpages entwickelt. Dieses wird beispielsweise auf Seiten wie ffg.at/dih verwendet. RedakteurInnen mit den entsprechenden Berechtigungen können nun komplexe, aber modulare Landingpages mit einer Vielzahl vorgefertigter Komponenten erstellen. Dazu gehören anpassbare Karten mit filterbaren Inhalten, die mit bestimmten Entitätstypen verknüpft sind, Erfolgsgeschichten und die Kalenderintegration über eine JSON-Schnittstelle.
Die Kalenderkomponente unterstützt Ereignisse, die von mehreren externen Websites bereitgestellt werden. Diese werden zwischengespeichert und angezeigt, einschließlich Filterfunktionen. Funktionen wie ankerbasierte Sprungnavigation, automatisch generierte Überschriften und flexible Layoutoptionen helfen RedakteurInnen dabei, Inhalte effektiv zu strukturieren, ohne dass technische Kenntnisse erforderlich sind. Dieses System kombiniert redaktionelle Freiheit mit einheitlichem Design und einheitlicher Funktionalität (vordefinierte und erforderliche Felder) auf der gesamten Website.
Hosting
Das System wird auf einem dedizierten, leistungsstarken Cluster in Europa gehostet, wodurch die vollständige Einhaltung der DSGVO und anderer regionaler Datenschutzstandards gewährleistet ist. Diese Konfiguration bietet maximale Kontrolle über Leistung, Sicherheit und Skalierbarkeit. Es ist auf die spezifischen Anforderungen von ffg.at zugeschnitten und in der Lage, hohen Datenverkehr, extrem kurze Wiederherstellungszeiten und Skalierungsmöglichkeiten sowie zuverlässige, inhaltsintensive Vorgänge zu bewältigen.
Design und Nutzererlebnis
Das Ziel für das Design war es, eine moderne und intuitive Benutzeroberfläche zu schaffen, die in Figma entworfen wurde. Dies sollte sicherstellen, dass das Endprodukt nicht nur visuell ansprechend, sondern auch funktional und benutzerfreundlich ist. Usertests sowie Usability Tests wurden geplant und durchgeführt, um das Design kontinuierlich zu verbessern und an die Bedürfnisse der Nutzer anzupassen.
Technische Umsetzung und Integration
Die technische Implementierung zielte darauf ab, eine robuste Architektur mit CI/CD-Prozessen über Gitlab zu etablieren, die schnelle Iterationen und eine hohe Verfügbarkeit gewährleistet. Das Hosting wurde über ein performantes und ausfallsicheres System mit Docker Swarm realisiert, um eine optimale Lastverteilung und Skalierbarkeit zu erreichen. Die Integration von externen Datenquellen, wie Mitarbeiterverzeichnissen, sollte die Funktionalität und den Nutzen der Plattform erheblich erweitern.
Contentstruktur und Zugänglichkeit
Eine klare und gut durchdachte Contentstruktur wurde entwickelt, um die Verwaltung und das Auffinden von Informationen zu vereinfachen. Die Konzeption von Inhaltstypen wurde speziell auf die Bedürfnisse der Stakeholder abgestimmt. Ein besonderer Fokus lag auf der Barrierefreiheit, um sicherzustellen, dass alle Nutzer unabhängig von ihren Fähigkeiten oder technischen Geräten Zugang haben.
Management und Kommunikation
Das Anforderungsmanagement wurde sorgfältig ausgearbeitet und definiert, um eine effiziente Umsetzung aller Projektphasen zu gewährleisten. Als Proxy Product Owner wurde eine zentrale Schnittstelle zu den Stakeholdern etabliert, um deren Anforderungen und Feedback effektiv zu integrieren und zu managen. Die Verwaltung von IT-Support-Anfragen und Incident Management wurde über Jira ServiceDesk optimiert, um schnelle und effektive Lösungen zu gewährleisten.
Viele Interessensgruppen und Wünsche
Als Unternehmen mit über 400 Mitarbeitenden gibt es zahlreiche Anspruchsgruppen und Erwartungen. Hier sind klare Kommunikation sowie ein gut strukturierter Plan und Zeitplan entscheidend. In größeren Online-Meetings mit rund 50 Teilnehmenden haben wir den aktuellen Stand der Website präsentiert und mit Walkthroughs den verantwortlichen RedakteurInnen geholfen, das neue System zu verstehen und anzuwenden.
Besondere Barrierefreiheits-Fälle
Während der Entwicklung und nach dem Accessibility-Audit traten einige spezielle Anforderungen auf, die wir hervorheben möchten:
Komplexe Zeitrahmen bei Förderungen
Eine Förderung kann mehrere, sich überschneidende Phasen und Zeiträume haben. Diese müssen flexibel angezeigt und ausgeblendet werden, auch in Facetten, Filtern und gecachten Übersichten – eine besondere Herausforderung bei der technischen Umsetzung.
Mehr als nur ein Frontend Relaunch
Die ursprüngliche Aufgabe war grundsätzlich nur einen Frontend Relaunch umzusetzen. Trotzdem war es nötig, viele Inhaltstypen anzupassen und zu ergänzen.
Darüber hinaus wurde auf die neueste Drupal Version aktualisiert und viele Module mit aktuelleren Alternativen ersetzt. So wurde das Layout komplett auf die Verwendung von LayoutBuilder Layouts umgestellt. Für die Suche ist Solr als Suchserver im Einsatz. Hierfür wurden einige Spezialentwicklungen für die Integration mit der Drupal Search API entwickelt, z.B. um sehr unterschiedliche Inhalte zentral über eine Suchseite anzeigen und filtern zu können.
Das Drupal Theme wurde auf einen modernen Stack umgebaut, inkludiert nun einen Styleguide für alle Komponenten (Storybook) und verwendet die tailwind css library.
Statt der früher eher starren Inhaltsstruktur stehen den RedakteurInnen nun viele Inhaltselemente zur Verfügung, die flexibel eingesetzt werden können.
Der Relaunch von ffg.at, der offiziellen Plattform der österreichischen Forschungsförderungsgesellschaft, stellt einen Meilenstein in der digitalen Transformation des öffentlichen Sektors dar. Mit einem Fördervolumen von über 13 Milliarden Euro und bisher 65.000 geförderten Projekten spielt die FFG eine zentrale Rolle bei der Sicherung der Position Österreichs als globaler Innovationsführer.
Dieses Projekt geht weit über eine optische Auffrischung hinaus. Es definiert grundlegend neu, wie komplexe Finanzierungsinhalte strukturiert, gefunden und verwaltet werden. Es sorgt für messbare Verbesserungen in Bezug auf Barrierefreiheit, Benutzerfreundlichkeit, redaktionelle Arbeitsabläufe und Leistung. Von Barrierefreiheitsprüfungen und Benutzer-getesteten Designs bis hin zu einem lebendigen Frontend-Komponentensystem und mehrsprachigen Funktionen bringt der Relaunch modernste digitale Standards auf eine wichtige nationale Plattform.
Indem NutzerInnen und RedakteurInnen gleichermaßen in den Mittelpunkt der Erfahrung gestellt werden, zeigt dieser Fall, wie Drupal Institutionen mit großer Verantwortung unterstützen und sie transparenter, flexibler und zukunftsfähiger machen kann. Es ist ein Paradebeispiel dafür, wie durchdachte Architektur, offene Zusammenarbeit und technische Exzellenz zusammenkommen können, um einer öffentlichen Aufgabe zu dienen.
Da wir uns sehr mit dem Drupal System identifizieren, möchten wir noch folgende Contributions hervorheben:
Unser Engagement für die Drupal-Community ist tief verwurzelt und reicht bis ins Jahr 2005 zurück. Wir glauben fest an die Philosophie von Open Source und leben diese aktiv. Neben Code-Beiträgen setzen wir uns leidenschaftlich für das Wachstum von Drupal im DACH-Raum ein und unterstützen die lokale Community durch die Organisation und Förderung von Meetups, Camps und großen Events.
Unsere Gründer, Christian Ziegler und Nico Grienauer, sind nicht nur aktive Vorstandsmitglieder der Drupal Austria Association, sondern auch treibende Kräfte hinter bedeutenden Veranstaltungen wie dem DrupalCamp Vienna, den Open Minds Awards und dem DrupalCon Vienna Community Day. Wir sind stolz darauf, die Drupal Dev Days erfolgreich nach Wien gebracht zu haben und aktiv an strategischen Initiativen wie Drupal CMS (Starshot) sowie dem GDPR/DSGVO-Track mitzuwirken.
Allein in den letzten 12 Monaten haben wir über 950 Issue Credits auf drupal.org gesammelt 🙂
👉 https://www.drupal.org/organizations?title=acolono – ein sichtbarer Beleg für unser starkes Engagement.
Unsere Entwicklungsarbeit spiegelt sich in zahlreichen Open-Source-Modulen wider, die wir programmiert und auf drupal.org veröffentlicht haben. Speziell für das Projekt ffg.at haben wir unter anderem folgende Beiträge geleistet:
Darüber hinaus engagiert sich unser Team aktiv in der Fehlerbehebung und Optimierung von Drupal Core und bestehender Contrib-Module, indem es Patches erstellt und Probleme auf drupal.org behebt. Dies reicht von der Behebung kritischer Fehler, beispielsweise im Zusammenhang mit Facets und SearchAPI, bis hin zur kontinuierlichen Verbesserung der Leistung und Benutzerfreundlichkeit verschiedener Module wie Webform, MailChimp und Mandrill. Wir leisten auch einen Beitrag, indem wir von anderen entwickelte Patches überprüfen und testen und so ein Umfeld der Zusammenarbeit fördern.
Wir tragen außerdem regelmäßig zu Übersetzungen von Drupal und Modulen bei und teilen unsere Erfahrungen durch Case Studies auf drupal.org und in internen Projekten – etwa beim Einsatz von Svelte für die Neuentwicklung des Frontends von drupical.com.
Diese umfassenden und langjährigen Beiträge unterstreichen unser tiefes Engagement für die Open-Source-Community und zeigen, dass die acolono GmbH nicht nur Software entwickelt, sondern sich aktiv an der Gestaltung und Stärkung des gesamten Ökosystems beteiligt.
