Team size: 2
Timeframe: May – Jul. 2020 (3 months)
My role: UX/UI design, prototyping
Awards: Winner, All India Japanese Business Pitch Contest 2020
The problem
Japanese language learners struggle to memorize or remember new words. As a result, they are unable to express themselves in the foreign language. The most common method of learning vocabulary is to just memorize from word lists. This method is tedious, boring, and ineffective as learning happens in a vacuum.
The solution
There are two key parts to achieving effective memorization – Context and Repetition. I realized that songs have the perfect formula for doing just that! Most people tend to even listen to one song several times on repeat. Music can be heard while doing other routine activities like chores or while commuting.
My solution is simple. An app where learners can listen to songs in their language of study, learn the meaning of words from the song, take a quiz to further strengthen their understanding, or simply just listen to the song again. As a learner of the Japanese language myself, I thought it would be a good start to only focus on learners of Japanese first. Therefore I designed the app specifically for this language and hope to extend it to other languages in the future.
User listens to favourite song on repeat
User learns words from song
User is quizzed on words learned to reinforce them
BACKGROUND
The beginning
Hypothesis
In my journey of learning Japanese, I always sought out ways to avoid studying from textbooks as they always put me to sleep. I spent more time listening to Japanese music and watching TV shows than actually studying the language. Interestingly, I seemed to know more words than my peers in language class. That was when I started making lists of words from the songs or shows that I really liked. I would memorize them once and listen to the song multiple times. Soon enough, I could easily recall and retain them. Moreover, I even had fun studying this way. I strongly believed in the effectiveness of this method.
However, I had no idea if there were other learners out there who learn this way or who would be willing to try it. So I reached out to my friend Haripriya, a Japanese language interpreter and teacher, to collaborate with me on this research.
Assumptions & Constraints
Testing the hypothesis
- 33.5% learners find it challenging to learn new vocabulary.
- Most learners still study by plain repetition. Which they admit is inefficient because they forget very easily.
- A small group (8%) of learnt from Japanese songs, shows and movies. Out of them, 60% are at a basic level and 26% are at an advanced level. Hence potential users will most likely be beginners.
- 88% of learners listen to Japanese music. 86% of learners listen to music while doing chores or commuting. Hence, adopting a learning method that uses music would be possible for most learners in the survey.
A sigh of relief
We now had enough evidence to ascertain our assumptions about the use of music to improve retention and recall of new vocabulary and also its adoptability.
DISCOVERY
Who am I designing for?
Understanding the learner
Excited by the promise shown in the survey that the idea would work, Haripriya and I began interviewing potential users to dig deeper into the mind of the learner. We talked to a total of 18 Japanese language learners between the ages of 15-46 years and heard stories of their journey of learning the language, goals and motivations, challenges and their relationship with music.
We then proceeded to create an affinity map of all the stories and observations from the user interviews.
Fun fact: We did this activity in 3 places- Starbucks, Rangoli metro arts center, and Matteo cafe. Each time we pulled out our sticky notes and began sticking them on the table or wall, we got kicked out. We tried to explain that they don’t leave marks but they just wouldn’t listen. So we just had to improvise. Luckily, Haripriya had brought a bunch of newspapers, which we used to stick on instead.
3 distinct personas emerged – Seema, Farah and Anil. They formed the basis of all our design decisions going forward.
IDEATION
Organization and flow
User stories
We converted Anil, Farah and Seema’s goals, needs and pain points into user stories, prioritized them according to how necessary they were to achieve basic functionality. Soon enough we were able to group them into task flows. The combined task flows combined gave us a clear blueprint of the navigation in the app.
User stories
Task flows
User flows
Site map
Our first big design challenge was – How to clearly differentiate between the “Listen to songs”, “Learn the words” and “Take a quiz” task flows as they had overlapping information. Initially, we grouped “Listen” under “Learn” as both flows involved listening to a song, only in different modes. We needed quizzes on words from songs as well as quizzes on words from multiple songs. So it made sense to keep Quiz on the same level as “Listen”.
When we started making wireframes of the UI using this sitemap, we realized screens were duplicated across flows. Moreover, there was still no clear distinction. I realized that we were simply taking bits and pieces of popular music apps liked Spotify or Amazon music and trying to fit it to our solution
We needed to go back to the drawing board and break down each element of information. What is a song? What can a user do with a song? What metadata of the song is useful to the user? What is a Quiz? It’s metadata? How is a quiz on words from lyrics and quiz on words from user’s bookmarked words different?
I realized that a “Song” and “Quiz” are connected. A quiz is simply an attribute of a song. When the song is learnt, it’s words are quizzed and results are notified. This exercise helped me immensely to create a clear hierarchy and simple navigation.
Sitemap version 1
Breaking down information
Final sitemap
Wireframes
We first focused on sketching out low fidelity wireframes of all the primary pages.
All of it was done digitally on the iPad. The process was similar to using pen and paper but twice as fast as we could un-do and re-do as many times as we liked!
We experimented with different layouts and designs especially for information heavy pages like the home page. It was one of the pages we probably debated about the most and created several versions. In the end we were able to pack all the information into one page yet keep it simple by giving the user the option to drill down to see more details.
Music library
Home ver 1
Home ver 2
Home ver 3
Home final
Quiz questions
Quiz completed
Kraoke home page
Song in lyrics mode
Kraoke with friends
Wireflows
We extended the primary pages and created wireflows of the task flows.
Learn words from song lyrics wireflow
Testing for usability
We evaluated all the wireflows against Nelson’s heuristics. This helped us take a step back and review what we had done so far. We found a few screens where the information needed to be re organized and navigation where we had left the user hanging.
In the quiz questions page, we found that there was no way for the user to correct her answer choice once selected.
So we added a button the user can click once she is ready with her answer.
On the Learn page, we found that there were too many filter options presented to the user.
So we kept the 3 filters most likely to be used frequently and placed the rest inside a filter menu that the user can look at if he needs more options.
DESIGN SYSTEM
Look and feel
Colour
We listed 3 emotions that we want users to feel while using the app.
1. Delight from being able to learn in a fun way
2. Satisfaction from expanding their vocabulary
3. Optimism to achieve their goals
Since neither of us are experts in choosing the perfect colours, we looked for inspiration. We created a mood board of illustrations with a Japanese theme. Guided by the principles of colour psychology and our 3 emotions, we created the colour palette.
Typography
We wanted users to feel relaxed and make them forget that they are doing a serious task like studying. So we choose a rounded sans serif font for both English and Japanese.
Quicksand, a display sans serif with rounded terminals.
漢字。日本語。
ひらがな。カタカナ。
Travel theme
We learnt from our research that almost all Japanese language learners have a goal to travel to Japan. They are motivated to keep learning because they love Japan’s rich culture and even the food. We decided to design the app around a travel theme. Tapping into this intrinsic motivation of the learners will keep them engaged longer and learn better.
Designing this was one of my favourite parts of this project because I’m a big fan of Japanese culture too!
Japanese stamp books
Goshuincho is a book used for collecting ink stamps and calligraphy originally from Japanese shrines as a memory of the visit. Now, many tourist destinations and even train stations have designed their own stamps that tourists can collect on their Goshuincho. They make for a great souvneir and are very popular in Japan.
I used them as reference to design a gamification layer. Users can virtually travel across Japan. The more words they master, the more experiences they can unlock, collect the stamps and learn about that aspect of the culture.
Summiting Mt. Fuji
Every year hundreds of tourists and native Japanese alike, flock to Mt. Fuji and attempt to trek to its summit.
I used summiting Mt. Fuji as a metaphor to design the quiz levels. Every time users complete a level, the closer they gets to the top.
The shinkansen
There’s no better way to experience the real Japan than by taking the train. The famous Japanese bullet trains are one of the fastest in the world.
They were the perfect way to show progress from one level to the next.
Karaoke Culture
Japan is the land of abundant Kraoke bars. Karaoke is an important part of Japanese pop culture. Typically, groups of family members and friends rent rooms with karaoke machines and then sing to their collective heart’s content.
“Karaoke Kan” is a popular kraoke bar and you can see their glowing blue and red boards all over Japan. Therefore I used it as a reference to to design the kraoke page in the app.
Interface design
Bringing it all to life
UI screens
Similar to what we did while wireframing, I created all the primary screens first. Below are a few of them-
The devil is in the detail
When I tested the prototypes with friends and potential users, I got great feedback. There were some obvious glitches in navigation like missing back or next buttons and lack of help sections to explain the more unique parts of the app like the stamp collection feature. These were easy enough to understand and fix.
I would like to explain here two points of feedback that made me realized how important the tiny details are in complimenting the overall product.
- Timing and speed of transitions and micro-interactions are important. Users were quite bothered by jerky-ness of animation. All transitions had to look seamless otherwise it broke the users immersion. They would look away from the screen or bring it closer to examine what went wrong.
- Users only have the knowledge of what they see on the screen. Assuming that a user would “understand” causes confusion and frustration to the user.
The most challenging part of this process was getting the timing of micro-interactions in the prototypes just right. I wanted the animation to be noticeable but not to jump out in the user’s face. After some tinkering with XD’s interaction features, I learned that giving shorter duration and using the “Wind up” easing of the Auto-animate feature gave me the perfect result, a spring like effect. I used this effect in most of the parts of the app.
User getting confused
I showed the prototype to a few friends and asked them to interact with them. I saw that most of them do not notice animation when there is a button ready for them to click.
For example, before the start of every quiz, a 3 second animation highlighting the level is played. It was important that users read the information to understand the type of questions asked. Initially I simply disabled the start button while it was visible. My friends started clicking on it rigorously as it was not taking them to the next screen. Some of them thought the button got stuck.
I realized that disabling components on the interface without the user’s knowledge is not the best thing to do. So I fixed the prototype to display the button once the animation ended.
Smooth interaction
FINAL PRODUCT
Key features
HOME
Users land on a beautiful home page from where multiple features can be accessed.
- Search for a song to listen to
- Continue listening to where they left off
- Choose songs or playlists made just for them
- View current level, total points, total number of stamps collected, stats on their progress
- Chat notifications
- Account and other settings
LISTEN
Users can listen to songs from their music library. They can even view them in lyrics mode and sing along. Users who are beginners can choose to view the lyrics in romaji (romanization of the Japanese written language).
LEARN
Users can learn words from songs that they have listened to. They can view progress like, words mastered and yet to learn. Users can see the meanings and pronounciation of each word in the lyric and example sentences. They can even play the song in the background as they read. If the word is impolite or is not generally used, it will be clearly mentioned in the defination of the word. Words can be bookmarked for future reference. Words can be filtered according to JLPT level. Users who wish to learn words of only a certain level will find this feature useful.
QUIZ
Once users learn the words, they can test their memory with a quiz. The quiz has 4 levels
- Station 1: Basic Mastery
Can the user recall the meaning of the words? - Station 2: Advanced Mastery
Can the user remember the word if given a suitable clue? - Station 3: Sentence usage
- Can the user use the word in a sentence?
Station 4: Mix it up
Mix of questions from previous levels
Users are awarded points for mastering words, completing levels and right answer streaks.
KARAOKE
In our research, most users found it more effective to study with one or more learning partners. We therefore have a Kraoke feature where users can choose their favourite songs, invite friends and sing their hearts out together. This way users get to virtually experience the karaoke culture as well as doing the borig task of memorization in a fun way.
VIRTUAL TRAVEL
The curiosity and love for Japan’s unique culture is the top intrinsic motivation and travelling to Japan was the common goal for 99% of learners. We designed the gamification layer to tap into these emotions.
Users are awarded points for mastering words. The points can be used to unlock experiences and collect stamps. Getting 10 stamps unlocks a new level. The more levels they advance, the deeper they can travel in virtual Japan and learn about all the interesting things it has to offer.
REFLECTION
Biggest takeaways
Test. Test. Test.
Whenever we were stuck on a design decision or an assumption, no amount of debating by ourselves seemed to help. Simply showing it to a third person or an unbiased potential user always cleared it out. That’s the beauty of UX. We design for users and users are everywhere, its simply a matter of approaching them and getting feedback. It took us a while to realize, however (hahaha).
Break down information
Whenever there is a complex concept or piece of information that seems almost impossible to simplify to present to the user, always break it down. Questioning our understanding by asking What is it? What does it mean? then using tools liked flow charts and mind maps to represent the information helped us make good architectural decisions and build a smooth system.
Don’t be afraid to try new tools
Microsoft’s Good Notes on the iPad is a great tool in early-stage wireframing. Although I was reluctant to try it as first because I was so used to doing it on pen and paper, I eventually realized its benefits. Thanks to its infinite canvas, I didn’t have to worry about having to squeeze in my task flows onto a single piece of paper. I could erase and re-draw as many times as I liked. I could re-size, copy-paste, delete elements from the wireframes as I pleased. It was the same process as with pen and paper but with total freedom, efficiency, and 10 times faster! Its collaboration features helped us immensely during the COVID lock down.
Bringing an idea to life is liberating
I had the idea for Rakugoi for several years now. Procuring the music licenses, setting up back end infra, scaling to multiple languages, it seemed like a mammoth task and I just told myself that it would be too complex. When I started learning design, I told my mentor about it and he said “Don’t worry about the complexities of implementation, just design it! Implementation comes later”. It felt like a huge weight lifted off my shoulder and I thought “Oh yeah, that’s right. Let’s start with the design”. That simple conversation led to undertaking this project on a subject I was very passionate about.
Current & Future Work
It opened up many opportunities for me. I got a chance to present the App design to the director of The Japan Foundation in India, members of the Japanese Teacher’s association in Bangalore. I received great feedback and opportunities to collaborate and explore the use of music to teach Japanese to students. I am currently collaborating with SNRC and JLS to conduct a pilot study with their students to evaluate the effectiveness of using songs and gamification techniques to learn new vocabulary.
I also plan to conduct an analysis of a large set of Japanese song lyrics to quantify the range and levels of vocabulary found in popular songs.