Chinese Tutor App - Posit UXD Workshop Project

[Fig01] Splash Screen
[Fig02] Expore A New Word or Topics Screen
[Fig03] Camera Screen

Dǎoshī

Brief

Dǎoshī is a Chinese tutor app that provides personalized lessons around topics that are relevant to the user. It's a personal project that I worked on in a UXD Workshop at Posit Hong Kong. In the 6 week long evening workshop I explored some aspects of User Experience Design that I don't touch very deeply in my everyday small website work. The app attempts to address some of the challenges that Chinese learners face around memorization.

Tools

  • Figma
  • Notion
  • Illustrator

Role

  • UX-UI Designer

Year

2019

Contents

Initial Hypothesis - Improve Memorization

Learning Chinese is hard. The typical issues for a Westerner include the minimal crossover vocabulary with Western languages, and difficulty discerning tones.

For Westerners accustomed to being able to understand a new language through reading, non-phonetic characters present unique challenges. Pronunciation is learned through a romanization system which is like learning another language in itself. Pinyin is the standard for Mandarin. Yale and Jyutping are 2 common ones for Cantonese. Very basic literacy requires knowing about 2000 characters. They can be compared to icons or emojis but bear in mind the following about characters:

  1. Pictographic meanings have evolved over time
  2. Ideographic characters indicate and associate abstract concepts or ideas
  3. Pictophonetic characters combine semantic and phonetic information
  4. Pronunciation of a character on its own is unrelated to its pronunciation in a combined setting.
  5. There are many homonyms (sound a-likes)

Traditional methods of learning Chinese emphasize a lot of rote memorization from kindergarten through high school. Learning it as second language is easily a 3 year commitment to achieve enough proficiency to be accepted into a higher level Chinese language institution and fully understand Chinese language media. A beginner Chinese class  requires learning 347 characters or 300 words in the first year. The second year requires knowing 1064 characters or 1200 words. The third year requires knowing 2664 characters or 5000 words cumulatively.

I wanted to investigate how an app might shorten that learning process.

Initial Approach - Visual Pattern Building with the Kanxi Radicals

As I explored different Chinese learning materials I was exposed to a group of 214 characters known as the Kanxi Radicals 康熙部首 or Kāngxī bùshǒu.

This system was introduced in a 17th century dictionary to organize other characters which derive from these 214 root or radical characters. Compared to other ways of organizing characters in lessons, this system gives an early exposure to many similar characters with the same number of strokes. Visually it makes sense and I felt that teaching them in this sequence could be a good starting point to learning how to read Chinese.

Caveats

On the one hand learning to read and write Chinese characters is often secondary to achieving a practical level of oral proficiency for many people.

On the other hand, the written characters are a unique part of the language. They are visible everywhere and being able to make sense of them helps one understand a Chinese environment better. So some new teaching approaches introduce the characters very early in the learning process. Learning the radicals allows one to connect to the ancient meanings behind characters by seeing the glyphs through their components, and knowing the connections between components.

It's worth asking if knowing the etymology is important? The ancient meanings are not clear in the modern version of the components and the meaning have been totally forgotten. While it appears to make sense to focus on a subset of characters first and build up, there are different opinions about which characters to start with and how to progress from single characters to the more complicated ones.

Finally Chinese is a complex language not a system of symbols. Relying on an engineering type approach of building from small components up to larger ones will hit many inconsistencies in components.

The two videos below by Eisel Mazard are the best illustrations of the issues about the Kanxi radical approach.

[Fig05] Some pros & cons about learning the Kangxi radicals.
[Fig06] Don't reduce Chinese to a system of symbols.

Competitors

  • Is there a product and market fit?
  • Does the Kanxi approach address a need for enough customers to make it a worthwhile investment?
  • Are there pain points not being addressed by existing apps and other learning approaches?

Accredited Institutions & Standards

Most foreigners learn Mandarin through formal language classes in primary or secondary schools, specialized language schools or university courses. Progress is measured by one of the following:

HSK - Hànyǔ Shuǐpíng Kǎoshì , a standardized test of Chinese language proficiency structured with 6 levels corresponding to 6 semesters of study.

YCT - Primary and middle school children learning Mandarin as a second language are assessed with the YCT Youth Chinese Test.

FLS - The US Government uses FLS Foreign Language Service levels for measuring language proficiency among its employees. There are 10 situational modules that are followed in sequence to form the core of the FLS Mandarin course. An average learner would take 88 weeks or 2200 classroom hours to reach professional working proficiency. This roughly corresponds to passing HSK6.

[Fig07] Online Competitor Websites

Online Learning

Online classes combine drills, videos, and live video chats with native tutors. The materials reflect different learning philosophies and different markets that were in vogue at different times. The newer ones have videos that can be searched for relevance.  These are four well established providers of online classes.

Pimsleur - Developed by linguistics scholar Paul Pimsleur. Mean to mimic the way children master their first language through immersion in conversation, listening, and speaking. Unique approach to teaching tones by syllable and learning long words back to front.

Rosetta Stone - Founder Allen Stolzfus set out to simulate natural immersion by using pictures and sounds in context with no translation. Originally developed around CD-Rom technology in 92. The Mandarin course is structured around 20 units similar to the FLS modules with smaller lessons that focus on pronunciation, reading, writing, grammar and vocabulary within each module. Live Tutoring is also available.

Chinese Pod (Mandarin) - Subscription service that offers lots of Chinese listening practice at 6 difficulty levels on a variety of topics. Able to search and jump around levels and topics. Also offers basic exercises matching characters to meanings, sentence ordering, dictation and fill in the gap

Learn Cantonese 101- Big fish in a small pond. There's not a lot of Cantonese classes online. Subscription based service to website with a series of Cantonese lessons. 25 classes arranged by proficiency level ranging from complete beginner to advanced. Audio format with transcript in Chinese character, Jyutping and English translation. Can choose to export vocabulary to a flashcard programme which uses a spaced repetition system to help you learn them.

Apps

[Fig08] Chineasy

Chineasy Cards - App, books, flashcards aimed at teaching Chinese to Beginners. Currently the most visible, popular and publicized.  Premise is that most Chinese characters are built out of 100 building blocks. The creator designed a program that prioritized the most common and useful elements. She teamed up with an illustrator to create imagery that reflects each character's etymology and meaning.

Pro

  • Multiple choice tests
  • Includes other characters
  • Dictation
  • Definitions
  • Gamified

Con

  • Kids oriented in terms of appearance and characters presented
  • Some mnemonics are a stretch
  • Apple Store feedback indicates disagreement on the choice of characters
  • Does it work better than other methods?
[Fig09] Duolingo

Duolingo - Unique in jumping right into recalling phrases and Chinese characters.

Pro

  • Focused on building a tourist vocabulary

Con

  • Must follow sequence
  • Learn Characters without definitions.
[Fig10] Skritter

Skritter - Promotes itself as the path to Chinese & Japanese mastery. Claims 95% retention of new characters.

Pro

  • Handwriting recognition to trace strokes (Trad & Simplified)
  • Smart flashcards
  • Allows choice of characters to study (includes radicals)from multiple sources
  • Audio (Mandarin)
  • Pinyin
  • Definition
  • Timed
  • Spaced repetition

Con

  • Tracing accuracy for strokes
  • Lacks context or examples
[Fig11] Nemo

Cantonese by Nemo - Focuses on most essential Cantonese words and phrase not characters. Stronger emphasis on audio including feature to record own voice and compare with teacher's.

Pro

  • Tests recall of Cantonese against English example
  • Different groups of words

Con

  • Pronunciation isn't tested
  • No testing vs similar words/characters
  • No score/gamification

User Research

Based on number of app store comments and visibility in stores there is a market for Mandarin materials, less so with Cantonese.

What I don't know.

  • Market Size- Who might want to learn Chinese?
  • Market Composition - Why might someone want to learn Chinese?
  • Pain Points - What frustrates them currently ?

Interview Questions

  1. What languages did you know before studying Chinese/Japanese?
  2. What motivated you to study Chinese/Japanese?
  3. What aspects of China/Japan or the countries’ culture interest you?
  4. Can you tell me a little bit about your experience of learning?
  5. Can you describe the structure of the experience a little bit.Branch for those who did learn characters
  6. At what point in the course where you introduced to writing/reading Asian characters?
  7. Can you tell me about how the course introduced characters?
  8. What do you remember about the pace of learning new characters?
  9. What kinds of classroom exercises did you do?
  10. What kind of work outside the classroom did you do?
  11. What kind of self-study did you do on your own?
  12. What were the ups and downs of learning the language?
  13. How did you stay motivated to keep at it?
  14. Did you use any audio-visual material or apps?
  15. Can you tell me a little about the audio-visual material or apps?
  16. Can you describe your current level of proficiency in Chinese/Japanese

Participants

Three people participated in the interviews. Their names and details have been modified to protect their identities.

Bob

American Male, Age 42
Diplomat.

Knows English, Malay, Spanish, Arabic.

Learned Cantonese and Mandarin for work interviewing visa applicants.

lack of circumstances to practice reading/writing ...
apps ... train to the lowest common denominator ...
Duolingo...hard, not as user friendly as you would expect ...
conversations you have with people are ... introductory level ... They're all identical... so sheer repetition helps tremendously ... within the contextual setting that just reinforces it ...

Daniel

American Male, Age 36
Built Chinese Learning Platform for Schools.

Knows English, Mandarin.

Spent a year in China learning Mandarin out of personal interest.

all platforms either force a curriculum or go completely free-form ...
downloaded user created decks ... inaccurate and out of date ...
I have almost no chance to you use it day to day,  unless I'm paying a tutor ...
I'm still studying ... so much time just managing the platform like doing administrative work ...

Kini

Hong Kong Female, Age 35
Teacher.

Knows Cantonese, Mandarin, English.

Teaches expats Cantonese and Mandarin at language schools and as a private tutor.

[Kids] need the pictorial things can help them to link the things ...
[Kids] how to say in Chinese  other than study ... very simple like to do sports, games, play ball ...
[Adults] always ask me how to write this character ...
[Adults] cultural background more distance from Chinese they can't sort the things out independently ...

Findings

After the interviews and casual conversations with friends and acquaintances who've studied Chinese (and for the most part dropped it.) I felt that the original premise about the Kanxi Radicals was too narrowly focused on a single technique.

In Hong Kong there seems to be 2 main motivators behind learning Chinese:

  • Passing a required Mandarin examination in a formal school or work context.
  • Getting by in Cantonese or Mandarin when eating, shopping, and traveling when no accurate or timely English translation is available.
[Fig12] Memorization as a study aid.
[Fig13] Memorization for day to day needs.

What I found is that reading and writing Chinese isn't critical to most people.

The biggest pain points revolve around the large amount of memorization. Faced with this issue people want to focus on vocabulary that's immediately relevant to an upcoming task. Others want to categorize it into chunks in a way that's relevant to part of an exam.

The software that's out there is crude and inflexible. Finding, making, and managing accurate lists of vocabulary consumes a large portion of study time.

Design

Feedback & Iterations

The prototype went through a few iterations over the course of the workshop. The instructors and other participants provided feedback on interactive prototypes.

[Fig14] Early point & click Ipad interface to edit lists.
[Fig15]Example of a word in a list

I realized that my approach from responsive web design where one design worked reasonably well over several breakpoints didn't carry over well to apps. The change in form factor from iPhone to iPad makes for a big difference in user expectations about the interface and behavior.

I also realized that while its really tempting to rely on  the latest interactions possible with both devices but they are not well known compared to standard click, selects and swipe actions in IOS.

It took some time to figure out the nature of the information being organized and what kind of organization made sense.

Information Architecture


I found that the best model for organizing the content was the Apple Music Iphone app. Both visual dictionaries and music libraries are complex databases that need to present a simple interface to users. The Music app is far from the best app out there but it's familiar to a wide age range of users .

Here word definitions are equivalent to songs, immutable predefined topics are albums, and user-defined topics are playlists.

Definitions - Songs

The smallest module of information is a definition card.

The biggest visual element is the Hanyu or Chinese characters for each word. At 1-4 characters we know how big to design their space. One of the smallest  fixed elements is the audio button which needed to be at least 32x32px in size. I had to plan for a few variable element too. English definitions could expand with multiple meanings. Character breakdowns could also expand.

The smallest version of a definition card consists of  just the Hanyu, pinyin pronunciation guide, audio button and short English definition in a table.

[Fig16] Definition Card
[Fig17] Definitions in a Table

Pre-Built Topics - Albums

The topics that group words are quite arbitrary. But using the ones used in common courses  was a good place to establish an authoritative resource. Users are able to dive deeper into topics to edit sub-topics and words, favorite topics, and indicate prior knowledge as done or success 成.

[Fig18] Predefined Topic
[Fig19] Edit Topic Content
[Fig20] Create a new topic

User Defined Topics - Playlists

Adding or subtracting words or combining pre-built topics creates a new personal topic while preserving the original one as reference.

The new personal topic also appears on the main screen as a tile element that visually prioritizes the personal over pre-built topics.

[Fig21] New User Defined Topic
[Fig22] New Topic added to Main Screen

Ubiquitous Iphone

People carry their phones everywhere. It is the dictionary, camera, and translator that's there when you need it. It can capture new words that encountered in everyday situations. It can offer lessons to pass time on a subway commute.

The splash screen presents the value proposition of personalized lessons based on topics that are relevant to the user.

The main exploration screen provides a choice between pre-defined vocabulary lists based on standard curriculums, popular topics, or user supplied words & characters.

The proposed tile layout for topics introduces a tough design & technical issue. Tile size should indicate topic priority but longer English words take up proportionally more horizontal than vertical tile space. On the other hand, words made of 1 to 4 Chinese characters would look too small if the tiles were set in a brick pattern of uniform row height.

[Fig23] Splash Screen
[Fig24] Expore A New Word or Topics Screen
[Fig25] Camera Screen

The main screen leverages the ubiquity of phones in everyday life. The premise is that a user can type, speak or photograph a word to find a match against an existing database. Allowing word input by photo-based OCR, microphone-based voice recognition in English or Chinese, or typing English, Pinyin or Chinese addresses the issue that learners are not necessarily proficient in Chinese character stroke input or Pinyin romanization.

Current translators from Baidu and Microsoft are able to translate a menu from photographs in 8 secs so what's proposed is feasible but requires substantial resources to achieve.

Balancing Choice & Progress

The flip side to choice is showing feedback and progress in the context of a defined curriculum. In contrast to points and prizes the app combines the tracking style of the Health app with suggestions for time needed to achieve a goal.

Users can see actual progress mapped against targets. It gives the users more agency about their study plans than Pavlovian rewards.

Whether this is effective or popular needs to be tested. Learning a language is hard and retaining it through drills is time consuming. Gamification can introduce an element of fun. That maybe necessary for children. Adults may be sufficiently motivated without the need for a play element.

[Fig26] Progress Screen

Figma Prototype

The latest version of the prototype is public. Please feel feel free to step through the embedded prototype and experience the screens.

Lessons Learned

Unanswered Questions

Researching competitor products realized that there are qualitative aspects to learning materials that are hard to get user feedback on without a fully functional product. A few that come to mind.

[Fig27] Value Proposition
[Fig28] Personalized Lessons
[Fig29] Authoritative benchmarks.
[Fig30] Drills mapped to progress

Drill Quality - After pivoting from the initial Kanxi radicals direction the project did not dive too deeply into the drills themselves. The value of personalized lessons seems clear but there's a lot to be said for the quality of the lessons amongst the different apps I researched. It's hard to quantify difficulty in multiple choice between visual elements like characters. Word definitions can be easy, hard, or ambiguous. Tuning the frequency of old characters and the introduction of new ones as a learner progresses is an art. Tuning the variety of drill types is also an art.

Image Design - The design of the images for each definition was lightly explored with simple black and white illustrations using humorous proportions. Images can convey a lot and the choice between photographs or illustration style can make a big difference in who the app appeals to. An illustrated dictionary is a very resource intensive project. An app like this one has the same issues compounded by a form factor that requires legibility at thumbnail size.

Conclusions

Translation technology is getting faster but even 8 secs for a good translation is an eternity compared to knowing a language in your bones. That's an argument for learning vs relying on translation software.

Translation software relies on a database that's backward looking by definition. A language is complex body of evolving information and context. There are parts which are open and borrow from new contexts especially in a transactional situation. There are other parts that are more secretive, closed to outsiders, and establish a community like teen slang. There's a lot of changing context that translation software has to keep up with.

Using learners queries to inform edits can shorten the feedback loop for updates and keep the database current and relevant.

The convenience of an app won't remove the social factors that favor learning one language over another. Some cultures have a soft power that makes learning their language rewarding to outsiders. Sometimes it's obvious from the commercial success of a culture's products, sometimes it's more hazy.

Learners' queries may reveal new opportunities.

Learning a language is investment of time that only makes sense if there's a payoff. Since English is everywhere, a native English speaker has to be strongly motivated to learn another language. What are those motivations? Is it a need that can be addressed by a profitable product or service? Much like search queries are understood to be the voice of consumers and translation queries reveal gaps in communication, tutorial requests may reveal areas of deep interest.

Personal projects that explore user needs and online solutions.
SUCCULENT NURSERY
SHOPIFY DEMO WEBSITE
SOLO Attorney
CARRD DEMO WEBSITE
Brewpub Finder
app project