Prozess
Im Rahmen meines UX-Design-Prozesses durchlief ich fünf zentrale Phasen.
Lernmanagementsystem
UX/UI Case Study
Ich habe im Rahmen eines Gruppenprojekts das Lernmanagementsystem ILIAS aus Sicht der Studierenden analysiert und überarbeitet. Schon auf den ersten Blick fiel auf, dass die Benutzeroberfläche veraltet und unübersichtlich war.
Der Fokus lag auf den zentralen Bereichen Anmeldung, Startseite, Nachrichten, Profil, Meine Kurse & Gruppen.
Ziel war es, diese Bereiche zu modernisieren, die Navigation zu vereinfachen und eine klarere, benutzerfreundlichere Struktur zu schaffen.
Folge: Ineffiziente Nutzung und insgesamt negative User Experience im Lernalltag.
Ergebnis: Ein modernes, intuitives und benutzerzentriertes Lernmanagementsystem, das den digitalen Lernprozess erleichtert und die Nutzerzufriedenheit steigert.
Im Rahmen meines UX-Design-Prozesses durchlief ich fünf zentrale Phasen.
Die Interviews bestätigten folgenden Eindruck: ILIAS ist funktional, aber für Studierende wenig intuitiv. Der größte Hebel liegt in einer klareren Navigation, einer reduzierten Startseite mit Priorisierung relevanter Inhalte sowie einer zeitgemäßen, mobilfreundlichen Oberfläche.
Um ein besseres Verständnis für die Zielgruppe und deren Bedürfnisse zu erlangen, wurden zwei Personas erstellt. Diese repräsentieren typische Nutzer der Anwendung und dienten als Grundlage für weitere Designentscheidungen.
Im nächsten Schritt wurden die identifizierten Anforderungen in User Stories überführt, um die Bedürfnisse der Studierenden klar und handlungsorientiert abzubilden. Jede Story beschreibt eine konkrete Nutzerabsicht und half, Funktionen aus Sicht der Studierenden zu priorisieren.
*nur teilweise dargestellt
Zur Analyse des bestehenden Systems wurde zunächst eine deskriptive Informationsarchitektur erstellt, um die aktuelle Struktur und Navigationswege von ILIAS abzubilden. Dabei zeigte sich, dass die Anordnung der Inhalte komplex und teilweise redundant war (nur teilweise dargestellt).
Darauf aufbauend entstand eine präskriptive Struktur, die eine optimierte, klar gegliederte Navigation definiert. Ähnliche Inhalte wurden zusammengefasst, Hierarchieebenen reduziert und die Hauptfunktionen aus Sicht der Studierenden priorisiert. Das Ergebnis bildet eine vereinfachte, logisch aufgebaute Grundlage für das neue Interface-Design.
*nur teilweise dargestellt
Nach Abschluss der Ideation-Phase wurden zunächst Papierprototypen erstellt, um erste Ideen händisch zu visualisieren und kreative Lösungsansätze zu entwickeln. Diese dienten als Grundlage für die spätere digitale Ausarbeitung.
In diesem Schritt wurden erste Low-Fidelity-Skizzen erstellt, um die grundlegende Seitenstruktur und zentrale Bedienkonzepte festzulegen. Die Ausarbeitung erfolgte in Miro, da sich das Tool besonders gut für schnelle visuelle Entwürfe eignet und eine übersichtliche Sammlung vorgefertigter Wireframe-Elemente bietet.
Das Design-System wurde mit hoher Sorgfalt entwickelt. Es nutzt spezialisierte Tools zur Farbwahl, behält die Markenfarbe dunkles Orange bei und setzt ein helles Grau als Hintergrund. Für das Layout kommt ein 8-Spalten-Raster zum Einsatz, das besonders für Webseiten geeignet ist.
In diesem Schritt habe ich das gesamte Interface der Plattform neu strukturiert und visuell überarbeitet. Ziel war es, eine klarere Informationsarchitektur, eine intuitivere Navigation sowie ein modernes, ruhiges und konsistentes UI-Design zu schaffen. Durch den Einsatz einheitlicher Komponenten, verbesserter Layoutlogik und einer präzisen Typografie wirkt die Anwendung nun deutlich übersichtlicher, nutzerfreundlicher und ästhetisch stimmiger. Jede Seite wurde individuell optimiert, ohne den Gesamtcharakter des Systems zu verlieren.
