Redesign Web Frontend der Veranstaltungsübersicht am Campus Gummersbach


Josephine Fege & Timo Ley

Kontext
TH Köln, Campus Gummersbach
Modul
Screendesign
Semester
Wintersemester 2025/26
Studiengang
Medieninformatik Ba.

Im Rahmen des Screendesign-Projekts 2025/26 haben wir uns der Herausforderung gestellt, die Hochschulplanungs-Software (HOPS) der TH Köln grundlegend neu zu denken. Das ursprüngliche Design der Plattform wirkte zunehmend altmodisch, integrierte sich visuell kaum in das bestehende Corporate Design der Hochschule und stieß besonders bei der mobilen Nutzung auf deutliche Grenzen. Unser Auftrag war es, ein Gestaltungskonzept zu entwickeln, das nicht nur ästhetisch überzeugt, sondern Komplexität reduziert und sich nahtlos in den bestehenden Designkontext der TH Köln einbettet. Unser Kernfokus lag dabei auf einer konsequenten Übersichtlichkeit und einer hohen Personalisierbarkeit, um den individuellen Bedürfnissen der verschiedenen Nutzergruppen gerecht zu werden.

Bei der Konzeption haben wir uns auf zwei zentrale User Journeys fokussiert: einerseits die der Studierenden, die im Alltag oft mobil und gestresst auf ihre Stundenpläne zugreifen, und andererseits die der Veranstaltungsverantwortlichen, deren Workflow zusätzlich eine effiziente Raumverwaltung und -reservierung erfordert. Um diesen Anforderungen gerecht zu werden, haben wir das Layout gezielt für die verschiedenen Bildschirmgrößen optimiert. Während wir auf dem Desktop sowie auf dem Tablet den verfügbaren Platz für eine detaillierte Wochenansicht nutzen, haben wir für das Smartphone eine simple lineare Tagesansicht entwickelt. Wir haben uns hierbei bewusst gegen eine gestauchte Wochenansicht auf dem Handy entschieden, da diese erfahrungsgemäß schnell unübersichtlich wird und kaum Mehrwert bietet. Stattdessen sorgt die Listenansicht dafür, dass essenzielle Informationen ohne horizontales Scrollen sofort erfassbar sind. Um trotzdem eine vorausschauende Planung zu ermöglichen, haben wir zusätzlich für alle Geräte eine Monatsansicht integriert.

Für die visuelle Gestaltung haben wir den Dark Mode gewählt, der eine aufgeräumte Atmosphäre schafft und die Augen bei längerer Nutzung schont. Als Akzentfarben kommen die offiziellen Hochschulfarben der TH Köln zum Einsatz. Durch diese dunkle Basis im Zusammenspiel mit den leuchtenden Akzenten erzielen wir sehr hohe Kontrastwerte. Das ist nicht nur eine ästhetische Entscheidung, sondern ein wesentlicher Beitrag zur Barrierefreiheit, da es die kognitive Belastung reduziert und die Lesbarkeit auch bei schwierigen Lichtverhältnissen, etwa unterwegs auf dem Campus, verbessert.

Ein Herzstück unseres Designs ist die hohe Personalisierbarkeit. Nutzer können ihr Interface durch diverse Filter und favorisierte Module individuell konfigurieren. Schnelle visuelle Orientierung wird nicht nur durch unser Layout, sondern auch durch unsere intuitive Farblogik sowie ein Icon-System gefördert. Dadurch lassen sich beispielsweise Veranstaltungsarten auf einen Blick unterscheiden. Um eine maximale Anpassung an individuelle Präferenzen und Bedürfnisse (auch im Hinblick auf Barrierefreiheit) zu ermöglichen, haben wir eine Funktion integriert, mit der den Modulen über einen Color-Picker völlig freie Farbwerte zugewiesen werden können. Veranstaltungsverantwortliche profitieren zudem von einer Raumübersicht, welche es ermöglicht, in der Monatsansicht die Verfügbarkeiten einzusehen und direkt einen Zeitslot zu reservieren. Insgesamt zeigt unser Entwurf, dass komplexe Hochschulplanung nicht kompliziert sein muss, sondern durch gezielte Reduktion und Personalisierung die tägliche Organisation spürbar erleichtern kann.