VocabulAR


Eine AR-gestützte Vokabellern-App, die interaktives Lernen jederzeit und überall möglich macht.

ROLE

UX/UI-Designer

TOOLS

Figma, Blender, Reality Composer

DURATION

Jun 2024–Okt 2024

Background

„VocabulAR“ entstand im Rahmen meiner Bachelorarbeit, die sich mit dem Einsatz von Augmented Reality im E-Learning beschäftigt. Zur Entwicklung einer nutzerfreundlichen App wurde der Design-Thinking-Prozess durchlaufen, wobei in jeder Phase unterschiedliche Methoden angewendet wurden, um die App gezielt an den Bedürfnissen der Nutzer auszurichten.

Project Goal

Das Ziel war die Entwicklung einer Vokabellern-App, die Augmented Reality (AR) nutzt, um den Fremdsprachenerwerb zu unterstützen. Der Fokus lag dabei auf der Konzeption und dem Design der App, daher wurde das Lernen in AR nur simuliert.

Empathize

Persona

Um den Fokus auf die Nutzer während des gesamten Design-Prozesses nicht zu verlieren, wurden die Personas Lisa Eichmann (Schülerin) und Nina Fink (Studentin) entwickelt. Sie repräsentieren die zentralen Bedürfnisse und Anforderungen der Hauptzielgruppe von „VocabulAR“.

User Scenario

Im nächsten Schritt wurden Nutzerszenarien für die beiden Personas entwickelt, die deren Interaktionen mit der Lernapp veranschaulichen.

User Scenario 1

Lisa ist gerade von der Schule heimgekommen und da sie bald einen Englischtest schreibt, muss sie dafür noch in ihrer Vokabellernapp lernen. In der App hat sie bereits eine eigene Lektion „Englisch Test“ für ihren Test erstellt. Da sie jedoch noch nicht alle Vokabeln eingetragen hat, tippt sie in der App auf das Kamerasymbol und scannt damit die restlichen Vokabeln ein. Diese wurden nun automatisch und vollständig zu ihrer Lektion hinzugefügt.

Da Lisa keine Lust hat, allein zu lernen, teilt sie die Lektion mit ihrer Freundin Lynn über den Share-Button und lädt sie ein, mit ihr gemeinsam zu lernen. Da Lisa Lynn in ihrer Freundesliste innerhalb der App stehen hat, kann diese sehen, dass Lynn ihre Einladung angenommen hat und ebenfalls die Lektion „Englisch Test“ lernt. Durch das zeitgleiche Lernen sammelt Nina mehr Punkte und Gems und kann damit gesperrte Lektionen freischalten und erzielt somit einen höheren Rang in der Rangliste.

Da Lisa bald nach Frankreich zu einem Schüleraustausch geht, möchte sie noch ein paar neue Französisch-Begriffe in ihrer Umgebung lernen. Dazu tippt sie in der Tab-Bar auf das AR-Symbol. Da sie gerne liest und wissen möchte, was Buch auf Französisch heißt, läuft sie zu ihrem Bücherregal und hält die Smartphone-Kamera auf ihr Lieblingsbuch. Die App hat erkannt, dass es sich um ein Buch handelt und zeigt die passende Übersetzung darüber an. Da sie auch die Aussprache hören möchte, tippt sie auf das Lautsprechersymbol neben der Übersetzung. Sogar der Buchtitel wurde erkannt und kann übersetzt werden.

Damit Lisa die neuen Wörter aus ihrer Umgebung jederzeit wiederholen kann, wurden diese automatisch mit Bild in einer Lektion gesammelt gespeichert.

User Scenario 2

Nina möchte für ihren Urlaub in Spanien die Landessprache von Grund auf lernen. Da sie die meiste Zeit an der Universität verbringt, möchte sie die kurzen Pausen zwischen den Vorlesungen nutzen, um Spanisch zu lernen. Über Instagram ist sie auf die App „VocabulAR“ gestoßen.

Nachdem sie in der App die Sprache Spanisch und ihr Sprachniveau ausgewählt hat, legt sie ihr Profil an. Anschließend entscheidet sie sich für eine 14-tägige Testversion, um den vollen Umfang der App zu testen. Der passende Anfängerkurs wurde bereits für sie ausgewählt. Auf dem Homescreen tippt sie auf den Kurs und findet eine Übersicht an mehreren kurzen Lektionen. Da sie Anfängerin ist, wählt sie die erste Lektion aus.

Die erste Lektion enthält verschiedene Begriffe und Sätze zum Thema „Begrüßung“ in Form von Karteikarten. Da sie sich die Aussprache anhören möchte, tippt sie auf das Lautsprechersymbol hinter der Vokabel. Nachdem sie die kurze Lektion durchgegangen ist, gibt es am Ende einen kleinen Test zur Überprüfung. Dabei kann sie auswählen, was getestet werden soll: die Aussprache, die Rechtschreibung, das Hörverstehen. Sie entscheidet sich für einen Mix aus Allem.

Nachdem sie den Test erfolgreich abgeschlossen hat, möchte sie sich auch noch die passende Grammatik zur Lektion anschauen. Dazu tippt sie innerhalb der Lektion auf „Grammatik üben“. Dort findet sie eine Übersicht mit den gelernten Verben als Konjunktion mit passender Erklärung. Diese können ebenfalls in Form eines Tests überprüft werden.

Da sie Spanisch so schnell wie möglich lernen möchte, aktiviert sie in den Einstellungen die Push-Benachrichtigungen und wählt ihr tägliches Lernziel aus. Nun wird sie täglich ans Lernen erinnert und bleibt motiviert.

Needs Cards

Für eine optimale User Experience ist ein nutzer- und bedürfnisorientierter Ansatz essenziell. In diesem Zusammenhang wurden die drei wichtigsten menschlichen psychologischen Bedürfnisse bestimmt, welche die Bedürfnisse der Personas Nina und Lisa am besten repräsentieren: Gemeinschaft, Kompetenz und Stimulation.

Kompetenz

Die App hilft dabei, die Herausforderung, eine neue Sprache zu lernen oder seine Sprachfähigkeiten auszubauen, zu meistern.

Gemeinschaft

Die App bietet die Möglichkeit, gemeinsam mit anderen zu lernen und Ziele zu erreichen. Dadurch soll eine Zugehörigkeit zu anderen Lernenden entstehen.

Stimulation

Durch den Einsatz von Augmented Reality wird das Vokabellernen zu einer neuen, abwechslungsreichen und spielerischen Erfahrung.

Define

Problem Statements

Nachdem die Zielgruppe und dessen Bedürfnisse definiert waren, wurden im nächsten Schritt mögliche Nutzerprobleme und passende Lösungsansätze generiert, welche als Grundlage für erste Skizzen dienten. Hierfür wurde die „How Might We“-Methode verwendet. Jedes Nutzerproblem wird dabei als Frage mit den anfänglichen Worten „How might we“, zu Deutsch „Wie können wir“, formuliert.

Wie können wirLösungsansatz
Wie können wir die App so gestalten, damit der Nutzer Spaß beim Lernen hat?Die Nutzung von AR soll dem Nutzer einen neuen und interessanten Lernansatz aufzeigen. Durch das Verdienen von Punkten und Gems soll das Lernen mehr Spaß bringen.
Wie können wir den Lernprozess gestalten, damit der Nutzer die Motivation nicht verliert?Es sollte die Möglichkeit geben, mit anderen Nutzern/Freunden zusammen zulernen, um sich gegenseitig zu motivieren.
Wie können wir die App einfach und übersichtlich gestalten, damit der Nutzer sich schnell zurechtfindet?Die einzelnen Inhalte sollten weder zu viel noch zu wenig Text und Bilder enthalten. Das Design der App sollte dabei klar und einheitlich erkennbar sein.
Wie können wir ein gemeinsames Lernerlebnis schaffen, um ein Gemeinschaftsgefühl zu anderen Nutzern aufzubauen?Über die App kann man Freunde hinzufügen und mit ihnen Vokabellektionen teilen, was als Einladung zum Lernen dient. Ob ein Freund zur gleichen Zeit lernt, kann der Nutzer innerhalb der App sehen. Lernen zwei Freunde zeitgleich in derselben Lektion, verdienen diese mehr Punkte und Gems.
Wie können wir dem Nutzer helfen, sich in fremdsprachigen Ländern zurechtzufinden?Mit Hilfe der Echtzeit-Objekterkennung kann sich der Nutzer über die Kamera Übersetzungen von Objekten oder Texten in der jeweiligen Landessprache anzeigen lassen. Zudem kann über die Spracheingabe das Gesprochene direkt übersetzt werden.
Wie können wir dem Nutzer helfen, Sprachbarrieren zu überwinden?Nutzer können sich einen Sprachbuddy über die App suchen und so gemeinsam über den Chat oder per Sprachnachricht die jeweilige Sprache gemeinsam lernen.
Wie schaffen wir ein faires Preis-Leistungs-Verhältnis, das für alle Nutzer zugänglich ist?Damit die App zu Beginn nicht gleich wieder deinstalliert wird, soll eine 14-tägige Testversion den Nutzern helfen, die App in vollem Umfang testen zu können. Des Weiteren soll es Monats- und Jahresabos als Option geben, die preislich angemessen wie attraktiv sind.

Feature list

Auf Basis der zuvor entwickelten Lösungsansätze wurden anschließend folgende Ideen für mögliche Funktionen der Vokabellern-App erarbeitet.

  • Objekte in der Umgebung mit Hilfe der Echtzeit-Objekterkennung übersetzen lassen und als Vokabeln lernen
  • Auswahl an verschiedenen Sprachen
  • Lerneinheiten zu unterschiedlichen Themen mit abschließendem Test
  • Vokabellernen mit und ohne AR
  • Import eigener Vokabeln
  • Vokabellernen nach Lernmethode
  • Teilen von Lektionen mit Freunden
  • Gemeinsames Vokabellernen
    • Punkte und Gems verdienen mit Ranglisten unter Freunden
    • Gems können eingelöst werden, um Lektionen freizuschalten
  • Dashboard mit Lernfortschritt
  • Internationale Rangliste/Freundesrangliste innerhalb der Lektionen nach Punkten
  • Profil

Ideate

Sketches

Nachdem eine Liste an möglichen Funktionen für „VocabulAR“ angefertigt war, wurden erste Funktionen in Form von einfachen Skizzen auf dem iPad digital umgesetzt.

Lernoptionen in AR

Lernen ohne AR

Profil-Übersicht und die Funktion „Mit Freunden lernen“

Übersicht über den Lektionen-Screen und die Lektionen-Suche

Lernoptionen in AR

Lernen ohne AR

Profil-Übersicht und die Funktion „Mit Freunden lernen“

Übersicht über den Lektionen-Screen und die Lektionen-Suche

Lernoptionen in AR

Lernen ohne AR

Profil-Übersicht und die Funktion „Mit Freunden lernen“

Übersicht über den Lektionen-Screen und die Lektionen-Suche

Lo-Fi Wireframes

Nachdem erste grobe Skizzen der Screens erstellt wurden, fand die Ausarbeitung dieser Screens in Form eines Low-Fidelity-Prototyps statt. Die hierfür genutzten 3D-Objekte stammen von der Plattform „Sketchfab“.

Prototype

Visual Look & Feel

Um eine Mischung aus Spaß und Übersichtlichkeit beim Lernen zu gewährleisten, wurden gezielt Farben eingesetzt. Überschriften und Fließtexte sind in einem sehr dunklen Grau gehalten, Standard-Icons und die Tab-Bar in warmen Brauntönen. Für Buttons wurde Pastellorange gewählt, während besondere Icons, etwa für Gems oder die Lernstatistik, durch bunte Farben hervorgehoben werden.

Damit sich der Inhalt vom Hintergrund abhebt, wurde zu Containern mit abgerundeten Ecken in Weiß gegriffen. Um eine gute Lesbarkeit auf dem Smartphone zu gewährleisten, wurde die Schrift „Inter“ gewählt.

Color Palette

Typography

Icons

Buttons

Logo

Hi-Fi Prototype

Hier gehts zum vollständigen klickbaren Prototyp.