The problem

Fieldnote’s site was a slow template that didn’t show the product. The founders wanted motion and polish, but had no front-end engineer to maintain it.

Constraints

Six weeks to launch, no engineering time after handover, and a marketing team that needed to publish pages on their own.

Design decisions

Show the product working instead of describing it. Every feature section is a small, real interaction rather than a screenshot.

What I built

Designed in Figma, built in Framer with an editable component set, and the hero and feature illustrations made interactive in Rive.

Trade-offs

I cut a scroll-driven 3D hero that looked great but tanked performance on mid-range phones. A lighter Rive version kept 90% of the effect.

The result

The site scores 98 on Lighthouse performance and trial signups rose 41% in the first month. The team has shipped twelve pages since without help.

What I’d do differently

I’d write a tiny content guide alongside the components. A few pages drifted in tone once the team took over.