Agora Energiewende – UX/UI + Frontend
Agora Energiewende erarbeitet klima- und energiepolitisch notwendige und wirtschaftlich sinnvolle Lösungen auf dem Weg zur Klimaneutralität. Wir haben für die NGO die Website neu konzipiert, gestaltet und das Frontend entwickelt.
Leistungen
Projektzeitraum
Unsere Aufgabe
Agora Energiewende suchte eine Agentur für das Redesign der bestehenden Website. Neben der Gestaltung eines modernen Layouts sollten die gewachsenen und unübersichtlichen Inhalte der bestehenden Website zielgruppengerecht organisiert werden. Zudem standen Expansionen und Umstrukturierungen an, denen die Website gerecht werden musste.
Um eine Übergabe des Designs an die Programmierung zu vermeiden, sollten UX/UI Design und Frontend-Code aus einer Hand kommen. Die Typo3-Programmierung wurde von Agora inhouse realisiert. Wir haben uns eng mit der Programmierung abgestimmt und das Frontend in Form einer Komponenten-Bibliothek übergeben.

Projekt-Roadmap
Die bestehende Website verfügte über umfangreiche Inhalte. Zahlreiche Themen, Publikationen und Infografiken mussten neu strukturiert werden, bevor mit dem visuellen Design und der Frontend-Entwicklung begonnen werden konnte.
Von Anfang an haben wir eng mit dem Team bei Agora zusammengearbeitet und sowohl konzeptionell als auch technisch parallel gearbeitet.

Ziele und User Journeys
Ein Kritikpunkt der aktuellen Seite war die mangelnde Orientierung. Besucher konnten relevante Informationen nicht finden, obwohl diese vorhanden waren. Daher haben wir zunächst Zielgruppen und Ziele definiert und priorisiert. In gemeinsamen Workshops mit dem Kunden haben wir mithilfe von User Journeys die Nutzung der Website geplant und analysiert, welche Informationen für welche Personengruppen auffindbar sein müssen.

Planung nach dem Content-Out-Prinzip
Nach dem Content Out-Prinzip haben wir den inhaltlichen Aufbau jedes Seitentyps zunächst grob geplant und plakativ visualisiert, um ihn mit den Zielen des Projekts abzugleichen. Dabei entstanden erste Ideen für zentrale Nutzungsbewegungen. Diese Phase diente primär dazu, das Team bei Agora einzubeziehen und die grobe Ausgestaltung ermöglichte schnelle Anpassungen.

Navigationskonzept & Informationsarchitektur
Auch das Navigationskonzept wurde in dieser Phase festgelegt. Es gab einige Iterationen im Zusammenhang mit der strategischen Ausrichtung von Agora und der Mehrsprachigkeit der Seite. Daher wurde das Navigationskonzept zunächst nur grob definiert und im weiteren Projektverlauf finalisiert.
Die gesamte Informationsarchitektur wurde stets im Blick behalten, da die Planung der Website-Struktur Auswirkungen auf URLs und somit auf SEO und CMS-Umsetzung hat.
User Flows und Seitenaufbau
Sobald die konzeptionelle Grundrichtung feststand, haben wir die Entwürfe detaillierter ausgearbeitet. Der Fokus lag weiterhin auf dem inhaltlichen Aufbau und den Nutzungsbewegungen (User Flows), nicht auf dem visuellen Design.
In dieser Phase entwickelten sich auch erste Visionen der späteren CMS-Module, die redaktionell verfügbar sein mussten und die wir im Design sowie anschließend im Frontend umgesetzt haben. Zudem waren interaktive Infografiken und Flourish-Embeds von Bedeutung, die auf verschiedenen Unterseiten zum Einsatz kommen sollten.
Look and Feel, Templates & Module
Sobald die Grundstruktur feststand, definierten wir Look and Feel der Website. Grundlage dafür war das neue Corporate Design (Logo, Farben etc.) von Agora, das von uns hinsichtlich der digitalen Nutzung, insbesondere der Barrierefreiheit, optimiert wurde. Als Layout-Inspiration dienten zudem zahlreiche Publikationen und Infografiken.
In den folgenden Monaten gestalteten wir alle Module detailliert und stimmten diese mit der Entwicklungs-, Design- und Projektleitung von Agora ab. Am Ende stand eine vollständige Liste aller Module und Seitentypen (Templates) bereit.

Frontend Component Bibliothek
Die Frontend-Umsetzung der Module erfolgte zeitlich versetzt zur zuvor beschriebenen Gestaltungsphase. Nach Freigabe setzten wir die einzelnen Module im Frontend um und dokumentierten sie in einer Component Library auf Basis von Pattern Lab. In dieser Library konnten alle designrelevanten Aspekte wie Ästhetik, Browserkompatibilität, Barrierefreiheit, Responsive Design sowie Light- und Dark-Mode beurteilt werden.
Die Typo3-Entwicklung konnte den Frontend-Code pro Komponente direkt aus dem Pattern Lab übernehmen. Während der CMS-Implementierung gab es regelmäßige Abstimmungen mit der Typo3-Entwicklung bei Agora. Kleine Optimierungen und Korrekturen wurden durchgeführt, insbesondere im Hinblick auf HTML-Markup und JavaScript-Code.
GoLive, Weiterentwicklung
Die Onlinestellung der ersten Version fand im Oktober 2023 statt. Im weiteren Projektverlauf wurden niedrig priorisierte oder neue Themen als Update eingespielt. Neben Agora Energiewende gibt es beispielsweise weitere Marken wie Agora Industry und Agora Agrar. Farbvarianten für diese Projekte wurden bereits in der Designphase berücksichtigt.
Die Veröffentlichungen dieser weiteren Websites erfolgten aus kapazitären Gründen zeitlich nach dem Launch der Agora Energiewende-Website.
