Mori_cover.png

Mori Puzzle

{ UX/UI Design, Wireframing, Prototyping }

 
 

1. Introduction

 

"How can you write those random slashes?"  

The Japanese alphabet consists of Hiragana, Katakana, and Kanji. Hiragana consists of 106 kinds of letters, Katakana consists of 106 kinds of letters, and Kanji consists of 2000 frequent letters out of 6000 taken from the mandarin alphabet. People who use Kanji make up 15 billion people worldwide. This is the second biggest language population next to Latin. It is the only alphabet still in use since the cradle of civilization. Yet it’s one of the biggest hurdles to remember all these 2000 characters.

According to secondary research, Kanji can be sorted by three kinds of letters. 80% of Kanji is a combination of multiple SHIJI and/or SHOKEI styles which is 20% of whole Kanji letters. That means, if you remember 20% of Kanji, other Kanji letters are just a combination of them. Also, 20% of SHIJI/SHOKEI style comes from pictures or signs, making them easier to remember.

 

2. User Research

 

The Research was held in October 2017 by 25 participants who are interested in studying Japanese. With an online questionnaire and in-person interviews. Below is the result.

 

 

Summary

“ It was fun when it’s a hobby at the beginning but once it turns to training or practice, my brain tries to forget about it.”

The majority of people are using apps for studying Japanese : Skritter, Memrise, Mango language app, Japanese for busy people, Remembering the kanji, WaniKani, Duolingo. 70% of people who are using apps for studying have some common issues: hard to motivate, easy to procrastinate. Nearly 60% of app users have multiple ways to study other than apps that make up the above. 99% of people recognize that Kanji is the most difficult to study of the three Japanese alphabets. The reasons they mentioned can be narrowed down to almost two things; “Complex shape” and “Volume.”  There are even some people who don’t think they will try to start studying Kanji just because “It looks difficult.” Only one responder said Katakana is the most difficult for him to use freely, and his Japanese level is expert.

People who have specific goals, achievements or reasons tend to use multiple study tools for individual achievement. Mostly a combination of Apps, textbook, class, conversation partner, occasional dictionary. However, they will turn to be “non-motivational” once they completed goal. The people who don’t have specific goals/achievements tend to use only apps, because it’s easier to use at their own pace. A few of them were even forgetting that they had apps until I asked them about this interview. Their common issue is, unless they engage in frequent training, it’s easy to lose. An app is good for light use everyday, but if they don’t have specific goals/achievements, or a deadline or some reason to study, it is difficult to motivate. As well as even with apps in 2018, users are still required to the same old "massive memorization." 

There was remarkable lines from one of the respondents “ It was fun when it’s a hobby at the beginning but once it turns to training or practice, my brain tries to forget about it.”

From all of the above, there are common issues for learning Kanji. "Difficult Impression", "Volume" and "Motivation."

 

-------------------

So the challenge here is to try to make a new approach for learning Kanji other than the Classic-Boring-Massive-Random Memorization.


3. Heuristics

 

The following competitive analysis is for the mobile apps that focus on Kanji learning and word puzzles to find out a new approach for studying Kanji. The key features of evaluation  based on NNG 10 heuristic principles. Also includes “Learning,” “Motivation,” and “Interactivity” to evaluate the user’s engagemant. Those following evaluations apply to the apps called “Skritter,” “Kanji!,” “Wordmaster” and “Anagram.”

 
スクリーンショット 2017-12-27 22.03.56.png
スクリーンショット 2017-12-27 21.59.24.png
 

 

Summary

Most Kanji learning apps use the method of "writing or seeing over and over again." They also generally have unclear interfaces because of their volumes of information. Word puzzle apps usually have nice interfaces to execute their game functions, but weak functions for learning which is usually not their main purpose.

So I try to combine their good points (nice interface/learning functions) and also take Anagram's battle system which is through the message app. This system works better than a live battle system especially for just competing with individual scores. It doesn't require an immediate response, which makes for a more relaxed competitive environment between friends.

 

4. Personas + Empathy map

 

Based on the research, I figured there are three kinds of users.

  1. The user who isn't committed to learning yet : LIN

  2. The user who is currently committed : BETTA

  3. The user who used to be committed but not now : JAMES

Here are those three personas and their empathy maps.

 

 

 

5. MVP + User Stories

  

6. User flows

 
  • LIN the beginner : She uses Mori puzzle for fun/communicate with her friends. → Single Play + VS Play

  • BETTA the intermediate : She uses Mori puzzle for learning Kanji seriously. → Single Play + Library

  • JAMES the expert : He uses Mori puzzle for complete his Kanji knowledge. → Library + Single Play

  • The person who got invited : Playing Mori puzzle with friend → VS Play

 

 

 

 

7. Wireframing 

 

Initial sketch to the second sketch

  • Moved the library menu tab to the bottom menu since "Bookmark" and "Kanji pieces" should be accessible from multiple screens.

  • Changed "parts(pieces)" and "kanji" icon shapes. "Parts" should be a parent of "kanji". A circle can fit inside of a square if they are the same hight and width, so I changed the icons to "parts" for a square and "kanji" for a circle.

  • Added "sort" in library page from usability point of view. There will be about 200 parts and unlimited bookmark kanjis.

  • Removed the "saved list" to simplify the functions. The "bookmark" function serves a similar purpose as the "saved list."

 

Second sketch to digital wires

  • The settings page has been changed to a floating window with the global menu. User needs the "sound on/off" function whenever they want. The "escape" function is also needed for all screens so I put them together in a globally accessible way.

  • Removed the "ALL" page from the library. All kanjis are 2000-6000, so it's not realistic to think that the user will explore the "ALL" page often.

  • On the game results page, I changed the "continue" and "exit" buttons’ layouts. In the VS play, each result is laid by splitting the screen horizontally, so then to avoid any confusion like misleading as a label function for the result, the button layout should be vertical.

 

Mid-Fi Wires 

 

 8. UI Design / Style Guide

Screen Shot 2020-10-02 at 3.16.20 AM.png

Mori puzzle

木 means tree. 林 means woods. 森 means forest (pronounced “Mori.”) This Kanji character well expresses its “progress” visually. This is the same concept as this project so I picked“森” as its symbolic character.

Screen Shot 2020-10-02 at 2.45.11 AM.png

Typography

The Kyokasho font is used for textbooks and has a simple and stable line width which fits well together with alphabetical san-serif fonts. Roboto is compatible across multiple OS. As well as it has both wide and narrow faces. The wide face has a similar ratio to Kanji so they are the perfect marriage.

Screen Shot 2020-10-02 at 2.45.25 AM.png

Color scheme

The main theme color (“Forest/green”) is chosen based on the concept of “Mori”. A Japanese traditional color scheme has lower tones because of its unique natural paint materials. Green is our concept color because of Mori (Forest.) As trees grow and many trees become a forest, so do the Kanji characters that make up the word for forest.

Screen Shot 2020-10-02 at 2.45.42 AM.png

Pattern

Japanese traditional "Kamon" pattern.
Patterns on the background get granular in the contents to express the hierarchy of the contents.

Screen Shot 2020-10-02 at 3.17.33 AM.png

ICONS

All Kanjis are grouped by their radicals. Size and shape express ed the hierarchy of the symbols.
The new icon is inspired by the Rising Sun since Japan is the east end and called sun rising country.

Screen Shot 2020-10-02 at 11.38.20 AM.png

Buttons

Forest(green) is the theme color, so I picked the opposite color Golden Sand (yellow) for the primary action color, and Sprout is the secondary action color.

9. Prototyping 

 
 

10. User Testing

User testing was held with three perticipants. Everyone was familiar with general use of the internet/mobile. Persona Lin : Interested in Japanese culture, but Kanji is random slurs to her. Persona Betta : Having a decent experience studying Kanji. Persona James : Kanji expert.

 

Main Tasks

  1. Play through a Single PLAY

  2. Play through a VS PLAY

  3. Answer what “明” means and what does that character consist of.

  4. Change profile info 5. Go through Library

 

Interview Script

  1. Take a look at top page and try playing the "single play," then come back to the top page. While you are playing, please express your thoughts.

  2. Take a look at the top page and please try playing "VS play," then come back to the top page. While you are playing, please express your thoughts.

  3. What does “明” mean and what does that character consist of?

  4. Now please find your profile page and change your information. 5. Please go to the top page and find the Library page. Please let me know what you see with each page.

"I am working for this project called Mori Puzzle, which is an educational mobile app for learning Kanji. I am asking people to try using this app that I am working on so that I can see if it works as intended. The session should take about half an hour. The first thing I want to make clear right away is that I am testing the app, not you. You can’t do anything wrong here. As you use the app, I’m going to ask you as much as possible to try to think out loud; to say what you’re looking at, what you’re trying to do, and what you’re thinking. "

 

 

Summary

 

1. Play through “Single PLAY”

  • Most users got a bit upset with starting the game right after they clicked “Single PLAY”

→ Add splash/loading page before the game starts.

  • On the game page, most users hesitated with what was going to be happening, even though they understand where they are supposed to tap. They seemed comfortable once they'd done a single process.

→ Add an answer place holder to make the goal clear.

2. Play through a “VS PLAY”

  • There was no hesitation from the users when the game started because it has an introduction in order to play with opposition.

  • User hesitation happened in the same place as "single play" on the game screen.

3. What “明 ” maens and what does that character consist of?

  • ALL users could get the right answer, even Lin. This proves the game system works with each player's Kanji memory. Also, persona James found this very interesting because he knew what “” means but he has barely ever thought of the origin of its make-up..

4. Change profile info

  • This process was executed smoothly by all users.

5. Go through the Library

  • Some users talked about the issue involving the color recognition of background images of the Kanji character.

→ Improve the color tone of background pictures.

  • Some users took time to find the escape button to go back and play the game.

→ Add an escape button in the bottom menu of the Library.

11. Conclusion

 

Language is a big barrier and it's something that should be easier for people.

I was born and grew up in Japan. I came to NYC in 2010 and have been struggling to learn the language. Especially memorizing new words. I found out and tried a new approach to learning "core" words. If you learn the word's structure and core words, you might not need to just randomly "memorize" new words.

I tried my project with Kanji, but this "learning core words" method could work for other languages too.