Header Illustration
LanguageSwitch
Intro

Survival Japanese

Vocabulary-App as UX/UI Case Study

A vocabulary app prototype developed in two weeks. The app helps travelers visiting Japan with the most important keywords to ease their travel.

Japanese is an especially hard language for Western travelers because of it's special alphabets. This app aims to give users confidence to make their stay an enjoyable experience.

Summary

  • Vocabulary app for smart phones
  • Creation of the UX & UI within 2 weeks

Execution

  • Competitive Analysis
  • User Research with User Interviews
  • Proto-Persona with User Stories
  • User Flows & Wireframing with Paper Protoyping
  • Usability Testing & High-Fidelity Prototype with Figma

Menu-IconMenu-IconTable of Contents

Competitive Analysis

AnkiDroid, WaniKani

I started with a brief competitive analysis of popular vocabulary apps and looked in-depth into two of them.

Goals

  • Find out what works for current learners of Japanese
  • How popular apps motivate the user to learn more
  • Get a feel for the competitive landscape

Findings

  • Apps are mostly divided between those you fill up with content yourself or have curated content only, rarely any in-betweens
  • Apps do a great job with gamification
  • There aren't a lot of apps that aim for travelers and short-time memorization

Summary of the Analysis

WaniKani is the most popular kanji learning app that also teaches vocabulary. Kanji are recognized as the hardest nut to crack for learners and therefore take center stage. WaniKani motivates it's users to return by offering a level-based learning system, review forecasts, statistics break-downs and other motivating data. It also offers curated Kanji and no option to add your own words. It's a paid app.

AnkiDroid on the other hand is the most popular free flashcard app and popular by Japanese learners. You can add your own words and AnkiDroid offers a similar lesson & review approach as WaniKani. However, it's UI feels dated and you have to input all your words yourself.

Read more
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

To get a feel for my target audience, I interviewed a total of 5 participants with 7 questions in total, due to time constraints during my course.

Goals

  • Get a feel for my target audience
  • Get to know their fears and biggest concerns before traveling to Japan
  • See how much time they'd be willing to invest into an app to learn the basics

Findings

  • Participants want a basic travel guide that teaches basic phrases
  • Some are still relying on paper dictionaries
  • Most said they want to look up common phrases
  • Drawing or showing pictures was seen as a big help to communicate
  • Participants were scared of offending someone due to lack of cultural knowledge
  • Learning the alphabets was seen as a daunting and scary task

Proto-Persona

Based on my user interviews, I created a proto-persona called "Timo". This will help me stay focused on my target audience for the following steps.

Behaviors

  • Doesn’t have any family or pet commitments and therefore lots of time & money at his disposal that he spends on extensive travels
  • Goes on adventure type of travels frequently, like going hiking, climbing or cycling through the more rural parts of the world
  • Doesn’t read books, they’re for “old people” and new technology will be more efficient.

Needs & Goals

  • Wants to be able to get around the more rural parts of Japan and interact with the residents a little to make great memories
  • Needs to know basic phrases and culture before he goes

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.
Read more
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

Before jumping into sketches I created user flows for the most common tasks a user would do within my app. Shown here is my first user flow before I created my first wireframes based on them.

Fig Jam User Flow 2

Paper Prototyping

I've started out by paper prototyping my wireframes to get a rough first draft that I made into an interactive prototype with Marvel. It was then used for my first round of usability testing. You can view the prototype by clicking the button below.

1
6
3
2

Usability Testing

Evaluative Research

To catch my biggest errors right away, I've put my paper prototype through an initial usability test with 3 participants. Sessions were being held in person and remotely due to the dangers of COVID-19. I scheduled about 15 minutes per participant.

Goals

  • Test if users can navigate the app easily
  • Test if participants can fulfill the given tasks related to the apps core features
Usability Test Report 2

Fixes

My previous paper prototype was rough and some participants were having problems recognizing elements. So I wanted to step up and do a high-fidelity prototype (I skipped mid-fidelity as the design is very minimalistic) next. While creating the high-fidelity prototype I incorporated the feedback from testing.

Some things that stood out to me:

  • Initially, I thought having a special home screen after the onboarding questionnaire was a good idea. It ended up causing confusing for most of the participants, so instead I redesigned the home screen with inactive buttons - but the layout staying the same always - which made everything much more clear.
  • I also thought the onboarding should be as short as possible to avoid users to jump off. But most participants said it was too short and they wanted more information. I was honestly surprised at this. I incorporated a 4-step onboarding afterwards.
Example
Thumbnail 3 onboarding

High-Fidelity Prototype

Wireframing & UI

I've ended up with a HiFi prototype where I had fixed most of the problems. I've discussed my changes with my previous test participants and got positive feedback. You can browse through my high-fidelity prototype by interacting with the Figma plugin below.

Splash Screen
Vocab
Onboarding
Onboarding 4
Arrow