Skip to content
PORCELAINTECH STUDIO
Back to work
Mini Programs2026Concept project

Tea House Mini Program

A concept WeChat Mini Program that puts member cards, pre-order pickup, table QR ordering, and cross-branch coupons on one ledger.

Interface locales
2
Ordering entry points
3
Cold-start target
< 2s

Client

Concept study — restaurant group

Services

Mini Program · UI/UX · Product design · i18n

Technology

WeChat Mini Program · TypeScript · FastAPI · PostgreSQL · WeChat Pay

The challenge

This is a self-initiated concept study. No client commissioned it, nothing here has shipped, and every screen is our own work — we built it to show how Porcelain Tech Studio approaches WeChat Mini Programs before the first customer engagement.

The premise is a tea house group with four US locations. Most regulars speak Chinese at home and reach for WeChat by habit, so the phone in their hand is already the right channel. The operational reality is messier: a point-of-sale that only knows the store it stands in, a paper punch card, and an official account used purely for broadcasts. A member who earns ten stamps at one branch cannot spend them at another. Staff reconcile coupons by hand at close.

So the hard part is not the ordering screen. It is the ledger underneath it — one member identity, one balance, one coupon pool, readable from any branch during a lunch rush.

What we built

We designed the Mini Program as a thin client over a single membership and ordering service, with four flows sharing that state:

  • Member card. Identity from the WeChat login, stored value and stamps in one record, top-up through WeChat Pay.
  • Pre-order and pickup. Menu by branch, a pickup window the kitchen can actually hold, order status pushed through the official account.
  • Table QR ordering. Each code carries branch and table. Scanning drops the guest straight into a cart with no app install and no account setup.
  • Cross-branch coupons. Issued and redeemed against the shared ledger, scoped per branch or group-wide, expiring on a rule the owner sets.

Bilingual is a data decision here, not a translation pass. Item names, modifiers, allergen notes, and store addresses each carry Chinese and English fields, and the client renders whichever the WeChat system language asks for. Nothing falls back to a machine translation of a drink name.

Outcome

Because this is a concept, the numbers below are design targets that govern the build, not results we are claiming.

We hold the main package under 2 MB so the first tap opens in under two seconds on hotel-lobby wifi. Table ordering reaches checkout in four taps from the scan. One API serves the Mini Program and any later web or native client, so the membership ledger is never forked.

The study is available to walk through in a working prototype on request.

Want something like this?

Most projects start with a short description and a rough budget. We take it from there.

Start a project
Next case studyThe Porcelain Tech Studio Website