M-Webentwicklung
DEEN – English
M-Webentwicklung
Start a project
DEEN – English

Relaunch of a workshop website

MK Karosserie

A workshop that works the metal instead of just swapping parts, shown through a bare body shell that is repaired as you scroll.

  • 3D body shell on the straightening bench
  • Before and after as an inspection lamp
  • Step-by-step enquiry with photo upload
Home page of the MK Karosserie website with a car body drawing and a marked repair zoneHome page of the MK Karosserie website on a smartphone

The screenshots show the German version of the website.

Company
MK Karosserie + Fahrzeugtechnik
Industry
Car body repair
Location
Lorch in the Rems valley
Status
Fully developed and tested locally, not yet published

Starting point

  • The previous website was built on WordPress with a page-builder theme, and the references page was empty.
  • The contact form demanded a maths puzzle before an enquiry could be sent.
  • Opening hours and directory listings contradicted each other.

Concept

Craft in sheet metal

  • The workshop repairs where it can and replaces where it must. The website shows exactly that, on the metal and not in advertising phrases.
  • Calm, heavy motion: nothing bounces. Red is reserved for the repair zone, the active state and the enquiry.
  • Four concerns, four entry points: accident, rust, classic car, service. Each leads to the same enquiry, pre-filled.

Experience

Enquiry assistant of the MK Karosserie website

  • The repair as a story

    As you scroll, a welding repair plays out: rust on the wheel arch, outer skin removed, metal exposed, repair panel shaped and fitted, spot welds, closed.

  • An inspection lamp instead of a slider

    The damage photo sits in half-darkness. A cone of light follows the pointer and reveals the repaired vehicle.

  • One 3D scene for the whole website

    The body shell travels to whichever section is in view instead of being loaded several times. Without WebGL, a line drawing of the same body remains.

  • Enquiry with photos

    A step-by-step assistant with validation at each step and up to six photos of the damage.

Technology

  • Next.js 16 and React 19 with a per-request Content Security Policy
  • Three.js with a procedurally generated body built from its own contours
  • GSAP with ScrollTrigger, loaded on demand
  • Input validation with Zod, delivery via SMTP
  • Self-hosted fonts and images, no requests to third parties

SEO and GEO

  • Structured data for AutoBodyShop, Service, FAQ and breadcrumbs
  • Catchment area Lorch, Rems valley and Ostalbkreis in the data model
  • Search and AI crawlers allowed by name, plus an /llms.txt
  • Redirects from ten old WordPress addresses
  • Opening hours stay out of the structured data until they are confirmed

Measured

Performance, home page, desktop
100
Performance on mobile, depending on page
88–96
Accessibility, all pages
100
Best practices, all pages
100
SEO, all pages
100

Lighthouse 13.5, local production build, simulated throttling, 3 October 2026. Not a measurement of the live website.

  • 26 unit tests for validation, upload, rate limiting and schema
  • Playwright in Chromium, Firefox, WebKit and on mobile
  • Uploads checked by extension, type and file signature; SVG rejected

Next project

Would you like something like this for your company?

Tell me what you have in mind, or simply send me the address of your current website. You will hear back from me personally.

Start a projectFree website review