Cafe Gyoen is Singapore's matcha bar on Club Street: single-origin ceremonial matcha from Uji, Mie and Kagoshima, hand-whisked to order, alongside Japanese teishoku set meals. It moved from Serangoon Gardens to a Club Street shophouse and needed a site that could do the work the counter does, greet a walk-in, take a tasting booking, and sell a tin to carry home. We built one platform for all three, and engineered it so both Google and AI assistants can read exactly what Cafe Gyoen is, where it is, and what it serves.
A matcha bar that had to work as hard as the counter
Cafe Gyoen is not a coffee shop that happens to serve matcha. It positions itself as Singapore's first dedicated matcha bar: tea graded by origin, whisked to order at a counter, served with teishoku sets that treat lunch as a ritual rather than a transaction. That specificity is the whole brand, and it is exactly what a stock restaurant template erases.
The client is a single Club Street venue, 87 Club Street in the heart of Singapore's dining district, with a walk-in trade, a growing audience of tea enthusiasts, and a retail line of matcha and handmade bamboo whisks. Three different people arrive at the site with three different jobs to be done. Flattening them into one homepage with a phone number would have left most of them unserved.
Three guests, one system
Rather than build separate microsites, we treated every guest intent as part of one connected journey. The platform covers the room and its story, a menu, reservations, a shop with product pages, an events and media page, a wholesale enquiry route for stockists, a journal, contact and reach-us pages, and the legal surface underneath. A first-time guest finds the concept, the menu and the location. An enthusiast books a tasting. A stockist takes the wholesale route. A customer buys take-home matcha. Nobody has to switch digital languages to get from one to the next.
The result is a site that behaves like a host: it recognises why a visitor came and hands the next action to the part of the system that can complete it.
A hero that pours like the counter does
The concept is sensory, so the front door had to be too. Instead of a stock photo and a headline, the homepage opens on a signature aperture hero: five circular portals, each a doorway into a different part of Cafe Gyoen. One plays an ambient farm soundscape, one opens a film of the grinding mill, one leads into the shop, one into the craft story, and one opens the Club Street location in Maps. Hovering or tapping a circle expands its image outward like an aperture opening, filling the screen with a soft liquid easing, then settling back.
It is built with Framer Motion over a Lenis smooth-scroll base. The circles scatter and fade with a subtle scroll-driven parallax as the page moves, the headline reveals line by line with a fade-and-blur, and every motion has a fully respected reduced-motion path, so guests who prefer stillness get a calm, static version with nothing lost. On mobile the same idea becomes a tap-to-expand grid with a full-screen overlay. It is the kind of front door that tells a visitor, before they read a word, that this is a place that cares about craft.
Built to be found, by people and by machines
A beautiful site that cannot be found does not sell tea. So the discoverability layer is where much of the engineering went, and it is the part a buyer should care about most.
Every page carries deliberate metadata, a self-referencing canonical, and Open Graph and Twitter share cards from a single central helper, so a shared link previews correctly instead of arriving as a bare URL. Underneath that sits a genuinely complete structured-data graph: 23 typed schema.org entity types, generated with schema-dts and cross-linked by ID into one machine-readable model of the business. A Restaurant with address, geo-coordinates, opening hours and cuisine; a Menu with its sections and items; Product and Offer nodes for the shop; an Event with its performer for the guest tea master; FAQPage, Store, Organization, WebSite and breadcrumbs binding it together. When someone searches for a matcha bar near Club Street, or asks an assistant where to drink ceremonial matcha in Singapore, the answer is legible rather than guessed.
On top of that sits an AI-readability layer most restaurant sites do not have at all: a root llms.txt plus a focused llms.txt beside every page and every product, with an automated test that fails the build if any page ships without one. A Google Merchant Center product feed and an RSS feed round it out. And we did not stop at making the site technically ready to be indexed, we connected it: Google Search Console and Google Merchant Center are both set up and verified, so the pages and the product catalogue are actively submitted to Google rather than waiting to be discovered. This is the difference between hoping to be found and being engineered to be.
Commerce and tastings that actually close
Two of the three guest intents end in a transaction, so both had to be real, not a contact form. And we did not just build the shopfront, we set up the entire commerce operation behind it.
The Shopify side was ours end to end: the store backend and settings, the product catalogue built out and merchandised, a headless theme, and the domain connected so the storefront and checkout live under one brand. On that backend, the shop the guest sees is a headless Shopify storefront, real product pages for the matcha line and the handmade KAZUHO and SHIN bamboo whisks, a cart, a guest accounts system, and checkout on Shopify's hosted, PCI-compliant flow.
The accounts system is engineering, not a default Shopify button. We coded it against Shopify's Customer Account GraphQL API: guests sign in through a full OAuth flow with PKCE, their identity tokens are cryptographically verified before any account data is shown, and each returning guest gets their real order history back. The store remembers its customers instead of treating every visit as a stranger's first. It is all wired with the care that keeps a store trustworthy, signed webhooks that refresh product data on change, timeouts and retries on every storefront call, and a secure, http-only cart cookie.
A store only earns when a sale completes, and most first visits do not. So we built the lifecycle layer that turns near-misses into revenue: automated abandoned-cart emails that bring a hesitating buyer back to their tin, post-purchase thank-you and re-engagement flows that turn a first order into a habit, and the marketing automations around them. These run on their own, recovering and repeating revenue without anyone at the counter lifting a finger.
Tastings and tables run through the venue's official TableAgent reservation embed, with resilient direct links as a fallback if the embed is ever blocked, because an honest embed on a supported provider is more reliable than a custom layer pretending to own availability.
The whole thing is served statically with hourly regeneration on Vercel, so pages are fast and always current, and it ships with baseline security headers, no-sniff, frame-deny, a strict referrer policy, a locked-down permissions policy and cross-origin isolation for the checkout popup.
The stack, and why each piece earns its place
Good engineering is not a pile of trendy tools; it is the right one in each layer, chosen for a reason the client can feel. This is what runs Cafe Gyoen, and why.
None of this is a page builder or a plugin stack. That is precisely why the site scores where it does and reads cleanly to both search engines and AI assistants. Each choice is current, deliberate, and there because the layer above or below it needed it, not because it was fashionable.
What the audit says, and what it does not
Audited on the live site in July 2026, desktop PageSpeed Insights returns 100 Performance, 100 SEO, 100 Accessibility and 100 Best Practices, with a clean 3 of 3 on agentic browsing. The structured-data graph and the per-page machine summaries are verifiable in the page source today.
A homepage this animated, an aperture hero with sound, video, scroll parallax and a five-portal reveal, usually taxes a performance budget. This one holds a perfect 100, because the motion is engineered off the critical rendering path. Scoring 100 on a static page is easy; holding it under this much motion is the hard part.
We publish the technical result because we measured it. We do not publish covers, revenue or booking numbers, because those are the client's to share and have not been approved for this page. This case study records a shipped, live platform and its audited performance, not a commercial claim we cannot stand behind. That line is the point: the work speaks, and it does not need to borrow numbers it did not earn.
Want a platform that gets your venue found, booked, and bought from? See Our Services or Start A Project.