zsty.us

Before / After · Case Study

Niche Cafe — a coffee trailer's chalkboard menu turned into a site that sells the vibe

  • Restaurants

A Venice coffee trailer had a template one-pager with a tagline, a phone number and six photos — the actual menu existed only as pictures of two chalkboards. Now every drink is online in a page that recolors itself to whatever you're looking at, live the same day the build started.

“The menu lived on two photographed chalkboards. Now it's structured data a search engine can read — the day the owner says go.”
New build (live)↗Legacy → nichecafes.com↗
🔒nichecafes.vercel.app
jackiej.events — modern site

At a glance

What this rebuild covers.

  • Design

    The page reacts to the visitor: whichever signature drink you're viewing tints the glow of the navigation, the scroll line and the moving background to match.

  • Theme & color

    The whole site lives in espresso, caramel and crema tones — a slowly swirling coffee-colored field instead of a heavy background video, and it settles to a still image for visitors who prefer less motion.

  • Speed

    Every page is pre-built and served worldwide, and the animation is a few kilobytes of owned code that eases up on low-power phones — so the cinematic feel costs almost nothing to load.

  • Search visibility

    The menu is now real data a search engine can read, but the site deliberately stays hidden from search until the shop's own web address moves over — so it never competes with the current site for the shop's name.

The story

Problem · Insight · Build · Outcome.

  1. 01 · Problem

    A template site with no menu, next to a trailer with two chalkboards.

    The page-builder site had the tagline and the phone number. Everything a customer actually wants — what can I order, what does it cost, when is the trailer open — lived only on the boards at the trailer window and in the owner's head.

  2. 02 · Insight

    Steal the mood from the cup, not from a video file.

    The reference sites in this aesthetic lean on heavy background video. The same cinematic feel comes from a hand-shaded animated field in espresso tones that recolors itself to the drink you're viewing — owned code, near-zero bandwidth, and a graceful still-frame fallback.

  3. 03 · Build

    One session, one page, everything owned.

    Menu transcription, gallery, story, find-us, catering and the full effects system were built and deployed in a single day on our hosting platform. Every route is static, so there is nothing to keep alive and nothing to pay for at idle.

  4. 04 · Outcome

    Live and waiting for its own name.

    Public and verified on desktop and mobile the same day. The custom domain attaches with a single DNS record, and indexing flips on when the owner retires the old site — no rebuild required for either.

For the technically curiousHow it was done
  1. 01

    Where it started

    The old site was a GoDaddy Website Builder one-pager: a tagline, a phone number and six photos served off the builder's stock image network. No menu, no structured data, no sitemap. Everything a customer actually wants — what can I order, what does it cost — lived only on two chalkboards at the trailer window.

  2. 02

    The menu became data

    Both menu boards were transcribed from photos into a structured menu — smoothies, coffee, tea, shakes, lemonades and infused energy drinks — rendered as glass cards and emitted as cafe-plus-menu markup for search engines. Where a board price was too blurry to read with confidence, it was flagged for the owner to confirm rather than guessed.

  3. 03

    The ambient system

    Instead of the heavy background video the reference sites in this aesthetic lean on, the hero is a hand-shaded animated field in espresso tones that runs on the visitor's own graphics hardware. It's wired into an ambient system: the drink centered in the gallery tints the nav glow, the scroll vein and the background field. It runs at half resolution on low-power devices, survives a lost graphics context, and collapses to a single still frame when the visitor prefers reduced motion.

  4. 04

    What runs now

    Menu, gallery, story, find-us, catering and the full effects system were built and deployed in a single session on our hosting platform. Every route is static, so there is nothing to keep alive and nothing to pay for at idle. The site went public and was verified on desktop and mobile the same day.

  5. 05

    What the owner does now

    The rebuild sits on a temporary address next to the live site, shipped behind a no-index gate — two addresses competing on the same brand terms would split search authority. The sitemap and menu markup are already built; the owner confirms the flagged prices, points the brand domain over with a single DNS record, and one flag flips indexing on. No rebuild required for either step.

Before

  • GoDaddy Website Builder one-pager
  • Menu = two photographed chalkboards
  • Photos served off the builder's stock CDN
  • No structured data, no sitemap

After

  • Modern app framework — every route static
  • Our hosting platform (global CDN)
  • Hand-shaded animated hero (runs on the visitor's GPU)
  • Structured cafe + menu schema
  • Indexing gate — one flag flips at domain cutover

What changed, with evidence

Design

An ambient system, not a slideshow

The hero is a hand-shaded fluid field in espresso, caramel and crema tones — re-shaded from another build in this portfolio — and it's wired into an ambient system: whichever signature drink is centered in the gallery tints the nav glow, the scroll vein and the background field to match. It runs at half resolution on low-power devices, survives a lost graphics context, and collapses to a single static frame when the visitor prefers reduced motion.

Before
Six static photos in a page-builder template.
After
A page that reacts to what you're looking at, for a few kilobytes of code instead of megabytes of background video.
Retention

The menu became data

Both trailer menu boards were transcribed from photos into a structured menu — smoothies, coffee, tea, shakes, lemonades and infused energy drinks — rendered as glass cards on the page and emitted as cafe-plus-menu schema for search engines. Where a board price was too blurry to read with confidence, it's flagged for the owner to confirm rather than guessed.

  • Every drink priced from the board photos — uncertain prices flagged, not invented
  • Cafe + menu structured data emitted on the page
  • The old site listed no menu at all
Agent backbone

Indexing is a decision, not a default

The rebuild sits on a temporary URL next to the shop's live site. Two domains competing on the same brand terms split authority, so the whole site ships behind a noindex gate: sitemap and schema are already built, and one flag flips them live the day the brand domain points here.

← All rebuilds

Niche Cafe — a coffee trailer's chalkboard menu turned into a site that sells the vibe — zsty.us