Krone Group
Website für einen Bauträger von Premium-Immobilien aus Brettschichtholz.
Rolle
Project Lead, Full-Stack-Entwickler, Marketing Manager
Jahr
2024
Stack
Next.js App RouterReactTypeScriptZustandGraphQLZodTailwind CSSHeadless WordPress
Die Aufgabe
Der Kunde verfügte lediglich über ein grundlegendes Markenfundament: ein Logo und Firmenfarben. Eine moderne digitale Präsenz fehlte völlig. Die Aufgabe bestand darin, nicht nur eine einfache Unternehmenswebsite von Grund auf neu zu erstellen, sondern ein vollwertiges Premium-Verkaufsinstrument in einem hart umkämpften Design- und Baumarkt.
Es war notwendig, eine Image-Plattform zu entwickeln, ein fragmentiertes Projektportfolio zu systematisieren, eine mehrstufige Filterung zu implementieren, maximale technische Leistung zu gewährleisten und ein steuerbares Lead-Generierungssystem (SEO + Suchmaschinenwerbung) aufzubauen – inklusive anschließender umfassender technischer Betreuung.
Die Phasen
Analyse und konzeptionelle Ausarbeitung
- Durchführung eines Audits von Wettbewerbern und Zielgruppe zur Ermittlung der wichtigsten Bedürfnisse.
- Ausarbeitung des USPs und Hervorhebung der Hauptvorteile des Unternehmens, die die Grundlage für die Textstruktur bildeten.
- Entwurf einer komplexen und logischen Seitenarchitektur, die eine komfortable Navigation gewährleistet.
Visuelles Konzept und UI/UX
- Ausgehend von dem vom Kunden bereitgestellten Logo und den Firmenfarben wählte ich die passende Typografie.
- Entwicklung einer sauberen, modernen Benutzeroberfläche mit Fokus auf hochwertigen visuellen Content (Fotos der Objekte).
- Erstellung eines intuitiven Filtersystems für den Katalog der Projekte und fertiggestellten Objekte, mit dem Nutzer leicht die passenden Lösungen nach Fläche, Stockwerksanzahl und Gebäudetyp finden können.
Technische Entwicklung und Architektur
- Entwicklung eines benutzerdefinierten Backends auf Basis von Headless CMS WordPress. Diese Lösung bot dem Kunden sein gewohntes Admin-Panel und garantierte gleichzeitig maximale Geschwindigkeit, Sicherheit und Flexibilität im Frontend.
- Einrichtung der gemeinsamen Arbeit zur Erstellung und Digitalisierung der Portfolio-Datenbank: Schaffung einer Datenbankarchitektur zur Speicherung der Spezifikationen für jedes Bauobjekt.
- Gestaltung des Plattform-Frontends rund um Next.js App Router und Server Components: statische Generierung für Marketingseiten, Streaming für den Katalog.
- Einrichtung von CI/CD für reibungslose Bereitstellung (Deployment) von Updates und regelmäßige Backups.
Typisierte Datenschicht
GraphQL Codegen generiert Typen direkt aus dem CMS-Schema; Zod validiert Daten an den Schnittstellen. Refactoring wurde langweilig – im besten Sinne des Wortes.
Content und Suchmaschinenoptimierung (SEO)
- Umfassende Überarbeitung der Projektbeschreibungen unter Berücksichtigung des semantischen Kerns und der Premium-Positionierung des Unternehmens.
- Implementierung eines feinen technischen Tunings für Suchmaschinen-Crawler: Mikrodaten (Schema.org), Sitemap-Generierung, Meta-Tag-Optimierung, Einrichtung von Redirects und Beseitigung von Seiten-Duplikaten.
Performance-Marketing und Entwicklung
- Start und Optimierung von Kontextwerbung. Die Kampagnen wurden strikt segmentiert, um ein kaufkräftiges Publikum aus der Heimatregion anzuziehen, mit dem Ziel, die Reichweite in Zukunft auszuweiten.
- Einrichtung einer durchgängigen Analyse zur Verfolgung von Conversions: vom ersten Klick bis zur hinterlassenen Anfrage.
- Bereitstellung von kontinuierlichem technischem Support, Uptime-Monitoring und geplanten Funktionsupdates über zwei Jahre hinweg.
Der Prozess
Wie wir das digitale Büro gebaut haben
Als wir das Projekt starteten, hatten wir nur ein Logo und ein Brandbook mit den Grundfarben. Alles andere – vom Konzept bis zur letzten Codezeile – musste erst erdacht und umgesetzt werden.
Die Website eines Bauunternehmens im Premium-Segment muss wie ein guter Architekt funktionieren: die Sprache des Nutzens sprechen, tadellosen Geschmack zeigen und von der ersten Sekunde an absolutes Vertrauen wecken.
1. Konzeptionelle Verpackung und Architektur
Wir begannen mit dem Fundament. Ich tauchte in die Geschäftsprozesse des Kunden ein, um genau zu verstehen, wie sie ihre Dienstleistungen verkaufen. Gemeinsam hoben wir die wichtigsten Vorteile hervor, formulierten das Alleinstellungsmerkmal (USP) und durchdachten die Logik der User Journey.
Was in dieser Phase gemacht wurde:
- Auswahl komplementärer Schriftarten, die den Status unterstreichen.
- Entwurf der Architektur für den Projektkatalog.
- Entwicklung eines intuitiven Filtersystems, damit der Kunde mit wenigen Klicks ein "300 m² großes, zweistöckiges Haus aus Brettschichtholz" finden kann.
2. Technische Lösung: Die Wahl von Headless
Um die Konkurrenz zu übertreffen, brauchten wir kompromisslose Ladegeschwindigkeit und Flexibilität. Eine traditionelle monolithische Website kam für uns nicht in Frage. Ich entschied mich für eine Headless-CMS-Architektur.
Warum ausgerechnet Headless WordPress?
- Komfort für den Kunden. Der Kunde erhielt ein vertrautes und intuitives WP-Admin-Panel zum Hinzufügen neuer Projekte und Nachrichten.
- Perfekte Performance. Das Frontend ist vollständig vom Backend entkoppelt, wodurch die Benutzeroberfläche „fliegt“ und sofort auf Benutzeraktionen reagiert.
- Sicherheit. Das Fehlen einer direkten Verbindung zwischen der Benutzeroberfläche und der Datenbank minimiert das Risiko von Hackerangriffen.
3. Content und die Magie der Vermarktung
Eine Website ohne Traffic ist nur ein schönes Bild. Sobald der technische Teil fertig war, begannen wir mit massiven Maßnahmen zur Gewinnung qualifizierter Leads.
- Portfolio-Arbeit: Wir haben gemeinsam eine enorme Arbeit geleistet, um die Projektdatenbank aufzubauen. Ich organisierte eine umfassende Überarbeitung (Rewrite) der Beschreibungen, die trockene technische Spezifikationen in verkaufsstarke Geschichten über die Entstehung der Objekte verwandelte.
- Suchmaschinenoptimierung (SEO): Die Website wurde von Anfang an für die Anforderungen von Suchmaschinen-Crawlern konzipiert. Es wurde eine perfekte semantische Struktur eingerichtet, Duplikate entfernt und Mikrodaten (Schema-Markup) implementiert.
- Lead-Generierung: Ich habe Kontextwerbung eingerichtet und gestartet. Wir haben nicht nur Traffic generiert, sondern gezielt das Premium-Segment angesprochen und die Kampagnen ständig optimiert, um die Kosten für die Kundenakquise (CPA) zu senken.
Das Ergebnis dieser systematischen Maßnahmen ließ nicht lange auf sich warten: Das Projekt verwandelte sich in einen leistungsstarken und autonomen Lead-Generator.
Die Ergebnisse
Die Website belegt in den organischen Suchergebnissen bei den wichtigsten zielgruppenspezifischen und kommerziellen Suchanfragen in der Heimatregion souverän die ersten Plätze.
Lighthouse Performance.
LCP in 4G-Netzen.
Über 40 große Architekturprojekte wurden digitalisiert, strukturiert und in einen komfortablen Katalog mit intelligenten Filtern verpackt.
Senkung der Lead-Kosten (CPA) um 35 %. Dank der Kombination aus "kompetenter SEO + gezieltem Werbe-Setup" und der hohen Geschwindigkeit der Website konnten wir die Conversion-Rate (CR) der Seiten deutlich steigern und das Werbebudget optimieren.