A Case Study in Online Training Excellence
The Background
Smart4Fit is a comprehensive fitness and professional sports solution that was initially designed as a business-to-business (B2B) platform targeting fitness trainers and coaches. However, recognizing the growing number of individuals seeking online training without personal mentorship, Smart4Fit expanded into the business-to-customer (B2C) market.

Project overview
As the product designer for Smart4Fit Online Training, I spearheaded a win-win proposition that seamlessly connected trainees with suitable trainers, unlocking valuable opportunities for both parties involved. My objective was to bridge the gap between trainees seeking guidance and trainers aiming to expand their client base. With a clear vision in mind, I created a comprehensive ecosystem that empowered trainers to grow their businesses while providing trainees with personalized and highly effective training experiences. This project showcased my expertise in crafting user-centered solutions that deliver tangible results for both trainers and trainees.
The Problem
In today's digital age, the fitness industry is undergoing a transformative shift towards online training solutions. Trainers are seeking efficient ways to expand their reach and deliver personalized programs, while trainees desire flexibility and convenience in their fitness journey. The global Covid-19 pandemic has accelerated the need for comprehensive online training platforms, as it disrupted traditional fitness routines and highlighted the importance of remote fitness options.

Fitness instructor's problems
Trainees' problems
Seek a trainer who aligns with their goals and preferences and provides personalized training plans.
Desire the convenience and flexibility of remote training.
Wish to have access to a comprehensive video library with detailed exercise demonstrations and instructional guides.
Desire the ability to record their workout sessions and share recordings with their trainer.
User and Customer Research
The development of Smart4Fit Online Training involved a comprehensive research phase, interviews, surveys, and the specialized usability test to gain a deep understanding of the target customers and users. I had a solid foundation and platform to conduct research as we had an initial version of the app available for usability testing. This beta version allowed me to gather valuable insights into user interactions, usage patterns, pain points and challenges. Throughout the research process, we embraced an iterative approach, forming partnerships that provided invaluable assistance in understanding our users better. Both trainers and trainees.
The research methodology consisted of the following key components:
Large-Scale Survey
A survey was conducted, targeting fitness stakeholders including trainers, trainees, and fitness enthusiasts. Over 150 individuals actively participated in the survey, providing valuable insights into their preferences, needs, and expectations regarding online training.
In-Person Interviews and
Meetings
To facilitate more in-depth discussions and gather feedback, numerous in-person interviews and one-on-one meetings were organized during a fitness fair. This approach allowed for direct engagement with a diverse group of fitness subjects, providing further insights into their experiences and requirements.
Strategic partnerships
Collaborative partnerships were formed with fitness professionals and trainers who possessed expertise in online training. These partnerships enabled access to valuable insights and specific knowledge in the field. Leveraging this expertise, the development team utilized existing technology for online mentorship to create a beta version of the Smart4Fit Online Training app.

Beta Testing Phase
The Beta version of Smart4Fit Online was initially designed with simplicity in mind, focusing on essential functionalities. Trainers had the ability to record videos and easily upload them onto the platform. Basic chat functionality was also available, allowing trainers and trainees to communicate effectively. Trainees were able to connect their devices to track their performance during workouts. The Beta version provided us with an opportunity to gather user feedback and assess the core functionalities of the platform before expanding and refining its capabilities.
Usability Testing Analysis
Over the course of a three-week period, more than 200 fitness trainees actively participated in the usability test. Their engagement with the app provided crucial data on user behavior, preferences, and overall app engagement. This data served as a foundation for refining and enhancing the user experience.

Post-Testing Interview
Following the testing phase, further interviews were conducted with trainers and their clients, gathering feedback and insights to further refine the understanding of user requirements and expectations. Based on the findings from these interviews and the insights gained throughout the whole research process, including previous research phases, I was able to create a comprehensive customer/user journey maps that accurately represents the needs, goals, and pain points of our target audience.

Customer Journey Map
Research Insights and Outcomes
The culmination of the research process generated valuable insights and outcomes, including:
During the beta testing phase, I utilized a Usability Journey Map to gain insights into user behavior(both trainer and trainee), pain points, and needs.
Identification of key features essential for the Smart4Fit Online Training module
Creation of four user personas, comprising two personas for fitness trainers and two for fitness trainees.
Exploration of how the Smart4Fit data system could be leveraged to provide significant value for customers and users, enhancing their overall experience and enabling data-driven decision-making.
The research insights and outcomes formed the foundation for the subsequent development of the Smart4Fit Online Training solution.

Key features
Access a vast library of exercises, workout segments, and complete workouts for easy program customization.
Track clients' workout activity and progress, enabling trainers to provide personalized support and guidance.
Create and manage training programs and schedules for individual clients, ensuring organized and structured training sessions.
User-friendly interface that includes preview detailed exercise descriptions, real-time timers and instructions
User Personas
Organized
Analytical Approach
Social
Monika
A professional fitness mentor with several years of experience. She stays up-to-date with modern trends in the fitness industry and values the opportunity to provide further guidance to her clients, including nutrition advice, supplement recommendations, and mentorship.
personalization
reports
nutrition
Provide holistic service covering nutrition and mentorship.
Tailor training plans to meet the unique needs and objectives of clients.
Foster productive discussions with clients, accurately gauging their progress and feedback.
Prefers concise insights over interpreting large amounts of data.
Maintain a balance between client volume and quality of service.
Requires efficient communication channels for comprehensive client feedback.
Petar
A self-disciplined tech lead and manager in an IT company. He values convenience and being well-prepared in his training. With a passion for fitness and an open-minded personality, he actively seeks ways to enhance his performance and well-being.
self-discipline
tech-sevy
dedicated
Goals and needs
Flexible workout options that accommodate his schedule, whether he's at home or on a business trip.
Access to the latest advancements and insights to continuously enhance his performance.
Discover new tools and technologies that can optimize his lifestyle and well-being.
Pain points
Difficulty adjusting to different schedules and environments when traveling.
Unplanned and unsystematic processes without methodology make him anxious.
Prefers being well-prepared and familiar with training plans to avoid re-watching exercises and tasks.
Constinency
Fitness knowledge
Social
Organized
Analytical Approach
Social
David
Experienced and charismatic fitness trainer who is adapting to the industry's shift towards online training. He is motivated to help clients achieve their fitness goals through engaging workouts and is eager to leverage digital platforms and technology to expand his business and reach a wider audience.
motivational
energy
engagement
To build community among clients, creating connections, support, and a shared sense of accomplishment.
Scale the business and expand the client base while maintaining an effective training style.
Comprehensive reports on client activity and consistency.
Prefers concise insights over interpreting large amounts of data.
Maintain a balance between client volume and quality of service.
Requires efficient communication channels for comprehensive client feedback.
Mia
29-year-old marketing professional who aspires to be a key account manager. She enjoys Italian food and fitness, although she sometimes struggles with consistency in her training. While she considers fitness trackers and smartwatches to be non-essential items, she would like to win one in a giveaway.
sociable
active
versalite
Goals and needs
Access a variety of workouts for diverse and engaging routines.
Community to connect with others, share progress, and take part in challenges.
Fitness tracking features to monitor progress, set goals, and celebrate milestones.
Guidance and support to address self-discipline challenges and maintain consistency.
Pain points
Struggles with maintaining consistency and occasionally procrastinates during workouts.
Prefers the privacy and convenience of online training over traditional gym settings.
Limited budget for expensive smartwatches or fitness trackers.
Constinency
Fitness knowledge
Social
Empathy Maps
Empathy maps reflect the four user personas I have developed for the Smart4Fit Online Training . They provide insights into their goals, frustrations, and motivations, guiding me in designing a user-centered training platform. With empathy maps as my guide, I can deliver a personalized and engaging fitness training experience.
Card Sorting and Flows
In the Smart4Fit Online Training case study, I explore the vital role of Card Sorting and User/Task Flows in crafting a seamless user experience. Through the lens of trainers and trainees, I showcase a thoughtfully designed web dashboard app that empowers fitness professionals to effortlessly manage training content and users. Additionally, I unravel the intuitive information architecture and task flow for trainees, allowing them to seamlessly begin their workouts using the mobile app, whether with or without a fitness tracker. This engaging journey highlights my meticulous attention to detail and user-centric approach in creating a smooth and intuitive fitness training experience.
User Flow - Trainer's Dashboard Web App

Task Flow - Create new workout

User Flow - Trainees’ mobile app

Task Flow - Start and complete the workout

Design
In this section of the case study, I present the design phase of Smart4Fit Online Training, focusing on the Web Admin Dashboard (trainer) and Trainee Mobile App. Through mockups, i present two critical task flows: workout creation for trainers and workout execution for trainees. These mockups are guided by key design principles, which serve as the foundation for crafting an exceptional user experience.

Design Principles
Some of the design principles:
Use the Right Panel for creating and modifying content in the web dashboard
Utilize bottom sheets for mobile interactions
Follow an 18-column layout grid for the web dashboard and a 6-column grid for mobile
Minimize the use of pop modals whenever possible
Utilize split menu buttons providing many options for users
Implement accordion elements for improved navigation and content organization in the mobile app.
Opt for chips, pills, and smart defaults over large dropdown menus
Enable the creation of segments, groups, phases, or exercises in one user flow
Embrace lined icons as a design element
Emphasize the importance of empty states to guide users and provide meaningful interactions even when data is not available.
Styleguide
Typography
Web dashboard
TT Hoves
TT Hoves
TT Hoves
TT Hoves
Mobile app
SF Pro
SF Pro
SF Pro
SF Pro
Colors
Primary
Secondary
Third
Shadows
Oh, this is how I look when you scroll over me.
At least you know...
Layout
18 columns grid
Low-Fidelity and Wireframing

Start and execution of workout

High-Fidelity Mockups

Web Dashboard

Mobile App
Home Page
This mobile app was created to enhance your app’s user experience by creating dynamic image galleries with smooth detail views and transitions.
Workout preview
Get a comprehensive overview of your entire workout, including exercise details, descriptions, and instructions for each phase. Stay organized and prepared for each segment of your workout.
Wearables connection
Easily check the connection of your fitness tracker wearables for accurate heart rate and fitness data. Quickly reconnect or add new sensors through a convenient bottom sheet.
Exercise demo
Access video demonstrations and detailed descriptions for specific exercises. Gain confidence in your form and technique by exploring exercise demos within the workout preview screen.
Real-time Performing
Stay engaged and motivated during your workout with real-time feedback. Experience dedicated screens for active exercise phases and resting intervals, keeping you on track and focused.
Post-Workout Report
Dive into insightful post-workout analysis. Explore overall performance stats and drill down into specific exercise details to see how you executed each task.
Conclusions
Through rigorous testing and data analysis, the concept of Mental Toughness emerged as a natural progression in the evolution of Smart4Fit Online Training. By leveraging user interactions and activity data, we gained valuable insights that led us to the realization that the next phase of development should focus on integrating a reporting service that incorporates the principles of Mental Toughness. This strategic decision will enable us to provide users with comprehensive reports, empowering them to assess their progress, identify areas for improvement, and cultivate mental resilience. By embracing this concept and creating a dedicated platform for Mental Toughness, Smart4Fit continues to evolve and deliver a transformative fitness experience that goes beyond physical training, fostering personal growth and empowering users to unleash their full potential.
QUICK LINKS
SOCIAL