Projektzeitraum
10/2024 – 05/2026
Kontext
Bachelorarbeit · IMIS · Wegweiser UX für KI
Rolle
UX/UI Designerin
Beitrag
Designsystem · Figma UI Kit · Accessibility · Frontend-Integration · Evaluation
Kontext
„Wegweiser UX für KI“ ist eine Lehrplattform, die gemeinwohlorientierten Organisationen UX-Prinzipien für KI-Anwendungen vermittelt.
Die Plattform war über mehrere Projektphasen gewachsen. Dadurch entstanden Inkonsistenzen in Navigation, Inhaltsstruktur, Komponenten und visueller Gestaltung. Zusätzlich zeigten sich Optimierungspotenziale bei Lesbarkeit und Farbkontrasten.
Ziel meiner Bachelorarbeit war die Entwicklung eines Designsystems, das die User Experience verbessert, barrierefreie Designentscheidungen unterstützt und als Grundlage für die langfristige Weiterentwicklung der Plattform dient.
Herausforderung
Wie lässt sich eine gewachsene Plattform konsistenter, zugänglicher und einfacher weiterentwickeln?
Die zentralen Herausforderungen waren:
- uneinheitliche Navigation und Inhaltsstruktur
- unklare visuelle Hierarchien
- unzureichende Farbkontraste
- fehlende Komponentenstandards
- fehlende Dokumentation für das Projektteam
Analyse
Bestehende Plattform
Accessibility Audit
Benchmarking
Designsystem
Farben
Typografie
Komponenten
Grid
Implementierung
Figma UI Kit
React + Tailwind
zeroheight
Evaluation
Die summative Evaluation zeigte eine hohe UX-Qualität der überarbeiteten Plattform.
SUS
85
Note A+
VisAWI
5,85
hohe visuelle Ästhetik
AttrakDiff
besonders hoher Wert im Item „Vorzeigbarkeit“
Ergebnis
Das Designsystem bildet eine konsistente Grundlage für die Weiterentwicklung der Lehrplattform. Es verbessert:
- visuelle Konsistenz
- Lesbarkeit
- Orientierung innerhalb der Plattform
- Barrierefreiheit nach WCAG-AA
- Wiederverwendbarkeit von Komponenten
- Zusammenarbeit zwischen Design und Entwicklung
Learnings
01 Designsysteme sind mehr als Komponenten
Ein gutes Designsystem schafft nicht nur ein einheitliches Interface, sondern unterstützt Zusammenarbeit, Wartbarkeit und langfristige Skalierbarkeit.
02 Accessibility muss früh mitgedacht werden
Barrierefreiheit lässt sich deutlich besser umsetzen, wenn sie Bestandteil der Designsprache ist und nicht erst nachträglich ergänzt wird.
03 Dokumentation entscheidet über Nutzung
Ein Designsystem ist nur dann wirksam, wenn andere es verstehen, anwenden und weiterentwickeln können.
Abschluss
Die Arbeit wurde als Bachelorarbeit im Studiengang Medieninformatik an der Universität zu Lübeck eingereicht und mit 1,0 bewertet.