Flowgear Website Rebuild Plan

Why this rebuild matters

The Flowgear website is not a minor refresh project. By late March 2026, it had become the single most important marketing priority — nothing else in the marketing function was ranked above it. The rebuild carries direct commercial pressure: qualified leads need to improve, and the current site is not delivering them. Lead quality has been described internally as "shocking." The site generates activity, but not the pipeline that matches Flowgear's sales motion.

Part of the problem is product drift. Flowgear has evolved substantially — the V2 runtime, web apps, and MCP/AI integration represent a fundamentally more capable platform than the one the current site describes. Visitors are evaluating an outdated version of the product. That gap is not a copy problem alone; it is a positioning problem.

The second gap is commercial framing. Flowgear sells through a consultative, assessment-led motion — a structured five-step engagement where a Solution Architect evaluates a client's integration estate, baselines maturity, surfaces automation opportunities, and delivers a prioritised roadmap. That is a differentiated commercial offer. The current site does not position it clearly.

This rebuild must fix all four of the site's core jobs at once: clarify a complex platform so both business and technical buyers understand it quickly; support the assessment-led commercial motion; persuade both audience segments (business outcomes for C-level, technical depth for architects); and generate more qualified leads. None are optional.

Sitemap intelligence

The sitemap index at flowgear.net/sitemap_index.xml reveals the full current site structure. This informs both the redirect strategy and which content can be migrated vs built new.

URL migration categories

Every URL on the live site falls into one of three categories. Classifying them requires GA4 and GSC access — do not cull anything without traffic data.

• Keep and 301 redirect: High-traffic posts aligned with MVP pillars. 301 to the closest equivalent page in the rebuilt site. These are the URLs that protect organic traffic through the transition.
• Consolidate: Thin or overlapping content covering the same topic. Merge into the appropriate pillar page. 301 all old URLs to the merged destination.
• Cull with 410: Outdated announcements, thin content with no backlinks and no measurable traffic. Return 410 (Gone) — this signals intentional removal to crawlers rather than a broken link.

Action required before launch: GA4 and GSC access to classify all existing URLs. Build the redirect map during Day 1–2 alongside the sitemap crawl. This is not optional — an unplanned launch creates 404s that damage the crawl health of the new site from day one.

Work already in progress

The rebuild is not starting from zero. Substantial design and copy work has already been completed for the highest-priority pages. Four full-page mockups exist and are live for review.

What the mockups establish

• Homepage A: Assessment-led commercial motion — Integration Assessment as the primary CTA, platform proof as the supporting layer. Dual audience architecture with distinct hooks for C-level and technical evaluators.
• Homepage B: Platform-led — leads with product depth and capability before moving to the assessment offer.
• Pricing A: Consultative-led — frames pricing in the context of the assessment model. Builds commercial context before showing numbers.
• Pricing B: Price-forward — leads with the tiers and numbers directly, for buyers who already know what they want.

Flowgear marketing should select a preferred direction from each pair. Once one homepage variant and one pricing variant are selected, the build agent uses those as the design baseline for all remaining pages.

2-week AI-assisted build plan

With agentic AI handling all build, copy, and schema work simultaneously, the critical path is decision speed and review throughput — not production time. AI builds all 57–62 pages in parallel. Humans review in priority order. The bottleneck is not the build; it is Day 1–2.

Visual design direction

The rebuild must feel like a product, not a marketing website. The visual language should be adjacent to the V2 console — dark, operational, and precise. Reference benchmarks: n8n (dark mode and product-adjacent UX), Workato (show-don't-tell, looping screen captures, motion to show integration as live and working).

Core principles

• Dark mode first. Deep navy backgrounds — not a light site with a dark variant. Visitors should feel they are entering the product's world, not a separate marketing artefact.
• Show, don't tell. Looping UI captures, annotated screenshots, and interactive elements replace text-only explanations. Integration is shown as live, working, and measurable — not as a cloud diagram with arrows.
• Operational, not abstract. Every diagram and illustration must show real product behaviour. No stock illustrations. No generic iStock workflow arrows.

Colour tokens

Key page patterns

Hero section: Large dense headline — outcome-led, not feature-led. A looping or animated product capture directly in the hero (V2 console, workflow canvas, or MCP in action). Trust strip immediately below fold: logo carousel of known customers and connectors. The four existing homepage and pricing mockups demonstrate this pattern.

Solutions pages (Department / Technology / Application): Full-width dark header band with turquoise left-border accent on the page title. Use case cards in a grid with framework-coloured left borders (Finance = turquoise accent, Operations = blue). An "Integrate with" panel at the bottom of each page — connector logo grid linking to the connectors hub. Interactive tab or filter on solutions hub pages — switch between Department / Technology / Application view.

Connectors hub: Searchable, filterable grid of all connectors. Category filters matching the Technology framework (ERP, CRM, WMS, etc.). Future home of the drag-and-drop connector pairing tool in Phase 2.

Visual elements that differentiate from a generic iPaaS site

• Inline workflow diagrams built in SVG/CSS — not stock illustrations. Animated data flow lines between system icons (subtle pulse, as shown in the connector tool concept above).
• Real metric callouts from customer stories — not fabricated statistics. Named customers with company, role, outcome, and metric in a citation-ready format.
• Code window mockup for V2 Runtime and developer-facing sections — shows a real config or workflow snippet, not a screenshot of empty IDE.
• Assessment progress stepper on the Integration Assessment page — the five-step model (Discover, Assess, Identify, Shape and Prioritise, Deliver) rendered as an interactive stepped component. This pattern already exists in the homepage mockups.

Design system foundation already built

The four existing mockups (Homepage A, Homepage B, Pricing A, Pricing B) establish the complete design language: token set, typography scale, component patterns, grid system, and dark mode conventions. The build agent references these as the visual baseline for all remaining pages — no design system work is required before the Day 3 build begins.

Responsive breakpoints: 375px (mobile minimum) · 768px (tablet) · 1280px (desktop) · 1440px (wide)

Typography: Inter across all weights (400, 500, 600, 700) — already loaded in all mockups via Google Fonts CDN.

Icons: Lucide icon set via CDN — consistent stroke weight, no external image dependencies.

How do you know the MVP worked?

Define success criteria before launch — not after. These are the five signals that tell you whether the rebuild improved the commercial function of the site.