Design Challenge
How might we help adult foreign language learners effectively commit new words to long-term memory?
My contribution:
- Lead and managed the design and research efforts
- Designed the information architecture
- Created all the UI and motion design
Team: Nivedita Ramakrishnan & Myself (UX Designer)
Timeframe: May – Jul. 2020 (3 months)
Awards: Winner, All India Japanese Business Pitch Contest 2020
The problem
Japanese language learners struggle to memorize or recall 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
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.
DISCOVERY
Needfinding
Survey
We created a survey and sent it out to our Japanese language learning network in India. We wanted a global perspective too, so we posted it on various Japanese language learning groups from other countries on Facebook. As a result, we got about 200 responses from students of all ages from over 50 countries.
- 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%) 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.
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.
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
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
Tasks
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
Color
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.
STYLE GUIDE
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
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
UI screens & Prototypes
Similar to what we did while wireframing, I created all the primary screens first and built out the prototypes using the wireflows as reference.
Usability testing
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
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.