Sailing Application

  • Lara Bednarik

In the winter semester 2022/23, 6 students of the HdM (Hochschule der Medien) in Stuttgart developed a Sailing Application for the digital learning platform Schule 4.0, in cooperation with the PH Weingarten. The Sailing Application is a web-based interactive game that provides an easy-to-use learning experience for young students to learn how to sail.

Why do we need a Sailing Application?

Most schools in Germany are very hesitant when it comes to implementing digital media in the teaching and learning process. But there are some topics that are very difficult to explain without any form of digital visualization or student interaction. Sailing is one of them. Most schools can’t afford organizing a trip to a lake and renting a sailing boat plus an expert, who can teach the students how to sail. So how can students learn about sailing then? Previously, the only option was to explain it verbally or show them a video. However, the attention span of young children is usually not long enough to sit through a dry lesson if they aren’t interested in it in the first place. A better option would be one that involves all childrens’ favorite activity - playing games.

That’s where the Schule 4.0 Sailing Application comes into action. Its key functionality is a simplified sailing boat that has two controllable parameters: the sail and the rudder. Both have an impact on the boat’s position and speed. Students get to experiment with the different parameters, learn how to work with the wind and how to perform various sailing maneuvers to reach a goal.

Sailing Application

The app features three levels with rising difficulties and different wind scenarios, so the students can extend their knowledge. In the first level, the wind is coming from behind the boat, which makes it easy to reach the goal which is positioned in front of the boat. In the second level, the wind comes from the side, making it slightly more difficult. Lastly, in the third level there’s headwind, and the player has to do a sailing maneuver called ‘Kreuzen’ to reach the goal.

By gamification of the topic and enabling interaction, this learning approach catches the students’ interest and focus in a way theoretical approaches could never do.

User-centered Design Process

Over the course of one semester, the Schule 4.0 team consisting of Anton Richter, Lara Bednarik, Marcel Wohlfahrt, Mira Dreher, Nicolas Lerecouvreux and Yannik Simon developed a functioning prototype in a user-centered design and development process.

The prototype was built to accommodate the needs of the users on both sides - teachers and students. To learn more about teachers’ experience using the product, the UI/UX-Team, Lara and Mira, conducted and evaluated multiple user tests and visited an elementary school teacher in his classroom to conduct an expert interview about his view on the application. Additionally, an online questionnaire was sent to the user test participants to update them on the current status of the prototype and to get more feedback. The results were included in the design and development process.


The implementation as a three.js web application was challenging. The Dev team, consisting of Anton, Marcel, Nicolas and Yannik, had to learn about wind sailing physics to be able to build a simplified but still realistic sailing environment. The 3D-Modelling team, Nicolas and Yannik, created an interactive boat model and a nice water animation.

As a web application, the product is available on multiple devices and can be used at school and at home, therefore creating a flexible learning environment. Teachers can easily incorporate it in their lesson planning. To make the teaching experience even more convenient, a teacher-guide was created in cooperation with the PH Weingarten. This guide explains to teachers how to use the app and provides examples on how to incorporate the app in the lesson, including worksheets for students.


The next steps are to further evaluate the application with more users and if possible conduct a lesson with primary students, to learn more about how young children would use the app and to make the learning experience as intuitive as possible.

This project was an enriching experience for our whole team and hopefully it inspires more teachers to use practical teaching methods and allows students to learn by doing.

Team Project Schule 4.0 - WS22

Computer science students from the Hochschule der Medien Stuttgart:

  • Lara Bednarik
  • Marcel Wohlfahrt
  • Nicolas Lerecouvreux
  • Yannik Simon
  • Mira Dreher
  • Anton Richter

Cooperation partner from the Pädagogische Hochschule Weingarten:

  • Dr. Martin Binder, professor for technical education, contact

And also many thanks to Prof. Dr. Ansgar Gerlicher (website) from the Hochschule der Medien.