
So entstand die innovative Mathe-Lernplattform Struggly
Beim Deutschen Digital Award 2023 ausgezeichnet! Zusammen mit Stanford-Wissenschaftlerinnen hat Alina Schlaier eine Lernplattform für Kinder und Eltern entwickelt. Wir zeigen in einem Making-of, wie die App Struggly entstand, die Kindern durch gutes, spielerisches Visual und UX Design Spaß an der Mathematik vermittelt.
Aufgebaut ist die Plattform nach Leveln – ein Mechanismus aus dem Gaming, der die Kinder motivieren soll, weiterzumachen. Zum Projektstart fand ein Workshop mit Celia Hodent statt, promovierte Kognitionspsychologin, Game UX Consultant und ehemals zuständig für UX- und Behavioural Design bei »Fortnite«. Hier lernte das Team, was Kinder in einem Computerspiel triggert, aber auch, was süchtig macht. »Denn diese Gefahr wollten und konnten wir als Player im Bildungssektor natürlich nicht eingehen«, erklärt Alina Schlaier. Ein Learning war, dass Belohnungen eher süchtig machen, wenn sie zufällig vergeben werden, und weniger, wenn sie in einem logischen Zusammenhang mit der erbrachten Leistung stehen. Entsprechend erhalten die Userinnen und User bei Struggly Badges für ihre Kreativität und werden mit zusätzlichen Interface-Elementen und neuen Leveln belohnt.

»Auf der gestalterischen Ebene haben wir das Gaming-Thema lange diskutiert«, berichtet UX Designer Christoph Faschian. »Wir dachten erst, dass wir eine Metapher brauchen – eine imaginäre Welt, in der das Ganze stattfindet.« Schließlich war es aber Jo Boaler, die entschied: »Wir brauchen keine Story, wir schauen uns die Schönheit der Mathematik selbst an.« Und so gibt es in der Struggly-Welt keine Protagonisten, die die Kinder durch eine Geschichte führen – sehr wohl aber kleine sympathische Figuren, die Identifikation stiften: geometrische Formen mit einer eigenen Mimik. Diese bilden auch das Logo von Struggly: einen wackeligen Turm aus Rechteck, Dreieck und Kreis, die nach Balance suchen – die also quasi selbst »strugglen«.

App-Design jenseits gelernter Muster
Alina Schlaier hatte von Anfang an eine Vorstellung davon, wie Struggly aussehen sollte. Mit der Gestaltung beauftragte sie ihre Agentur denkwerk. In der Anfangsphase stand vor allem Desk Research auf dem Programm: Es wurden Studien aus der Pädagogik und aus dem Gaming gelesen, um herauszufinden, welche Bildsprache zum edukativen Anliegen von Struggly passt und gleichzeitig bei Kindern im Grundschulalter gut ankommt. »Wir wollten bunt sein, aber auch eine gewisse Coolness mitbringen«, erklärt Alina Schlaier. So entstanden Figuren und Elemente in knalligen Farben mit schwarzen, comicartigen Umrandungen. Passend dazu wählten die Designerinnen und Designer mit der GT Maru eine abgerundete Schrift, die für Kinder gut lesbar ist. Für kleinere Copytexte, zum Beispiel bei den Elterntipps, kommt die Google-Schrift Nunito zum Einsatz.
Die Farbpalette basiert auf dem Anspruch, von gelernten Zuweisungen wegzukommen. »Dass Rot für falsch steht und Grün für richtig, wollen wir ja gerade nicht vermitteln«, erklärt Designerin Anne Pellenz. Stattdessen ist das Struggly-Design geprägt von den acht knalligen Hauptfarben, den schwarzen Konturen und dem beigefarbenen Hintergrund. Die Seite, auf der die Kinder die Aufgaben lösen, soll einen kreativen Freiraum darstellen – eine Fläche, auf der verschiedene Drag-and-drop-Elemente verschoben werden können. Je fortgeschrittener sie werden, desto komplexer werden nicht nur die Aufgaben – zum Beispiel durch neue Rechenzeichen –, sondern auch die Fläche wird optisch voller. »Andere Anbieter arbeiten oft mit Formularfeldern, in die man etwas eintragen kann – das ist keine gute User Experience«, so Pellenz. »Schon gar nicht für Kinder.«
Designsystem: Aufgaben ins Digitale übersetzen
In Figma erstellte das Team ein Designsystem, das alle Farben, Buttons, Illus, Linien, Schatten und Schriften enthält. Neben den visuellen Elementen finden sich dort auch Sounds wie Papierrascheln oder klassische Drag-and-drop-Töne. Björn Münker hat die Sounds teils selbst mit GarageBand und MIDI-Keyboard produziert, teils stammen sie aus Soundbibliotheken wie Epidemic Sound.

Inhaltlich entwickelt werden die Aufgaben von Jo Boaler, ihrer Doktorandin Tanya LaMar sowie Beraterin und Mathematikerin Cathy Williams in Stanford. »Sie funktionieren ganz bewusst eher erst einmal analog«, erklärt Alina Schlaier. »Ich möchte die Intentionen hinter der Aufgabe verstehen und überlege mir dann, was man ihr im Digitalen Besonderes mitgeben kann, das sie noch verbessert.« Sie erstellt in Miro ein Konzept, »das meist schon ein halbes Design ist«. Einige Aufgaben können von ihr und den Entwicklern aus bestehenden Modulen des Designsystems gebaut werden, für andere braucht es neue Elemente, die dann denkwerk entwickelt. Nachdem zu Projektstart drei Workshops mit allen Beteiligten stattfanden und der Austausch sehr intensiv war, wuchs mit der Zeit die Routine. Die Designer:innen kommen noch punktuell zum Einsatz. Sie und auch die Developer haben mit den Wissenschaftlerinnen heute nicht mehr so viele Berührungspunkte.

Datenbank: Feedback in Echtzeit
Für die beiden Entwickler Daniel Döbertin und Björn Münker umfasst die Arbeit an Struggly die Programmierung der Aufgaben, aber auch noch weitere Herausforderungen. Zum Beispiel sollten die Eltern in Echtzeit über den Fortschritt ihrer Kinder informiert werden, ein Feature, das – so Schlaier – Struggly als Lernplattform einzigartig macht und auch für Co-Gründerin Jo Boaler von Anfang an sehr wichtig war. Technisch fand sich die Lösung in einer Verknüpfung mit der Entwicklungsplattform Google Firebase, die unter anderem eine Echtzeitdatenbank bereitstellt, mit der sich Daten zwischen Nutzerinnen und Nutzern synchronisieren lassen. Um Userdaten wie Spielstände speichern und laden zu können, setzten Döbertin und Münker zusätzlich eine eigene Datenbank auf und entwickelten eine API als Schnittstelle zum Frontend. Hierfür kamen die Frameworks Prisma und Nest.js zum Einsatz.

Bei der Entscheidung, Struggly als Browseranwendung zu bauen, spielten zum einen Set-up- und Maintenance-Gründe eine Rolle. Das Team wollte so zügig wie möglich an den Markt gehen und das System leicht wartbar halten. Apps müssen für jedes Update durch die entsprechenden Stores geschleust und verifiziert werden. Zudem würden zusätzliche Grundsatzentscheidungen anstehen, ob getrennt nativ für iOS und Android entwickelt oder beide Plattformen mit einer Codebasis bedient werden sollen. »Das, was wir aktuell mit Struggly anbieten, lässt sich für uns am Ende schneller mit Webtechnologien abbilden«, erläutert Daniel Döbertin. »Wir schließen nicht aus, irgendwann auch eine App zu launchen – aber das ist Zukunftsmusik.«

Am 12. September 2022 ging Struggly live, und mehr als 400 zahlende User:innen haben sich bereits registriert. Auch dank der Reichweite von Jo Boaler, die übrigens auch selbst in Erklärvideos für Eltern und Kinder auftaucht, ist der Andrang innerhalb der USA, aber auch international groß – zunächst für den US-amerikanischen Markt konzipiert, sind sämtliche Inhalte auf Englisch. Noch im Dezember soll eine Version speziell für Schulen gelauncht werden, über die Lehrer Accounts für mehrere Schüler:innen einrichten können. Struggly zeigt, wie aus einer zunächst sehr persönlichen Angelegenheit eine Plattform geworden ist, die Kindern Mathematik zugänglicher macht, Eltern und Lehrer:innen hilft und unternehmerisch skalierbar ist.
In der Schule war unsere Autorin Julia Bröder eher Team Deutsch als Team Mathe. Wer weiß, ob das mit Struggly anders gewesen wäre – die Aufgaben auszuprobieren hat ihr jedenfalls viel Spaß gemacht.
Dieser Artikel ist in PAGE 01.2023 erschienen. Die komplette Ausgabe können Sie hier runterladen.