Cakap Kids Academy's Mandarin course is designed for children, offering an interactive and engaging way to learn Mandarin. It focuses on developing listening, speaking, reading, and writing skills. The course uses professional teachers to deliver fun, real-time online sessions that encourage active participation and enhance language retention.

Students couldn't write characters correctly on their own not because they weren't trying, but because the platform gave them no guidance on how to do it right. Teachers couldn't intervene effectively because they had no real-time view of a student's stroke process only the finished result, if visible at all. The feature should focus on enhancing stroke recognition accuracy and overall usability. This will make learning more effective and engaging for students while allowing teachers to guide the writing process more efficiently.

My job was to design Hanboard a dedicated Mandarin stroke feature embedded in the live session environment, built for both the student practicing and the teacher guiding.

    Role Product Designer

    Team Product Manager, Researcher, Analyst, Designer, Writer

I benchmarked stroke-learning tools across language platforms, focusing on one question: what do the most effective tools give students that ours didn't?

Two patterns were consistent:

Animated stroke guides Showing correct stroke order in motion, not as a static diagram. Beginners need to see the sequence before they attempt it. A static reference image doesn't provide that mental model.

Traceable shading overlays A hide/show overlay that let students trace over a faded character before writing independently created a scaffolded practice loop. Students could build muscle memory before being asked to perform without support.

Both patterns addressed the same underlying problem: beginners need to see the correct behavior modeled before they can replicate it. Static reference images don't provide that.

The core design challenge was dual-surface Hanboard needed to work on desktop for teachers managing a session, and on mobile for students doing the actual writing. Early wireframes tested both surfaces in parallel. Lo-fi prototypes were built for usability testing before any high-fidelity work began.

Prototype for usability testing on both the teacher and student sides.

Every participant found writing with a mousepad on desktop uncomfortable enough to undermine the task. The physical act of dragging a cursor to form a character created friction that had nothing to do with learning Mandarin it was just a bad input device for this job.

Student and teachers found it uncomfortable to write/stroking/dragging using mouse pad.

Users struggled to identify and rectify errors in their strokes due to a lack of clear and immediate feedback from the prototype.

The flawed stroking experience negatively impacts user confidence when exploring the task.

On mobile, the experience was meaningfully different. All participants preferred the touchscreen for stroke input, because writing with a finger maps more naturally to writing with a pencil than dragging a cursor does.

The mobile prototype was tested by all participants and all of them admitted that they preferred the mobile version over the desktop.

This is potentially because the experience of stroking/writing on mobile is much more comfortable than using a mousepad when using a laptop.

Meanwhile, Kids seem less interested in the visual appearance on desktop or mobile.

The final design reflected that split cleanly: teachers observe and guide on desktop, students practice on mobile with animated guides, traceable overlays, and touch-native input.

The growth came from course demand Hanboard was newly available during this period, but the infrastructure to drive consistent usage wasn't yet in place. That became the clearest learning from this project: launching a feature and integrating it into teaching practice are two different problems, and this project made that gap concrete.

The clearest path forward is embedding Hanboard into the Mandarin placement test and assessment flow. That makes every student encounter it before joining a course, and gives every teacher a structured moment to use it as part of their evaluation toolkit removing the friction of introducing a new tool mid-session in a live teaching environment.

Physical input is a design constraint, not a preference. Touchscreen writing is categorically better than mousepad writing for stroke learning. That finding should shape how Hanboard is prioritized and surfaced across the platform going forward.

Launching and integrating are two different problems. A feature available to teachers is not the same as a feature built into how they teach. The next phase of Hanboard is less about design and more about making it structurally unavoidable in assessments, in onboarding, in the course flow itself.

Scaffolding reduces the performance gap. The animated guides and traceable overlays weren't aesthetic choices they were the mechanism that let beginners attempt stroke writing without needing a teacher to intervene on every character. Building that scaffolding into the tool is what made independent practice possible.