01 · Projektkontext
Orientierung & Ausgangslage
FitHub Sport Club ist ein Produktkonzept für einen modernen Fitness-Club. Ziel war eine vollständige, mehrseitige Plattform von der Startseite bis zum Online-Shop, mit durchdachten UX-Entscheidungen über alle Bereiche hinweg.
Der Club bietet alles, was ein Premium-Fitness-Club braucht: Einzel- und Gruppentraining, mehrere Abo-Pläne, Protein-Bar, Umkleiden mit kostenlosen Handtüchern, Trainer-Profile, Merch-Shop und eine aktive Instagram-Community.
Branche
Produktkonzept · B2C
Aufgabe
UX/UI Design · Multi-Page
Rolle
UX Strategie · Design · System
02 · Anforderungen
Was die Plattform leisten muss
→Darstellung von Einzel- und Gruppentrainings mit zertifizierten Trainern
→Mehrere Preismodelle: Test Drive, Basic, Premium und VIP
→Eigene Trainingsprogramme wie Strength, Fitness, CrossFit, Yoga und Pilates
→Facilities wie Umkleiden, Duschen, kostenlose Handtücher und Protein-Bar
→Community-Sektion und Instagram-Integration
→Trainer-Katalog mit Einzelprofilen
→Merch-Bereich für T-Shirts, Accessoires und Supplements
→Klare Standort-Kommunikation, nur 5 Minuten zur U-Bahn
→Lead-Capture-Formular für Rückruf-Anfragen
03 · UX Analyse
Struktur über Komplexität
Die Kernfrage der Analyse: Wie bringt man Schedule, Pricing, Shop, Coaches und Facilities auf eine Website, ohne den Nutzer zu überfordern? Die Antwort lag in einer klaren Informationsarchitektur mit separaten Seiten und einem starken visuellen System.
// 01
Klare Seitenstruktur
Home, Schedule, Coaches, Shop und Gym
// 02
Sticky-Navigation für sofortigen Zugriff auf Buchung und Warenkorb
Sticky-Navigation für sofortigen Zugriff auf Buchung und Warenkorb
// 03
Trennung von Entdecken auf der Startseite und Handeln auf den Detailseiten
Trennung von Entdecken auf der Startseite und Handeln auf den Detailseiten
// 04
Visuelle Hierarchie mit Teal für CTAs und Orange als Energie-Akzent
Visuelle Hierarchie mit Teal für CTAs und Orange als Energie-Akzent
Informationsarchitektur & Layout-Struktur
04 · Design System
Teal & Orange Identity
Name und visuelle Identität von FitHub wurden vollständig für dieses Konzept entwickelt. Das Logo kombiniert ein Dumbbell-Icon mit geometrischer Typografie. Teal steht für Vertrauen und Action, Orange-Rot für Energie und Dynamik, getragen von einem Wechsel aus dunklen Hero-Bereichen und helleren Content-Sektionen.
Primärfarbe — Vertrauen & Action
Teal — Buchungs-CTAs, Navigation, Trust-Elemente
Akzentfarbe — Energie & Dynamik
Orange-Rot — Highlights, Trainingsprogramme, Badges
Logo
Dumbbell-Icon + geometrische Typografie. Stark, wiedererkennbar, sportlich.
Hintergrund-Rhythmus
Dark Hero-Bereiche wechseln mit hellen Content-Sektionen — visueller Atemrhythmus.
Design System & UI Components
05 · Strategie
User Journey als Fundament
Die Strategie folgte dem User-Journey-Prinzip: Begeistern, Informieren, Überzeugen, Konvertieren. Jede Seite hat innerhalb dieses Funnels eine klare Aufgabe.
01Hero-Bereich mit starker Positionierung und klarer CTA-Führung
02Eigene Seiten für Schedule, Coaches, Shop und Gym statt einer überladenen Startseite
03Pricing-Logik mit vier Mitgliedschaftsmodellen und deutlicher Differenzierung
04Community-Elemente, Social Proof und Kontaktpunkte entlang der Journey
06 · Designprozess
Vom Konzept zur Plattform
01
Informationsarchitektur und Seitenstruktur definiert
Informationsarchitektur und Seitenstruktur definiert
02
Desktop-Layouts und visuelle Hierarchie in Figma ausgearbeitet
Desktop-Layouts und visuelle Hierarchie in Figma ausgearbeitet
03
Design-System für wiederverwendbare Komponenten aufgebaut
Design-System für wiederverwendbare Komponenten aufgebaut
04
Mobile Screens und Interaktionsmuster parallel mitgedacht
Mobile Screens und Interaktionsmuster parallel mitgedacht
07 · Finales Design
Die Plattform in voller Breite
Conversion-orientierte Landing Page, strukturierter Schedule, integrierter Shop und vertrauensbildende Trainer-Profile — alles als kohärentes System.
08 · Mobile Erfahrung
Mobile als eigenständige Journey
Die mobile Version wurde nicht als abgespeckte Variante verstanden, sondern als eigenständiger, vollständiger Journey-Einstieg für Mitglieder unterwegs.
Hamburger-Menü, komprimierte Produkt-Cards und Overlay-Buchungsmodule ermöglichen dieselbe vollständige Journey auf dem Smartphone, ohne Funktionsverlust.
Quick-Action-Icons für Wishlist und Cart direkt im Header
Interaktive Produktkarten mit Add-to-Cart und Detail-Popups
Overlay-Buchungsfluss für Kurse statt harter Seitenwechsel
Modale Lead-Generierung für Newsletter und Rückruf-Anfragen
09 · Impact
Was geliefert wurde
Kein MVP-Fragment — sondern ein vollständiges, kohärentes Produkt. Jede Seite mit eigenem Ziel, alle zusammen ein System.
5+
Vollständiges Multi-Page Design
5+ vernetzte Seiten: Schedule, Coaches, Shop, Gym und Contact, jeweils mit einem klaren Nutzerziel.
4
4 Abo-Modelle umgesetzt
Test Drive, Basic, Premium und VIP mit klarer visueller Unterscheidung und Konversionslogik.
2×
Mobile-First Prototyp
Vollständig responsiver Figma-Prototyp für Desktop und Smartphone.
✓
Komplettes Design System
Konsistente UI-Komponenten, Typografie und Farbpalette in Teal und Orange über alle Seiten hinweg.
