Moonleaf App — Phase 1 Mockup

Login, plus a tabbed Home / Rewards / Refer / Menu app shell: a digital stamp card, one active happy-hour deal, a referral program, and a best-sellers menu browse. No ordering or checkout — this is the in-store loyalty layer, not a delivery app.

Home · Rewards · Refer · Menu

Good afternoon

Hi, Miguel

6 / 10 leaves

Your stamp card See details

Collect 4 more leaves for a free Tall drink of your choice.

Happening now

HAPPY HOUR · 2–5PM

20% off Wintermelon

Today only, while the slow-afternoon lull lasts. Claim below — your 40-minute window starts the moment you tap.

47:12

Invite a friend

Get a 10% coupon after their first purchase.

Best sellers See full menu

Rewards

Every ₱100 spent earns 1 leaf. 10 leaves = a free Tall drink.

6 of 10 collected4 to go

Collect 4 more leaves for a free Tall drink of your choice.

How it works

Show this screen at checkout

The crew scans or taps to log your visit.

Earn 1 leaf per ₱100 spent

Leaves are added automatically after payment.

Redeem at 10 leaves

Get any Tall drink free, then your card resets.

Recent activity

Thai Milk Tea

Aug 27 · In-store

+1 leaf

Ube Milk

Aug 21 · In-store

+1 leaf

Brown Sugar Milk

Aug 14 · In-store

+1 leaf

Refer a Friend

Give them a reason to try Moonleaf — earn a coupon when they do.

Get 10% back on your next order

When your friend logs in with their own number and earns their first leaf, we'll credit a 10% rebate coupon straight to your account — automatically.

Send a referral

Friend's name

Friend's contact number

Referral sent! We'll notify you once it's redeemed.

Your referrals

Browse only — order and pay at the counter.

What's interactive in this mockup

Home, Rewards, Refer, and Menu are all live tabs — use the bottom nav, or the shortcut links on Home, to switch between them.
The happy-hour countdown ticks down live, and "Claim deal" starts the 40-minute redemption window — mirroring the McDonald's-style urgency mechanic.
The stamp card (shown compactly on Home, in full on Rewards) stays in sync across both — tap any leaf on Rewards to preview progress.
Refer is new: submit a friend's name and contact number to send a referral. It appears in "Your referrals" as Pending; use the dashed "Simulate first purchase" button on a pending entry to preview it flipping to Redeemed with a 10% coupon code generated. In the real app, that trigger fires automatically the moment the referred friend logs in with their own phone number and earns their first leaf — matched against the number submitted here, no staff confirmation needed.
Menu is grouped into Milk Tea & Milkslush / Fruit Tea & Juice / Coffee, using your actual best-sellers list — browse only, no cart or checkout.