Direkt zum Inhalt
Splash Awards Logo

ecoplus.at – Eine zukunftssichere Plattform für wirtschaftliche Innovation

Projektdetails

Übersicht Projekt anschauen
Kategorie: Lösungen
Status: Nominee
Titel: ecoplus.at – Eine zukunftssichere Plattform für wirtschaftliche Innovation
Einreichendes Unternehmen: acolono GmbH
Für den Kunden: ecoplus. Niederösterreichs Wirtschaftsagentur GmbH

Zusammenfassung

Digitale Transformation der Wirtschaftsagentur NÖ: zugänglich, modular, zukunftssicher - mit Fokus auf Innovation, Wirtschaft & Wachstum.

Projektbeschreibung

acolono und identum haben sich für die Ausschreibung der Konzeption, Design und Neugestaltung für das umfassende Unternehmensportal ecoplus.at zusammengeschlossen.

Es handelt sich dabei um die offizielle Plattform von ecoplus, der Wirtschaftsagentur Niederösterreich.

Als Wirtschaftsagentur des Landes Niederösterreich treibt ecoplus den Wirtschaftsstandort im Herzen Europas voran. Seit 60 Jahren beraten die Expertinnen und Experten von ecoplus Unternehmen, Gemeinden, Vereine und Forschungstreibende kompetent und vorausschauend zu den angebotenen Services.

Diese vielen Angebote mit der nötigen Klarheit zu transportieren, Kompetenzen auf den Punkt zu bringen und eine möglichst intuitive und ansprechende User Experience zu schaffen, war das oberste Ziel, bei dem inhaltlichen, grafischen und technologischen Relaunch mit Drupal 10.

Dies erforderte ein grundlegendes Überdenken der Inhaltsstrukturen, der Benutzerfreundlichkeit, der Arbeitsabläufe der Redakteure und der technischen Grundlagen einer großen öffentlichen Website.

ecoplus ist an der Schnittstelle zwischen Unternehmensentwicklung, Innovationsförderung und überregionaler Zusammenarbeit tätig. Die neue Website musste diese vielschichtige Rolle widerspiegeln und unterschiedliche Zielgruppen ansprechen. Von Unternehmern und Investoren bis hin zu internationalen Konzernen, Forschungspartnern und der breiten Öffentlichkeit. Neben der breiten Zielgruppe sollte sie auch als Informationsdrehscheibe für die Technopole, Gewerbegebiete, Finanzierungsmöglichkeiten und Networking-Möglichkeiten dienen. Viele unterschiedliche Inhalte, die auf einer Website präsentiert und erklärt werden müssen.

Unser Team hat eine neue Drupal-basierte Plattform mit einem starken redaktionellen Rückgrat, einem modularen Komponentensystem und einem sorgfältig getesteten UX-Konzept entwickelt. Die Komplexität der Inhalte wurde durch strukturierte Inhaltstypen und dynamische Filterung vereinfacht, sodass Nutzer relevante Dienstleistungen, Informationen zum Gewerbepark, Projektinitiativen und Finanzierungsmöglichkeiten leichter finden können.

Durch die Kombination von strategischem Storytelling, einer flexiblen Inhaltsarchitektur und einem vollständig responsiven, barrierefreien Design hat acolono eine digitale Plattform geschaffen, die die Mission von ecoplus widerspiegelt: Niederösterreich als Wirtschafts- und Innovationsstandort zu stärken und die Dienstleistungen des Unternehmens sichtbarer, nutzbarer und zukunftsfähiger zu machen.

Projektziele und -ergebnisse

Ziel: Strukturierte, barrierefreie und zielgruppenorientierte Bereitstellung von Inhalten

Die Plattform sollte als barrierefreier, zentraler Knotenpunkt für das breite Spektrum an Dienstleistungen von ecoplus dienen, darunter Gewerbegebiete, Technopole, Förderprogramme und Netzwerkinitiativen. Dies erforderte eine gut durchdachte Inhaltsarchitektur, ein intuitives Menükonzept und modulare Inhaltselemente, die sowohl Skalierbarkeit als auch redaktionelle Flexibilität ermöglichen.

Als Grundlage für den Relaunch entwickelte identum gemeinsam mit acolono einen umfassenden Figma-Prototyp, bestehend aus über 40 vollständig konzipierten und mit Inhalten gefüllten Landingpages. Diese dienten nicht nur der Design- und UX-Validierung, sondern auch als strategisches Instrument zur Visualisierung der Bandbreite des Angebots von ecoplus. Dieses modulare Designsystem erleichterte die Planung, Iteration und das Testen des Content-Layouts vor der Implementierung. Während der Entwicklung wurden weitere Anpassungen vorgenommen, die auf genaueren und neuen Inhalten sowie sich ändernden redaktionellen Anforderungen basierten. Der Figma-Prototyp blieb jedoch während des gesamten Projektlebenszyklus ein starker Entwurf für Struktur, Navigation und Messaging.

Damit konnte acolono auch die Komponenten und alle Variationen definieren und visualisieren, die von den Redakteuren benötigt wurden, um leicht verständliche Inhaltsseiten zu erstellen.

Es wurde auch eine umfassende Barrierefreiheitsprüfung durch die renommierten Experten von Wienfluss durchführt, einschließlich eines detaillierten Barrierefreiheitsaudits. Dieses Audit hat dabei geholfen, einige kleinere Probleme zu finden und zu beheben und die Barrierefreiheit der Seite danach bestätigt.

Ziel: Ein visuell einheitliches, barrierefreies Designsystem

Eine zentrale Herausforderung bei diesem Projekt bestand darin, die strengen Corporate-Design-Richtlinien von ecoplus, die sich auf eine begrenzte Farbpalette aus Blau und Gelb konzentrieren, mit der Notwendigkeit einer barrierefreien, inklusiven digitalen Erfahrung in Einklang zu bringen. Die visuelle Identität musste unverwechselbar und markenkonsistent bleiben, sodass wenig Spielraum für visuelle Experimente blieb. Gleichzeitig war das Bestreben, die Barrierefreiheitsstandards (WCAG) zu erfüllen, insbesondere in Bezug auf Kontrast, Hierarchie und Klarheit auf allen Geräten und Komponenten.

Gemeinsam mit Identum wurde das Corporate Design von ecoplus in ein digitales System umgesetzt, das sowohl visuell unverwechselbar als auch WCAG-konform ist. Durch den geschickten Einsatz von Kontrastverhältnissen, Typografie, Abständen und struktureller Klarheit konnte eine starke Markenpräsenz aufrechterhalten und gleichzeitig sichergestellt werden, dass die Website für Nutzer mit Seh- oder kognitiven Beeinträchtigungen zugänglich bleibt. Das Endergebnis ist eine Benutzeroberfläche, die die Identität von ecoplus widerspiegelt, Vertrauen und Professionalität vermittelt und beweist, dass Barrierefreiheit und Design-Treue auch innerhalb enger Markenvorgaben Hand in Hand gehen können.

Ziel: Von Komplexität zu einem übersichtlichen digitalen Zuhause mit intuitiver Navigation und klarer Struktur.

ecoplus bietet eine breite Palette von Dienstleistungen für Unternehmen, Investoren und öffentliche Interessengruppen. Das Ziel des Relaunchs war nicht nur die Neugestaltung der Website, sondern die Schaffung einer völlig neuen digitalen Plattform, die diese Vielfalt auf strukturierte, zugängliche und nutzerorientierte Weise widerspiegelt. Die alte Website war im Laufe der Zeit organisch gewachsen, wobei die Inhalte nach interner Organisationslogik strukturiert waren. Die Herausforderung bestand darin, diese Komplexität in eine klare, intuitive Architektur umzuwandeln, die die Bedürfnisse der Nutzer in den Vordergrund stellt. Im Mittelpunkt dieser Bemühungen standen ein optimiertes Menüsystem, intelligente Suchfunktionen und Nutzerabläufe, die für reale Anwendungsfälle und nicht für interne Hierarchien konzipiert wurden.

Ergebnis: Ein digitales Zuhause mit intuitiver Navigation und klarer Struktur

Gemeinsam mit Identum haben wir eine neue Website-Architektur entwickelt, die nicht nur leistungsstark ist, sondern auch die Rolle von ecoplus als Motor für wirtschaftliche Innovation in Niederösterreich stärkt. Die Navigation und die Inhaltsstruktur der Plattform wurden komplett neu konzipiert, wobei der Schwerpunkt auf Übersichtlichkeit, Zugänglichkeit und Zweckmäßigkeit lag. Anstatt interne Abteilungen widerzuspiegeln, ist die Informationsarchitektur nun direkt auf die Nutzerwege ausgerichtet. Unterstützt durch detaillierte Wireframes und modulare Inhaltskomponenten ermöglicht die neue Struktur jetzt den Besuchern, relevante Dienstleistungen, Förderprogramme und Informationen zu Gewerbegebieten schnell zu finden. Was einst komplex und fragmentiert war, ist nun eine einheitliche, digitale Heimat, die sowohl die Mission von ecoplus als auch seine Markenidentität widerspiegelt.

Ziel: Eine skalierbare, wartbare und entwicklerfreundliche Komponentenarchitektur

Ein Ziel des Projekts war es, eine moderne Frontend-Grundlage zu schaffen, die die Entwicklung vereinfacht, eine langfristige Wartbarkeit gewährleistet und Frontend- und Backend-Belange klar voneinander trennt. Um dies zu erreichen, mussten alle UI-Elemente als wiederverwendbare, barrierefreie und reaktionsschnelle Komponenten implementiert werden, die nicht nur von unserem Team, sondern auch von externen Entwicklern in Zukunft genutzt werden können. Darüber hinaus musste das System die Zusammenarbeit zwischen Design und Entwicklung unterstützen, eine schnelle Prototypenerstellung ermöglichen und die vollständige Kompatibilität mit der Template-Logik von Drupal gewährleisten.

Daher haben wir eine zentralisierte und zugängliche Komponentenbibliothek in Storybook konzipiert und umgesetzt.

Das gesamte Frontend-System nutzt Single Directory Components (SDCs), die vollständig in Storybook integriert sind. Jede Komponente ist ihrem entsprechenden Figma-Design zugeordnet und verfügt über dokumentierte Settings, Barrierefreiheitsprüfungen, responsive Vorschauen und Anwendungsbeispiele mit Demo-Inhalten. Drupal nutzt diese Komponenten direkt, ohne Duplikate oder Übersetzungsschichten, und schafft so eine nahtlose Brücke zwischen Design, Frontend-Entwicklung und CMS-Integration.

Diese Architektur ermöglicht es Entwicklern, Komponenten unabhängig vom Backend sofort zu verstehen und zu verwenden. Sie trennt Frontend- und Backend-Belange sauber voneinander, fördert die modulare Entwicklung und reduziert die Einarbeitungszeit für neue Teammitglieder drastisch. Das Ergebnis ist ein robustes, zukunftssicheres System, in dem Updates, neue Funktionen oder sogar komplette Übergaben schnell und sicher durchgeführt werden können, während Konsistenz, Qualität und Zugänglichkeit auf der gesamten Website gewährleistet bleiben.

Ziel: Etablierung von strukturierten Daten mit JSON-LD

Um die Sichtbarkeit in Suchmaschinen zu verbessern und die Inhalte maschinenlesbar aufzubereiten, sollte die Plattform umfassend mit strukturierten Daten ausgestattet werden. Dies ermöglicht eine präzisere Indexierung durch Suchmaschinen, unterstützt Rich Snippets und steigert die Auffindbarkeit relevanter Informationen wie Förderprogramme, Veranstaltungen oder Unternehmensservices. Durch die Implementierung von JSON-LD konnte eine standardisierte, zukunftssichere Grundlage geschaffen werden, die Suchmaschinen wie Google eine klare semantische Struktur bietet und damit Reichweite, Transparenz und Nutzerfreundlichkeit erhöht. In dem noch recht Jungen Feld des GEO/LLM SEO erhofft man sich hier auch verbesserungen in referenzierung. Zur Zeit sind alle Veranstaltungen und Kontakte mit Stukturierten Daten ausgestattet. Weitere Typen sind schon vorbereitet und werden demnächst auch auf der Live Seite verfügbar sein.

Weitere Informationen

Herausforderungen

Durchsetzung CI-spezifischer Typografie-Regeln über alle Ebenen hinweg
Eine besondere Herausforderung war die Einhaltung der Corporate Identity (CI) von ecoplus, die streng vorschreibt, dass der Markenname „ecoplus“ immer in Kleinbuchstaben geschrieben werden muss, selbst in Kontexten, in denen Text ansonsten automatisch großgeschrieben wird, wie beispielsweise bei Überschriften oder Seitentiteln in Großbuchstaben.

Um dieses Problem zu lösen, haben wir benutzerdefinierte Textformatierungsmodifikatoren implementiert. Dazu gehörte die Erweiterung der Rendering-Logik und der Feldformatierer, um Standardverhalten auch in Drupal-Kernfeldern wie dem “Node-Title” konsistent zu überschreiben. Die Lösung musste robust und Editoren-sicher sein und die Markenkonsistenz gewährleisten, ohne die Flexibilität oder Benutzerfreundlichkeit des Systems zu beeinträchtigen.

Ausgewogenheit zwischen Barrierefreiheitsanforderungen und visuellen Richtlinien
Eine der größten Herausforderungen bestand darin, die Barrierefreiheitsanforderungen mit den strengen visuellen Richtlinien des Corporate Designs von ecoplus in Einklang zu bringen. Wichtige Markenelemente erforderten, dass Text direkt über Bildern platziert wurde, ohne Hintergrundrahmen, Überlagerungen oder Kontrasthilfen, wobei gleichzeitig eine perfekte visuelle Ausrichtung und Ästhetik auf allen Bildschirmgrößen gewährleistet sein musste.

Dies war besonders kritisch auf der Startseite, wo der Einführungstext zunächst in Weiß erscheint und erst nach dem Einblenden des Hintergrundbildes farbig wird. Auf Mobilgeräten verschiebt sich das Layout und stellt den Inhalt vertikal dar, während der Text auf Desktop-Computern neben oder über dem Bild schwebt.

Der Bildausschnitt muss immer mit dem umgebenden Text harmonieren, um Lesbarkeit und visuelle Wirkung zu gewährleisten, ohne sich zu überlappen oder die Barrierefreiheit zu beeinträchtigen.

Um dies zu erreichen, haben wir ein mehrstufiges System entwickelt, das das Focal Point-Modul von Drupal mit benutzerdefinierten Konfigurations-/Zuschneide Optionen kombiniert. Redakteure können nun mehrere Zuschneide-Varianten pro Bildverwendungsfall definieren und so präzise steuern, welcher Bildbereich in welchem Kontext angezeigt wird. Dieser Ansatz bewahrt die Designintegrität, ermöglicht redaktionelle Flexibilität und gewährleistet vor allem die Lesbarkeit und Zugänglichkeit auf allen Geräten, ohne die visuelle Marke zu beeinträchtigen.

Intelligente Sichtbarkeitsregeln für Veranstaltungen in automatisierten Auflistungen
Jede Website mit umfangreichen Inhalten steht irgendwann vor dem gleichen Problem: Wie lässt sich die Sichtbarkeit von Veranstaltungen in automatisierten Auflistungen verwalten? Für ecoplus bestand die Herausforderung nicht nur darin, abgelaufene Veranstaltungen auszublenden, sondern auch darin, eine klare Logik für Veranstaltungen zu definieren, die sich über mehrere Tage erstrecken oder an Fristen wie Einreichungszeiträume gebunden sind.

Das Ziel war es, sicherzustellen, dass Ereignisse nur so lange angezeigt werden, wie sie relevant sind, ohne zu früh zu verschwinden oder nach Ablauf zu lange angezeigt zu bleiben. Wir haben flexible Regeln und redaktionelle Optionen entwickelt, mit denen Ereignisse bis zu einem klar definierten Zeitpunkt sichtbar bleiben. Dies gewährleistet übersichtliche, aktuelle Auflistungen und entspricht sowohl den Erwartungen der Nutzer als auch den redaktionellen Arbeitsabläufen.

Integration eines unabhängigen externen Cachings
Eine der technischen Anforderungen des Hosting-Anbieters war die Integration einer externen, unabhängigen Caching-Ebene, um eine hohe Leistung und Flexibilität zu gewährleisten. Es gab keine bestehenden Drupal-Module, die die erforderliche Funktionalität unterstützten.

Um dieses Problem zu lösen, haben wir ein völlig neues Contrib-Modul für Sucuri-Cache entwickelt, das unter drupal.org/project/sucuri_cache veröffentlicht wird. Es ermöglicht das automatische Löschen des Caches auf Node-Ebene, das bei einer Aktualisierung des Inhalts ausgelöst wird, und gibt Administratoren gleichzeitig die volle Kontrolle, den Cache bei Bedarf manuell zu löschen. Dies gewährleistet schnelle Aktualisierungszeiten ohne Einbußen bei der Aktualität der Inhalte und bietet der gesamten Drupal-Community ein wertvolles neues Tool.

Warum sollte dieses Projekt bei den Splash Awards gewinnen?

Das neue ecoplus.at ist mehr als nur ein Website-Relaunch, es ist eine vollständige digitale Transformation einer bedeutenden regionalen Wirtschaftsagentur, die im Zentrum der wirtschaftlichen Innovation in Österreich tätig ist. Es vereint technische Exzellenz, strategische UX, redaktionelle Kompetenz und Barrierefreiheit innerhalb der Vorgaben eines strengen Corporate Designs.

Was dieses Projekt auszeichnet, ist die Kombination aus Klarheit und Komplexität: Die Plattform richtet sich an ein breites und vielfältiges Publikum, von Unternehmern und globalen Investoren bis hin zu Kommunen und Forschern, und bietet dennoch intuitive Benutzerabläufe, personalisierten Zugriff auf Inhalte und klar strukturierte Dienste.

Aus technischer Sicht ist das Projekt auf dem neuesten Stand der Technik: ein komponentenbasiertes Frontend mit Storybook, vollständig auf Figma mit Tailwind-Utility-Klassen, Props, Barrierefreiheitsprüfungen und direkter Drupal-Integration über Single Directory Components abgebildet.

Auch werden die Inhalte in Strukturierten Daten (JSON+LD) ausgeliefert um Google und LLM Systemen die optimiert zur Verfügung zu stellen. Dies macht das System nicht nur zukunftssicher, sondern ermöglicht auch jedem Entwicklerteam eine schnelle Übernahme mit minimalem Onboarding - ein großer Vorteil für öffentlichkeitsstarken Institutionen.

Auf der Inhaltsseite gibt ein modulares Landingpage-Kit Redakteuren die Möglichkeit, reichhaltige, zweckorientierte Seiten zu erstellen, ohne dabei das Design oder die Struktur zu beeinträchtigen. Dabei werden Barrierefreiheitsstandards eingehalten, mehrsprachige Inhalte unterstützt und redaktionelle Arbeitsabläufe übersichtlich und effizient gestaltet.

Schließlich meisterte das Projekt mehrere komplexe Herausforderungen in Bezug auf Design und Barrierefreiheit, von der Durchsetzung von Markenregeln wie der Verwendung von Kleinbuchstaben für „ecoplus“ in Großbuchstaben vorgegebenen Überschriften, bis hin zur Verwaltung mehrschichtiger Text-über-Bild-Designs, ohne dabei die Lesbarkeit oder den Kontrast zu beeinträchtigen. Das mag unbedeutend erscheinen, spiegelt jedoch ein hohes Maß an Handwerkskunst und Engagement wider, Dinge richtig und nicht einfach nur schnell zu erledigen.

Kurz gesagt: Dieses Projekt zeigt, wie Drupal elegante, flexible und nachhaltige Lösungen für die Unternehmenskommunikation in großem Maßstab liefern kann und wie Design, Entwicklung und redaktionelle Erfahrung zusammenkommen können, um Innovationen auf regionaler und nationaler Ebene zu unterstützen.

Drupal Contributions im Rahmen dieses Projektes

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 setzen sie aktiv um. Über die Bereitstellung von Code hinaus setzen wir uns leidenschaftlich für das Wachstum von Drupal in der DACH-Region ein und unterstützen die lokale Community durch die Organisation und Förderung von Meetups, Camps und Großveranstaltungen.

Unsere Gründer, Christian Ziegler und Nico Grienauer, sind nicht nur aktive Vorstandsmitglieder der Austrian Drupal Association, sondern auch reibende 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 uns aktiv an strategischen Initiativen wie Drupal CMS (Starshot) und dem GDPR/DSGVO Track zu beteiligen.

Wir haben in den letzten 12 Monaten über 950 kumulierte Issue Credits auf drupal.org gesammelt 🙂

Unsere Entwicklungsbemühungen gipfeln in einer Vielzahl von Open-Source-Modulen, die wir programmiert und auf drupal.org für die breitere Community veröffentlicht haben.

Neben einigen unserer Module, die wir entwickeln und pflegen, möchten wir besonders hervorheben, was wir für das Projekt ecoplus.at geleistet haben:

Wir erstellten ein komplettes neues Modul für den Kunden.
drupal.org/project/sucuri_cache
Dadurch kann das Drupal-System nahtlos mit dem unabhängigen Server-Cache zusammenarbeiten. Das vollständige Modul ist fertig, wurde jedoch noch nicht bereitgestellt. Dies wird innerhalb eines Monats geschehen! Derzeit werden Überarbeitungen und kleine Anpassungen vorgenommen, sodass es sich um ein allgemeines Modul für alle Hosting-Dienste handelt, die das Securi-Cache-System verwenden.

Wir haben das datenschutzkonforme Shariff-Modul aktualisiert, das monatlich fast 4.000 Downloads und über 3.200 aktive Installationen verzeichnet. Dabei haben wir neben anderen kleineren Problemen auch die Code-Standards und global-Key Namen korrigiert, aber vor allem haben wir eine Drupal 11-Version veröffentlicht. https://www.drupal.org/project/shariff

File_Rename: Wir haben dieses Modul entwickelt, das die Umbenennung von Dateien nach dem Hochladen ermöglicht. Es wird bereits von fast 1.000 Drupal-Websites genutzt und wurde während der Entwicklung von ecoplus in einigen Teilen korrigiert, angepasst und optimiert. Ein kleines, aber praktisches Modul, das nun mehr oder weniger alle Funktionen bietet und “feature-complete” ist. https://www.drupal.org/project/file_rename

Entity_reference_media: Verbesserung der Medienreferenzierung, indem globale Eigenschaften von einem Editor in einem referenzierten Feld überschrieben werden können. Z. B. die genaue Start-/Wiedergabezeit eines referenzierten Medienelements oder der Titel oder Alt-Text (auch der Alt-Text ist kontextsensitiv, aber die meisten Leute ignorieren diese Tatsache). Wir haben hier eine D10-Version veröffentlicht, und die D11-Version ist über einen Patch verfügbar. Die Veröffentlichung wird bald erfolgen :) https://www.drupal.org/project/Entity_reference_media

Wir tragen auch regelmäßig zu Übersetzungen von Drupal und seinen Modulen bei. Natürlich auch, wenn uns Verbesserungen oder nicht übersetzte Texte während der Projektumsetzung auffallen :)

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.