Datengetriebenes Training für Athlet:innen und Coaches

Das Startup-Unternehmen StrengthLab360 revolutioniert das Krafttraining, indem mit wissenschaftlich fundierten Prozessen individuelle Bedürfnisse und Trainingspläne dynamisch angepasst werden, um optimale Ergebnisse erzielen zu können. Wir unterstützen StrengthLab360 bei ihrer Vision mit der Konzeption und Ausgestaltung ihrer Webapp.

Project Scoping

Research & UX

Interfacedesign

Webentwicklung

<p dir="ltr">Als Antwort auf die steigenden Anforderungen an digitales Coaching und Training haben wir eine Webanwendung entwickelt, die sowohl Coaches als auch Athlet:innen optimal unterstützt. Unser Kunde war äußerst ambitioniert und verfolgte eine klare Vision für die Plattform. Deshalb war eine <strong style="font-weight: bold; color: red;">enge und agile Zusammenarbeit</strong> essentiell, um Ideen schnell zu validieren und weiterzuentwickeln. Gleichzeitig durfte die Nutzerperspektive nicht vernachlässigt werden. Die Webapp sollte nicht nur leistungsstarke Funktionen für Sportler:innen und Trainer:innen bieten, sondern auch eine <strong style="font-weight: bold; color: red;">intuitive und benutzerfreundliche Erfahrung </strong>gewährleisten.</p> <p dir="ltr"> </p> <h2 dir="ltr">Herausforderung</h2> <p dir="ltr">Ein besonderes Merkmal dieser Webapp ist, dass sie sich von herkömmlichen Anwendungen unterscheidet: Dabei liegt der Fokus nicht auf der Nutzung der Webapp selbst, sondern auf ihrer Rolle als unterstützendes Tool während des Trainings. Ein zentrales Feature ist das Logging, also das Protokollieren von Sätzen, Gewichten und Wiederholungen, um den Trainingsfortschritt zu messen. Da die App in diesen Momenten nur kurz genutzt wird, muss sie extrem <strong style="font-weight: bold; color: red;">intuitiv und schnell bedienbar</strong> sein, um den Trainingsprozess nicht zu stören. Dies stellte <strong style="font-weight: bold; color: red;">besondere Anforderungen an das UI/UX-Design</strong>. Die Anwendung sollte sich demnach nahtlos in den Trainingsprozess einfügen und den Nutzer:innen ermöglichen, ihre Workouts effizient zu dokumentieren, ohne sie dabei abzulenken.</p> <p dir="ltr"> </p> <h2 dir="ltr">Unsere Rolle</h2> <p dir="ltr"><a href="https://strengthlab360.com" target="_blank" rel="noopener">StrengthLab360</a> setzte auf unsere <strong style="font-weight: bold; color: red;">Expertise in Strategie, im Design und der Entwicklung</strong>, wodurch wir durch folgende Leistungen bei der Umsetzung des digitalen Coaching- und Trainingserlebnisses unterstützen konnten.</p> <ul> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Project Scoping Workshop </p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">UX Design / Research</p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Interfacedesign</p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Technische Beratung</p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Frontend-Entwicklung</p> </li> </ul>

<div class="base__FlexContainer-sc-hj71sx-0 bmxrwa headline-container"> <h2>1 Project Scoping Workshop</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <p>Umfangreiche Apps können trotz vorbildlicher Vorarbeit unkontrollierbar werden und unvorhergesehene Kosten verursachen. Durch einen <strong>professionell durchgeführten Project Scoping Workshop</strong> werden die <strong>Projektrisiken frühzeitig verstanden</strong>, um Gegenmaßnahmen abzuleiten.</p> <p>Wir konnten den Funktionsumfang in aufeinander aufbauende Versionen unterteilen, um durch <strong>frühe Usertests</strong> kontinuierliches Feedback zu erhalten und die Entwicklung nutzerzentriert zu gestalten. Wir <strong>priorisierten Features</strong> gezielt nach Nutzerbedürfnissen, um den größten Mehrwert zu bieten.</p> <p> </p> <div class="base__FlexContainer-sc-hj71sx-0 bmxrwa headline-container"> <h2 class="base__P-sc-hj71sx-1 cfepMl">2 UX Design/Research</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <p>Um die <strong>spezifischen Anforderungen</strong> und Arbeitsweisen der Zielgruppen, Coaches und Athlet:innen zu verstehen, erstellten wir unterschiedliche konzeptionelle Designansätze, um eine <strong>optimale Lösung für jede Nutzergruppe</strong> zu entwickeln. Ergänzend dazu analysierten wir den Markt und den Wettbewerb, um Stärken und Schwächen bestehender Lösungen zu identifizieren und innovative Ansätze abzuleiten. Durch die Auswertung von<strong> Best Practices</strong> aus dem digitalen Coaching- und Fitnessbereich stellten wir sicher, dass unsere Lösung sowohl funktional als auch benutzerfreundlich ist. Bestehende User Flows, wie das Onboarding-Verfahren, Trainingsplanung und das -logging, wurden überarbeitet, um eine <strong>reibungslose und intuitive Nutzung</strong> zu ermöglichen. Anschließend wählten wir ein <strong>geeignetes Designsystem</strong>.</p> <p><img src="https://typedig.uber.space/assets/2f8d2853-953c-4dd3-933f-5451ef27f39a?width=1920&height=1440" alt="Mockup 3"></p> <h3><em>Welche Vorteile bringt ein geeignetes Designsystem?</em></h3> <p>Ein Designsystem gewährleistet <strong>Skalierbarkeit, Konsistenz und Benutzerfreundlichkeit</strong>. In unserem Projekt sorgte es für eine intuitive und einheitliche Nutzererfahrung – von der Workout-Planung bis zur Interaktion mit Trainer:innen. Klare Gestaltungsrichtlinien und wiederverwendbare Komponenten reduzierten die kognitive Belastung, erleichterten die Navigation und beschleunigten die Entwicklung. Die Nutzung von ShadCN sicherte eine <strong>wartbare, skalierbare Codebasis für zukünftige Erweiterungen</strong>.</p> <p> </p> <div class="base__FlexContainer-sc-hj71sx-0 bmxrwa headline-container"> <h2 class="base__P-sc-hj71sx-1 cfepMl">3 Interfacedesign</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <h3><em>Mobile First</em></h3> <p>Das Interface-Design folgt dem <strong>Mobile-First-Prinzip</strong>, um sicherzustellen, dass die <strong>wesentlichen Inhalte und Funktionen optimal auf kleineren Displays dargestellt</strong> werden. Dies ist besonders sinnvoll, da die Web-App trainingsbegleitend verwendet wird und Nutzer:innen, sowohl Athlet:innen als auch Coaches, sie oft direkt während des Trainings auf mobilen Geräten aufrufen. Es gibt keine inhaltlichen Unterschiede zwischen mobilen und stationären Geräten, sodass alle Nutzer:innen <strong>denselben Funktionsumfang ohne Einschränkunge</strong>n erhalten.</p> <p><strong> </strong></p> <h3><em>High-Fidelity Mockups</em></h3> <p>Für die Gestaltung der Benutzeroberfläche kommt ShadCN als Designsystem zum Einsatz. Dies gewährleistet ein<strong> modernes und konsistentes UI-Design</strong> mit vordefinierten, anpassbaren Komponenten. Dabei wird auf WCAG-konforme <strong>Barrierefreiheit</strong> geachtet, um die Nutzung für alle Anwendergruppen zu optimieren. Zudem wird das Interface visuell an das Corporate Identity (CI) der Anwendung angepasst, um eine stimmige Markenpräsenz sicherzustellen. Das Design bleibt dabei <strong>vollständig kompatibel mit der verwendeten Technologie</strong>, insbesondere mit React, um eine effiziente und performante Umsetzung zu ermöglichen.</p> <p> </p> <div class="components__ProductStep-sc-133nss0-1 cpOetL"> <div class="content-container"> <div class="base__FlexContainer-sc-hj71sx-0 bmxrwa headline-container"> <h2 class="base__P-sc-hj71sx-1 cfepMl">4 Technische Beratung</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <p>Durch unsere Expertise konnten wir das junge StrengthLab360-Team vor allem in der Backend-Umgebung technisch unterstützen und beraten.</p> <p>Du benötigst nicht nur technische Beratung, sondern professionelle Unterstützung in Sachen IT? Bei uns kannst du <strong>professionelle Programmierer:inn</strong>en finden, die dich unterstützen, dein digitales Projekt erfolgreich abzuschließen.</p> <p><img src="https://typedig.uber.space/assets/5854661b-1481-4c14-ada8-d953596421fe?width=1920&height=1440" alt="Mockup 4"></p> </div> </div> </div> <div class="components__ProductStep-sc-133nss0-1 exxmKz"> <div class="content-container"> <div class="base__FlexContainer-sc-hj71sx-0 bmxrwa headline-container"> <p class="base__P-sc-hj71sx-1 cfepMl"> </p> <h2 class="base__P-sc-hj71sx-1 cfepMl">5 Frontend-Entwicklung</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <p>Durch die Verwendung von ShadCN konnten wir eine <strong>konsistente, moderne Benutzeroberfläche</strong> schaffen. Durch die vollständige Kontrolle über den Quellcode konnten wir <strong>individuelle Anpassungen</strong> vornehmen, die über die Standardfunktionen hinausgehen. Zudem haben wir die <strong>Barrierefreiheit</strong> der Komponenten optimiert, um eine <strong>inklusive Nutzung</strong> zu gewährleisten.</p> </div> </div> </div> </div> </div> </div>

Unsere Lösungen

<ul> <li dir="ltr" role="presentation">Gezielte Risikoanalyse und effiziente Projektplanung durch einen Project Scoping Workshop</li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Nutzerzentrierte und moderne Webanwendung, die sich von Mitstreitern abhebt</p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Skalierbare und intuitive Benutzeroberflächen, die zukünftige Erweiterungen ermöglicht und Best Practices abdeckt</p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Mobile-First Interface-Design für eine nahtlose Nutzung auf allen Geräten</p> </li> <li dir="ltr" aria-level="1"> <p dir="ltr" role="presentation">Iterative Herangehensweise, um agil mit Veränderungen im Markt umzugehen</p> </li> </ul>

Hast du auch ein Projekt im Sinn, von dem du uns erzählen möchtest?

Zum Kontaktformular

Kundenstimme

Das sagt StrengthLab360 über uns

<p>Working with typedigital was a game changer for us. They truly understood our vision and brought it to life with a sleek, user-focused app. Their technical expertise and collaborative approach made the process efficient and enjoyable.</p>