Kani Reader is a web app that helps people to learn Japanese kanji through daily articles. It helps a self learner to learn kanji quickly by using mnemonics method to make it easy to memorize.
Role
This project was a freelance project that I took up to help beginners learned Japanese kanji. I had been wanting to level-up my Japanese, but never had a chance to do so. One day, an acquaintance reached out to help him built this web app, and I was thrilled to come on board.
I helped out designing the entire web app, on both desktop and mobile views. I did heuristic evaluation, competitive analysis, design direction, and built out the wireframe and final UI.
The challenges
Many Japanese learners expressed difficulty about the language and most of them said that learning kanji was what made it hard. Learning kanji was challenging from the writing and reading aspects. Moreover, people had to memorize most of the kanji in order to learn since each kanji represented a meaning.
Most of Japanese learning apps focused on flashcards methods which didn't give the learners more context to the language. In order to learn kanji more quickly, learners should learned it from a contextual form, such as everyday news. Kani Reader used easy-to-understand articles from Japanese news media to help learners read kanji faster.
In the beginning, the developer already built the basic feature to show Japanese article in kanji, hiragana, and katakana that users could interact with to understand their meanings. However, the initial web app had critical issues relating the user experiences in overall journey.
Below is a snapshot of the previous Kani Reader web app.
I did heuristic evaluation through the entire pages to provide some design recommendations.
From the evaluation, it was clear that there was no clear information hierarchy to understand what was the purpose of the web app. The learning features were not categorized into one bucket, so the users might find them difficult to navigate. Also, there was no clear design direction that could help users focused on the learning experience.
Design objectives
The web app should be able to help learners to understand how to read and use kanji on daily settings faster. It should accommodate any environments where people would like to learn Japanese.
Design direction
I designed the logo and created the design direction for the web app that could show the brand identity for the app.
Kanireader logo used Cabin font to humanize the typography with a touch of modernism.
Kani was the brand icon. Kani is a crab in Japanese. It represented the largest Japanese learning community focusing on learning Kanji on Wanikani (alligator-crab). Kani Reader was a web application that supported Wanikani users to learn Japanese better by reading.
Indigo was the primary color and sunset orange was the secondary color to create a calming environment to help users memorize better, but still had a fun touch to it.
The mood board showed how the look and feel of the web app. It gave the creative direction on what colors should be used to bring the brand identity came to life.
Noto is a font family that aims to support all languages in the world. Noto Sans JP is the Sans Japanese family. It has Thin, Light, Demi Light, Regular, Medium, Bold and Black styles and is hinted. Noto Sans JP has been subsetted to all of the kanji in JIS X 0208, JIS X 0213, and JIS X 0212, including all kanji in Adobe-Japan1-6.
Website Design
I designed the web app for both desktop and mobile views. I used gamification approach to engage the users in learning. Users could choose to learn from daily news by NHK, continue to learn from level 1, or choose from the Wanikani word progress.
To help users learned faster and focused on the learning, I used keyboards controls for the interaction, so users don't need to get distracted by moving around the mouse.
The color codes also important to let users know which type of words were those to help them memorized.
Users would need to have the ability to see the English translation and the Japanese words quickly.
By choosing the kanji words, users were able to see the meaning, what words it made up, and how difficult was it.
Users were also able to filter the amount of sentences showing at once to avoid overwhelming them.
While users learned by reading an article, they were able to see which words they had learned to keep track on their vocabulary.
To engage users with the latest news, we used the learning materials from daily news by NHK.
The articles from NHK daily news needed to be broken down into sentences to help users learned quickly.
Mobile Design
To provide flexibility for the users, the web app should be handy so that users could access it from anywhere they wanted. The design should be responsive to accommodate users with mobile view.
