Winnie.N®Hanzi Garden
Turning HSK vocabulary practice into a visible loop: learn, self-assess, review, and grow a pixel garden.
- Role
- UX/UI Designer · Co-led with Châm
- Team
- Châm (Lead) · Thu/Winnie (UX/UI) · Giang · Nam
- Context
- UX Foundation K46 · Mentor: Nguyễn Vương Chung
Twelve learners, 104 JTBD situations, and a six-stage journey were synthesised from the team workbooks.
The HSK load grows while character recall, repeated review, and visible progress remain disconnected.
Connect self-rated vocabulary cards to resources and a pixel garden that grows through learning effort.
The prototype has no usability or long-term recall results yet; reward thresholds remain hypotheses.
Not another dictionary. A connected learn–review–progress loop.
The journey map showed that friction was not confined to one screen: learners choose a level, find a method, recognise characters, review in context, sustain a rhythm, and check progress. A short learning session therefore had to feed the next review while making accumulated effort visible.
Count people, not repeated rows.
These figures are respondent-level theme coding from the JTBD workbook: each learner is counted once per theme and may appear across themes. This is qualitative evidence, not a population estimate.
mentioned recall, character form, or handwriting
Knowing a meaning is not enough; learners must recognise and retrieve the character form.
mentioned motivation, frustration, or sustaining study
The problem emerges after starting, when progress becomes difficult to see.
mentioned review, repeated exposure, or context
Each learning session needs to create a clear input for the next review.
Each session should create a meaningful reason to return.
Across 12 learner interviews, the team documented 104 JTBD situations and a six-stage learning journey. The recurring issue was not simply finding more vocabulary content, but keeping words retrievable and progress visible as the HSK load increased.
- 01Choose a level
Define the current HSK scope and target.
- 02Learn
See the character, pinyin, meaning, and context.
- 03Self-assess
Mark a word as remembered or needing review.
- 04Review
Prioritise difficult words in a later session.
- 05Earn resources
Learning effort creates Hanzi and items.
- 06Grow the garden
Progress becomes a visible world.
The team did not choose a game before exploring alternatives.
Crazy 8s produced eight directions spanning memory tools and learning assistants. The team’s Effort/Impact matrix prioritised the pixel garden and swipe cards as the core loop.
Gamification only helps when it serves recall.
Swipe to create a review signal
Swipe right for a remembered word and left for one that should return. The action does not prove long-term recall; it only structures the next review.
Rewards originate from learning
Hanzi and items follow learning actions. The garden is not a separate mini-game; it visualises accumulated effort.
HSK levels become product structure
Items and progress are grouped by level so learners can see their current scope instead of facing an endless word list.
Community follows the core loop
Friends, gifts, and the marketplace add reasons to return, but remain a later layer rather than replacing learning and review.
A testable product hypothesis—not proof of learning impact.
The team delivered a mobile UI and prototype covering character creation, vocabulary cards, the garden, HSK rewards, friends, and a marketplace. Learning retention, task usability, and return behaviour have not yet been measured.
Trace the work from evidence to prototype.
The long-form case study preserves the original reasoning and visuals. Figma sources open in a new tab when access is available.
Read the full case study (VI)Turning a complex behaviour into a usable product?