More than just a training plan
Lauftraining.com is a German company that helps people get fit and healthy. Their team consists of coaches, nutrition specialists, and real fans of the healthy lifestyle. For example, the team set a world record in running: 180 kilometers in 12 hours.
When the company started working with BelVG, they only had a website on TYPO3. But they wanted to create a custom solution with unique features and integrate the existing blog in it.
The idea was to make a system that helps coaches plan nutrition and training schedules for their customers. Lauftraining intended to develop something different from other websites where users could track their fitness progress. The company didn’t want a solution with the same nutrition plan and training program for every person. They decided to give a personalized menu created on the basis of the user’s age, health issues, training activity and goals.
Now, besides the creation of training and nutrition plans, Lauftraining website promotes a healthy lifestyle in general. BelVG developed a website that allows users to keep track of their daily activities, progress and plan their meals.
As a result of our work the company has a custom website comfortable for both users and coaches. We developed almost all features specially for Lauftraining and used no paid third-party extensions.
The BelVG team still works closely with Lauftraining on website support and custom development.
IndustryHealth and sports
Services & notable features
- Custom website development
- Nutrition plan
- Training plan
- Flexible subscription
- Automated email notifications
- Ongoing custom development
- Integration with fitness watch
- Integration with TYPO3 blog
Integration of TYPO3 in New Magento 2 Website
Lauftraining wanted a modern online training platform that would be easy to use for everyone: customers, coaches and website admins. We suggested the Magento 2 platform as it allows the flexibility the project needed. As the customer did not want to lose all the information from the TYPO3 website, we integrated it with the new platform.
Process of TYPO3 Integration with Magento 2
We downloaded and installed the latest version of Magento and installed it on the same server with the TYPO3 website.
Data transfer and integration
We transferred the data of subscribed users and integrated the TYPO3 site with the new website.
We implemented a new modern Magento theme for Lauftraining. We still update it regularly when new functionality comes out or the client wants to improve the user experience.
Custom modules development
95% of the modules we implemented were developed specially for the Lauftraining website. That is why the technical features of the website are unique.
Nutrition and Training Plans
When the website itself was ready, our next task was to develop a system that allows generating training and nutrition plans, keeps track of users activity and progress. Lauftraining needed a website with two interfaces – for users and for coaches.
The idea was to develop a system that gathered users’ personal info, processes it and creates basic plans that coaches can edit. This approach allows creating a unique plan for every user, taking into account their health condition and goals but saving coaches’ time as they only check and edit the plan instead of creating it from scratch.
The nutrition plan is a weekly schedule of four meals a day including a snack. While creating it we had to consider the following user parameters:
- Goal – lose weight, gain weight, keep weight
- Height, weight and other body parameters
- Age and gender
- Food preferences – regular diet or vegan
- Training activity
BelVG has developed a system in which users take a questionnaire. Then, the system collects the answers, sorts them, and compiles a basic nutrition plan.
The coach sees all the information on the coach interface including the user’s questionnaire answers and a basic nutrition plan. They can examine all the information and edit the plan.
Users can manually change their goal and food preference at any time. After the changes are made the plan will adapt immediately, and the coach will be able to edit the menu.
4 Types of Meals
The BelVG team created a system in such a way, so the basic nutrition plan needed minimum changes. We divided all meals into 4 types:
Depending on the user’s personal information and training activity, the system distributes different types of meals at specific times of the day: breakfast, lunch, dinner or snack. So when the coach edits the menu, they can choose the dishes of a specific type from the dropdown list, they do not need to browse the whole list of recipes to find the required one.
Our customer wanted their users to see the menu that they had over the whole period as well as the upcoming meals. We made the system store these data and added a weekly slider to the page of the nutrition plan. Now users have the following options:
- Go back to the previous days and add their preferred dishes to Favorites
- Save recipes
- Plan shopping for the next few days
We developed a list of favorite dishes. This option allows users to add their favorite dishes to a special list. The system saves it and users can easily find their favorite recipes.
There is also an option to go to the Favorites clicking the button near the exact recipe. In this case the user will see only the favorites for this category and type of this particular dish, e.g. breakfast and power. While on the Favorites page, you can see all favorite dishes or change the type of recipes you want to see.
In order to optimize the cooking process for users, we developed the Shopping list feature. The user looks at the recipe, and can click on the missing products to add them to the shopping list in the right quantity. As users can see the menu for the upcoming days, they are allowed to create a shopping list for a week ahead. There is also a possibility to add all the products from the recipe to the shopping list in one click.
The team and our customer wanted the website to be as user-friendly as possible. That is why we came up with the idea to show users pictures of recipes and ingredients for them. We implemented a picture preview of the dish so the users could understand what their food would look like. We did the same with the ingredients on the recipe page. Every ingredient has a preview picture.
Get a Free Website Audit Example
Same as with the nutrition plan, users take a questionnaire, so the system learns more about their goals: lose weight, gain weight, learn to run, and improve the current level. Then they need to fill in the fields with more detailed information: how often the users would like to train, their health issues and days preferable for training. The system collects information, sorts it, and presents it to the coach who then creates a personalized plan.
As soon as the training plan is created, the interface with scheduled training sessions becomes available to the user. We also added 2 features:
1. A carousel of weekly events to keep track of previous and upcoming training.
2. An option to plan a training session and add it to the calendar. To do it, the users have to select the sport activity, total training time and difficulty level.
All details are available in the personal account and stay available in the future. The coach uses this information to organize future sessions and make adjustments.
The users also can evaluate the difficulty of training. There is a field with a slider where the user can choose from the proposed options. From the easiest workout (Easy) to the most difficult one (Can’t do it). All processed data is also displayed on the trainer’s interface.
Challenges and rewards are essential for those who are struggling to reach their goals. That is why the BelVG team added a Diary to the Lauftraining website. On the page a user can see:
- How many kilometres they have made while jogging
- How many hours they have exercised
- What awards they have earned
- How much they weigh
The page helps keeping track of the user’s progress and see if a client’s goal is getting closer, or the coach have to change the program.
Live Trainings and Media Library
The idea of live trainings was inspired by the lockdown. Lauftraining wanted to support their users and give them an opportunity to keep fit while at home. Live training is a stream of Vimeo video where the trainer conducts the training and subscribers can exercise together with the trainer.
When users decide to exercise with live training, they get the link with a countdown. When it comes to zero the stream begins and users can exercise. After the stream ends the users can enter the data about the training in the system, choosing one of the three buttons that appear after live training:
- Done as planned – if the user did the whole training from the beginning
- Enter manually – the users can change pre-installed data about the training if they didn’t do the whole thing
- Not done – if the training wasn’t completed at all
The users can return to the training at any time as the video transfers to the media library and they can return to this and other trainings when it is comfortable for them. In the media library users can choose this training or any other stream that was already done. The filter allows choosing training by type and coach.
In the coach interface, the coaches can see the list of their users and go to the page of a particular one to edit their training and nutrition plans. Users and coaches can see training and nutrition plans for two weeks in advance or until the day the subscription ends.
The coach sees all the information on the user’s progress – the type of training (running, swimming, cycling), the duration, the average heart rate, the distance, as well as personal evaluation of the complexity. Using the data, the coach checks the performance of the customers and adjusts the training plan.
According to the user’s questionnaire answers the system prepares a basic plan. It marks each day with a color that represents the intensity of the training:
- Blue – for the simple exercises that don’t burn a lot of calories
- Green – for the medium trainings
- Orange – for hard exercises
- Red – for the days with extreme activity, e.g. the day of the marathon
Same colors are used to mark the live training in the media library. The coach can use this basic structure to create a personalized plan. The coach can also change the level of training if needed.
Connection between Nutrition Plan and Training Plan
The intensity, frequency and type of physical activity directly affect one’s need for food. Nutrition plan is closely connected to the user’s goal, type of activity on any specific day, and fitness level. This is why our team implemented the functionality that changes a nutrition plan if something from these settings changes:
- The user joins a competition or event – at the day of the challenge the nutrition plan is special aiming to support the body.
- The user’s fitness level changes – if the user starts performing more challenging trainings, the menu becomes more nutritious
- The user changes the fitness goal – in this case the nutrition plan changes immediately.
The nutrition plan changes automatically, taking into account the user’s preferable menu (vegan/non vegan). The coach can edit the plan later.
Running Watch Integration (Polar, Garmin)
Lauftraining is a company that offers both beginners and professional athletes an opportunity to plan their diet and track training. This is why the progress tracking must be detailed. To display the training sessions more accurately, Lauftraining decided to integrate the system with running watches. They chose the Polar and Garmin running watches.
The team wanted the process of authorization and synchronization with fitness watches to be as easy as possible for users. So, when a user clicks on the “Running watch” button, they can select the provider, connect to the running watch and then confirm the synchronization of the data in the personal account of their watch company (Garmin or Polar). After that, all data from the training automatically appears in the account with the possibility of modification.
When the user is connected to the fitness watch, a green tick appears on the watch icon in the personal account. The user can cancel the synchronization at any time in the Lauftraining personal account, and the data will no longer be transferred to the system. It is also possible to cancel the sync in the watch system – Garmin, Polar. In this case Lauftraining reacts to the changes and the tick disappears from the clock symbol, which means that the data are no longer processed.
The implementation of fitness watch integration required the BelVG developers to create the WatchSync module. It ensures that data from the Garmin or Polar systems transfers to the Lauftraining system via API. The information is stored there and is available for the user at any moment.
It was a substantial piece of work as a great amount of different data comes from both systems: distance, training time, speed, type of training. All this data must have been processed and saved. There were also some differences in Polar and Garmin systems. For example, Garmin does not allow authorization of the synchronization unless there are already several Garmin users in the system. That is why we had to test the system on real users: they planned the training and we were waiting for them to end it and get necessary data.
As a result we got a smoothly working system with compiled data, that the system comfortably presents to the users.
Besides training and nutrition plans, the user’s personal account has other functionality. It includes a personal information page and chat with Lauftraining for premium users.
Automated Emails and Chat
In systems like that, it is essential to remind users of the upcoming events, changes, or when their subscription is about to expire. This is why the BelVG team implemented a feature that sends email notifications with reminders about training, subscription payment, end of subscription, competitions.
We adjusted the automated email functionality and the customer decided to add some improvements. Their idea was to implement the chat into the personal account so some categories of users can communicate with Lauftraining support managers. They also use the system to send group messages about system changes.
Flexible Subscription System
Originally we implemented the Sarp module to offer subscriptions for a certain period of time – 1, 6 or 12 months. After a brief period of time Luaftraining decided to implement a flexible system so that users can set the subscription period themselves.
We developed a custom module that allows setting any subscription period and then calculates the total cost of it. The module also gives an option to switch to another plan if the user wants it. It calculates the required payment for the selected period and sends a notification before the subscription expires.
Custom website without any paid extensions
The BelVG developers created the system from scratch and implemented featured developed specially for Lauftraining.
The system processes user data and creates nutrition and training plans that coaches can just edit instead of writing them from scratch. It allows helping more users without a large coaching staff.
Our team integrated the system with several fitness watches, creating a module that can process and analyze a significant amount of data. We also integrated an old TYPO3 blog with the system to save essential data from the previous website.