Conversion-first website with an AI chat concierge, built as Deliverable 03 of a three-month fCAIO consulting engagement for a Manila-based internationally certified relocation firm
I designed and built a high-craft marketing site for a Manila-based international moving and relocation company — part of a decades-old family business — including a rules-plus-AI chat concierge named Lisa that qualifies leads around the clock and routes warm prospects to the human team. The site is the proof-of-concept layer for a broader AI-systems engagement.
The brief
The client is a family-run internationally certified moving and storage company — nearly 50 years in Manila, part of a regional multi-office Asia network. Their digital presence was not converting. The brief, as Deliverable 03 of a three-month fCAIO AI consulting engagement (₱500K base + ₱200K performance bonus), was to build a lead-gen website that works around the clock: capturing, qualifying, and warming enquiries while the sales team is unavailable, then handing them off cleanly.
The strategic context matters. In the Philippines, no moving competitor had a real AI chatbot at the time of build — the first-mover window was confirmed in a competitive audit of Manila’s top movers. The site is the proof-of-concept and demo asset; the production channel strategy (Viber primary, Messenger secondary) runs in parallel.
What I built
A single-page site with a scrolling narrative arc — heritage, services, process, proof, FAQ, quote — anchored by two conversion surfaces:
Lisa, the AI move concierge. A floating chat widget (bottom-right, Intercom-style home view + conversation view) that handles enquiries in two layers. The frontend runs a 25+ rule intent-matching engine covering the most common questions — customs duty, container sizing, shipping timelines, visa types, pets, fine art, pricing deflection — with zero latency. For anything outside those rules, it calls a Cloudflare Pages Function that proxies to Claude Haiku 4.5 with a tightly scoped system prompt. Lisa never quotes prices (hard rule, enforced in prompt and in the canned engine), always pivots to the free survey, and routes complex or ready-to-book users to the human team via WhatsApp or phone.
The quote form. A three-step card form (move type, timing, contact details) with a hairline amber progress indicator and a WhatsApp-toggle that defaults to on — because the PH market is WhatsApp-native. Form wiring to WhatsApp Business API and lead tracking are the next build phase; the frontend is complete.
Supporting detail: scroll-scrubbed GSAP packshow animation (branded moving boxes reveal across a living-room scene as the user reads the process section), magnetic CTAs, 3D-tilt service cards, IntersectionObserver-driven section reveals, self-hosted variable fonts (no CDN dependency), PWA manifest and service worker, and Schema.org structured data for both MovingCompany and FAQPage — the latter targeting AI search and GEO visibility directly.
How it’s built
The stack is deliberately lean. No JS framework, no build step, no CDN font dependency — the site loads fast and works without JS (scroll reveals degrade gracefully; GSAP is a progressive enhancement). The AI backend is a single Cloudflare Pages Function (functions/api/chat.js) that:
- Origin-locks requests to the production domain (the Anthropic key never touches the browser)
- Caps per-message input at 2,000 characters and context history at 12 turns to bound token cost
- Limits responses to 400 tokens (chat bubble format)
- Retries up to three times on transient upstream failures before surfacing an error
The Lisa system prompt is scoped hard: no prices, no off-topic answers, explicit prompt-injection resistance, Taglish mirroring if the customer code-switches. Key facts (duty-free allowances, shipping times, customs rules, visa categories) are baked in so Lisa can answer the 80% of questions without hitting the API at all.
Design direction targets award-grade quality: Fraunces (display) + Hanken Grotesk (UI), amber brand color used flat and sparingly (underline draw on hero headline, CTA fill, form progress, never gradient), typography-first dark hero, real photography only (no stock), two motion interactions total.
Why it matters
This is Deliverable 03 inside a three-month AI consulting engagement — the most visible artifact a client ever touches, and the one that proves the ROI hypothesis for the rest of the work. It had to be good enough to hold up as a demo, a proof of concept for Lisa on other channels (Viber, Messenger), and a template for future fCAIO client engagements.
It also had to be honest: the “under 60 seconds” response claim is backed by real system behavior, not copy. Lisa never invents prices. The AI disclosure is visible in the widget footer. The form’s placeholder state is labeled as such in the code. The build treats credibility as a design constraint, not a marketing add-on — which is the only position that survives a client who’s been in business for nearly 50 years and knows exactly what trust looks like.
Want something like this?
That's the kind of thing I build. Tell me about yours.