Chatful: AI Chat Buddy

Chatful helps you speak and understand Mandarin more confidently. The app offers AI voice chats, on-demand support, and engaging practice tools.

Jump to Interactive Prototype

Prefer a PDF? Request the slide deck

Project
End to End Mobile App

Timeline
4 weeks

Role
Sole Designer:
UX/UI Design, Prototyping, Testing, Research, Branding & Visual Design

Jump to Section

The Problem

There Are Limited Opportunities to Practice Chinese

Mandarin Chinese is the second-most spoken language in the world, after English. It is also regarded as one of the most difficult languages for native English speakers to learn.

Many native English-speaking children of Chinese-speaking immigrants (heritage learners) grew up learning the language from family members at home and therefore have varying levels of proficiency. The heritage learners with limited Chinese proficiency get frustrated when they try to speak in Mandarin to native Chinese speakers but are unable to think of the right words to fully express their thoughts.

As a result, they tend to switch back to English or, if that's not an option, abandon the conversation entirely.

Existing solutions (classes & textbooks, popular language learning apps) follow HSK/CEFR leveling but don't adapt to a heritage learner's individual needs or offer on-demand support, so they end up losing the confidence to keep practicing.

Go from Chinglish to Chatful

The Solution: Bilingual AI Voice-Based Chat Buddy

Chatful is an AI voice-based chat app that creates a highly adaptive and low-stress environment for users to naturally improve their speaking and listening skills.

By blending Mandarin Chinese and English (Chinglish) and focusing on new words and concepts, Chatful helps users learn through exposure and repetition.

Users can also review what they’ve learned with games and on-demand AI support.

A large portion of this project was done outside of Figma - for planning, background knowledge, and testing out use cases, some of it even dabbling in other AI tools. A full end-to-end app would get complicated quickly if too many features were built out at once, so there were several constraints placed at the start of the project to keep the scope in check and deliver the best user experience:

Focus on one language: Chatful currently focuses on Mandarin Chinese, which is already incredibly nuanced. With a name like Chatful, which is quite language agnostic, other dialects and languages can be added to the app if the product were to be scaled.
Design for realistic AI capabilities: Chatful relies on AI to simulate realistic conversation, but current LLMs require prompt optimization and/or adequate user data to adapt. In a perfect world, the AI wouldn’t need any manual configuring because it would adapt seamlessly after a user’s first touchpoint. It would be an oversight to design the app with the assumption that AI is flawless.
Limited time and resources: This project is capped at 100 working hours with a solo designer (me!) The user flow design and the overall app experience are prioritized over a motion/AI-enabled prototype.

Now that we got that covered, let’s go back to the start of the process.

Gathering key information

Conducting Research

Competitive Analysis

AI Conversational Tools

What features do other Chinese language learning tools offer?
How do they use AI to support conversational fluency?

User Interviews

Chinese vs. English

Why/when do users switch between the two languages?
Which topics are easier to discuss in Chinese?
How are new words remembered?

Learning Styles

How do users prioritize listening, speaking, reading, and writing?
How does learning as a child differ from as an adult?
What motivates users to continue learning?

Pain Points

What obstacles do they face in their current systems?
What support or features are missing?

Finding a Market Gap with Traditional Chinese Support

To better address our problem, competitive analysis and user interviews were conducted. Competitive analysis was completed to understand what the best AI language learning tools for conversation were doing, and where Chatful could identify a gap in the market. If a product is supposed to be “smart” with artificial intelligence, it should be able to adapt to a wide range of needs. I found that many of the existing apps offered support for speaking with people in mainland China, but not much else in terms of regional differences or even offering traditional Chinese characters.

What They Offer

Features that help get speaking practice:

Roleplay scenarios
Varying levels of Chinese
Friendly, encouraging tones

What They Lack

Features that support non-mainland Chinese and secondary skills like reading/writing

No zhuyin phonetics or traditional characters
No regional vernacular differences (some phrases are more popular in China vs. Taiwan, or even have different ways to pronounce them)
No English/Chinese (Chinglish) on the user and app’s side — Chinese only
No way to review the chat history with transcripts to learn phrases or practice reading

Users Want to Connect with Culture and Improve Listening Comprehension

Six participants were interviewed regarding their experience growing up learning and speaking Mandarin Chinese. Participants were of all genders, in their early to mid 30s, lived in major metropolitan areas, and their immediate families immigrated from either China or Taiwan.

Users were asked about how they learned Chinese, how often and in what situations they currently speak/practice Chinese, what their learning styles were, and what motivations and pain points they had.

Confirmed Assumptions

Users ranked listening and speaking more important than reading and writing
Users mainly spoke Chinese with family members, anything outside of that was at restaurants
Users typically used English with words they didn’t know in Chinese or once topics got more complicated
Taiwanese-American users preferred to use zhuyin phonetics to help with more accurate pronunciation but preferred to use pinyin phonetics to type and search with a more familiar keyboard

New Insights

86% of users felt that listening was a more important skill than speaking
None of the users interviewed had a desire to learn a second language, and felt only Chinese was important to know because it was their heritage language
‭Users primarily wanted to connect with the culture just for themselves, not necessarily to pass on for future generations
Users who were born in the US had more guilt and self-inflicted pressure of fixing their broken Chinese, whereas users who immigrated at a very young age felt no negative feelings around wanting to improve their Chinese

Our Motivated Learner, Emily!

Using the information gathered in user interviews, the main persona chosen for this project was someone who has limited conversations in Mandarin but feels a strong desire to improve. The existing tools for learning don’t fit her needs of learning Taiwanese Mandarin, and oftentimes they teach words that aren’t relevant to her life. She’s not going for technical working proficiency, she just wants to be able to talk conversationally with family and native speakers.

Defining the opportunity

How Might We…

help Mandarin heritage learners improve their listening and speaking skills in a low-pressure environment where they can practice at their current level of proficiency?

converging, diverging, converging

Developing a Solution

The idea for this app came from using the Voice mode on ChatGPT while I was practicing my conversational Mandarin out loud. I wanted to develop an app interface that would incorporate this to speak at user’s level and slowly level up the conversation in an encouraging way. I wanted the user to feel supported and encouraged to speak freely, make mistakes, and practice new words and concepts they learned.

The mission for the product was to bring as much value to the user as possible without trying to do too much. I decided on the following areas of focus for product features.

Mapping Out the App and User Flow

I used Octopus.do to create a map of the app structure, and I found it very helpful to see a low-fi wireframe of what each screen might look like. Each main section/navigation tab of the app (Chat History, My Vocab, More section) would provide an opportunity for the user to review what they had learned in the Chat, and they could modify their goals in their Profile. Of course, it wasn’t practical to build out all of these screens without validating the core functionality and most important user flow, so I just focused on the chat functionality.

The user flow: A user learns new vocabulary in the chat, and then reviews the transcript after the chat has ended. Here, a user can expand upon any word and open up a dictionary type page.

I hand-sketched the key screens for this flow, and I received feedback on my low-fi sketches that made me realize I needed to restructure the app. I understood that so far, I had all the building blocks of what someone might need as tools, but it wasn’t being presented in the best way to facilitate learning effectively. I had focused on the what, but I had lost sight of the why.

Reorganizing After Low-Fi Feedback to Enhance the User Experience

I received feedback that seeing a big section on the Home page regarding their progress could be demotivating. Some users said they already felt guilt about not practicing enough, that seeing their lack of progress would make them feel worse. Instead, they would rather be called to take action in a bite-sized way, to get them started.

There were mixed reviews on whether an entire section dedicated to past transcripts would be helpful. Some users said they would probably never look at that section, and some users said it would be nice to have access to as reference.

Ultimately, users said this app did not seem particularly exciting. The chat feature seemed great, but everything else seemed pretty standard, like a long vocab list or dictionary. Why should AI features start and stop with the chat function? The app should bring insights to the users by identifying areas for improvement — be it grammar, pronunciation, or the same tricky vocabulary — and automatically targeting them for practice. Users also wanted the app to just provide more support. They didn’t always need a direct translation. Instead, they’d want to know cultural context or nuances between very similar words and when to use them.

I decided to make the following changes:

Combine the Vocab and History (Chat Transcripts) sections together into one: Review
Center the Home screen on future chats and conversations and active learning, and center the Review section around going over learned content, practicing, and seeing progress
Incorporate games, pronunciation support, similar words, and cultural context into the core areas of the app, rather than hiding them in the More section.

Prioritizing Features

Now that I had a direction to go in, I put all possible features on an effort/impact matrix. Effort was defined as a balance of effort both on the design and (assumed) engineering efforts, and impact was defined as the impact to the user experience. Mapping the features on the matrix allowed me to assessed which features needed to be prioritized for this first MVP. The features are color coded to show what was essential vs. what could be completed later, in green and yellow, respectively.

I also bucketed them into separate categories based on app function to serve as a checklist for myself as I built out the screens in higher fidelity.

Challenges

Challenge #1: Reducing Fatigue for the User

How do I make a chat-based app with translations and transcripts without overwhelming the user with on-screen text?

Use animations, graphics, and familiar UI patterns and elements
Hide information until it becomes relevant for the user

Challenge #2: Balancing Speaking/Listening with the Varying Reading Levels

How do I address gaps in reading ability and support users at all reading levels?

Provide audio when possible when Chinese is on screen, and provide pinyin to supplement the audio
Show the English translation where Chinese is shown

Visual Design & Branding

Creating an Educational & Friendly Brand

The overall tone for this app was to be fun and educational without seeming too youthful or too boring. I took design inspiration from Duolingo, a gamified language learning app, and Tolan, an AI chat-based app, both of which were very colorful, friendly, and engaging. I wanted users to feel an emotional connection to this app, since I had uncovered how strong cultural connection was for motivating a user to learn.

For colors, I wanted the primary color to be bright, bold, and culturally significant. Rather than using a pure red, which may seem too alarming, I used a bright orangey-red sunset color. The Chinese, Taiwanese, Hong Kong, and Singaporean flags all have the color red in them and it felt appropriate to use for this app. I ultimately chose yellow and blue as my secondary and tertiary colors. Red and yellow together are very prominent in Chinese culture, and blue is a lucky color as well. Red, yellow, and blue are also primary colors, which go hand in hand with the educational component of the app.

For the name of the app, I wanted it to be language agnostic. The MVP would only focus on Mandarin Chinese, but the name Chatful would convey the core functionality of the product (chatting) and the feeling of abundance and positive opportunities.

The logo of the app was probably the most fun asset to make, as I was challenged to capture the essence of the app in just one scalable graphic. I tried several variations of the chat It was important to me that every bit of the app had a consistent feel. Not just for the key screens but for the app icon that a user would see before they even opened the app.

I had originally planned for a mascot to be a most-MVP launch, but the app simply did not have the level of personality and charm without one. I drew a snake (2025 is the year of the snake in the Chinese zodiac) with the brand colors and incorporated it throughout the app. It ended up being unanimously adored by testers. The full UI kit is below.

Of everything I did for this project, the branding and visual design is one of the things I am most proud of.

Building a Prototype

Incorporating AI Features Throughout the App

The flow of the prototype can be broken down into 3 main tasks: Chat with the AI, learn a new word in the chat, and review the word after the chat was over. As a bonus, I wanted to get feedback on the remainder of the app (what was in the Culture and More section) and whether people thought it was helpful.

When a user starts using Chatful (and at any point while using the app), they will have the opportunity to configure a few things for the best experience. As mentioned in the constraints, AI is currently not perfect and requires user input to give it somewhere to start. Users will set:

Their preferred AI voice style
Their regional preference (for accents, vernacular, and assumed written properties)
Their preferred written characters (traditional or simplified) and pronunciation guides (zhuyin and/or pinyin)

Something I introduced as a new feature in Chatful (compared to other apps) was the ability to Spotlight new vocab. When a user clicks on a word in the chat, they are able to not only see the translation as a quick reminder, but also add it to the Spotlight section of the chat. When a word is Spotlighted, the AI will focus on and use that word more often in their chat session to help the user learn through repetition.

During and after the chat, users are given the opportunity to save vocab for review at a later time. They can go into the Review section and play vocab match games and practice speaking, as well as open up dictionary pages for the words they’ve learned.

Each vocab word has a global frequency bar showing how common the word is in spoken Chinese. If a word is very common, a TOP 2K badge will be shown, so a user knows it is a very common word they “should know” to help increase fluency.

For the prototype itself, I used Figma to connect the high fidelity wireframes with touchpoints and limited animation. I wanted just enough to demonstrate how the app might behave but did not spend additional time on any motion design that would certainly be delightful, but not essential to the MVP and fit within project scope.

Chatful Key Screens: Chat, Learn, Review

Testing & Revisions

Getting Chatful in the Hands of Users

Usability Testing

A moderated test was conducted with 6 users, over video call and screen sharing, either via the web browser on desktop or the Figma app on mobile. Users that had a Figma account were able to test out the prototype in a more natural setting, while users that did not have the app had to use a laptop.

I used a moderated test for this project to:

Use my voice to simulate the audio of the AI voice (that plays with every message and whenever a word is tapped)
- A limitation of Figma is that audio cannot be added to the prototype
Provide instructions for the user, since all 3 task flows were combined in one prototype
- Since the prototype was not fully functional, users could not click on any word they wanted. They needed to be prompted every few screens.
To observe real-time any issues, questions, and reactions testers had

The 3 task flows and their success metrics are shown below.

Another way to view the usability of the prototype is to break it down by feature. Tester #4 had to leave the test early, and was able to complete the core user flow (and 3 task flows) but could not stay for the follow up discussion to go over all of the features in the app.

Although all users were able to complete the task flows, the table helps show the success and usability of each feature. Users were able to understand the pinyin, but would have preferred to see it throughout the app to be fully useful. For the dictionary entry, users felt it was not “smart” enough to provide as much value as the AI chat.

Almost all users struggled to understand what the word frequency bar meant, most thought it was some form of progress, but all users agreed that while it’s helpful to know what’s commonly spoken, what they really cared about was what would be commonly spoken for them and the contexts they care about.

Final Revisions Driven by First Principles

Conducting testing on the high-fidelity prototype was extremely valuable as it highlighted key issues of the product usability. I wanted to understand how to improve the product experience for not just areas that failed the success metric, but for the entire app and for all users.

The answer was in going back to first principles:

Ultimately, users just want to understand what they don’t know.

This was the main motivation to use the app (learn the Chinese words they didn’t know), and it applies to how they interact with each part of the app itself.

So what’s the best way to help the user with each task flow? The major revisions are below.

Reducing Confusion of Voice Chat UI Functionality

Minimizing Time to Value

Making the App Smarter, For You

With all of the changes incorporated, the final prototype is shown below. All task flows are combined within one prototype — try it out for yourself!

A Look back on the Journey

Takeaways & Next Steps

Reflections

What Went Well

Users liked the concept of practicing Mandarin + English in an AI chat with new words being repeated in various contexts using the Spotlight feature.
Users also found the prototype easily navigable with context in expected places.
I felt deeply connected to this app, and I am extremely proud of what I’ve built (from the functionality to the visual design and branding) as well as the potential impact

What I Learned

Utilize AI when possible to provide more personalization. The app should learn what the user wants/needs and do it automatically.
Don’t focus on feature parity to other competitors if those features aren’t actually useful or if they require superuser level familiarity to understand.
Support “volume off” and loud/public setting use cases. Though they are not the core use cases, the UX may be unpleasant without this functionality.

Next Steps

With more time, I would look into implementing the following features:

Test auto-Spotlight edge cases
Compare how a set limit vs. limitless number of Spotlight words affects long term learning
Incorporate a social element
Incorporate friend streaks and build various Community offerings, and increase the user base with in-app incentives
Add tagging feature to words
People care about words relevant to them more than global frequency, so allow them to create custom tags and start chats focused on tagged groups

Evaluate Additional Features

Bonus: Create a functional prototype that uses AI (likely with vibe-coding)

Now that the UX has been designed and tested, I would love to build out a functional AI prototype and get a LLM or custom GPT incorporated. With a fully functioning prototype, I would be able to gather how people would actually interact with the AI when given free reign and how they would use the app to learn.

After the Chatful product launch, I would want to collect data regarding the following:

Post-Launch Metrics

Thanks for perusing!

If you’ve made it this far, I appreciate the time you spent reading this case study. I also wrote a blog post detailing my experience using AI tools for part of my process with the Chatful project. I’m super passionate about this project and would be delighted to talk more about it

If you like what you saw, send me an email and let’s talk about working together to make this a reality!

(If you didn’t, you can still send me an email because I appreciate getting all feedback.)