Skip to content
Back to the galaxy

Case study · 2026

Live

RouteOps

A bilingual B2B marketing website for RouteOps, a transport management platform — built to turn German delivery, taxi and bus companies into qualified demo requests.

Role
Website design & development
Year
2026
Stack
Next.js 16, TypeScript, Tailwind CSS 4, Formspree, GA4 / GTM
Live Demo
RouteOps — Landing page

01

Project Overview

RouteOps is a transport management platform for delivery, taxi and bus companies. I built its marketing website: a German-first, bilingual Next.js site with a single goal — qualified demo requests from transport companies in Germany. It explains the platform's five areas through product interfaces recreated in code and ends in a demo form that scores every request for the sales team.

02

Problem

Transport companies run their operations across spreadsheets, messengers and separate tools. RouteOps needed a website that explains a broad platform clearly to German B2B buyers, earns trust without inflated claims, respects German privacy law (TDDDG / GDPR) and delivers leads that sales can prioritise.

03

Solution

A fast, statically rendered site with a clear story — problem, platform, features, who it's for, workflow, demo. Product screens are built in HTML/SVG instead of heavy screenshots, the demo form validates, scores and tags every request before it reaches sales, and analytics load only after consent.

04

My Role

Website design & development

  • Information architecture and a conversion-focused page structure
  • Design system matching the RouteOps application
  • Bilingual content model — German at /, English at /en, with type-checked parity
  • Demo form with shared browser and server validation plus lead scoring
  • Consent-first analytics (GTM, GA4, Consent Mode v2) and UTM attribution
  • Technical SEO, structured data and strict security headers

05

Tech Stack

  • Next.js 16
  • TypeScript
  • Tailwind CSS 4
  • Formspree
  • GA4 / GTM

Connected planets

06

Key Features

  • 01

    Qualifying demo form

    Company type, fleet size, role and main challenge are scored into tiers such as qualified candidate or needs review. Nobody is turned away — sales simply sees who to call first.

  • 02

    Product UI built in code

    Dashboard, route monitor, driver app, fleet and finance views are HTML/SVG: sharp on every screen, no image downloads, clearly labelled as sample data.

  • 03

    Consent-first tracking

    No connection to Google before consent. Consent Mode v2, equally weighted Accept and Reject buttons, and events held back until the visitor decides.

  • 04

    SEO in two languages

    hreflang, canonical URLs, sitemap, JSON-LD (Organization, SoftwareApplication, FAQPage) and generated Open Graph images for German and English.

  • 05

    Works without JavaScript

    The FAQ is plain HTML and the demo form falls back to a classic form post, so every visitor can still reach sales.

  • 06

    Hardened by default

    A strict Content-Security-Policy, HSTS and a honeypot plus double-submit protection on the form keep the site and the lead pipeline clean.

07

Screenshots

RouteOps — Operations dashboard
Operations dashboardThe hero opens straight into the product: live routes, stops, on-time rate and fleet utilisation.
RouteOps — Five areas, one platform
Five areas, one platformDispatch, fleet, drivers & HR, compliance and finance — each area summarised with what it actually does.
RouteOps — Route monitor
Route monitorEach feature pairs a real operations problem with the screen that solves it — here, live route progress and deviations.
RouteOps — Qualifying demo request
Qualifying demo requestA two-step form: company details first, then contact details. Every answer feeds the lead score.
RouteOps — Designed for the phone, too
Designed for the phone, tooTables become stacked cards and CTAs go full width — the whole story works on a phone.

08

Challenges

  1. 01

    Explaining a broad platform simply

    Five product areas can overwhelm a first-time visitor. A strict narrative and anchored feature sections — which double as future SEO landing pages — keep it scannable.

  2. 02

    German privacy law vs. attribution

    Marketing needs UTM data, the law needs consent. Attribution is held in memory and only written to storage after the visitor opts in.

  3. 03

    Leads worth calling

    One qualification module runs in both browser and server. Freemail addresses are flagged, not blocked — many small transport firms use GMX or web.de.

  4. 04

    Trust without fake claims

    Every statement maps to a confirmed product feature: no invented customer numbers, logos or testimonials until they can be backed up.

09

What I Learned

  • B2B conversion is about qualifying leads, not just collecting more of them.
  • Privacy-first analytics can still give marketing the data it needs.
  • Honest copy builds more trust than impressive-sounding numbers.
  • Product screens rebuilt in code beat screenshots for speed and clarity.

10

Result

A production-ready bilingual marketing site running on Vercel, with a working lead pipeline to the sales team. It is currently in preview mode — kept out of search results until the final domain goes live.

Languages
DE / EN
Accessibility score
100
Desktop performance
99

Next mission

Avelon Crypto

A crypto portfolio tracker with one Spring Boot 3 backend and two front ends — a server-rendered Thymeleaf app and a Vue 3 single-page app — secured with sessions and JWT.

Read case study
Avelon Crypto — Portfolio dashboard