Die Geschichte hinter Sportify
Sportify entstand nicht am Schreibtisch, sondern im der Greifbar beim Ausgleichstraining zum Bouldern. Ich trainierte mit einigen Freunden und wir setzten uns das ziel Täglich eine gewisse anzahl an Wdh. durchzufürhen. daraus entstand die idee dass wir auch ohne miteinander trainieren zu müssen über eine app den gemeinsamen traningsvortschritt aufzeichen zu können
Im Juni 2025 begann ich mit den ersten Entwürfen und ssetzte mich schnell an die Entwicklung.
Sportify ist zu mienem persönliches Projekt geworden, dass ich in meiner Freizeit aufbaue — und gleichzeitig das Projekt, an dem ich am meisten gelernt habe. Über Programmierung und über den Prozess zwischen Design und Entwicklung dazwischen.
Das Problem verstehen
Wer regelmäßig trainiert, kennt das Bedürfnis nach Struktur. Man will wissen, was man letzte Woche gemacht hat, ob man sich gesteigert hat, und wie man im Vergleich zu seinen Trainingspartnern steht. Bestehende Apps wie Strava, Strong oder Hevy decken Teile davon ab, aber keine davon passte wirklich zu dem, was wir brauchten. Strava ist primär für Ausdauersport gedacht. Strong und Hevy fokussieren sich auf Krafttraining, bieten aber kaum soziale Funktionen. Und fast alle dieser Apps sind entweder überladen mit Features, die niemand braucht, oder so vereinfacht, dass sie für ernsthafte Sportler zu wenig bieten. Die sozialen Elemente wirken bei den meisten Konkurrenzprodukten wie ein Anhängsel, das nachträglich drangeschraubt wurde.
Mein Vorteil war, dass ich meine Zielgruppe nicht erst suchen musste. Meine Freundesgruppe war gleichzeitig das Feedback-Panel und die Beta-Tester. Von Anfang an konnte ich beobachten, wie sie trainieren, was sie frustriert und was sie motiviert. Dabei kristallisierten sich drei zentrale Bedürfnisse heraus: Erstens musste die Erfassung von Workouts während des Trainings so schnell und einfach wie möglich sein — idealerweise zwischen zwei Sätzen in unter dreißig Sekunden. Zweitens wollten alle sehen können, wie sie sich im Vergleich zu den anderen entwickeln, aber auf eine faire und nachvollziehbare Art. Drittens war es wichtig, dass das System auf allen Geräten funktioniert, denn in unserer Gruppe nutzen manche iPhones, andere Android-Phones, und manche wollen am Laptop ihre Statistiken anschauen.
Die Vielfalt an Geräten war letztlich der Grund für eine der wichtigsten technischen Entscheidungen des gesamten Projekts: Sportify als Progressive Web App zu entwickeln. Eine native App für iOS und Android zu bauen hätte bedeutet, zwei separate Codebases zu pflegen oder auf Cross-Platform-Frameworks wie Flutter oder React Native zu setzen. Mit Flutter hatte ich bereits Erfahrung gesammelt, aber keine sonderlich gute. React Native kannte ich nur oberflächlich, und eine reine Swift-Entwicklung wäre für ein Freizeitprojekt schlicht zu aufwändig gewesen. Dazu kommt der ganze Overhead mit App Store und Google Play Store: Reviews, Updates, Zertifikate, Gebühren. Eine PWA dagegen läuft im Browser, ist installierbar, funktioniert offline und wird über eine einzige Codebasis gepflegt. Das war die pragmatische und die richtige Entscheidung.
Gestaltung und Designentscheidungen
Aus diesen Bedürfnissen entstand eine klare Produktvision: Sportify soll sich anfühlen wie ein guter Trainingspartner — zuverlässig, kompetent, aber nie aufdringlich. Von Anfang an standen bestimmte Features fest: Zweisprachigkeit, weil unsere Gruppe deutsch- und englischsprachige Mitglieder hat. PWA mit Offline-Support als technische Notwendigkeit. Soziale Features als Kern der Idee. Wöchentliche Ziele, Challenges und ein Scoreboard für langfristige Motivation.
Ursprünglich habe ich das gesamte Design in Figma angelegt — Screens, Komponenten, Flows, alles durchgestaltet, bevor ich eine Zeile Code geschrieben habe. Das half mir, die Informationsarchitektur zu durchdenken und ein Gefühl für den Gesamtzusammenhang zu entwickeln. Irgendwann merkte ich allerdings, dass mich dieser Workflow mehr bremste als voranbrachte. Jede Änderung musste ich doppelt machen, und viele der Designs, die in Figma wunderschön aussahen, ließen sich nicht eins zu eins umsetzen. Manchmal scheiterte es an meinen eigenen Kenntnissen als Entwickler, manchmal an echten technischen Limitationen. Also verlagerte ich den Designprozess in den Code. Tailwind CSS und die Komponenten-Architektur von React machten es möglich, direkt im Browser zu gestalten, schnell zu iterieren und sofort zu sehen, wie sich ein Design auf verschiedenen Bildschirmgrößen verhält. Wo die Figma-Vorlagen zu aufwändig wurden, entstanden pragmatische Lösungen, die den Kern der Gestaltung bewahren: klare Raster, gut lesbare Typografie und prägnante Interaktionselemente.
Das visuelle System baut auf Token-basierter Konsistenz auf. Alle Farben, Abstände und typografischen Entscheidungen sind als Design Tokens zentral definiert, sodass eine Änderung sich automatisch durch die gesamte Anwendung zieht. Die Primärfarbe Orange vermittelt Energie und Aktivität und hebt sich bewusst von den Blau- und Grüntönen ab, die im Fitness-App-Markt dominieren. Den Dark Mode habe ich nicht als Afterthought behandelt, sondern als eigenständige Designvariante mit separat entwickelter Palette und angepassten Kontrasten — die meisten Nutzer verwenden die App im Gym, wo ein dunkles Interface schlicht angenehmer ist.
Die Informationsarchitektur orientiert sich an den natürlichen Workflows eines Trainierenden. Das Dashboard beantwortet als modulares Card-Layout die erste Frage beim Öffnen: Wo stehe ich gerade? Die Workout-Erfassung wurde für verschwitzige Hände und wenige Sekunden zwischen zwei Sätzen optimiert — große Touch-Targets, Auto-Completion, numerische Tastaturen. Statistiken kontextualisieren Daten durch Trend-Indikatoren und Vergleiche statt nur absolute Zahlen zu zeigen. Und die sozialen Features sind bewusst zurückhaltend: keine algorithmische Timeline, keine Endlos-Scroll-Mechanik, optionale Push-Benachrichtigungen. Der Fokus bleibt auf dem eigenen Training.
Iteration und die größten Herausforderungen
Da meine Freundesgruppe die App von Anfang an aktiv nutzte, erhielt ich kontinuierlich ungefilterte Rückmeldungen — als WhatsApp-Nachrichten wie „Warum muss ich hier drei Mal tippen?“ oder „Kann man das Workout nicht als Vorlage speichern?“
Die mit Abstand größte Veränderung, an der ich etwa zwei Monate gearbeitet habe, war der Umbau des Übungssystems. In der ersten Version waren alle Übungen hart codiert — eine feste Liste, und das war es. Sobald mehr Leute die App nutzten, wurde klar, dass jeder andere Übungen macht. Also entwickelte ich ein komplett dynamisches System: Jede Übung ist jetzt ein Datensatz mit Kategorie, Bewegungsmuster, Muskelgruppen, Equipment, Messtyp und Schwierigkeitsgrad. Nutzer können eigene Übungen anlegen, Administratoren die Datenbank kuratieren. Das berührte die gesamte Architektur — Datenbank, API, Scoring, UI, Statistiken — und alle bestehenden Daten mussten migriert werden, ohne dass etwas verloren geht. Rückblickend war das der Moment, in dem aus einer kleinen Trainings-App ein ernsthaftes Produkt wurde.
Die zweite wichtige Iteration waren Workout-Vorlagen. Templates ermöglichen es, ein Workout einmal zu erstellen, mit einem Klick zu starten, und mit Freunden zu teilen, sodass die ganze Gruppe dasselbe Workout machen und sich vergleichen kann.
Ich möchte dabei ehrlich sein: Ohne KI-Unterstützung hätte ich Sportify in diesem Umfang nicht realisieren können. Als primär visuell denkender Designer stoße ich bei komplexer Backend-Logik und Datenbank-Migrationen an Grenzen, wo KI-gestütztes Coding mir geholfen hat. Das ändert nichts daran, dass jede Designentscheidung, jeder UX-Flow und die gesamte Produktvision von mir kommt. Die KI ist ein Werkzeug — so wie Figma oder Tailwind. Sie erweitert meine Möglichkeiten, ersetzt aber nicht das gestalterische Denken.
Reflexion
Die wichtigste Erkenntnis aus diesem Projekt ist, dass die Trennung zwischen „Designer“ und „Entwickler“ künstlich ist — zumindest für die Art von Produkten, die ich bauen möchte. Der Moment, in dem ich anfing, direkt im Browser zu gestalten statt in Figma Mockups zu polieren, war der Moment, in dem die Qualität einen Sprung machte. Ein Button, der in Figma perfekt aussieht, kann in der Praxis unbrauchbar sein, wenn er zu klein für verschwitzige Finger ist. Sportify hat mich gelehrt, Design immer vom Nutzungskontext her zu denken.
Nicht jedes Design, das ich entworfen habe, konnte ich umsetzen. Nicht jede technische Herausforderung konnte ich alleine lösen. Aber genau diese Reibung zwischen Ambition und Realität hat mich am meisten wachsen lassen. Sportify ist ein lebendes Projekt — auf der Roadmap stehen öffentliche Workout-Vorlagen, Trainingsgruppen und perspektivisch eine Anbindung an Wearables. Aber das Wichtigste ist: Meine Freunde und ich nutzen es jeden Tag. Es ist ein Produkt, das ein echtes Problem löst, das wir selbst hatten.
