Skip to main content

Kontakt

Was interessiert Sie?

Website, Planer, Preisrechner & Verwaltung2026Live

Kunde: Bodin Bau GmbH

Bodin Bau.

Website und Web-Software für einen Innenausbau- und Renovationsbetrieb aus Cham ZG. Kundinnen laden ein Foto ihres heutigen Bades oder ihrer Küche hoch und sehen den eigenen Raum neu gestaltet, mit laufender Kostenspanne. Dazu ein Preisrechner für acht Gewerke, ein Offert-Wizard und ein geschützter Verwaltungsbereich, in dem der Betrieb jede Anfrage mit Grundriss, Preiszeilen und Herkunft bearbeitet.

  • Website
  • Web-App
  • SEO
  • GEO
  • Google Ads
Umfang
Website · Web-App · SEO · GEO · Google Ads
Jahr
2026
Leistungen & Technik
  • Next.js
  • PostgreSQL
  • KI-Bildmodell
  • Objektspeicher (S3)
  • Resend
  • Local SEO
  • GEO / llms.txt
  • Google Ads

Fallstudie

Was Bodin Bau GmbH brauchte und was wir gebaut haben

Ausgangslage

Bodin Bau führt Gipser-, Trockenbau-, Maler-, Platten-, Parkett- und Fassadenarbeiten sowie Badumbauten selbst aus, von Cham aus in Zug, Zürich, Schwyz, Luzern und Aargau. Wer ein Bad oder eine Küche erneuern will, hat zwei Fragen, bevor er anruft: Wie sieht das in meinem Raum aus, und in welchem Kostenrahmen bewege ich mich? Ein Kontaktformular beantwortet keine davon. Gleichzeitig kamen Anfragen bisher ohne Masse, Umfang und Material an, und der Betrieb musste jede Grundlage am Telefon nachfragen.

Unsere Lösung

Kern ist der Badplaner: Die Kundin lädt ein Foto ihres Bades hoch, tippt Raumgrösse und Objekte an und zieht den Grundriss in echten Zentimetern zurecht, auch mit einem Finger auf dem Handy. Danach wählt sie Platten, Fugen, Verlegemuster, Boden und Armaturen, die CHF-Spanne rechnet mit. Ein KI-Bildmodell zeigt am Schluss ihren eigenen Raum mit Fenster, Türe und Perspektive, aber mit dem neuen Bad. Die Bilderzeugung läuft als Auftrag auf dem Server weiter, auch wenn das Fenster zu ist; wer eine E-Mail hinterlässt, bekommt den Link. Nach demselben Prinzip gibt es einen Küchenplaner in sechs Schritten. Für alle anderen Arbeiten führt ein Preisrechner in drei Schritten zur Richtpreis-Spanne, ganz ohne Kontaktdaten, und ein Offert-Wizard in vier Schritten nimmt die verbindliche Anfrage auf. Im Verwaltungsbereich mit Anmeldung per E-Mail-Code sieht der Betrieb jede Anfrage mit Grundriss, Preiszeilen, Herkunft und Verlauf, dazu liegen gebliebene Konfigurationen als Arbeitsliste und ein Dashboard mit eigener Reichweitenmessung ohne Drittanbieter.

Architektur

So hängt alles zusammen

Die Bausteine von Bodin Bau GmbH und wie die Daten zwischen ihnen fliessen.

NutzerOberflächeVerwaltungServer / APIDatenbankExterner Dienst
Verbindungen: Kundin (Handy/Desktop) → Bad- und Küchenplaner (Foto + Auswahl); Kundin (Handy/Desktop) → Preisrechner + Offert-Wizard (Gewerk, Menge, Kontakt); Bad- und Küchenplaner → Next.js-Server (Renderaufträge, Anfragen) (Renderauftrag); Next.js-Server (Renderaufträge, Anfragen) → KI-Bildmodell (Prompt + Foto); Next.js-Server (Renderaufträge, Anfragen) → Privater Objektspeicher (Foto + Visualisierung); Preisrechner + Offert-Wizard → Next.js-Server (Renderaufträge, Anfragen) (Anfrage); Next.js-Server (Renderaufträge, Anfragen) → PostgreSQL (Konfiguration, Anfrage, Verlauf); Next.js-Server (Renderaufträge, Anfragen) → Resend (E-Mail) (Anfrage + Ergebnislink); Verwaltung Bodin Bau → PostgreSQL (Status, Betrag, Notiz)

Seitenstruktur

So ist die Website aufgebaut

bodin-bau.swiss9 Bereiche · 6 Unterseiten
  • Startseite
  • 11Leistungen
    • 286Leistung × Ort
  • 3Planer und Rechner
    • 1Badplaner
    • 1Küchenplaner
    • 1Preisrechner
  • 1Offerte
    • 11Einstiege je Gewerk
  • 26Standorte
    • 5Kantone
  • 10Kosten-Ratgeber
  • 41Glossar
  • 14Referenzen
  • 5Unternehmen, Kontakt, Rechtliches
Vereinfachte Darstellung der Seitenstruktur. Seitenzahlen laut Live-Prüfung (Sitemap) vom 12.10.2026.

Ablauf

Wer macht was, Schritt für Schritt

  • Kunde
  • Betreiber
  • System
  1. Kunde

    Foto hochladen

    Die Kundin startet den Badplaner und lädt ein Foto ihres heutigen Bades hoch. Ohne Foto entsteht ein allgemeines Bad.

  2. Kunde

    Raum und Ausstattung wählen

    Grösse, Objekte und Grundriss, danach Stil, Platten, Fugen, Boden und Armaturen. Die Kostenspanne läuft mit.

  3. System

    Visualisierung erzeugen

    Der Server erzeugt das Bild als Auftrag. Dauert es länger, hinterlässt die Kundin ihre Mail und erhält den Link zur Ergebnisseite.

  4. Kunde

    Unverbindlich anfragen

    Mit Name und E-Mail geht die Anfrage samt Auswahl, Spanne, Foto und Visualisierung an den Betrieb.

  5. Betreiber

    Anfrage im Cockpit bearbeiten

    Bodin Bau meldet sich per E-Mail-Code an, öffnet die Anfrage mit Grundriss und Preiszeilen und ruft zurück.

  6. Betreiber

    Status und Verlauf pflegen

    Nach dem Gespräch setzt der Betrieb Status, Betrag oder Verlustgrund. Jede Änderung bleibt im Verlauf nachvollziehbar.

Schritt für Schritt

So läuft es im Einsatz

Echte Bildschirmaufnahmen entlang des Ablaufs.

Badplaner: vom Foto zur Kostenspanne

Der Weg einer Kundin durch den Badplaner, aufgenommen auf der Live-Site. Die Bildaufnahme am Schluss ist nicht abgebildet: Sie löst einen kostenpflichtigen KI-Auftrag aus.

  1. 01Schritt 1 / 6
    Bodin Bau – Schritt 1: Einstieg «Sehen Sie Ihr neues Bad»

    Einstieg «Sehen Sie Ihr neues Bad»

    Die Landingpage zeigt mit einem Vorher-Nachher-Regler, was am Ende herauskommt, und erklärt den Ablauf in drei Punkten. So weiss die Kundin, worauf sie sich einlässt, bevor sie startet.

  2. 02Schritt 2 / 6
    Bodin Bau – Schritt 2: Schritt 1: Foto des Bades

    Schritt 1: Foto des Bades

    Auf dem Handy öffnet «Kamera» direkt die Kamera, alternativ lädt sie ein Foto hoch oder überspringt den Schritt. Der Hinweis «bleibt privat» nimmt die häufigste Sorge vorweg.

  3. 03Schritt 3 / 6
    Bodin Bau – Schritt 3: Schritt 2: Masse und Ausstattung

    Schritt 2: Masse und Ausstattung

    Breite und Länge per Regler, danach WC, Lavabo oder Dusche antippen. Die Kostenspanne rechts rechnet ab hier bei jeder Auswahl mit.

  4. 04Schritt 4 / 6
    Bodin Bau – Schritt 4: Grundriss in echten Zentimetern

    Grundriss in echten Zentimetern

    Aus den Angaben entsteht sofort ein Grundriss mit Türe und Objekten. Wände und Objekte lassen sich mit dem Finger verschieben, der Plan fliesst in Kosten und Bild ein.

  5. 05Schritt 5 / 6
    Bodin Bau – Schritt 5: Schritt 3: Stil, Platten und Fugen

    Schritt 3: Stil, Platten und Fugen

    Stilwelten, Plattenformat, Farbe, Verlegemuster und Fuge als Bildkacheln statt Dropdowns. Wer eigene Platten hat, wählt oben die zweite Option.

  6. 06Schritt 6 / 6
    Bodin Bau – Schritt 6: Schritt 4: Ausstattung und Zusatzwünsche

    Schritt 4: Ausstattung und Zusatzwünsche

    Ausstattungslinie, Armaturenfarbe und Extras wie Regendusche als Chips. Die Zusammenfassung rechts zeigt jede Auswahl, «Mein Bad ansehen» startet danach die Visualisierung.

Zum nächsten Schritt seitlich wischen.

Preisrechner und Offert-Wizard

Für alle anderen Gewerke: zuerst der Richtpreis ohne Kontaktdaten, dann die verbindliche Anfrage. Aufgenommen bis vor dem Absenden.

Ansichten mit Kundendaten zeigen Beispieldaten oder sind geschwärzt.

  1. 01Schritt 1 / 7
    Bodin Bau – Schritt 1: Rechner Schritt 1: Gewerk wählen

    Rechner Schritt 1: Gewerk wählen

    Acht Gewerke mit Preis pro m² direkt auf der Karte. Der Hinweis «kostenlos und ohne Anmeldung» steht neben dem Knopf.

  2. 02Schritt 2 / 7
    Bodin Bau – Schritt 2: Rechner Schritt 2: Menge

    Rechner Schritt 2: Menge

    Die Fläche lässt sich per Regler oder als Zahl eingeben. Ein Beispiel unter dem Regler hilft beim Schätzen.

  3. 03Schritt 3 / 7
    Bodin Bau – Schritt 3: Rechner Schritt 3: Zustand und Zusätze

    Rechner Schritt 3: Zustand und Zusätze

    Zustand der Flächen und Zusatzaufwand wie Möblierung oder Farbwechsel. Diese Angaben verschieben die Spanne am stärksten.

  4. 04Schritt 4 / 7
    Bodin Bau – Schritt 4: Richtpreis-Spanne ohne Kontaktdaten

    Richtpreis-Spanne ohne Kontaktdaten

    Die Spanne erscheint sofort, mit Menge, Preis pro Einheit und Berechnungsgrundlage. Von hier führt «Verbindliche Offerte anfordern» in den Wizard.

  5. 05Schritt 5 / 7
    Bodin Bau – Schritt 5: Offerte Schritt 1: Arbeiten

    Offerte Schritt 1: Arbeiten

    Mehrfachauswahl der Gewerke. Kommt die Kundin von einer Gewerkseite, ist das passende Gewerk schon angekreuzt.

  6. 06Schritt 6 / 7
    Bodin Bau – Schritt 6: Offerte Schritt 3: Zeitraum

    Offerte Schritt 3: Zeitraum

    Objekt und Ort sind erfasst, jetzt folgt der Zeitraum als Chips und eine freiwillige Beschreibung. Oben bleibt die bisherige Auswahl sichtbar und änderbar.

  7. 07Schritt 7 / 7Beispieldaten
    Bodin Bau – Schritt 7: Offerte Schritt 4: Kontakt

    Offerte Schritt 4: Kontakt

    Nur drei Felder: Name, Telefon, E-Mail, hier mit Beispieldaten. Der Satz darunter erklärt, wofür beides gebraucht wird.

Zum nächsten Schritt seitlich wischen.

Funktionen

Was die Lösung kann

  • Badplaner mit Foto-Visualisierung

    Fünf Schritte: Foto, Bad, Stil, Ausstattung, Ergebnis. Am Ende steht der eigene Raum neu gestaltet, mit einer CHF-Spanne, die sich Position für Position aufklappen lässt.

  • Grundriss zum Antippen

    Erst fragen, dann zeichnen: Raumgrösse und Objekte wählen, der Plan steht da. Wände ziehen und WC, Lavabo oder Dusche in echten Zentimetern verschieben. Der Plan speist Kosten und Bild.

  • Küchenplaner

    Sechs Schritte von Foto und Laufmeter über Fronten, Abdeckung und Geräteklasse bis zur Visualisierung, mit laufender Preisspanne und Regionsfaktor.

  • Eigene Platten mitbringen

    Wer die Platten schon gekauft hat, lädt Fotos davon hoch und beschreibt den Verlegewunsch. Die Bilder gehen als Anhang mit der Anfrage an den Betrieb.

  • Preisrechner für 8 Gewerke

    Gewerk wählen, Menge einstellen, Details angeben: Die Richtpreis-Spanne erscheint ohne Name oder Telefonnummer. Kleine Mengen berücksichtigen den Mindestauftrag.

  • Offert-Wizard in 4 Schritten

    Arbeiten, Objekt und Ort, Zeitraum, Kontakt. Elf Gewerkseiten belegen den Wizard vor, die Herkunft der Anfrage geht mit. Betrieb und Anfragende erhalten je eine Mail.

  • Anfragen-Cockpit

    Anfragen mit Filterleiste, Status direkt in der Zeile, Detail mit Grundriss, Preiszeilen, Herkunft und Bildern. Jede Änderung an Status, Betrag oder Notiz landet im Verlauf.

  • Dashboard und eigene Messung

    Besucher, Trichter vom Besuch bis zur Anfrage und die beliebtesten Planer-Auswahlen, jeweils mit Vorperiode. Gemessen ohne Drittanbieter und ohne Banner.

  • Anmeldung ohne Passwort

    Sechsstelliger Code per Mail, nur als Prüfsumme gespeichert. Nach fünf Fehlversuchen ist der Zugang 30 Minuten gesperrt.

  • Gewerk × Gemeinde

    Elf Leistungsseiten, Seiten für Leistung und Ort, Standort- und Kantonsseiten, Kostenratgeber, Glossar und Referenzen mit Vorher-Nachher-Regler.

Mobil

Auf dem Smartphone

  • Bodin Bau – Offert-Wizard auf dem Handy, Schritt 1 von 4
    Offert-Wizard auf dem Handy, Schritt 1 von 4
  • Bodin Bau – Startseite mobil
    Startseite mobil
  • Bodin Bau – Badplaner: Grundriss auf dem Handy
    Badplaner: Grundriss auf dem Handy

Seitlich wischen für weitere Ansichten.

Einblicke

So sieht es aus

  • Einstieg in den Badplaner mit Vorher-Nachher-Regler
  • Startseite «Alle Gewerke. Ein Betrieb.»
  • Badplaner: Grundriss in echten Zentimetern, Objekte antippen
  • Badplaner: Stil, Platten und Fugen wählen
  • Preisrechner: Gewerk wählen, Richtpreis ohne Kontaktdaten

FAQ

Häufige Fragen

Wie funktioniert der Badplaner von Bodin Bau?

Die Kundin lädt ein Foto ihres heutigen Bades hoch, gibt Raumgrösse und Objekte an und passt den Grundriss an. Danach wählt sie Platten, Fugen, Verlegemuster, Boden und Armaturen, während die Kostenspanne mitläuft. Ein KI-Bildmodell zeigt am Schluss ihren eigenen Raum mit dem neuen Bad. Die Visualisierung ist eine Vorstellungshilfe, kein Planungsstand.

Warum zeigt der Preisrechner das Ergebnis ohne Kontaktdaten?

Bauherren wollen zuerst wissen, ob ihr Vorhaben ins Budget passt. Bei Bodin Bau erscheint die Richtpreis-Spanne sofort. Wer danach eine verbindliche Offerte will, wechselt in den Offert-Wizard und gibt seine Daten dort freiwillig an.

Was sieht der Betrieb von einer Anfrage?

Im geschützten Verwaltungsbereich sieht Bodin Bau Kontakt, gewählte Konfiguration, Grundriss, Preiszeilen, die Einstiegsseite der Anfrage und bei Planer-Anfragen Foto und Visualisierung. Status, Betrag, Notiz und Verlustgrund werden direkt erfasst und im Verlauf gespeichert.

Wer sieht die hochgeladenen Fotos?

Fotos und Visualisierungen liegen in einem privaten Objektspeicher. Der einzige Weg nach aussen führt über einen geschützten Pfad im Verwaltungsbereich, der eine Anmeldung voraussetzt.

Lösungen

Lösungen aus diesem Projekt

Referenzen

Ähnliche Projekte

Ihr Projekt

Ein Projekt wie dieses für Ihr KMU?

Websites ab CHF 3'000 bis CHF 25'000, Web-Apps ab CHF 10'000. Eine Website liefern wir in 2 Wochen, sobald alle Unterlagen vorliegen.