So entstand die innovative Mathe-Lernplattform Struggly

Als ihre Tochter 2019 in die Schule kam, war Alina Schlaier, Design Director bei denkwerk in Köln, ent­täuscht: Sie hasse Rechnen, ließ die Erstklässlerin ihre Mutter wissen. Entsprechend waren ihre No­ten. Schlaier, die selbst Mathematik immer geliebt hatte, begann, nach innovativen Methoden zu suchen, mit denen sie Greta Nachhilfe geben und helfen konnte, wieder Spaß am Rechnen zu haben.

Die Designerin stieß auf die Bücher von Dr. Jo Boaler, Professorin für Mathematikdidaktik an der Stanford Graduate School of Education. Zentral für Boalers Lernkonzept sind Erkenntnisse aus der Neuroscience und der Glaube an ein sogenanntes Growth Mindset. Demnach sind Intelligenz und kognitive Fähigkeiten nicht festgelegt und begrenzt, sondern ausbaubar. »Die kreativen Aufgaben, die Jo Boaler und ihr Forschungsteam daraus ableiteten, faszinierten mich«, so Schlaier. »Allerdings sind ihre Bücher für Lehrer:innen konzipiert, und ich musste mich jedes Mal etwa eine Stunde vorbereiten, wenn ich mit mei­ner Tochter üben wollte.« So entstand die Idee, Jo Boalers Lernmethoden – leicht zugänglich und direkt anwendbar – in eine digitale Plattform zu übertragen. Etwas, das sicherlich vielen Kindern und El­tern zugutekommen würde, und ein Projekt, bei dem Alina Schlaier mit ihrer langjährigen Expertise als Designerin einen wichtigen Beitrag leisten könnte.

PROJEKT Entwicklung und Design der Mathematik-Lernplattform Struggly
START-UP Boggl Inc., Austin, Texas, gegründet von Alina Schlaier und Jo Boaler
DESIGN UND DEVELOPMENT Alina Schlaier mit einem Team von denkwerk, Köln: Florian Schimmer (Visual Design), Christoph Faschian und Samuel Weiß (UX Design), Anne Pellenz (Design), Peggy Moeller (Design und Illustration) und den Developern Björn Münker und Daniel Döbertin von Boggl Inc.
TECHNIK Design: Adobe Illustrator, Figma, GarageBand, MIDI-Keyboard, Epidemic Sound; Kollaboration: Miro, Confluence und Jira; Development: TypeScript, Node.js, Vue.js, Nuxt.js, GSAP, Google Firebase
ZEITRAUM Januar 2020 (erste Idee) bis September 2022 (Launch von Struggly)

Gründung einer eigenen Firma

Schon mit der ersten Anfrage hatte sie Glück: Die Wissenschaftlerin reagierte binnen einer Stunde und mit viel Interesse auf die Mail, in der Alina Schlaier ihre Idee skizzierte. Als Referenz hatte sie ein Pro-bono-Projekt für die Deutsche Synästhesie-Gesellschaft angehängt, das Jo Boaler gefiel (siehe PAGE 01.19, Seite 18 ff.). »Ich hatte noch nie mit einer Designerin zusammengearbeitet, also war ich gespannt, was daraus entstehen könn­te«, so Jo Boaler. Das war im Januar 2020, ein Jahr später gründeten die beiden Boggl Inc., die Firma, in der dann die Plattform Struggly entstand.

Als Investoren mit dabei sind Alina Schlaiers Ehemann, denkwerk-Geschäftsführer Jochen Schlaier, Marco Zingler, ebenfalls Gesellschafter bei denkwerk, sowie Christian von Reventlow, ehemals CTO bei der Telekom. »Die Idee, den EdTech-Markt für Mathematik zusammen mit einer ›Influencerin‹ wie Jo Boaler zu verändern, hat schnell überzeugt«, berichtet Alina Schlaier. »Alle inklusive Jo selbst haben ihr privates Geld investiert.« Schlaier stellte zwei Entwick­ler bei Boggl Inc. an, die sie quasi von denkwerk abwarb. Ei­ner der beiden ist Björn Münker: »Die Start-up-Cha­rakteristik und der persönliche Antrieb von Alina und Jo haben mich gereizt«, erklärt der Frontend Deve­lo­per seine Entscheidung.

Learnings und Inspiration aus dem Gaming

Struggly sollte eine Plattform werden, auf der Kinder im Grundschulalter Mathe lernen können und El­tern mit Tipps unterstützt werden. Das Herzstück sind kreative Aufgaben, in denen es zum Beispiel da­rum geht, unterschiedliche Rechenwege auszuprobieren oder mit Mengen zu hantieren. Dabei gibt es kein richtig oder falsch, vielmehr sollen die Aufgaben das explorative Denken schulen: Bei Struggly werden Kinder dafür belohnt, dass sie vermeintliche Fehler machen, etwa indem sie Punkte für verschiedene Lösungswege sammeln.

Aufgebaut ist die Plattform nach Leveln – ein Mechanismus aus dem Gaming, der die Kinder mo­ti­vie­­­ren soll, weiterzumachen. Zum Projektstart fand ein Work­shop mit Celia Hodent statt, promovierte Kogni­tions­­psychologin, Game UX Consultant und ehe­mals zuständig für UX- und Behavioural Design bei »Fortnite«. Hier lernte das Team, was Kinder in einem Com­pu­terspiel 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 Be­lohnungen eher süchtig machen, wenn sie zufällig vergeben werden, und weniger, wenn sie in ei­nem logischen Zusammenhang mit der erbrachten Leis­tung stehen. Ent­sprechend 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 Ga­ming-Thema lange diskutiert«, berichtet UX Desig­ner 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 Pro­tagonis­ten, 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 Recht­eck, 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 Ele­mente in knal­ligen Farben mit schwarzen, comic­ar­­tigen Umrandungen. Passend dazu wählten die De­­signe­rin­nen 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 Kontu­ren 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, des­to 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 Schrif­ten 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 Besonde­res 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 Program­mierung 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 Spiel­stä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 Front­end. Hierfür kamen die Frameworks Prisma und Nest.js zum Einsatz.

Bei der Entscheidung, Struggly als Browseranwen­dung zu bauen, spielten zum einen Set-up- und Main­tenance-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 ve­rifiziert 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 regist­riert. Auch dank der Reichweite von Jo Boaler, die üb­rigens 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.

PDF-Download: PAGE 01.2023

Produkt-Details anzeigen

Excel Yourself! Design & Beratung ++ Making-of: Innovative Mathe-Lernplattform ++ Botanical Branding ++ ENGLISH SPECIAL Studio Safar ++ Trend: Übersinnliches ++ Corporate Font BMWTypeNext ++ Zoom-Illustrationen: Tools & Tipps ++ Variable Fonts in der Praxis

9,90 €

AGB