Logo for XiongMao Chinese Learning App
Logo for XiongMao Chinese Learning App

Background

Language learning apps are a big business. Companies like Duolingo have millions of daily users. Creating languange learning apps also require huge investments in staff and content creation. Content needs to be designed, updated, and refreshed by native language speakders who are at least bilingual. AI has really changed the landscape of that industry lowering the barrier of entry significantly.



Problem:

I’ve been learning Chinese as a hobby for 5 years. Throughout this time, I’ve used many language learning apps. Learning a language means you have to learn several different aspects at once: vocabulary, grammar, pronunciation, reading comprehension, and listening. I found that none of the apps do all of these well, so I use several at once to help me in each of these areas.

Obviously, this is costly because the best apps are paid. They are paid because it takes a lot of resources to build all these varieties of content. Furthermore, there are other glaring problems with these apps that hinder learning.

  • Most are targeted towards students - Most apps are designed for college aged students or students living abroad. Meaning there is a lot of early content about classes, school, dating, etc. For older working professionals, the early learning phases can be a turn off.
  • Repetitive content - Since all the content is created upfront, unless it is updated often, a high frequency user like me will eventually memorize many of the answers making it hard to determine if they actually understand the content versus memorized it.

I initially started using AI to support my learning and get around these shortcomings. At first, I just asked it to quiz me on specific vocabulary I struggled with. Then I would ask it to generate small paragraphs to help with my comprehension. This soon turned into me having entire conversations with it in Chinese. Each step opened my mind more and more to the possibilities of AI in learning.



Competitive Analysis:

Since I have used so many apps, the competitive analysis was technically already done in my head. I went back and reviewed the apps I liked best and noted things that they did well or had in common.

  • Gamification - One thing that almost all language learning apps do is gamify the learning experience. This makes sense because, outside a classroom setting, many people find it difficult to stay motivated to learn a language.
  • Playful Style - To accompany the gamification of learning, these apps are often designed to look like mobile games. Bright colors, cute characters, and rewarding animation were very common.
  • Guided Learning - Because these apps are designed to teach college aged users that are also absolute beginners, the content is very simplified and often revolves around topics relevant to that demographic


Hello Chinese App Screenshots
Hello Chinese App Screenshots (View Full Image)
Du Chinese App Screenshots
Du Chinese App Screenshots (View Full Image)


AI UX Considerations:

AI is advancing rapidly, outpacing the ability of designers to keep up. My experience using AI to assist with Chinese has highlighted many potential UX benefits and challenges. Although there is ample technical information on using AI, there is a scarcity of resources on designing AI UX.

Here are some observations I have made while using AI for my own studies. I’m using ChatGPT 4.0 for this applications so any mention of AI is referring to that AI specifically.

Advantages Details
Customized Content Because AI can generate content on the fly, there’s no need to create a large amount of it and store it in a database. The user can tell the AI what topics they want to use to learn and what areas they want to focus on.
More Detailed Feedback In learning apps, they generally tell you right or wrong. AI can give you more explanation and provide guidance specific to you. It can answer your questions in ways that pre-generated content never will.
Less Repeated Content AI's can generate new content effortlessly. Users will never find themselves unintenionally memorizing test questions.


Disadvantages Details
Hallucinations Hallucinations occur when the AI is confidently wrong about something. It may make up information if it doesn’t know the answer. This is a BIG problem because if you are learning something, you may not realize that the infomration is incorrect.
Irrelevant content It doesn’t take much for the user's inputs to cause the AI go off-topic. This can be controlled, but requires extra effort and forethought.
Downtime ChatGPT API service is sometimes know to have downtime. They have millions of users every day, so it's expected that there are going to be connectivity problems from time to time.


Possible Solutions to AI UX Disadvantages:

Addessing these disadvantages is a first step, however usability testing on the outputs of AI will be an essential step in ensuring they perform as expected consistently.

Disadvantages Possible Solution
Hallucinations Using the OpenAI Assistant API may solve this. It is essentially a ChatGPT that you can train on specific information, It will only reference that information. By giving the AI content that has been previewed, hallucinations could be avoided.
Irrelevant content Giving the user free rein on text inputs to your AI can be a problem. Of course, you can train your AI to only respond to certain types inputs, but users are clever. If holes exist, they will find them. One possible way to solve this is having the AI generate possible answers only giving the user those options to select from.
Downtime If ChatGPT is down, the user would not be able to do their lessons. One possible solution is that, all the users content will be generated at specific intervales (daily, weekly, etc.) and that infomration is stored on a database until the next update.


Proof of Concept:

I put together a proof of concept to test these concepts. I am using the OpenAI Assistant API. The advantage it has over public ChatGPT is described in the FAQ:

“The Assistants API enables developers to easily build powerful AI assistants within their apps. This API removes the need to manage conversation history and adds access to OpenAI-hosted tools like Code Interpreter and File Search. The API also supports improved function calling for 3rd party tools.”

This means I would be able to better control what it remembers and outputs. I started by uploading the HSK 3.0 vocabulary and grammar. HSK is the standardized Chinese proficiency test, and I instructed the Assistant to only use these documents to respond. I noticed that the last file failed. It's a pretty large file compared to the others. Breaking down files is probably best, but also I was on airport Wi-Fi so that could be the problem too.

HSK Documents uploaded into ChatGPT
HSK Documents uploaded into ChatGPT (View Full Image)

Next, I built a React frontend that uses REST to communicate with the AI. You can see in the image that each POST request is simply sending predefined messages. This allows me to control the conversation and ensure it stays on topic.

The two variables selectedLevel and selectedTopic are variables updated with React hooks on each button press.

Screenshot of POST call to Assisstant API
Screenshot of POST call to Assistant API (Click to Enlarge)
The proof of concept can be found HERE

Keep in mind that I have not done any design or development to improve the experience, so it's kind of rough looking. However, it accomplishes the technical discovery goal (Hey, I got it working!) and will allow me to do usability testing.



User Flow:

In the Chinese learning communities that I am in, there was a lot of interest in having an app like this available, so I designed a user flow that would work for users other than myself.

Creating a skill level assessment to get started was a highly requested feature, so I have accounted for that in my design.

High Level User Flow Diagram of XiongMao
High Level User Flow Diagram of XiongMao (Click to Enlarge)
Onboarding User Flow Diagram of XiongMao
Onboarding User Flow Diagram of XiongMao (Click to Enlarge)

Skills Assessment:

As mentioned above, masterig a langauge involves several different types of learning; Vocabulary, Grammar, Pronunciation, and Reading Comprehension, and Listening. One feature that I would like to see the ability to know which areas you need to work on.

My Chinese reading is much better than my listening and being able to show progress and tailor my learning in these categories individually would be extremely helpful.

I created some wireframes to show a few different type samples questions to show how to assess these different areas of learning.

Question Type Example Wireframes
Question Type Example Wireframes (View Full Image)

UI Design:

Lastly, I quickly put together some UI designs in Figma that visually keeps with the spirit of other language learning apps.

Example Screenshots of XiongMao
Example Screenshots of XiongMao (View Full Image)

Conclusion:

I'm currently doing usability testing with the proof of concept and training the AI to generate questions and answers without disrupting the experience. One thing I noticed is that the AI will cite the documents it uses. These can be removed with a regex, but it's an interesting observation.

Also, sometimes it gives the answer with the question. These reasons are why thorough user testing is an absolute MUST with AI because it feels it's being helpful, but we need to be more instructive.

Just 5 years ago, it would take millions in investment and an army of content creators to build a langauge app like this, however with advances in AI, the logistics barrier has been completely removed. Now it's all about creating the best learning experience.

Key Outcomes

  • Gained more expertise on the UX of AI and how it will be so important for product teams to think about.
  • Acquired a techincal understanding of working with OpenAI's Assistant API
  • Discovered an app idea that will be helpful to a lot of Chinese langauge learners.
< Previous Case Study: Envvia Jewelry Retail App Next Case Study - Accessibility Program >