FlowMetric.
A category-defining marketing site for a product analytics platform.
A B2B analytics product needed a marketing site that told the story of what the platform enables — not a feature list. We rebuilt positioning, information architecture, and the site itself as a founder-led, editorial experience.
Engineering-first team with strong product-market signals but a template marketing site that hid the value under jargon. Sales team was constantly re-explaining the product because the site never did.
Objectives set before design began
- 01Rebuild positioning around outcomes, not features.
- 02Restructure information architecture around three buyer intents.
- 03Ship a fast, editorial marketing site the team can maintain.
- 04Wire inbound leads to CRM + Slack without manual steps.
Discovery
We interviewed the founding team, listened in on sales calls, and read every support conversation from the past quarter. Three buyer intents surfaced clearly, and each got a dedicated pathway on the new site.
UX strategy
Wireframes prioritised a single scanning path per intent. Every section anchored to a specific question a buyer would ask on that scroll depth. No decorative sections; each block did narrative work.
UI design
Editorial layout with a modular design system in Figma. Restrained typographic scale, generous whitespace, and product visuals treated as the hero — not gradients or illustrations.
Development
Built on Next.js with a headless CMS so copy tweaks ship without an engineer. Motion used only for meaning — page transitions and quiet micro-interactions.
Automation
- Demo form routed to CRM and Slack in real time.
- AI-drafted first-touch reply, reviewed before send.
- Weekly analytics digest to founder Slack channel.
- Manrope — Display · headings
- Inter — Body · UI
Production quality
- · Mobile-first breakpoints. Every marketing section redesigned for portrait scroll — not shrunk-down desktop.
- · Keyword map covering category, competitor, and integration intents.
- · Programmatic pages for integrations and use-case combinations.
- · Full schema markup (Product, Organization, FAQPage, BreadcrumbList).
- · Content workflow handed off with briefs for the first quarter.
- · Static generation with edge caching.
- · Image pipeline (AVIF/WebP, responsive sizes).
- · Minimal JavaScript on marketing routes.
- · Font subsetting + preload for LCP text.
- · WCAG 2.2 AA baseline.
- · Semantic landmarks, keyboard-tested navigation.
- · Prefers-reduced-motion respected across all motion.
- · HTTPS-only + HSTS preload.
- · CSP headers, secure cookies, no third-party trackers on marketing routes.
Screens & mobile experience
Notes we keep coming back to.
- 01The best positioning work happens on sales calls, not brand workshops.
- 02Programmatic pages only work when each has a genuine reason to exist.
- 03A design system is worth building only if the client team will actually use it.
Questions about the FlowMetric project.
Was this a redesign or a rebuild?
Both. We rebuilt the site on a new stack and rewrote every page of copy alongside it.
How was the CMS chosen?
Sanity — because their marketing team wanted structured content, not free-form pages.
Do you handle content going forward?
We hand off with briefs and a workflow. Ongoing content is optional retainer work.
How long did design take?
Two weeks of concept + system, then production design ran in parallel with build.
Have a project that needs this kind of care?
Book a 30-minute consultation. We'll talk through what you're trying to build — and whether Siddiq.in is the right studio to build it with you.