Ottomated.io — Marketing site for Otto
The marketing front door for Otto Utility Intelligence — hand-coded across eleven pages, no framework, no build step. One job: turn awareness into qualified leads.
Otto Utility Intelligence needed a front door — somewhere a technical buyer could evaluate the product, find the founder partner program, and start a conversation. I designed and shipped that front door as plain hand-coded HTML. No framework, no MDX, no build step. It started as a single page and grew, as the product grew, into eleven — three product pages (Billing, Resident, Pay), four platform pages (Integrations, Compliance, Invoice Processing, VUCR), an Otto Billing Services managed-plan page, and the supporting Contact + Privacy pages — all sharing one editorial voice and one canonical nav.
Otto needed a marketing site, but most B2B SaaS sites read identically — gradient hero, three-column feature grid, logo wall, big CTA. Otto's buyers (billing analysts and property managers) can spot that pattern from across the room and immediately distrust it. The site needed to feel like it was made by someone who counts pennies for a living, with enough technical density that a person who actually runs a billing cycle could evaluate without booking a call.
- 01No build step. Edits had to be a save-and-push away.
- 02Editorial voice — Lora for display, Poppins for chrome, italic Ember accents. No 'leverage', no 'streamline', no rocket emojis.
- 03Honesty in pricing and integrations. List what's live; mark what's coming. Never imply vaporware ships today.
- 04No tracking pixels, no third-party analytics. Privacy-first.
Voice and information architecture first, in a Google Doc. Two days arguing with myself about whether 'Iris' (Otto's AI colleague) belonged on the page at all. Settled the Otto-vs-Iris identity boundary — Otto = platform that presents and organizes; Iris = AI worker who proposes and executes — and the rest of the copy fell out of it.
Per-page hand-coded HTML. Each page carries its own foundation CSS inline. Yes, this duplicates the design system across files; yes, it's tracked as a real backlog item; no, I didn't regret it for the velocity gain.
Animations are pure CSS keyframes — hero rise on load, floating chips, pulsing eyebrow badges, 3D perspective tilt on product shots, the Iris breathing animation. No Framer Motion, no JS animation library.
Pulled the Iris design assets directly from Otto's product design skill — 7-ray ember mark, breathing animation, ambient inline-callout pattern. Marketing's Iris had to feel exactly like the product's Iris, not a marketing illustration of her.
Form submissions go to a Vercel serverless route + Resend → founder inbox. UTM parameters captured and forwarded with each lead.
Homepage + three product pages (Billing / Resident / Pay) + four platform pages (Integrations, Compliance, Invoice Processing, VUCR) + Otto Billing Services managed-plan page + Contact + Privacy. One editorial voice, one canonical nav, no framework.
Homepage callout naming both entities and locking the boundary: 'Otto shows you what is. Iris explains what she did.' That treatment then propagates to every operator-side and resident-side surface across the site.
7-ray ember mark with breathing animation, ambient inline callouts on operator pages, scoped chat UI on /resident showing billing-only answers plus a clean non-billing escalation path. Lifted directly from Otto's product design skill.
Products + Platform dropdowns mirroring the footer groupings, mobile hamburger with full-screen drawer, active state per page. Vercel serverless route → Resend → founder inbox for contact-form leads.
What it did, in numbers.
“Japheth is the rare contractor who ships the design AND the code, and the seams don't show.”— Founder · Ottomated, Inc.
- ※Writing first, designing second is faster, even when it feels slower. Settling the Otto-vs-Iris identity boundary unlocked the whole copy structure; designing the layout first would have produced something taller and worse.
- ※Hand-coded HTML is the right answer surprisingly often. Frameworks are tax you pay for things you don't always need.
- ※Use the product's design assets directly. The Iris mark already existed in Otto's brand kit with canonical animation rules — pulling it inline as an SVG symbol made marketing's Iris feel real, not decorative.
- ※Honesty in the integrations list converts. Listing Buildium, Yardi, Rent Manager, etc. as 'coming soon' instead of implying they're shipped reads as confidence, not weakness.
- ※CSS containing blocks are surprising. A `backdrop-filter` on the nav broke the mobile drawer's `position: fixed` for half a day before I read the spec carefully — filter properties create new containing blocks for fixed-positioned descendants. Now I know.