Zhiyin: Learn Mandarin with Music
Client
Role
Timeline
Service Provided
NA
Design, Development, Distribution
10 June - 10 Aug 2025
Mobile Application
Introduction
Zhiyin (知音) began as both a learning challenge and a design mission. On the one hand, I wanted to push myself to master AI tools and see whether a non-technical designer could independently build and distribute a working iOS app. On the other, I was motivated by a real problem I had observed for years: learners of Mandarin – especially overseas Chinese and intermediate students – lacked tools that helped them progress beyond the basics, despite a strong motivation to do so.
I built Zhiyin entirely in public, sharing progress on LinkedIn, Instagram, 𝕏 (or Twitter), and TikTok. This approach grew an invested audience and validated demand: the app now has 800+ testers on TestFlight, feedback is shaping refinements ahead of App Store release, my marketing videos have drawn over 2M organic TikTok views (no paid ads), and I was invited to speak at three events in Singapore, two with audiences of 200+.
At its core, Zhiyin is a music-based Mandarin learning app. Each song comes with synced lyrics, pinyin, and translations, supported by AI generated cultural notes and grammar guides, as well as a built-in dictionary and flashcard system. It turns the music people already love into a pathway for expanding vocabulary and deepening fluency.
The Problem
For millions of Mandarin learners, the real difficulty begins once they move past the basics.
Overseas Chinese often grow up with an intermediate level of Mandarin, shaped by family use at home but limited by formal education in another language (for example, English-medium schools in Singapore, Malaysia, the U.S. and elsewhere). They speak enough to get by, yet their limited vocabulary makes them feel disconnected from cultural touchpoints, which many describe as a source of deep frustration.
Intermediate learners worldwide face the same plateau. They can hold conversations and manage everyday tasks, but existing resources rarely push them further.
Both groups are motivated, but they lack tools that address their stage. What’s missing are resources designed for expansion – of vocabulary, idioms, and cultural context – so learners can move from adequacy to greater fluency.
Research & Discovery
I designed a research strategy combining formal interviews with learners in Singapore, China, the UK, and the U.S., alongside informal observation from growing up in Singapore, where about 75% of the population is ethnic Chinese (华人). Many of my peers spoke some Mandarin at home but were educated in English, leaving them plateaued at an intermediate level with limited vocabulary.
Key findings revealed something unexpected: While users consistently abandoned language learning apps, their desire to learn remained strong. The problem wasn't motivation – it was that existing tools felt like a chore rather than an engaging learning experience.
After giving up on dedicated apps, learners created makeshift study methods:
Turning to platforms like Spotify, YouTube, and Netflix – pausing dramas to analyze phrases, looking up song lyrics, and compiling vocabulary lists
Piecing together fragmented workflows across multiple tools (Spotify for playback → Genius.com for lyrics → dictionary apps for word lookups)
Engaging with viral Chinese tracks on TikTok and Instagram, despite struggling to understand them in depth
Cultural observations:
Karaoke remained popular among overseas Chinese, but many admitted they didn't understand the songs they sang
General-purpose apps ignored key features of Mandarin such as tones, characters, and idiomatic expressions
From these insights, I created journey maps that visualized how this fragmentation broke users’ flow state, with the most frequent abandonment happening during context-switching between entertainment and study. This insight set the stage for Zhiyin’s integrated approach — one platform to turn cultural touchpoints like music into structured, sustained language learning.
Design Goals
Integrate learning into existing behaviors rather than creating new study routines.
Provide depth on demand so learners can explore idioms, grammar, and cultural notes without breaking immersion.
Reinforce vocabulary in context through sentences and collocations, not isolated word lists.
Prototype Demo
Development
I built Zhiyin in Swift using Claude Code in Cursor's terminal, testing with Xcode's iPhone simulator. Without prior engineering experience, I shipped a working app in 60 days through:
Multimodal prompting: Beyond text prompts, I used hand-drawn sketches for UI components and screenshots from other apps for interaction patterns and motion design – making it far easier to communicate intent and align outputs with real-world conventions.
Systematic debugging: Instead of fixing problems based on assumptions, I set up debug logs to inspect system recognition, value failures, and state handling. The logs often revealed the real issues, enabling precise fixes from Claude Code.
Technical stack:
Frontend: Swift/SwiftUI for iOS
APIs: YouTube (playback), CC-CEDICT (dictionary)
Database: Supabase-hosted Postgres for user data
AI/Content: Claude for cultural context and grammar breakdowns
Development Tools: Claude Code, Cursor, Xcode
Custom dataset: Unable to find quality Chinese sentence APIs, I structured my personal collection of 8,000+ sentences from years of study into a database – giving the app authentic, context-rich learning material instead of isolated vocabulary.
Reflection
Zhiyin represents a complete product cycle carried out independently:
Design — grounded in research, cultural observation, and user behavior.
Development — executed through vibe coding with Claude Code in Cursor, reinforced by sketches, screenshots, Supabase integration, and a rigorous debugging strategy.
Distribution — validated through early signups, viral traction, and continuous tester feedback.
Taking Zhiyin from concept to TestFlight required systems thinking: designing not just screens, but the architecture of how they interact; ensuring backend systems like APIs, databases, and debug logs supported the user experience; and treating marketing as an extension of product validation. I had to think holistically — about how each part of the app connected with the others and with the audience using it.
This approach reflects a broader shift in the industry. Companies like Duolingo have moved away from traditional “UX Designer” titles, adopting terms like Product Experience (PX) to reflect more integrated, AI-informed roles that span design, engineering, and strategy. In practice, my role on Zhiyin has been a hybrid of design architect, design engineer, and product strategist. I didn’t just design the interface — I architected how the app’s systems, content, and user flows all fit together.