Data-driven training for athletes and coaches

The startup StrengthLab360 is revolutionizing strength training by using scientifically grounded processes to dynamically adapt individual needs and training plans for optimal results. We support StrengthLab360 in realizing their vision through the concept development and design of their web app.

project scoping

Research & UX

interfacedesign

web development

<p class="" data-start="44" data-end="563">In response to the growing demands for digital coaching and training, we developed a web application that optimally supports both coaches and athletes. Our client was highly ambitious and had a clear vision for the platform. Therefore, <strong style="font-weight: bold; color: red;">close and agile collaboration</strong> was essential to quickly validate and refine ideas. At the same time, the user perspective had to be a top priority. The web app was intended to provide powerful features for athletes and coaches while ensuring an <strong style="font-weight: bold; color: red;">intuitive and user-friendly experience</strong>.</p> <h2 data-start="565" data-end="582"> </h2> <h2 data-start="584" data-end="1241">Challenge</h2> <p class="" data-start="584" data-end="1241">A distinctive feature of this web app is that it differs from conventional applications: The focus is not on using the web app itself but on its role as a supporting tool during training. A central feature is logging – recording sets, weights, and repetitions to measure training progress. Since the app is used only briefly during these moments, it must be extremely <strong style="font-weight: bold; color: red;">intuitive and fast to operate</strong>, ensuring that it does not disrupt the training process. This posed <strong style="font-weight: bold; color: red;">specific challenges for UI/UX design</strong>. The application needed to seamlessly integrate into the training process and allow users to efficiently document their workouts without distracting them.</p> <p class="" data-start="584" data-end="1241"> </p> <h2 data-start="584" data-end="1241">Our role</h2> <p>StrengthLab360 relied on our <strong style="font-weight: bold; color: red;">expertise in strategy, design, and development</strong>, allowing us to support the implementation of the digital coaching and training experience through the following services.</p> <ul> <li>Project Scoping Workshop  </li> <li>UX Design / Research  </li> <li>Interface Design  </li> <li>Technical Consulting  </li> <li>Frontend Development</li> </ul>

<div class="components__ProductStep-sc-133nss0-1 exxmKz"> <div class="content-container"> <div class="base__FlexContainer-sc-hj71sx-0 bmxrwa headline-container"> <h2 class="base__P-sc-hj71sx-1 cfepMl">1 Project scoping workshop</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <p>Comprehensive apps can become unmanageable and lead to unforeseen costs—even with solid groundwork. A <strong>professionally conducted Project Scoping Workshop</strong> helps identify <strong>project risks early on</strong>, allowing for the development of effective countermeasures.</p> <p>We were able to break down the feature set into successive versions, enabling continuous user feedback through <strong>early testing</strong> and ensuring a user-centered development process. <strong>Features</strong> were deliberately <strong>prioritized</strong> based on user needs to deliver the greatest possible value.</p> </div> </div> </div> <div class="components__ProductStep-sc-133nss0-1 cpOetL"> <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">2 UX design/research</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <p>To understand the <strong>specific needs and workflows</strong> of the target groups – coaches and athletes – we developed different conceptual design approaches to create an <strong>optimal solution for each user group</strong>. In addition, we analyzed the market and competitive landscape to identify strengths and weaknesses of existing solutions and derive innovative approaches. By evaluating <strong>best practices</strong> from the digital coaching and fitness space, we ensured that our solution would be both functional and user-friendly. Existing user flows, such as the onboarding process, training planning, and logging, were redesigned to enable a seamless and intuitive experience. Finally, we selected a <strong>suitable design system</strong> to support <strong>consistent and scalable implementation</strong>.</p> <p><img src="https://typedig.uber.space/assets/2f8d2853-953c-4dd3-933f-5451ef27f39a?width=1920&height=1440" alt="Mockup 3"></p> <h3><strong>What are the benefits of a well-chosen design system?</strong></h3> <p>A design system ensures <strong>scalability, consistency, and usability</strong>. In our project, it enabled an intuitive and cohesive user experience—from workout planning to interactions with coaches. Clear design guidelines and reusable components reduced cognitive load, improved navigation, and accelerated development. By using ShadCN, we established a <strong>maintainable and scalable codebase, laying the foundation for future extensions</strong></p> <p> </p> <h2>3 Interfacedesign</h2> </div> </div> </div> <div class="components__ProductStep-sc-133nss0-1 exxmKz"> <div class="content-container"> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <h3><em><strong>Mobile First</strong></em></h3> <p>The interface design follows a <strong>mobile-first approach</strong> to ensure that <strong>essential content and features are optimally displayed on smaller screens</strong>. This is particularly important as the web app is used alongside training sessions, with both athletes and coaches often accessing it directly on mobile devices. There are no content differences between mobile and desktop versions, so all users receive the <strong>full functionality without limitations</strong>.</p> <h3> </h3> <h3><em><strong>High-Fidelity Mockups</strong></em></h3> <p>The user interface design is based on ShadCN as the design system, ensuring a <strong>modern and consistent UI</strong> with predefined, customizable components. <strong>Accessibility</strong> in line with WCAG standards is a key consideration, making the app usable for all user groups. The interface is visually aligned with the application's corporate identity to ensure a coherent brand experience. At the same time, the design remains <strong>fully compatible with the chosen technology stack</strong> – particularly React – for an efficient and high-performance implementation.</p> </div> </div> </div> <div class="components__ProductStep-sc-133nss0-1 cpOetL"> <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">4 Technical consulting</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <p>Thanks to our expertise, we were able to provide targeted technical support and guidance to the young StrengthLab360 team—particularly in the backend environment.</p> <p>Need more than just technical consulting? We offer professional development support to help you bring your digital project to a successful finish. Our <strong>experienced developers</strong> are ready to step in where you need them most.</p> </div> </div> <div class="image-container"> <div class="gatsby-image-wrapper gatsby-image-wrapper-constrained" data-gatsby-image-wrapper=""> </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"><img src="https://typedig.uber.space/assets/5854661b-1481-4c14-ada8-d953596421fe?width=1920&height=1440" alt="Mockup 4"></p> <h2 class="base__P-sc-hj71sx-1 cfepMl"> </h2> <h2 class="base__P-sc-hj71sx-1 cfepMl">5 Frontend development</h2> </div> <div class="components__Container-sc-2g5ggg-0 kTRTXZ"> <p>By using ShadCN, we were able to create a <strong>consistent and modern user interface</strong>. Full control over the source code allowed us to implement <strong>custom adaptations</strong> that go beyond standard functionality. Additionally, we optimized the <strong>accessibility</strong> of components to ensure an <strong>inclusive user experience</strong>.</p> </div> </div> </div>

Our solution

<ul> <li data-start="56" data-end="226">Targeted Risk Analysis and Efficient Project Planning through a Project Scoping Workshop</li> <li data-start="56" data-end="226">User-Centered and Modern Web Application that Stands Out from Competitors</li> <li data-start="228" data-end="327">Scalable and Intuitive User Interfaces that Enable Future Expansions and Cover Best Practices</li> <li data-start="329" data-end="400">Mobile-First Interface Design for Seamless Use Across All Devices</li> <li data-start="402" data-end="459">Iterative Approach to Adapt Agility to Market Changes</li> </ul>

Do you also have a project in mind that you would like to tell us about?

Get in touch

Testimonial

trengthLab360's testimony about us

<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>