Case Study · UX/UI-Design & CRO
Anatoly Fit
Eine conversion-orientierte Website für Vladimir Shmondenko – besser bekannt als Anatoly –, um sein digitales Trainingsprogramm zu präsentieren und zu verkaufen.
Projektüberblick Anatoly Fit
Überblick ↘
Vladimir Shmondenko, online besser bekannt als Anatoly, ist einer der weltweit beliebtesten Creator für Gym-Pranks. Seine Community umfasst insgesamt über 60 Millionen Follower, davon mehr als 25 Millionen auf Instagram, und er verkauft seine Trainingsprogramme online.
Anatoly Fit ist eine conversion-orientierte Website, die sein digitales Fitnessprogramm über eine klare, hochwertige und strukturierte User Journey präsentiert und verkauft.
Ich habe die gesamte Website gestaltet – Informationshierarchie, visuelle Ausrichtung, responsive Layouts, conversion-orientierte Sektionen und die Frontend-Umsetzung. Jeder Teil hilft Besuchern, das Angebot zu verstehen, dem Produkt zu vertrauen und sicher zum Kauf zu gelangen.
Projektergebnisse Anatoly Fit
Projektergebnisse ↘
UX/UI- und Conversion-Herausforderung
Die Herausforderung ↘
Die Herausforderung bestand darin, den Wert eines digitalen Fitnessprogramms auf einer einzigen Long-Form-Website zu vermitteln und Besucher vom Hero bis zum finalen Call to Action bei der Stange zu halten.
Die Seite musste das Programm schnell erklären, Glaubwürdigkeit aufbauen, die Vorteile zeigen, häufige Einwände beantworten und einen klaren Weg zum Kauf schaffen – ohne zu werblich oder visuell überladen zu wirken.
Conversion Journey
Conversion Journey ↘
Die Website ist um die Fragen herum aufgebaut, die Besucher vor dem Kauf am wahrscheinlichsten stellen.
Hero-Design ↘
Das Angebot in den ersten Sekunden vermitteln
Der Hero verbindet ein klares Wertversprechen, wiedererkennbare Bildsprache, einen direkten Call to Action und eine kurze Erklärung des Programms. Ziel war, dass Besucher sofort verstehen, was das Produkt ist und warum es relevant ist.
- Klares Wertversprechen
- Starke Hauptaktion
- Sofortige visuelle Wiedererkennung
Visuelles Storytelling ↘
Eine durchgehende Erzählung statt isolierter Sektionen
Große Typografie, Fitness-Bilder, kontrastierende helle und dunkle Sektionen und kontrollierte Abstände halten die Aufmerksamkeit über die gesamte lange Seite.
Jede Sektion leitet den nächsten Teil der Geschichte ein: das Problem, die Veränderung, das Programm und die Entscheidung, mitzumachen.
Programminhalte ↘
Das Angebot leicht verständlich machen
Die Programminhalte sind in klare, scannbare Sektionen gegliedert, damit Besucher schnell verstehen, was sie bekommen, wie das Training funktioniert und welche Ergebnisse das Programm unterstützen soll.
Content-Hierarchie ↘
Nutzer von der Aufmerksamkeit zur Aktion führen
Die Seite folgt einer einfachen Abfolge: Aufmerksamkeit gewinnen, Interesse wecken, Vertrauen aufbauen, das Angebot erklären, Einwände ausräumen und die nächste Aktion zeigen.
- 01Aufmerksamkeit
- 02Interesse
- 03Vertrauen
- 04Verständnis
- 05Einwandbehandlung
- 06Kauf
Vertrauen & Einwände ↘
Fragen vor dem Checkout beantworten
Das FAQ und ergänzende Inhalte beantworten häufige Fragen zu Zahlung, Zugang, Programmdauer, Eignung und dazu, was nach dem Kauf passiert.
Calls to Action ↘
Konsistente Aktionen auf der ganzen Seite
Die wichtigsten Calls to Action wiederholen sich an Schlüsselstellen, ohne mit dem Inhalt zu konkurrieren. Button-Stil, Kontrast, Abstände und Platzierung bleiben konsistent, sodass Besucher den nächsten Schritt immer verstehen.
Mobile Experience ↘
Die komplette Journey auf Mobile
Die mobile Version hält die gesamte Conversion Journey klar und leicht nachvollziehbar – vom einleitenden Wertversprechen und den Programmvorteilen bis zum FAQ und zur finalen Kaufaktion. Typografie, Bilder, Navigation, Abstände und Reihenfolge der Inhalte wurden gezielt für kleine Bildschirme angepasst.
Designrichtung ↘
Eine hochwertige Bildsprache, die auf Kontrast aufbaut
Das visuelle System kombiniert kräftige Typografie, monochrome Layouts, editoriale Abstände, abgerundete Bilder und abwechselnd helle und dunkle Sektionen zu einer hochwertigen Fitness-Identität.
- Schwarz-weiße Basis
- Großformatige Typografie
- Abgerundete Mediencontainer
- Starker CTA-Kontrast
- Editoriale Liniengrafiken
- Rhythmus aus hellen und dunklen Sektionen
Favicon ↘
Ein kleines Markendetail für den Browser
Ich habe zwei eigene Favicon-Varianten für Anatoly Fit gestaltet und die Wortmarke in ein kompaktes Browser-Icon übersetzt. Die helle Version erscheint in hellen Themes, die dunkle hält das Zeichen in dunklen Themes gut erkennbar.
Entscheidungen zur Conversion-Optimierung
CRO-Entscheidungen ↘
- 01
Mit einem klaren Versprechen beginnen
Der Hero erklärt das Produkt, bevor er Besucher zum Weiterlesen auffordert.
- 02
Den Weg einfach halten
Ein minimales Interface und eine klare Navigation helfen Besuchern, sich zu orientieren und mühelos zum Kauf zu gelangen.
- 03
Nutzen vor Details
Die Seite kommuniziert Ergebnisse, bevor sie auf den Programmaufbau eingeht.
- 04
Aktionen an natürlichen Entscheidungspunkten wiederholen
Calls to Action erscheinen, sobald Besucher genug Informationen haben, um weiterzugehen.
- 05
Einwände direkt auf der Seite ausräumen
Das FAQ reduziert Unsicherheit vor dem Checkout.
Rolle und Verantwortung
Meine Rolle ↘
- Informationsarchitektur
- UX/UI-Design
- Content-Hierarchie
- Visuelle Ausrichtung
- Responsive Design
- Conversion-Optimierung
- Frontend-Umsetzung
- Qualitätssicherung
Farbpalette
Farbpalette ↘
Ergebnis ↘
Eine konversionsstarke Website mit messbarer Wirkung
Die fertige Website präsentiert Anatolys Fitnessprogramm mit einer klaren Erzählung, hochwertiger Bildsprache und einem strukturierten Weg zum Kauf.
Das Projekt erreichte eine Conversion-Rate von 6 % und trägt eine Plattform mit über 20.000 aktiven Nutzern – ein Beleg für die Wirksamkeit der conversion-orientierten Struktur und des responsiven Interfaces.