Studierendenwerk Bremen
Ressourcenschonendes Webdesign trifft auf modulare Skalierbarkeit:
Eine datenarme und zukunftssichere Plattform, die ökologische Verantwortung und technische Bestleistungen verbindet.
Umfang
Art Direction, UX / UI Design
Kunde
Studierendenwerk Bremen
Jahr
2023 – 2024
Design
Niklas Haukenfrers
Development
Nils Penner
Der neue Webauftritt für die über 30.000 Studierenden in Bremen und Bremerhaven fokussiert funktionale Klarheit und barrierefreien Zugang. Hinter dem reduzierten Design steht eine intelligente Infrastruktur, die komplexe Informationen schnell und intuitiv abrufbar macht.
Die Herausforderung:
Entwicklung einer datenarmen, modularen Plattform: Technisch optimiert für maximale Kompatibilität und eine nachhaltige, skalierbare Nutzung über alle Device-Klassen hinweg.
Technische Besonderheiten
Die Architektur nutzt Kirby CMS (Headless) in Kombination mit Astro und GitHub für ein statisches Hosting. Durch die Auslieferung vorkonfigurierter HTML-Dateien erreichen wir Bestwerte in Sachen SEO, Sicherheit und Geschwindigkeit. Während der Großteil der Inhalte statisch serviert wird, sorgt eine dynamische Schnittstelle für die Darstellung der Echtzeit-Speisepläne, um Aktualität ohne Performance-Einbußen zu gewährleisten.
Mit dieser schlanken Architektur leisten wir einen messbaren Beitrag zur digitalen Nachhaltigkeit. Durch die Reduktion von Serveranfragen und Rechenleistung wird der ökologische Fußabdruck des Portals minimiert, ohne Kompromisse bei der Informationsdichte oder der Nutzererfahrung einzugehen.
Die Idee:
Eine Strategische Farbcodierung einzelner Bereiche, welche Orientierung schafft und die Nutzerführung nachhaltig optimiert.
Dynamische Performance trotz Systemgrenzen
Rund 90 Prozent des Traffics konzentrieren sich auf den Bereich „Essen & Trinken“. Die Herausforderung: Das interne Gastronomie-System (TL1) bot keinerlei Schnittstellen oder APIs. Die Lösung ist eine performante Vue.js-Applikation, die als dynamische Insel in das statische System integriert wurde. Über einen automatisierten Prozess werden virtuelle Seiten im Kirby CMS alle fünf Minuten mit frischen Daten aus einem CSV-Export gespeist. Ein weiteres Highlight ist die automatisierte PDF-Generierung, die es Nutzern und Betrieben ermöglicht, tagesaktuelle Aushänge und Pläne on-demand zu erstellen.
Wohnanlagen & WG-Zimmer
Die Plattform kombiniert eine strukturierte Übersicht sämtlicher Wohnanlagen mit einer dynamischen Börse für freie WG-Zimmer. Über integrierte, standortspezifische Bewerbungsformulare werden Anfragen direkt an die jeweiligen Kontaktpersonen übermittelt, was den Vermittlungsprozess für beide Seiten erheblich beschleunigt.
Kartenintegration
Die Standortverwaltung für Wohnanlagen und Gastronomie erfolgt zentral über eine Google-Maps-Integration, was den Pflegeaufwand auf ein Minimum reduziert. Durch die präzise Steuerung via Koordinaten und Zoom-Level werden exakt die benötigten Ausschnitte ausgespielt. Um die Ladezeiten gering zu halten, folgt die Einbindung dem Prinzip ‚Performance-First‘: Umfangreiche Kartendaten und JavaScript-Bibliotheken werden erst bei expliziter Nutzerinteraktion geladen.
Kontaktbereiche
Die Kontaktbereiche sind modular aufgebaut und auf die jeweilige Nutzerabsicht optimiert. Ob namentliche Personenzuweisung oder funktionales Formular: Die intuitive Logik im Hintergrund steuert die Feldrelevanz. So werden komplexe Abfragen, beispielsweise für BAföG-Anliegen, durch dynamische Zusatzfelder präzise strukturiert, ohne den Nutzer durch unnötige Informationen zu überfordern.
Live-Übersetzung
Ein besonderes Feature ist die nahtlose Mehrsprachigkeit: Speisepläne werden per Klick in Echtzeit via DeepL-API übersetzt. Um die Performance zu optimieren und API-Aufrufe zu minimieren, werden bereits übersetzte Inhalte in einem lokalen Cache zwischengespeichert. Diese Live-Übersetzung erstreckt sich konsequent bis in die automatisierten PDF-Ausgaben. Auch für die allgemeine Redaktionsarbeit ist DeepL direkt in das Kirby-Backend integriert, was den Übersetzungsprozess für alle Website-Inhalte massiv beschleunigt.
Live-Meldungen
Für eine dynamische Nutzeransprache wurde eine Funktion für zeitgesteuerte Live-Meldungen implementiert. Redakteur:innen können Informationen gezielt für relevante Bereiche planen und deren Sichtbarkeit über ein präzises Zeitmanagement steuern – ideal für kurzfristige Ankündigungen oder terminbezogene Hinweise.
Ein digitales Fundament für die Zukunft: Der neue Webauftritt des Studierendenwerks ist als skalierbares Ökosystem konzipiert. Durch die Wahl einer Headless-Architektur bleibt die Plattform nicht nur langfristig stabil, sondern ist technisch bereits für kommende Anforderungen gerüstet. Etwa für die Anbindung an Digital-Signage-Systeme in den Mensen und Wohnheimen.
Niklas Haukenfrers Art Direction UX / UI Design Branding Social Media Interaction Design
Niklas Haukenfrers Art Direction UX / UI Design Branding Social Media Interaction Design
Copyright © 2025 Niklas Haukenfrers. Alle Rechte vorbehalten.