Header Illustration
LanguageSwitch
Portfolio
Intro

Survival Japanese

Vokabel-Lern-App als UX/UI Case Study

Eine Vokabel-App, die innerhalb von 2 Wochen entwickelt wurde. Die App hilft Touristen, die nach Japan reisen wollen, mit den wichtigsten Schl├╝ssel-Vokabeln.

Japanisch ist eine besonders schwere Sprache mit seinen zahlreichen Schriftzeichen, besonders f├╝r westliche Besucher. Diese App hat den Anspruch, den Japan-Trip zu einem entspannten und angenehmen Erlebnis zu machen.

Vorgaben & Features

  • Vokabel-App f├╝r Smartphones
  • Erstellung der UX innerhalb von 2 Wochen
  • Dokumentation, Durchf├╝hrung & Erstellung auf Englisch

Umsetzung

  • Konkurrenzanalyse
  • User Research mit User Interviews
  • Proto-Persona mit User Stories
  • User Flows & Wireframing mit Paper Protoyping
  • Usability Testing & High-Fidelity Prototyp mit Figma

Menu-IconMenu-IconInhaltsverzeichnis

Konkurrenzanalyse

AnkiDroid, WaniKani

Das Projekt habe ich mit einer Konkurrenzanalyse popul├Ąrer Vokabel-Apps begonnen und zwei davon im Detail unter die Lupe genommen.

Ziele

  • Herausfinden, was f├╝r momentane Japanisch-Lernende gut funktioniert
  • Wie popul├Ąre Lernapps ihre Benutzer dazu motivieren, mehr zu lernen
  • Ein Gef├╝hl f├╝r die Konkurrenz entwickeln

Erkenntnisse

  • Es gibt haupts├Ąchlich zwei Gruppen von Apps. Die, die man mit eigenem Content f├╝llt (Flashcard-Apps) und die, die lediglich aus vordefiniertem Content bestehen
  • Viele Apps benutzen Gamification-Elemente mit gro├čem Erfolg
  • Es gibt nicht sehr viele Apps, deren Zielgruppe Kurzzeit-Lernende oder Touristen sind

Zusammenfassung

WaniKani ist die popul├Ąrste Kanji-Lern-App, die nebenbei auch Vokabeln beibringt. Kanji (Schriftzeichen aus dem Chinesischen ├╝bernommen) sind gemeinhin bekannt als die h├Ąrteste Nuss f├╝r Japanisch-Lernende und sind daher zentral in der App. WaniKani motiviert seine Nutzer durch Gamification-Elemente, wie Level-Systeme, Review-Forecasts, Statistiken und andere motivierende Daten. Vor- und gleichzeitig Nachteil sind die vordefinierten Kanji und Vokabeln, denen man keine neuen hinzuf├╝gen kann. Daf├╝r ist die Auswahl sehr sinnig und hilft Lernenden schnell auf eigenen F├╝├čen zu stehen. Die App ist kostenpflichtig.

AnkiDroid dagegen ist die popul├Ąrste kostenlose Flashcard-App f├╝r Japanisch-Lernende. AnkiDroid funktioniert mit eigenen Decks, aber nutzt einen ├Ąhnlichen Ansatz bei Lektionen und Reviews wie WaniKani. Die UI f├╝hlt sich jedoch veraltet an und die Flashcards m├╝ssen komplett selber angelegt werden.

Weiterlesen
Screenshot 20210426 151752 com ichi2 anki
Screenshot 20210426 151408 com ichi2 anki
Screenshot 20210426 181854 com android chrome
Screenshot 20210426 181755 com android chrome

User Interviews

Generative Research

Um ein Gef├╝hl f├╝r meine Zielgruppe zu bekommen, habe ich insgesamt 5 Teilnehmende mit 7 Fragen interviewt. Durch den Zeitdruck im Kurs konnte ich leider nicht mehr Interviews f├╝hren.

Ziele

  • Ein Gef├╝hl f├╝r meine Zielgruppe bekommen
  • Ihre ├ängste und Bedenken in Bezug auf eine Japan-Reise kennen lernen
  • Herausfinden, wie viel Zeit sie investieren w├╝rden, um sich auf eine solche Reise vorzubereiten

Erkenntnisse

  • Teilnehmende wollen eine grundlegende Reisehilfe, die ihnen einfache S├Ątze beibringt
  • Einige kaufen immer noch Taschen-Reiseb├╝cher
  • Die meisten wollten mit Reiseb├╝chern ├╝bliche Phrasen nachschlagen
  • Bilder zeichnen oder zeigen wurde immer wieder als Kommunikationsl├Âsung f├╝r die Sprachbarriere genannt
  • Die meisten Teilnehmenden hatten Angst davor, durch mangelndes Kultur-Wissen einen Fauxpas zu begehen
  • Alle Teilnehmenden haben das Lernen der Alphabete als un├╝berwindbarer Hindernis gesehen

Proto-Persona

Auf Basis der User Interviews habe ich eine Proto-Persona erstellt: "Timo".

Verhalten

  • Hat keine famili├Ąren Verpflichtungen und deswegen viel Zeit & Geld zur Verf├╝gung, die er zum ausgiebigen Reisen nutzt
  • Liebt es, "Abenteuer-Urlaube" zu machen, wie wandern, klettern oder radeln durch die l├Ąndlichen Gebiete verschiedener L├Ąnder.
  • Liest keine B├╝cher, denn sie sind f├╝r "alte Menschen". Ist ├╝berzeugt, neue Technologie ist effizienter.

Bed├╝rfnisse & Ziele

  • Will aufs japanische Land reisen und mit den Einheimischen interagieren k├Ânnen, um tolle Erinnerungen zu schaffen.
  • Muss grundlegende S├Ątze und Kultur kennen, bevor er die Reise antritt

User Stories

  • As Timo, I want to be able to communicate in a basic way with Japanese residents, so that I can get around.
  • As Timo, I want to be able to handle the most common emergency situations in Japan, so that I can get help quickly.
  • As Timo, I want to be able to recall or look up common characters, so that I can get the gist of the meaning of signs.
  • As Timo, I donÔÇÖt want to offend the locals, so that I can show respect while visiting their country.
Weiterlesen
We believe that by offering ÔÇ║Japanese SurvivalÔÇ╣,
we will achieve that Timo feels more confident
with his language abilities while traveling through Japan.
— Hypothesis

User Flows

Vor dem Erstellen der Wireframe-Skizzen, habe ich User Flows f├╝r die h├Ąufigsten T├Ątigkeiten angelegt, die ein Benutzender meiner App ausf├╝hren wird. Hier ist mein erster User Flow, den ich vor dem Erstellen der Wireframes angelegt habe.

Fig Jam User Flow 2

Paper Prototyping

Auf Basis der User Flows habe ich anschlie├čend ein grobes erstes Set an Wireframes auf Papier skizziert. Die Skizzen habe ich dann in Marvel zu einem interaktiven Prototypen zusammengestellt, der f├╝r die erste Runde Usability Testing verwendet wurde. Der Protoyp kann mit einem Klick auf den Button angeschaut werden.

1
6
3
2

Usability Testing

Evaluative Research

Um direkt meine gr├Â├čten Fehler identifizieren zu k├Ânnen, habe ich einen ersten Usability Test mit 3 Teilnehmenden durchgef├╝hrt. Die Sitzungen wurden pers├Ânlich und via Videocall abgehalten, Aufgrund von COVID-19. Ich habe ungef├Ąhr 15 Minuten pro Teilnehmer angesetzt.

Ziele

  • Herausfinden, ob Teilnehmende die App sicher navigieren k├Ânnen
  • Herausfinden, ob die Teilnehmenden die Aufgaben, die sich auf die Core-Features der App beziehen, problemlos l├Âsen k├Ânnen
Usability Test Report 2

Verbesserungen

Mein Papier-Prototyp war sehr grob und daher hatten einige Teilnehmenden Schwierigkeiten, Elemente zu erkennen. Daher habe ich anschlie├čend einen High-Fidelity-Prototyp angelegt. (Da die App relativ minimalistisch ist, habe ich den Mid-Fidelity-Prototypen ├╝bersprungen.) Bei der Erstellung des HiFi-Prototyps habe ich das Feedback vom Usability Test einbezogen.

Einige Dinge sind mir dabei besonders ins Auge gefallen:

  • Zuerst hatte ich gedacht, ein speziellen Home Screen nach dem Onboarding zu haben w├Ąre eine gute Idee. Allerdings hat das f├╝r mehr Verwirrung gesorgt, als Klarheit. Daher habe ich dann den Home Screen lediglich mit inaktiven Buttons beim ersten Start gef├╝llt, damit das Layout immer gleich bleibt.
  • Ich dachte ebenfalls das Onboarding sollte so kurz wie m├Âglich sein, um Benutzende davon abzuhalten, die App direkt wieder zu deinstallieren. Die Mehrheit meiner Usability Test-Teilnehmenden merkten allerdings an, dass sie sich mehr Informationen gew├╝nscht haben. Daher habe ich dann ein 4-Schritt-Onboarding integriert.
Example
Thumbnail 3 onboarding

High-Fidelity Prototype

Wireframing & UI

Nach dem Einbau des Feedbacks hatte ich einen HiFi-Prototyp, indem ich die meisten Probleme behoben hatte. Nach R├╝cksprache mit meinen vorherigen Test-Teilnehmenden war das neue Feedback durchweg positiv. Durch den Prototypen kann hier navigiert werden.

Splash Screen
Vocab
Onboarding
Onboarding 4
Arrow
Loading
ButtonZum Warenkorb hinzugef├╝gt
Zum Warenkorb