UX / Cultural experience / Game interaction design
Tea Garden Tales
Turning traditional tea craft into an everyday experience
This digital interpretation of traditional Chinese tea craft places cultural explanations within a continuous journey of planting, harvesting, making, and serving tea. Five days of terrace openings provide clear early goals; professions, recipes, and quality extend progression. Knowledge appears alongside the action it explains.
Play the tea garden demoWorking local Godot prototype · Playable core-loop web adaptation
- My contribution
- Experience architecture, game rules, visual direction, and iteration; AI-assisted assets and implementation
- Project stage
- Local Godot prototype in development and a playable core-loop web adaptation
From display to participation
How can players understand the craft behind a cup of tea through experience?
The project grows from research into digital presentation strategies for traditional Chinese tea craft. Learning content becomes observable states, actions, and feedback: recognising tree growth, reading process explanations beside tools, and checking finished tea before serving. The goal is an approachable cultural experience rather than an industrial production simulation.
Knowledge beside action
Separate purpose, observations, and game actions so that explanations connect to tools and behaviour.
Predictable progression
Keep future terraces visible and open one per game day; experience and practice jointly determine promotion.
Low-pressure management
Mature leaves do not spoil, inventory survives day changes, and orders have no deadline; failed actions preserve resources.
Design audience and research scope
Designed for people curious about tea culture who enjoy calm Chinese-inspired visuals and light management. Evidence includes craft references, Figma designs, the local game, iteration screenshots, and functional checks. Audience fit and the intended low-pressure experience remain design hypotheses for testing with players.
The journey of a tea leaf
The village provides spatial navigation; the garden, workshop, and shop handle resources, production, and delivery. Leaves, finished tea, and task progress persist between areas, so each action feeds the next.
Find your way
Buildings and hanging labels identify the three areas, making the world itself a navigation system.
Plant and harvest
Empty plots, growth, maturity, and regrowth create a readable state cycle.
Observe and make
Learn each process beside its tools, then spread, turn, roll, and dry the leaves.
Check and serve
Check the tea, quality, and quantity before delivery; the result leads into the next cycle.
- 01Plant
Invest seeds in a living tree
- 02Harvest
Recognise maturity and collect leaves
- 03Craft
Observe processes and receive quality feedback
- 04Serve
Check an order and fund the next cycle
Five days, lasting progression
The first five days answer “what comes next”; professions answer “why continue”. Terraces open automatically as players advance game days, independently of profession level. A short key task unlocks the next day; daily tasks provide additional goals.
Learn the complete loop
Harvest, craft, and serve once
Understand spatial progression
Plant a tree on the second terrace
Pay attention to quality
Make a good-quality batch or better
Understand delivery requirements
Complete an exact order
Move into open-ended play
Serve three guests for a tasting
These screenshots document progression at that iteration; current UI is shown above.
Apprentice
Starting role
Junior tea maker
Craft 1 batch
Tea maker
Craft 12 batches
Senior tea maker
Serve 15 exact orders
Tea master
Craft 20 excellent batches
Translating craft into interaction
Each process has three layers: purpose, observations, and game action. Players inspect a tool and its explanation, then act. Reading is situated within the experience rather than delivered in a long opening lesson.
Spreading
Spread fresh leaves thinly in a cool, ventilated place to release some moisture before processing.
Observe leaf condition and an even layer; actual duration varies with leaves, weather, and tea.
Spread leaves through repeated actions, emphasising evenness before timing.
Heat fixing
Heat fresh leaves and remove some moisture in preparation for rolling.
Observe even heating, softened leaves, and changes in colour and aroma.
Adjust heat and turn leaves at intervals; deviations affect quality while allowing the batch to continue.
Rolling
Rolling gradually shapes the leaves; shaping methods vary across green teas.
Watch the leaf shape, integrity, and clumping; delicate leaves require care.
Feel the rhythm through spaced rolling actions; click counts are simplified experience parameters.
Drying
Reduce moisture further and stabilise shape through the heating and cooling steps appropriate to the tea.
Watch for uneven drying and scorching; a bamboo display rack does not represent the entire drying process.
Finish drying within the target window, connecting observation and timing to quality.
Sorting
Sort the finished tea, separating leaves and fragments and removing unsuitable material.
Check consistency, fragments, and coarse stems before storing.
Included in collecting the finished batch, keeping the experience from becoming a compulsory mini-game for every fact.
Simplify with clear boundaries
The five recipes currently share a basic green-tea experience, varying leaf quantities, action counts, timing windows, and orders. Seconds, click counts, and the normal/good/excellent grades are game parameters rather than production standards.
Craft references: Ministry of Agriculture · Xinyang Maojian · Ministry of Commerce · Xiazhou Bifeng craft
Information within an ink landscape
Warm paper, muted tea greens, and wood establish a quiet palette. Bamboo gold and vermilion accent labels and seals. Characters, furniture, plants, UI, and backgrounds remain separate, allowing the same assets to support composition, state changes, and player arrangement.
Illustrated decoration, readable information
Circular tool icons and hanging labels preserve the visual identity; inventory, progress, and prompts use independent text. Padding, type size, and intact panels address clipping, misalignment, and contrast.
Characters use existing static poses; walking and picking animations remain future work.
From assets to a visual system
Generated, separated, and revised artwork is organised by use, turning individual images into a reusable visual system. Transparent characters, terrain, tools, and UI combine in layers, with the same elements serving the home, management scenes, and feedback.
Organised from the original project, without redrawing; grouped by use and ordered by process.
Protagonist, guide, and guests, with separate portraits and scene poses. These are existing static assets.
Backgrounds, distant layers, and building parts. The five-terrace garden and clear interior backgrounds belong to the current version; earlier layers are marked.
Four tea-tree states, followed by landscape planting and terrain. Transparent parts preserve root anchors for composition and arrangement.
Twenty-three original-image parts, ordered by workshop and shop use. Furniture remains separate from people and labels for placement, layering, and hit areas.
From planting resources to craft tools and serving props, following the plant–harvest–craft–serve loop. Leaf, tea-liquid, and fire layers communicate changing states.
Independent buttons, panels, states, quality seals, and functional icons. The webpage uses readable text, while blank artwork preserves the original asset structure.
Web copies come from the existing project and asset directory. Earlier layers are marked, originals remain intact, and AI-assisted art production is disclosed. The original calligraphy is preserved.
From visual corrections to UX iteration
Iteration checks how visual decisions affect action: roots must sit at plot centres, people need credible ground contact, status should identify a particular tree, and modal layers must block underlying input.
A village panorama and original calligraphy establish the entrance, with start and continue actions below.
A quieter palette and bright clouds support the logo; load and settings are organised at the upper right.
Preserves the original logo, lettering, and button composition. This runtime still follows ambient-motion integration and also serves as the case cover.
Cards near buildings identify the garden, workshop, and shop; decorative trees are spread across three village terraces.
Resources and functional icons are organised in the top bar while scene descriptions and entrances remain.
Badges and hanging labels identify areas. Eighteen decorative trees form groups of 5/6/7, distinct from the production garden’s fourteen plots.
Three terraces use shared top guidance, before the current per-tree feedback hierarchy was established.
Tree-ground alignment and toolbar icons are refined; this remains the earlier three-terrace design.
Five terraces follow the reference. Growth and harvest markers identify individual trees, while the left task list holds daily goals.
Tables, a stove, and a rack establish the basic workspace, with a large explanation card at the left.
Original-image furniture restores the workshop’s detail; independent hanging labels identify five processes.
Daily tasks and process guidance have distinct places, while furniture, people, and labels remain separate parts.
Tables, chairs, and a counter define the serving area, with shared order guidance at the left.
The original counter, jars, seating, and parasol are restored, with separate functional labels.
Tasks and order guidance sit at the left, linking requirement checks, stock, and delivery outcomes into the management loop.
Ordered by the project’s first round, second round, and later focused refinements. All are runtime screenshots and can be enlarged; historical screens do not describe current functionality.
Root and ground anchors
Scale visible silhouettes, position feet and roots on the ground, and constrain furniture to the floor with credible occlusion.
State and task hierarchy
Per-tree growth and harvest labels sit alongside daily goals; shared resources maintain continuity between areas.
Arrangement and recovery
The village supports dragging, scaling, locking, layering, and undo; interior editing focuses on floor placement and restoring defaults.
Tend a tea garden
The adaptation below reuses the original five-terrace background, tree stages, characters, furniture, and icons. Play through the planting-to-serving loop, advance days, unlock recipes, and save in this browser. The full Godot arrangement editor, every original panel, and the theme-tea gathering are outside this web excerpt.
Begin with a tea seedling
Plant, harvest, craft, and serve. Learn the first-day loop in around 2–3 minutes, then continue opening all five terraces.
Tend the garden
Plant an open plot. New seedlings mature in 8 seconds; regrowth takes 55 seconds.
Make tea by hand
- Spreading
- Heat fixing
- Rolling
- Drying
- Sorting
Today’s guest
Production pauses when the demo is offscreen, the browser tab is hidden, or you press Pause. Saves stay in this browser and do not access local Godot saves.
Outcomes, validation, and next steps
A working local Godot prototype is supported by iteration-specific logic checks and runtime screenshots. Checks cover terrace openings, resources, rewards, plot anchors, feedback, modal blocking, layout preservation, and audio settings. They document implementation, while learning and usability still require evaluation with players.
What this design establishes
Translate cultural material into states and actions, connect separate spaces through information architecture, and integrate visual feedback, low-pressure rules, and progression into a working experience. AI-assisted asset production and implementation support a design direction, rules, and iteration decisions that I continue to develop.
What to evaluate next
Ask players to complete the first-day loop. Observe navigation, maturity feedback, distinctions between craft explanations and game parameters, and independent order checks. Use task time, errors, and verbal understanding to refine guidance, pacing, and recipe differences.
Explore more
Back to all work
The Big Bang Stigma
Read case studyTranslating research on illness stigma into an interactive journey through identity, recruitment, and livestream performance.
Blind Dating Market Festival
Read case studySix connected scenes explore how self-presentation, conditional matching, and social judgement shape intimate relationships.
