Hochschule für Gestaltung
7.Semester, 2025
Team: Linda Fesseler, Merlin Seeling, Katrin Baierl
In everyday school life, the potential of many digital media tools remains largely unused. Often, worksheets are simply replaced by PDFs. At the same time, the heterogeneity of learning levels in the classroom poses major challenges for teachers. In biology lessons, understanding complex processes is also required, which is made difficult by gaps in prior knowledge or a lack of visual media. There is therefore a need for adaptive learning formats and interactive charts that enable individualized learning and reduce the workload for teachers.
This situation gave rise to “adu – adaptive education”: a digital learning system with exercises for 7th grade biology lessons. The application combines clear visualizations, interactive elements, animated processes, and targeted feedback. Exercises with different levels of support enable students to work independently and according to their respective learning levels. The concept has a modular structure and can be transferred to other science subject.
CONCEPT
The concept focused on the requirement to provide interactive task formats that work at different levels of difficulty and offer a user interface that is as intuitive as possible.
LEARNING MODES
In order to accommodate the different levels of prior knowledge
and learning progress among students, another key requirement was to offer tasks at several levels of support. This was implemented through adaptive learning modes that functionally overlay the same task structure and differentiate between guided, accompanied, and independent work.
However, this adaptation also had to take into account how,
despite the adapted tasks, it could be ensured that all learners would spend approximately the same amount of time on the lesson in order to integrate it meaningfully into the teaching process. To this end, in addition to the tasks, the instructional videos were also scheduled before the exercises in each lesson. An optional additional task was also planned for learners who complete the tasks more quickly than others
HINT SYSTEM
The general help system was created to clearly distinguish between the different modes and at the same time offer all learners a low-threshold level of support. This led to the development of a fixed help symbol that is displayed in the upper right corner of each task.
The symbol is a gray question mark by default and offers a three-level hint system. The first two levels contain short, text-based hints, while the third level adds a visual representation to the support in order to illustrate more complex relationships. If, after several failed attempts, the system considers assistance to be useful, the question mark changes to the info color yellow. This ensures that learners are made aware of the available help options in a targeted manner.
FEEDBACK SYSTEM
In feedback mode, the function of the icon is adjusted.
When viewing the results later, a red exclamation mark replaces the question mark to explicitly point out mistakes made and offer detailed explanations. The adjustment of the color scheme and the icon illustrates the change from a help function to a clear error message after completing the task.
If this help is accepted, another tooltip opens, naming the type of error in the headline, for example, “typo” or “incorrect position,” and providing a brief explanation in the lower section. This step is optional and can be skipped.
A two-stage feedback system was developed to provide clear, motivating feedback tailored to the respective learning mode. The aim is to provide immediate guidance and to make the correctness of the content visually understandable.
The first level of feedback provides direct feedback on user interactions: Correctly completed fields are marked in green and supplemented with a check mark icon, while incorrect entries appear in orange with an X symbol. Depending on the selected mode, this occurs either after each editing step (in guided mode) or only after completion of the entire task in guided and independent modes.
The second level provides animated, content-related feedback: as soon as a solution found in an interaction task is factually correct, the corresponding element is moved to the correct final position with a targeted movement. If errors remain, no movement occurs, thus implicitly indicating the need for correction.
This combination of color coding and animated response not only enables immediate understanding, but also supports attentive learning through visual reinforcement. Compared to analog textbooks in particular, animated feedback represents added didactic value, as it makes connections visible and complex content more tangible.
ANIMATION
To convey complex processes in a more visually understandable and dynamic way, animations are specifically integrated into videos and exercises. There is also a zoom effect that runs through the blood circulation at all micro and macro levels.
The task on blood circulation aims to establish a link between learning content and task completion through interactive, indirect control of animations using correct user input. This creates not only a task scenario, but also a visual communication level. This approach not only promotes active engagement with the topic, but also a situational understanding of the processes in the small and large circulatory systems.
LOGO AND CHARACTER DESIGN
The name “adu” was formed from the words adaptive and education.
The dot behind the word was designed as a stylized buddy flower. However, it was deliberately left without eyes in order to merely hint at the figure and keep the logo clear and minimalistic, making it easier to scale. The same font that is already used in the interface was used for the typography: Monument Grotesk. This ensures that the logo is seamlessly integrated into the overall look of the app.
To give the app a clear, recognizable look, a companion character was developed. It appears as a stylized flower in the app's purple accent color and is composed of simple, pill-shaped elements. The large, shiny eyes convey a friendly and approachable impression that visibly lightens up the dark interface.
He motivates learners and helps them find their way around. After successfully completing exercises, he appears briefly, praises their progress, and encourages them to continue working.