eednee / Work

Magna Studio

Magna Studio: a planning-drawings website built on Astro and Cloudflare

Magna Studio homepage: Planning Drawings London, Fixed Fee
ClientMagna Studio, architectural designers, London
SectorResidential planning drawings and Building Regulations packages
DeliveredSeptember 2026
StackAstro, Preact, Tailwind CSS, MDX, Cloudflare Workers, D1, KV
Our roleProduct design, content architecture, development, SEO, hosting

The brief

Magna Studio is a group of architectural designers who prepare planning drawings and Building Regulations packages for extensions and loft conversions across London and the Home Counties. They wanted a site that does three things well: explain a fixed-fee service clearly, answer the planning questions homeowners actually search for, and turn that attention into qualified enquiries without a sales team.

The constraints were real. Fees depend on the type of work and the council, so a static price list would not do. The word "architect" is a protected title in the UK, so every page had to describe the practice accurately. And the practice needed to appear for dozens of local searches on day one, not after a year of blogging.

What we built

An instant estimate instead of a contact form

The centrepiece is the instant estimate tool: a short questionnaire about the property and the work planned that returns an indicative fee range on the spot. It runs as a small Preact island inside an otherwise static page, so it loads fast and works on any phone. Every estimate can be turned into an enquiry with one more step.

Content built as data

Rather than hand-writing pages, we modelled the content: services, local areas, guides, planning facts, FAQs and project examples all live in typed content collections validated at build time. From 46 area entries and 14 service definitions the build generates every area, service and area-by-service page, so the site launched with close to three hundred pages that share one source of truth. The long-form planning guides cover the questions that come up in every first call, from permitted development limits to what a lawful development certificate is for.

A serverless lead pipeline

Enquiries go to a Cloudflare Worker that validates the request, checks a Turnstile token, rate-limits by IP with KV, stores the lead in a D1 database, sends a confirmation email through Resend and syncs the contact into HubSpot. There is no server to patch and the whole path costs pennies a month.

Search visibility from launch

Structured data for the organisation, services, FAQs and job postings, a generated sitemap, IndexNow pings on every deploy, per-page Open Graph images and a machine-readable summary for AI assistants. The copy itself was audited against live search results before launch so titles and headings match how people search.

Engineering quality

  • Static output from Astro, served from Cloudflare's edge with the Worker handling only the API route.
  • Unit tests for content models, pricing rules and page data with coverage thresholds, plus Playwright end-to-end journeys.
  • HTML validation and Lighthouse CI in the pipeline, so regressions in accessibility or performance fail the build.
  • One-command deploy that builds, publishes the Worker, refreshes zone routes and notifies search engines.

Outcome

The site went live in September 2026 with the estimator, the lead pipeline and every area page working end to end, and the first enquiries reached the practice's inbox and CRM within days. Because the content is data, adding a new town or service is a single file, not a new build project.


Have a service business that needs to explain itself and generate enquiries? Talk to us.