Beatlery
Eine Sprachlern-App, die Englisch, Spanisch, Italienisch und Französisch mit eigens produzierten Songs beibringt.
- Rolle
- Product Design, UX/UI
- Jahr
- 2024-2026
- Disziplinen
- Produktkonzept, UX, UI, Interaction Design, Design System, Barrierefreiheit
- Märkte
- iOS und Android
- Aufgabe
- Eine App gestalten, in der Musik nicht Beiwerk ist, sondern der Unterricht selbst: vom ersten Song bis zur Prüfung, mit einem Motivationssystem, das Menschen über Wochen dranbleiben lässt.
Sprachen lernen mit Musik
Viele Menschen kennen Songtexte auswendig, die sie nie bewusst gelernt haben. Beatlery setzt genau dort an: Wörter, Grammatik und Hörverstehen werden in kurzen Song-Ausschnitten vermittelt, die eigens für die App geschrieben und produziert sind.
Die App läuft auf iOS und Android und unterrichtet Englisch, Spanisch, Italienisch und Französisch. Die Oberfläche selbst ist wählbar, etwa Deutsch, Englisch oder Türkisch.
Ein ruhiger Einstieg
Das Onboarding erklärt das Prinzip in wenigen Sätzen und mit den Figuren der App: keine Videos, kein Schnickschnack, nur der Song und die Zeilen, die langsam Sinn ergeben. Danach folgen App-Sprache, Name, Lernsprache und Lernziel. Ein Fortschrittsbalken zeigt jederzeit, wie weit es noch ist.
Karriere statt Kursbuch
Statt Kapitel und Units erlebt man eine Gesangskarriere. Jedes Level ist eine Bühne mit eigenem Namen und eigenem Augenzwinkern, vom Sprachnotiz-Star über Duschsänger, Karaoke Star und Hochzeitssänger bis zum Globalen Superstar.
Die Karriereseite ist die Startseite der App. Sie zeigt das aktuelle Level, den Fortschritt und die Lektionen als illustrierte Karten, getrennt nach Wortschatz, Grammatik und Hören. Sind alle Lektionen geschafft, wartet die Prüfung, die das nächste Level freischaltet.
Der Song ist die Lektion
Eine Lektion besteht aus fünf Songs, in jedem steckt eine neue Form. Das Wort leuchtet auf, sobald es gesungen wird, und lässt sich antippen, um Übersetzung und Beispiel zu sehen. Unter jeder Zeile steht auf Wunsch die deutsche Übersetzung.
Nach den Songs fasst ein Rückblick zusammen, welche Wörter man gehört hat, bevor die Übungen beginnen. Eigene Hören-Lektionen trainieren das Verstehen ganz ohne Text.
Üben und Prüfen
Für das Üben gibt es 19 Übungstypen, darunter Speed Swipe, Wortsuche, Lückentext in der Songzeile, Satz-Puzzle und Splitscreen Battle. Alle teilen sich dieselben Bausteine für Aufgabe, Antwort und Rückmeldung, damit sich jede neue Übung sofort vertraut anfühlt.
Die Prüfung am Ende eines Levels hat 25 Fragen und drei Leben. Sie schließt mit einem kurzen Dialog zwischen einer Künstlerfigur und Beatlery, den man selbst ergänzt.
Charts statt Ranglisten
Wer lernt, sammelt Punkte und landet damit in den Charts. Eine Chart-Woche läuft sieben Tage, danach steigt man auf, bleibt in seiner Liga oder steigt ab. Die Ligen folgen der Karriere-Metapher, von den Hinterhof-Openings über Kiez-Ranking, Stadt-Parade, Regional-Liga, Deutsche Charts und Internationale Charts bis zu den Beatlery Billboards.
Der Wochenabschluss ist als Chart-Showdown gestaltet: ein eigener Screen für Aufstieg, Klassenerhalt und Abstieg, jeweils mit Rückblick auf die Woche.
Ein Song nur für dich
Nach der Registrierung wird für jede Person ein eigener Song produziert. Die App zeigt den Status von der Produktion bis zur Veröffentlichung, danach läuft der Song in den Charts mit und lässt sich teilen. Ein Takt-Zähler hält die Lernserie fest, auf Wunsch auch als Widget auf dem Homescreen.
Dazu kommen Push-Kampagnen mit festen Regeln: Hauptzeit am Abend, keine Nachrichten zwischen 23 und 8 Uhr, höchstens eine zusätzliche Erinnerung pro Tag und eine Ruhephase nach jeder Reaktivierungsnachricht.
Ein System für alle Screens
Die App basiert auf einer eigenen Figma-Bibliothek nach Atomic Design: Foundations, Assets, Atoms, Molecules, Organisms, Vorlagen und eine Seite je Übungstyp. Jede Komponente bindet Farbe, Größe und Abstand an Tokens und hat eine Beschreibung mit Zweck, Einschränkungen und Hinweisen für den Screenreader.
Die Tokens liegen im Format der W3C Design Tokens vor und tragen Flutter-Namen, damit Design und Entwicklung dieselbe Sprache sprechen.
- 198
- Primitive Tokens
- 207
- Semantische Tokens in vier Modi
- 19
- Übungstypen als Komponenten
- 4
- Farbmodi: Hell, Dunkel und je eine Kontrastvariante
Barrierefreiheit von Anfang an
Bei jedem Stand der Bibliothek laufen automatische Prüfungen: Textkontrast nach WCAG in allen vier Farbmodi, Kontrast von Icons und Zuständen, Mindestgröße von Tippzielen, Darstellung mit großer Schrift, bis zu doppelt so lange Übersetzungen und Farbpaare bei Protanopie, Deuteranopie und Tritanopie. Zustände werden nie nur über Farbe vermittelt.
In der App finden sich diese Grundlagen als Einstellungen wieder: Kontrast erhöhen, große Schrift und reduzierte Bewegung folgen dem System. Hör- und Sprechübungen lassen sich pausieren, Übungen per Tastatur bedienen, und Zeitlimits können verdoppelt oder ganz abgeschaltet werden.
Was ich beigetragen habe
Seit 2024 verantworte ich Product Design und UX/UI von Beatlery: Konzept und Lernmechanik, Flows vom Onboarding bis zur Prüfung, das Motivationssystem mit Charts, eigenem Song und Benachrichtigungen, die Gestaltung aller Screens in Hell und Dunkel sowie das Design System mit Tokens, Komponenten und Barrierefreiheitsprüfungen. Die Umsetzung in Flutter begleite ich über Tickets und eine dokumentierte Komponenten-API.
Nächstes Projekt
BISON
