Prozess
Im Rahmen meines UX-Design-Prozesses durchlief ich sechs zentrale Phasen.
UX/UI Case Study
Ich habe eine Fitness-App überarbeitet, die in ihrer alten Version unübersichtlich und nicht besonders nutzerfreundlich war. Ziel war es, ein frisches, modernes Design zu entwickeln, das klar strukturiert ist und den Nutzer intuitiv durch die App führt.
Die Analyse der bestehenden Flexx-App zeigte deutliche Schwächen in Struktur, Navigation und visueller Gestaltung, die sich negativ auf die Nutzererfahrung auswirkten. Die App vermittelte keinen klaren Aufbau, enthielt redundante Inhalte und bot wenig gestalterische Führung, was die Nutzung unnötig erschwerte.
Insgesamt fehlte es der App an Klarheit, Einheitlichkeit und Nutzerfokus – ein modernes Redesign war notwendig.
Ich habe die Flexx-App grundlegend überarbeitet und die Nutzererfahrung ins Zentrum gestellt.
Das Ergebnis ist eine moderne, intuitive und motivierende Fitness-App, die die Schwächen der alten Version gezielt behebt und echten Mehrwert für die Nutzer liefert.
Im Rahmen meines UX-Design-Prozesses durchlief ich sechs zentrale Phasen.
Um ein besseres Verständnis für die Zielgruppe und deren Bedürfnisse zu erlangen, wurden zwei Personas erstellt (hier nur eins dargestellt). Diese repräsentieren typische Nutzer der Anwendung und dienten als Grundlage für weitere Designentscheidungen.
Die Customer Journey wurde anhand der Persona Daniel erstellt. Die Tabelle gliederte sich in aufeinanderfolgende Schritte, vom Erstellen eines Trainingsplans bis hin zur Durchführung und späteren Anpassung. Es beschreibt also Schritte bezüglich der Erstellung des Trainingsplans.
*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.
Anschließend folgte die Entwicklung von Low-Fidelity-Wireframes, mit denen grundlegende Layout- und Interaktionsmuster definiert wurden. Für deren Erstellung wurde Miro genutzt, da diese Plattform eine integrierte Wireframe-Bibliothek bietet, die eine einfache und effiziente Ausarbeitung der Entwürfe ermöglicht.
Das Design-System wurde mit hoher Sorgfalt entwickelt. Es nutzt spezialisierte Tools zur Farbwahl, behält die Markenfarbe Gelb bei und setzt ein helles Grau als Hintergrund. Für das Layout kommt ein 4-Spalten-Raster zum Einsatz, das besonders für mobile Anwendungen geeignet ist.
Darauf aufbauend wurden High-Fidelity-Wireframes erstellt, die detaillierte visuelle und funktionale Aspekte des Designs abbildeten. Ziel dieser Phase war die Erstellung einer realitätsnahen Darstellung des Endprodukts, welche als Grundlage für ein anschließendes UX-Experten-Review diente.
Zur Durchführung der Expertenevaluation wurde ein strukturierter UX-Evaluationsbogen im Miro-Board erstellt. Dies ermöglichte eine übersichtliche und visuell ansprechende Darstellung von zehn ausgewählten UX-Kriterien sowie eine intuitive Bewertung durch die Experten. Der Bogen erfasst die Qualität des Designs anhand klar definierter UX-Kriterien und führt die Teilnehmenden schrittweise durch fünf Bewertungsphasen.
Die Experten bewerteten das Design als harmonisch, klar strukturiert und markenkonform. Das Design erzielte 5,56 von 7 Punkten, was einer Gesamtbewertung von rund 79 % aller UX-Kriterien entspricht. Besonders hervorgehoben wurden dabei die starke Konsistenz, die intuitive Bedienbarkeit und die hochwertige UI-Gestaltung.
Im Anschluss an dieses Projekt habe ich meine Masterarbeit auf Basis der FLEXX-App weiterentwickelt. Dabei habe ich nicht nur mein eigenes UX/UI-Konzept betrachtet, sondern zusätzlich einen qualitativen Vergleich zwischen menschlichen und KI-gestützten Designprozessen durchgeführt.
Für diese Arbeit wurde ich mit dem RTL-Förderpreis für Absolvent*innen der Medieninformatik ausgezeichnet.
Die Auszeichnung würdigt die Verbindung aus praktischer UX-Gestaltung und der reflektierten Analyse moderner KI-Methoden im Designprozess.