Virtueller Campus

UX Design

Projekt hands on: ein virtueller Campus für die digitale Lehre in Sozialer Arbeit und Gesundheitsberufen an der HAWK.

Statt zwischen vielen Systemen zu wechseln, finden Studierende alles fürs Studium an einem Ort. Dazu kommen Chat, Mediathek und Inhalte fürs Selbststudium, zum Beispiel zum wissenschaftlichen Arbeiten.

Mobil und Desktop Screen des virtuellen Campus

Team

Projektjahr 2025

Prof. Dr. Alexandra Engel, Prof. Stefan Wölwer, Prof. Dr. Axel Schäfer, Prof. Dr. Corinna Ehlers, Prof. Dr. Juliane Leinweber, Jessica Duda, Kikko Neubert, Jonas Trippler, Barbara Zimmermann, Jennifer Petry, Martin Neundorfer, Judith Krämer, Silas Hering, Catharina Oeltjebruns

Tasks

Personas, Card Sorting, User Journeys & Flows, Wireframes, Low-/High-Fidelity Prototyping, Designsysteme, Accessibility Design, Usability-Testing, Motion & Animation, Videoschnitt & Screencasts, Voiceover, Illustrationen, Aufbereitung & Durchführung von Workshops & Präsentationen

Tools

Figma, FigJam, Miro, Adobe Firefly, Elevenlabs, ChatGPT, HTML, CSS, JavaScript, Blender, After Effects, Audition, Huly (für Projektmanagement), MS Office (Word, Powerpoint, Excel), Zoom

Vorstellung des virtuellen Campus

Prototyp des virtuellen Campus

Double Diamond

Wir haben in Schleifen gearbeitet: Probleme mit Studierenden und Lehrenden klären, eine Lösung bauen, testen und wieder nachschärfen.

Erstellung von Nutzungsszenarien

Auf Basis der Evaluationsergebnisse wurden Nutzungsszenarien erstellt, an denen wir Struktur, Navigation und Funktionen des virtuellen Campus ausgerichtet haben.

Flow Charts

Erstellung von Flow Charts, um die Abläufe und Interaktionen der Nutzenden im virtuellen Campus zu visualisieren und auf deren Basis einen Prototypen zu entwickeln.

Vorbereitung und Durchführung von Workshops

Gemeinsame Entwicklung von Personas
Gemeinsame Erstellung von User Journeys
Praktische Arbeit mit Figma
Workshops zur Einführung in eigene Software

Wireframes

Wireframes, um Aufbau und Struktur sichtbar zu machen und mit dem Team darüber zu sprechen.

Low-Fi- und High-Fi-Prototyping

Erst Skizzen, dann klickbare Prototypen, die mit jeder Runde genauer wurden.

Designsystem

Komponenten in Figma gestaltet und in Storybook umgesetzt, damit alle Seiten gleich funktionieren und barrierefrei bleiben. Zusätzlich wurde eine KI-optimierte design.md entwickelt, die AI-Agents ermöglicht, das Designsystem anzuwenden und z. B. mit Claude Code weitere Prototypen im definierten Stil zu generieren.