“Japanese Boot Camp” APP: Design

As I already explained on one of my previous article “Music Battle Game: How to design when the project implies later adjustments“, my personal design strategy when it comes to using a technology/language I do not know a lot about, is: stick to the simple at the beginning creating a valid MVP (Minimum Viable Product), then keep adding functionalities (which I called “bricks”) as soon as I feel confident enough about my skills.
So that’s how I will proceed in this case too.
(If you are interested in the technologies involved in the Japanese Boot Camp project, I have talked about it in one of my previous article).

A bit of research

The export market of japanese series has exponentially increased during the last few years as a result of a huge growth of online fans communities, which have intensified the demand of new products.
Read about it here and here.
Hereafter, one of the main interest for foreign people on learning japanese is being able to watch anime or read manga in the native language.
Read about it here and here.


In a nutshell

My application wants to respond to this type of people including most of their interest about Japan in one single page, and challenging them in a simple game which can favour their indipendent studies of the language.

Target of users and their goals

Students

Usually young people who are indipendently studying Japanese for school or personal reasons. They already know how to write, but want to practice typing avoiding boredom!

Enthusiasts

Whoever is close to Japanese culture and wants to know the most about it, for fun or personal challange.
Again, young people are more likely to fit this category as they have usually more free time than adult professional and are much closer to the online community of fans.
Anyway, this category is possibily more open to host a wider range of age than the previous one.

Features

#1 – Base Game (MVP) | Currently included

The MVP consist in a single page which displays:

  • Logo and name of the game
  • Link to japanese keybord installing tutorial (from Tofugu)
  • Objective of the game
  • Image of random anime whose the user should guess the Japanese title
  • Button to skip to next title
  • <Input type=”text”> where the user type down his/her guess
  • “Check” button to submit the answer
  • Help button which shows the name of the anime in romaji
  • Footer to display link on AniList API

All these features are the minimum necessary to make the app work.
At first, we need to provide foreign people with a way to type down in japanese (if they don’t know already how to). Then, since the database of AniList is huge, we need to help them guessing also the titles they’re not familiar with.
That’s because I can’t expect people will skip the image until they find an anime they know. The game start immediately, also if the user doesn’t recall the current title.

#2 – Filter Adult Content | Currently included

The targeted audiance of my application, as I already explained before, is mostly young people. Being aware of this, I can’t allow the users to be involved with not appropriate content.

#3 – Select between Anime, OVA, and Manga

At the moment, people can only try to guess titles of anime TV series. However, I cannot know for sure if my users are more confident with animation or comics, so it is important -not essential- giving them the option to choose the field of game they’re more familiar with.

#4 – Filter by Year of Production

Also with the awerness that my users will mostly be young, cutting down the target of people for age reasons is quite counter-productive.
Adding the chance to filter the range of anime to be shown by year of production can benefit both young and older people, making them play with a variety of animation series they are familiar with.

#5 – Filter by popularity

For who’s a newbie in Japanese animation and manga culture, could be more interesting playing just with the most famous titles.

#6 – Different options for wrong/right messages

Doesn’t the system feel cold to you if the message of praise (because you guessed the title) or mistake (you typed it wrong) are always the same?

#7 – Change difficulty level + unlock Adult content filter

In order to respect every level of Japanese knowledge, a dropdown allows the user to choose the difficulty of the game from EASY (which includes only Hiragana and Katakana titles), MEDIUM (with the same as before plus common Kanji), and HARD (with uncommon kanji and mixed with English words).
Also, since there might be people more familiar with erotic/adult content anime or manga, I should give them the chance to unlock the “Adult content filter”, but only after they declare being over 18.

Wireframes

Following find the picture of the wireframe complete of all the functions.
To the present however, in phase of production I have included the basic requirements for the MVP and the adult content filter integrated (no toggle button to unlock it).

UI

Not given too much effort to this phase, since I was focusing on creating the best code I could have currently provide.

Color palette

While the Minimalism culture was established in Japan long time ago, the stilistic influences still keep living through the years with art and design.
Then, minimal is my color palette.

Logo

Typical Japanese inspiration: the logo is composed by a red circular element (from the nation flag) which defines the background and the shape of it.

Japanese flag, from Wikipedia

Then, a pair of boots’ tracks stain over the circle in a negative white on red color contrast. The inspiration comes from online examples and the name of the app itself (Japanese boot camp), which refers to exercise classes inspired by military training.

Japanese Boot Camp logo
Fonts

OBJECTIVE: Give the idea of dirty and swetty training sessions.
After a few attempts on Goggle Fonts I decided to go with:

Permanet Marker from Google Fonts

Final look


Now that we have explored the technologies implied in the project, and its graphic design, it’s time to move to the last phase of the process (you can find in the next post): Coding Development.
STAY TUNED FOR MORE 🙂

2 thoughts on ““Japanese Boot Camp” APP: Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.