Projekt 2025

Im diesjähringen Projekt gestalten wir das neue Frontend für die [Veranstaltungsübersicht an der Fakultät 10](https://hops.gm.th-koeln.de/hops/modules/timetable/). Das zugrunde liegende System ist bereits implementiert – unser Fokus liegt auf der Gestaltung der Schnittstelle (Interface), die Studierende, Lehrende und Mitarbeitende im Alltag tatsächlich verwenden.

Lehrveranstaltungen finden in verschiedenen Formaten, Rhythmen und Räumen statt – mal wöchentlich, mal geblockt, mal hybrid. Daraus ergeben sich unterschiedliche Anforderungen an Ansichten, Filter und Interaktionen. Unser Ziel: ein zugängliches, anpassungsfähiges und gut strukturiertes Interface, das Orientierung schafft und Bedürfnisse ernst nimmt – ohne überladen zu sein.

Screendesign
Projektaufgabe

Entwickeln Sie ein Gestaltungs- und Interaktionskonzept für das neue Frontend der digitalen Veranstaltungsübersicht an der Fakultät 10. Berücksichtigen Sie dabei die unterschiedlichen Bedürfnisse und Nutzungsszenarien von Studierenden, Lehrenden und Mitarbeitenden. Ziel ist ein zugängliches, flexibles und gut strukturiertes Interface, die komplexe Veranstaltungsdaten übersichtlich darstellt und sinnvolle Interaktionen ermöglicht – vom schnellen Überblick bis zu detaillierten Informationen. Das Konzept muss auf verschiedenen Endgeräten (Desktop, Tablet, Smartphone) funktionieren und situationsabhängige Nutzungskontexte berücksichtigen.

Ziele des Redesigns

Verständliche und konsistente Darstellung
Das Interface soll Veranstaltungen übersichtlich, verständlich und konsistent darstellen – unabhängig von Gerät, Format oder Nutzungssituation.

Responsives Design für verschiedene Endgeräte
Das Interface muss auf Desktop, Tablet und Smartphone gleichermaßen funktionieren und dabei eine möglichst gute Nutzererfahrung bieten.

Barrierefreiheit
Das Design soll möglichst barrierefrei gestaltet werden und dabei die Zugänglichkeit für alle Nutzergruppen gewährleisten – im Sinne digitaler Teilhabe.

Integration in das Hochschuldesign
Die Gestaltung muss sich nahtlos in das bestehende visuelle Erscheinungsbild der TH Köln einfügen und deren Designrichtlinien berücksichtigen.

Unterstützung unterschiedlicher Stakeholder-Bedarfe
Die verschiedenen Perspektiven und Anforderungen von Studierenden, Lehrenden und Mitarbeitenden sollen sinnvoll abgebildet und in der Nutzung adressiert werden.

Optimierung für den Einsatz im Browser
Die Lösung ist für die Nutzung im Webbrowser gedacht und soll dort schnell, stabil und intuitiv funktionieren.

(Optional) Unterstützung von Dark- und Light-Mode
Das Interface kann – idealerweise – zwischen hellen und dunklen Anzeigeoptionen wechseln, um unterschiedlichen Umgebungen und Vorlieben gerecht zu werden.

Bereiche & erforderliche Screens

Welche Screens sind zu gestalten und welche Aufgabe haben sie?

Ansicht / Screen	Beschreibung & Anforderungen
Tagesansicht	Zeigt alle Veranstaltungen eines Tages. Gut geeignet für den tagesaktuellen Überblick. Muss klar strukturiert und auch auf kleinen Displays (z. B. Smartphone) gut nutzbar sein. Kann Uhrzeiten, Räume und ggf. Überschneidungen anzeigen.
Wochenansicht	Zeigt alle Veranstaltungen einer Woche, gegliedert nach Tagen und Zeiten.
Monatsansicht optional	Gibt einen Überblick über den gesamten Monat. Eher zur Orientierung und zur Planung. Nicht alle Veranstaltungsdetails sichtbar, aber Hinweise auf Anzahl/Typ von Terminen.
Langzeit-/Semesteransicht optional	Zeigt Veranstaltungen über einen längeren Zeitraum, z. B. ein ganzes Semester. Besonders relevant für Blockveranstaltungen oder zur Planung der Prüfungsphase. Darf ggf. stärker abstrahiert sein.
Filterleiste mit Pinfunktion	Ermöglicht es, Veranstaltungen nach Zielgruppe (Studierende, Lehrende), Semester, Studiengang, Raum etc. zu filtern. Wichtig: Nutzer:innen sollen Filter pinnen können, um ihre Ansicht dauerhaft anzupassen (z. B. „nur mein Semester“).
Raumübersicht	Gibt Überblick über Räume und deren Belegung. Hilfreich für Lehrende oder Mitarbeitende. Darstellung als Liste, Grid oder (optional) Gebäudeplan. Kann auch Leerzeiten anzeigen.
Wählbare Termine	Für Veranstaltungen mit mehreren Wahlterminen: Darstellung eines Auswahlmechanismus. Nutzer:innen können einzelne Termine „pinnen“ oder auswählen, um ihren individuellen Plan zu erstellen.
Veranstaltungs-Detailansicht	Zeigt alle wesentlichen Infos zu einer Veranstaltung: Titel, Zeit, Ort, Dozierende, Format, evtl. Teilnahmebedingungen. Optional: Kurzbeschreibung des Moduls, Verlinkung auf Modulhandbuch oder andere weiterführende Infos.

Vorgehen

Bitte nutzen Sie die folgend dargestellten Projektphasen. Ergebnisse aus den einzelnen Phasen sollten in die Präsentation und Kurzdokumentation eingebracht werden. Die Phasen bauen aufeinander auf. Iterationen sind möglich und oft sinnvoll. Jede Phase hat Aufgaben und Ziele, die den Weg zu einem guten, nachvollziehbaren und fundiertem Screendesign ebnen.

Phase	Beschreibung
Verstehen (Discover)	Analyse des Problemraums: Wer sind die Nutzer:innen und Stakeholder? Was sind ihre Bedürfnisse, Ziele und Nutzungskontexte? Welche Veranstaltungsarten gibt es, wie sind sie modelliert, und welche Daten stehen zur Verfügung? Das Design der Hochschule wird detailliert untersucht, um zu Verstehen wie Inhalte dargestellt werden können. Ergänzend wird der Wettbewerb analysiert, um relevante Designkonzepte und Best Practices zu identifizieren. Methoden: Stakeholder-Mapping, Interviews, User-Stories, Personas, Marktanalyse, Best-Practice-Recherche.
Gemeinsames Bild schaffen (Define)	Konsolidierung der Erkenntnisse: Nutzergruppen und User Stories werden verdichtet, Anforderungen abgeleitet. Es wird ein gemeinsames Bild vom Gestaltungskontext erarbeitet: Was sind Gestaltungskonstanten, was sind Spielräume? Ziel ist eine Problemdefinition als Grundlage für die Ideation.
Ideenfindung (Develop – Phase 1)	Generierung erster Lösungsansätze mit Fokus auf die visuelle Darstellung komplexer Informationen (z. B. Zeiträume, Überschneidungen, Formate). Methoden wie Brainstorming, Crazy 8, High-Five oder 6-3-5 können eingesetzt werden. Ziel ist ein breites Spektrum an Ideen zur Darstellung der Veranstaltungsübersicht.
Bewertung & Auswahl	Kritische Reflexion und Bewertung der gesammelten Ideen anhand definierter Kriterien: Nutzerzentrierung, Verständlichkeit, Umsetzbarkeit, Zielerreichung. Auswahl eines oder mehrerer vielversprechender Ansätze für die Weiterentwicklung.
Designkonzept entwickeln (Develop – Phase 2)	Ausgewählte Ideen werden zu einem kohärenten Designkonzept ausgearbeitet: Definition von visuellen und interaktiven Prinzipien, Layout-Richtlinien, Navigationskonzepten und ggf. States oder Übergängen. Ziel ist ein konsistenter Gestaltungsrahmen.
Prototyping & Ausarbeitung (Deliver – Phase 1)	Umsetzung des Konzepts in klickbare oder animierte Prototypen. Anwendung und Vertiefung von Techniken zur Darstellung von Interface-Ideen. Ziel: Ein erlebbarer Entwurf, der die Idee kommuniziert.
Kommunikation & Präsentation (Deliver – Phase 2)	Das finale Design wird aufbereitet und verständlich kommuniziert: Dokumentation des Konzepts, ggf. interaktive Demos oder animierte Sequenzen, Visualisierung von Use-Cases. Ziel: Die Lösung soll überzeugend präsentiert und nachvollziehbar gemacht werden.

Deliverables, Projektteam & Prüfung

Die Arbeit erfolgt in 2er Teams. Im Rahmen des Screendesign Projekts müssen folgende Deliverables via Übergabepunkt abgegeben werden: Designkonzept als Mockup, Präsentation und Kurzdokumentation. Informationen zur Abgabe der Kurzdokumentation finden Sie unten auf der Website der Projektergebnisse. Für das Projekt 2025 ist die Abgabe eines Styleguides nicht erforderlich, das Feld kann also in Ihrer Markdown-Datei freigelassen oder entfernt werden. Weitere Informationen zur Bewertung finden Sie unter Niveaustufen und Deliverables.

Die Prüfung findet in Form einer Projektpräsentationsprüfung statt. Zur Prüfung müssen Sie sich im PSSO anmelden und einen Termin im Ilu buchen. Die Bewertung erfolgt mit Hilfe der Niveaustufen. Dies sollten Sie sich unbedingt zur Projektlaufzeit und vor der Prüfung anschauen, um zu wissen, was erwartet wird und Ihre Arbeit entsprechend ausrichten. Hier finden Sie weitere Informationen zur Projektpräsentationsprüfung.