Laptop mit geöffneter Gymnio-App auf einem Tisch, im Hintergrund trainiert eine Frau auf einer Yogamatte.
Laptop mit geöffneter Gymnio-App auf einem Tisch, im Hintergrund trainiert eine Frau auf einer Yogamatte.

/

Gymnio

Gymnio — Dein AI Fitness Coach

Smarteres Tracking, maßgeschneiderte Ernährung und Fortschritte, die sichtbar werden.

Rolle

Produktdesigner (UX/UI)

Tools

Figma, FigJam, ChatGPT

Fokus

Dashboard Design

Jahr

2025

Projektüberblick

Ziel war die Entwicklung einer KI-gestützten Fitnessplattform, die TrainingErnährung und Coaching in einer einheitlichen Nutzererfahrung zusammenführt.
Gymnio soll Nutzer*innen dabei unterstützen, ihre Fitnessziele zu erreichen, Fortschritte sichtbar zu machen und langfristig motiviert zu bleiben.

Im Fokus standen eine intuitive Informationsarchitekturvisuelle Motivation und ein Dashboard, das Struktur und Orientierung bietet.
Das Ergebnis ist ein digitaler Fitness-Coach, der individuelle Empfehlungen, Fortschritte und Trainingsdaten übersichtlich vereint.

Herausforderung

Viele Fitness-Apps sind überladen, unübersichtlich und bieten wenig persönliche Motivation.
Nutzer*innen verlieren schnell den Überblick, da wichtige Bereiche wie TrainingErnährung und Coaching auf verschiedenen Plattformen verteilt sind.

Die Herausforderung bestand darin, eine integrierte Lösung zu schaffen, die alle Fitnessaspekte in einem zentralen, motivierend gestalteten Dashboard zusammenführt.

Dashboard der Gymnio-App mit Trainingsfortschritt, Workouts, Rezept des Tages und Coach-Übersicht.
Dashboard der Gymnio-App mit Trainingsfortschritt, Workouts, Rezept des Tages und Coach-Übersicht.

Lösung

Gymnio kombiniert alle relevanten Fitnessbereiche in einem visuell klaren, modularen Dashboard.
Durch intelligente Verknüpfungen zwischen Trainingsplänen, Ernährungszielen und Fortschrittsdaten entsteht ein ganzheitliches Nutzererlebnis.

Der Fokus lag auf einer klaren Nutzerführungvisuellem Feedback und emotionalem Design, um Motivation und Engagement zu steigern.

Designprozess

Der Designprozess umfasste drei Phasen:

Lo-Fi:  Definition von Layout und Informationshierarchie zur Verbesserung der Usability

Mid-Fi:  Integration von Interaktionslogik für Workouts, Ernährung und Fortschritt

Hi-Fi:  Verfeinerung der visuellen Gestaltung und Entwicklung eines skalierbaren, konsistenten Designsystems

Besonderer Fokus lag auf klarer Strukturkonsistenter Typografie und einem systematischen Komponentenaufbau.

Der Designprozess umfasste drei Phasen:

Lo-Fi:  Definition von Layout und Informationshierarchie zur Verbesserung der Usability

Wireframe der Gymnio-Website mit Platzhaltern für Header, Feature-Bereich und Nutzerstatistiken.
Wireframe der Gymnio-Website mit Platzhaltern für Header, Feature-Bereich und Nutzerstatistiken.
Wireframe-Screens für Registrierungsseite
Wireframe-Screens für Registrierungsseite
Wireframe-Screens für Dashboard
Wireframe-Screens für Dashboard
Wireframe-Screens für Workoutseite
Wireframe-Screens für Workoutseite
Wireframe-Screens für  Statistiken
Wireframe-Screens für  Statistiken

Mid-Fi:  Integration von Interaktionslogik für Workouts, Ernährung und Fortschritt

Midfi-Wireframe-Screens für  Landingpage
Midfi-Wireframe-Screens für  Landingpage
Midfi-Wireframe-Screens für Registration
Midfi-Wireframe-Screens für Registration
Midfi-Wireframe-Screens für  Dashboard
Midfi-Wireframe-Screens für  Dashboard
Midfi-Wireframe-Screens für Login
Midfi-Wireframe-Screens für Login
Midfi-Wireframe-Screens für Statistiken
Midfi-Wireframe-Screens für Statistiken

Hi-Fi:  Verfeinerung der visuellen Gestaltung und Entwicklung eines skalierbaren, konsistenten Designsystems

High-Fidelity-Design der Laningpage
High-Fidelity-Design der Laningpage
High-Fidelity-Design der Registrationsseite
High-Fidelity-Design der Registrationsseite
High-Fidelity-Design des Dashboards
High-Fidelity-Design des Dashboards
High-Fidelity-Design der Workoutseite
High-Fidelity-Design der Workoutseite
High-Fidelity-Design der Statistikseite
High-Fidelity-Design der Statistikseite

Besonderer Fokus lag auf klarer Struktur, konsistenter Typografie und einem systematischen Komponentenaufbau.

Userflow

Um den Bearbeitungsmodus des Dashboards möglichst intuitiv zu gestalten, wurde ein Userflow entwickelt, der alle Interaktionen abbildet.
Nutzer*innen können Widgets hinzufügen, verschieben oder entfernen, ohne den Überblick zu verlieren.

Durch klare Rückmeldungen und optionale Bestätigungen bleiben Änderungen nachvollziehbar und die Nutzung angenehm flüssig.

Userdlow Diagramm der Bearbeitung des Dashboards
Userdlow Diagramm der Bearbeitung des Dashboards
Finales Gymnio-Dashboard mit Workout-Übersicht, Rezeptempfehlung und personalisierter Motivation.
Finales Gymnio-Dashboard mit Workout-Übersicht, Rezeptempfehlung und personalisierter Motivation.

Ergebnis

  • Einheitliches Dashboard für Training, Ernährung und Fortschritt

  • Transparente Fortschrittsdarstellung zur Steigerung der Motivation

  • Modularer Aufbau ermöglicht individuelle Anpassungen und Erweiterungen

Learnings

  • Eine klare Informationsarchitektur stärkt Fokus und Orientierung

  • Iteratives Prototyping und Nutzerfeedback verbessern Vertrauen und Akzeptanz

  • Ein Designsystem beschleunigt zukünftige Workflows und fördert Konsistenz

Designsystem von Gymnio mit Typografie, Farbpalette, Buttons, Formularfeldern und UI-Komponenten.
Designsystem von Gymnio mit Typografie, Farbpalette, Buttons, Formularfeldern und UI-Komponenten.

Bereit

für das

nächste Kapitel

Ich bin offen für neue Herausforderungen, die mich wachsen lassen und meine Arbeit weiterentwickeln.
Ständig lernend, ständig besser werdend.
Wenn du jemanden suchst, der Design-Sensibilität mit technischer Präzision verbindet –
ich freue mich, von dir zu hören.

UX/UI Designer Arne Schüler arbeitet an seinem Schreibtisch an einem Designprojekt auf zwei Monitoren.

Bereit

für das

nächste Kapitel

Ich bin offen für neue Herausforderungen, die mich wachsen lassen und meine Arbeit weiterentwickeln.
Ständig lernend, ständig besser werdend.
Wenn du jemanden suchst, der Design-Sensibilität mit technischer Präzision verbindet –
ich freue mich, von dir zu hören.

UX/UI Designer Arne Schüler arbeitet an seinem Schreibtisch an einem Designprojekt auf zwei Monitoren.

© 2025 Arne Schüler. All rights reserved.