Im Rahmen des Screendesign Projekts wurde ein grundlegendes Redesign der HoPS-Veranstaltungsplattform der Fakultät 10 der Technischen Hochschule Köln entwickelt. Das zentrale Ziel bestand darin, eine Mobile-first-Anwendung zu gestalten, die den Studierenden, Lehrenden und Mitarbeitern einen schnellen und intuitiven Zugriff auf ihren persönlichen Stundenplan ohne unnötige Umwege oder überladene Interfaces ermöglicht.
Der Kern des Redesigns liegt in einem konsequent pop-up-basierten Informationssystem. Tippt ein Nutzer auf einen Veranstaltungsblock im Kalender, öffnet sich sofort ein Pop-up-Fenster mit allen relevanten Informationen: Kursname, Veranstaltungstyp, Semester, Uhrzeit, Raum, lehrende Personen sowie das zugehörige Kürzel mit Link zur jeweiligen Veranstaltungsseite. Der Nutzer erhält die wichtigsten Informationen auf einen Blick, ohne jedes Mal auf eine externe Seite weitergeleitet werden zu müssen. In der Stundenplan-Suche können über das Pop-up-Fenster Veranstaltungen in den eigenen Stundenplan hinzugefügt werden und dort wiederum entfernt werden. So entsteht ein personalisierter Stundenplan mit minimalem Aufwand.
Die Stundenplanansichten unterstützen drei Darstellungsmodi: Wochenansicht, Tagesansicht und für die Desktop-Version zusätzlich eine Monatsansicht. Auf mobilen Geräten kann über eine untere Navigationsleiste schnell zwischen Tages- und Wochenansicht gewechselt werden, während der Wechsel zwischen allen drei Ansichten in der oberen rechten Ecke auf der Desktop-Version stattfindet. Die Wochenansicht zeigt ein kompaktes Spaltenraster, beschriftet mit den Wochentagen von Montag bis Freitag und eine vertikale Zeitachse an der linken Seite des Screens. In der Tagesansicht wird ein einzelner Tag nur mit einer Spalte dargestellt, was besonders auf kleinen Bildschirmen eine übersichtliche Orientierung ermöglicht. Im Raster erscheinen Veranstaltungen in Form sogenannter “Cards”. Durch Tippen auf eine “Card” öffnet sich unmittelbar das Pop-up in der Mitte des Screens. Auf dem Desktop wird die Wochenansicht deutlich breiter ausgefaltet. Hier erscheint links auf der vorgesehenen Fläche das Pop-up für die angeklickte Veranstaltung, während die Kalenderansicht vollständig sichtbar bleibt.
Die wichtigste Funktion in der Stundenplan-Suche ist die Filtersuche, welche durch eine Dropdown-Leiste aufgerufen werden kann und die Filterkategorien sichtbar macht. Nutzer können nach Studiengang, Semester, Dozent:in, Fach und Raum filtern. Da die Filter in Form einer Combobox gestaltet sind, kann die Liste an verfügbaren Optionen auf- und zugeklappt werden oder ein eigener Text eingegeben werden, um nach passenden Optionen zu suchen. Ein „Zurücksetzen“-Button ermöglicht das schnelle Löschen aller gesetzten Filter. Durch dieses Prinzip der progressiven Offenlegung wirkt die Benutzeroberfläche trotz der umfangreichen Filtermöglichkeiten nie überladen.
Das visuelle Design folgt dem Corporate Design der TH Köln. Die Oberfläche nutzt neutrale Farben wie Grau in verschiedenen Stufen und Weiß als Hintergrund und in Grundflächen, sowie die kräftige Primärfarbe Orange für Navigation beispielsweise beim Kenntlichmachen des aktuellen Wochentags, interaktionsfähige Button-Elemente und in welcher Menü-Option sich der Nutzer befindet. Die Veranstaltungsblöcke sind je nach Veranstaltungstyp eingefärbt. Lila steht für Vorlesungen, Gelb für Seminare, Grün für Übungen, Blau für Tutorien und Rot für Praktika. Diese Farbcodierung erlaubt es, den eigenen Stundenplan auf einen Blick zu erfassen, ohne jeden Kursblock lesen zu müssen. Abgerundete Ecken bei Kacheln, Buttons und Pop-up-Fenstern sorgen für ein weiches und modernes Erscheinungsbild.
Über ein Burger-Icon ist das Seitenmenü jederzeit erreichbar, das sich als dunkel-lila Overlay über die Oberfläche legt. Es enthält die Menü-Optionen „Mein Profil”, „Mein Stundenplan”, „Stundenplan-Suche”, „Exportieren”, „Einstellungen” sowie „Logout”.
Der obere Header zeigt stets den Hochschulnamen sowie den aktuellen Bereich klar strukturiert und in allen Ansichten konsistent.
Zusammenfassend überzeugt das Redesign durch seinen klaren Fokus auf Minimalismus und Direktheit. Jede wichtige Information ist mit wenigen Berührungen zu erreichen. Das Popup-System macht separate Detailseiten überflüssig und die Filtersuche ermöglicht das gezielte Auffinden von Veranstaltungen. Das durchgängige Farbsystem schafft zudem eine schnelle Orientierung im eigenen Stundenplan.
