Ottomated.io — Marketing site
Designed, built, and shipped the marketing site for Ottomated. Editorial layout, motion that means something, sub-second LCP.
The product needed a front door that didn't read like SaaS slop. I designed the whole site — voice, type system, illustrations — and built it on Next.js with MDX for the case studies and a hand-rolled animation layer. Lighthouse 100 across the board.
Most B2B SaaS sites read identically: gradient hero, three-column feature grid, logo wall, CTA. We wanted a site that felt like a product made by people who care, with enough density that a technical buyer could evaluate without booking a call.
- 01Had to ship in a month — the app launch was already on the calendar.
- 02Sub-1s LCP on 3G; technical buyers run Lighthouse on you.
- 03CMS-light: marketing should be able to add a case study without touching code.
- 04No third-party analytics that bloat the bundle. Plausible only.
Voice and structure first, two days, in a Google Doc. The site grew out of the writing.
Designed in Figma at 4 breakpoints; component library matched the app's exactly so the seam between marketing and product is invisible.
Built on Next.js 14 with MDX for case studies, Contentlayer for type-safe frontmatter, and Tailwind. Animations are CSS-first, JS only where it had to be.
Edge-cached everything with stale-while-revalidate. Images via Next/Image with AVIF + LQIP.
12 routes incl. home, product, pricing, case studies, blog, changelog, security, careers.
MDX + Contentlayer. Marketing writes drafts in a feature branch; preview deploys per PR.
Custom illustration set (12 marks), iconography, social card generator (per-post OG images).
Plausible + a tiny custom funnel layer hitting Postgres directly. ~3kb of JS.
What it did, in numbers.
“Japheth is the rare contractor who ships the design AND the code, and the seams don't show.”— CEO · Ottomated, Inc.
- ※Writing first, designing second is faster, even when it feels slower.
- ※A marketing site that matches the product visually is worth 6 months of 'we should redesign the dashboard.'
- ※Edge-caching MDX + ISR is the closest thing to a free lunch the modern stack offers.