Ninchanese: Chinese Speaking Exercise Redesign
I worked with the Ninchanese team to redesign their speaking exercises to help give users a pain-free, fun, and comprehensive way of learning how to speak Chinese.
Client:
Ninchanese
length of project:
4 weeks: November 2021 to December 2021
Role:
Solo UI/UX Designer
Task:
Redesign the speaking exercise interface to minimize user confusion, eliminate user pain points while preserving conversation aspect, and encourage lesson retention.
Methods/Tools Used:
Current user surveys
Usability tests
Figma for wireframing
Background
Ninchanese is a France-based Chinese language learning platform. Their speaking exercises were already receiving user complaints when I took on the project. Through usability tests and a current user survey, I was able to confirm many of the pain points of the current speaking exercises, most notably the automatic progression of the exercise, the inability to repeat previous sentences, the lack of romanization (pinyin) for users who need it, and the uninformative results page.
The challenge
While the issues of the current speaking exercise design is clear, the challenge of this redesign was to remain faithful to the co-founders’ vision of the speaking exercises as a conversation. This was especially difficult since the conversation-aspect of the speaking exercises included the automatic progression—which users were struggling the most with.
user Survey findings
Learning Styles
Types of "Express Yourself" Exercise Chosen
These are the results from a survey of 21 current users I conducted to gain insight into how current Ninchanese users use the platform. Speaking is a learning style that many users report struggling with—less so with listening—but just over half of users still choose the speaking mode versus the listening mode on “Express Yourself” exercises. If the speaking exercise redesign can even these numbers out, then it would be a great success.
Initial Usability Tests
I conducted usability tests with five people of varying levels of Chinese knowledge. The testers took the first few lessons on the Ninchanese website, including a speaking exercise. Usability tests were conducted either in person or over Zoom calls.
Through the tests, I discovered new pain points and confirmed preexisting ones that had been brought up during the current user survey. I then consolidated these common issues into a graphic to present to my client as part of our weekly meetings.
The Design Solution
A personal goal of mine was to design something that complements the Ninchanese site design and would be easy for the Ninchanese Team to implement. Thus, the redesign keeps many of the same themes as the current site.
I also addressed all user pain points:
❌ Exercise automatically progresses
🛠️ Allows users to click on microphone when ready to speak
❌ Previous sentences cannot be reattempted
🛠️ Previous sentences may be attempted as many times as needed
❌ Lack of Chinese romanization (pinyin)
🛠️ pinyin toggle available
❌ Uninformative results page
🛠️Results page displays Chinese romanization (pinyin) under program-detected words to help users better understand and correct word pronunciation
Before redesign
After Redesign
Previous sentences are non-repeatable; users must start all over to correct mistakes.
Immediately records after playing sentence once; has to be manually stopped if user is not ready.
Automatically pushes users onto next dialogue regardless if the user was done speaking.
Pinyin (romanization) toggle available; pronunciation guide visible to user who need it.
Previous sentences are repeatable; users can go back and correct mistakes.
Manual recording; users can go at their own pace.
Clearer icons to indicate if site is currently recording/playing.
Final Design: Try it Out!
This Figma high-fidelity wireframe simulates both the pinyin and non-pinyin paths the user can take. If the user goes through the non-pinyin branch, they are awarded a badge at the end that will be present when they go back to the starting page. This wireframe demonstrates three possible outcomes during the exercise:
The user makes a mistake on the first dialogue and tries again, correcting their mistake and demonstrating the reattempt feature.
The user makes a mistake on the second dialogue and can’t fix it/chooses not to fix it.
The third dialogue displays a sample error message, where the microphone isn’t picking up any sound and prompts the user to try again.
Final Usability Tests
In the last few days of the project timeframe, I ran another round of usability tests—on both users tested in the initial usability test round, and new testers. All testers showed more willingness to engage with the exercise, felt more comfortable repeating sentences as needed, and no longer felt pressured to go at the website’s pace.
“I didn’t think about [the pinyin toggle] but it’s a great feature that would help me progress.”
“The prompting for the start of the microphone was something I complained about and it has been fixed, and I appreciate that.”
“I like that you can see the word [on the results page] and see how you pronounce it”
Thoughts and Reflections
🈚 There are some experiences that I will never have; as a bilingual person who has been speaking Chinese her entire life, I will never be able to fully empathize with someone who is in the process of learning the language. As a result, I need to trust my research and be aware of my own biases at all time.
⚖️ Sometimes, client wants and user needs will clash. This is not uncommon. I learned to let my research speak for itself while keeping the client’s vision in mind. It is a balancing act.
❗ There is much room for improvement. Due to time and resource limitations, this current redesign is not as fun as I would like it to be. Ninchanese is a gamified language-learning platform; the more its exercises feel like games, the more it’ll stand out. If I could do this project over again, I would advocate for a more gamified design.
Next Steps?
The speaking exercise redesign high-fidelity wireframe has been handed off to the Ninchanese team. The client is pleased with the design and promises to reach out with further questions if needed during implementation.