NEONVIL & BettaButler
A Case Study: A Pre-Launch Product Site for an Embedded Pet-Tech Startup
Business Outcome
A production pre-launch website for an embedded hardware startup — delivered end-to-end from design through waitlist capture — so a team of firmware and electronics engineers could open pre-orders without diverting anyone onto web work.
Pre-Launch Trust Surface
A site that turns a prototype device into a credible brand — the only trust surface a pre-launch product has until reviews and retail exist.
Waitlist Ready for Launch Day
Low-friction single-field capture, confirmation flow, and an exportable list — ready to convert into pre-orders the day the founders flip the switch.
Hardware Team Shipped on Time
Founders kept hands on firmware and tooling while we owned the web — no context-switch, no divided focus.
Context & Challenges
An embedded pet-tech startup — firmware, electronics, and industrial-design talent, but no in-house web team — needed to convert a prototype automatic feeder into a credible, conversion-ready brand before launch. The site had to carry the entire pre-launch trust story, explain a niche hardware category to fish owners who don't search for it by name, and capture waitlist signups without a backend — all while the founders stayed focused on the device itself.
Four critical delivery challenges:
01
Pre-launch trust without reviews or retail presence: product-detail density (10-day autonomy, live water temperature, OLED display) replaces the social proof a launched product would lean on.
02
Niche audience with low search intent: betta owners rarely google 'automated feeder' — conversion copy leads with everyday pain (travel, forgotten meals, overfeeding) and lets features follow.
03
Image-heavy product story on mobile without killing performance: responsive images, lazy loading, and a Vite single-bundle build keep Lighthouse at 100 on 4G.
04
Email capture with no backend: a form-relay service handles signups, confirmations, and launch-day export — no function, database, or ops surface the founders have to maintain.
Project Goals
Marketing Site
A fast, mobile-first product site that tells the full story — hero, features, how-it-works, FAQ, and founder voice — in a single Vite-bundled React SPA.
Waitlist Capture
A low-friction single-field signup that converts niche pet-owner traffic into a clean, exportable pre-launch list.
Launch Readiness
SEO, Open Graph product metadata, social cards, and analytics wired up so launch day is a content flip, not a rebuild.
Our Solution
Three layers for a pre-launch site. The marketing layer carries the story. The conversion layer turns visitors into waitlist signups without a backend. The delivery layer keeps the site fast, discoverable, and edge-cached everywhere.
Marketing Layer
React + Vite SPA with the full product story
Hero with product positioning and primary waitlist CTA
Feature sections: 10-day autonomy, live water temperature, OLED display
How-it-works flow that explains the hardware in plain language
FAQ and founder-voice copy that builds pre-launch trust
Conversion Layer
Email capture without a backend
Single-field signup validated client-side for instant feedback
Hosted form-relay service stores signups and fires confirmation emails
Launch-day-ready exportable list — no database, no ops surface
Graceful error states for duplicates and network failures
Delivery Layer
Fast, discoverable, edge-cached
Single JS + single CSS bundle kept small for mobile 4G launches
Responsive images and lazy loading below the fold
Open Graph product metadata, Twitter cards, and structured data
Edge-cached CDN hosting with per-commit preview URLs
Effort Allocation
UI/UX & Design (35%)
Frontend Build (25%)
Product Copywriting (15%)
Waitlist & Integrations (10%)
Performance & SEO (10%)
Deploy & Handover (5%)
Product Site Screens
Landing Hero
Product Overview
Feature Highlights
10-Day Autonomy
Live Water Temperature
OLED Display
How It Works
FAQ
Waitlist CTA
Infrastructure & Technologies
React + Vite
Chosen for a single-bundle SPA that launches with near-zero time-to-interactive — Vite's dev server keeps the design iteration loop under a second while the production build stays trivially small for a marketing site.
Tailwind CSS
Chosen for responsive-first utility classes that keep mobile layout and desktop hero identical in source — no separate stylesheet fork, and no unused CSS shipped to the browser.
Email Capture Service
Chosen so the waitlist doesn't need a backend — a signed form endpoint stores signups, fires confirmation emails, and exposes the list for launch-day export with zero ops surface.
CDN Hosting
Chosen for global edge delivery and instant previews per commit — founders review design changes on their phone within seconds of a push, no staging server to babysit.
Google Fonts
Chosen for typographic polish without a font-licensing bill — preconnected in the HTML head so the first paint lands with the intended typeface rather than a flash of system sans.