Die Herausforderung

Ein international tätiger Konzertpianist - aktiv auf renommierten Bühnen in Europa, Asien und Nordamerika - stand vor einem fundamentalen Problem: Seine Website repräsentierte nicht länger die Klasse und Professionalität, die er auf der Bühne verkörpert. Das System: WordPress mit einem generischen Theme, ergänzt durch 23 Plugins. Was einst als praktische Lösung begann, war zu einem digitalen Hemmschuh geworden. Veranstalter, Agenturen und Journalisten, die nach Pressematerial, Konzertdaten oder Hörproben suchten, trafen auf eine technisch veraltete, mobil kaum nutzbare Plattform. Der Page-Speed Score lag bei katastrophalen 38/100 auf Mobilgeräten. Konzerttermine konnte er nur über externe Hilfe aktualisieren - er hatte keine Kontrolle über seine eigenen Inhalte.

Das Ziel

Der Künstler brauchte eine digitale Präsenz, die drei Anforderungen erfüllte: Erstens technische Exzellenz (Performance, SEO, Responsivität), zweitens ästhetische Eleganz (Design auf Augenhöhe mit seiner künstlerischen Identität), und drittens vollständige Autonomie - die Fähigkeit, alle Inhalte selbst zu pflegen, ohne technisches Vorwissen oder externe Abhängigkeiten.

Phase 1: Audit & Konzept

Den Status Quo verstehen

Wir begannen mit einem technischen und inhaltlichen Audit der bestehenden WordPress-Installation.

Kritische Erkenntnisse

1. PageSpeed Mobile: 38/100 - nicht optimierte Bilder, Plugin-Overhead, fehlendes Caching
2. Keine Responsivität trotz 65% Mobile-Traffic
3. 23 aktive Plugins mit redundanten Funktionen und Sicherheitslücken
4. Kein strukturiertes Content Management für Konzerte, Pressematerial, Medien
5. SEO-Defizite: fehlende Meta-Tags, keine strukturierten Daten (Schema.org)
6. Design ohne künstlerische Handschrift - generisches Theme
7. Keine mehrsprachige Struktur trotz internationaler Zielgruppe (DE/EN/JA)
8. Content-Updates nur über externe Agentur möglich

Die strategische Entscheidung

Wir entschieden uns für eine Headless-Architektur: Next.js 14 als performantes Frontend, Sanity.io als strukturiertes Headless CMS. Diese Trennung von Content-Layer und Presentation-Layer ermöglicht volle gestalterische Freiheit und gleichzeitig eine intuitive Content-Pflege.

Phase 2: Das Sanity Studio -Content-Autonomie

Der Game Changer: Eigene Inhalte in Echtzeit verwalten

Das Herzstück der Lösung ist das eingebettete Sanity Studio, erreichbar über den geschützten Pfad /studio der eigenen Domain. Hier kann der Künstler alle Inhalte eigenständig verwalten - ohne externe Hilfe, ohne Programmierkenntnisse.

Definierte Content-Schemas

1. Konzerte: Datum, Spielort, Programm, Ticket-Link, Featured-Status, mehrsprachig
2. Referenzen & Pressezitate: Zitat, Quelle, Erscheinungsdatum, Sprache
3. Biografie: Mehrsprachige Rich-Text-Inhalte mit Abschnittsstruktur
4. Repertoire: Komponisten nach Epoche, Werk, persönliche Anmerkungen
5. Medien & Aufnahmen: Audio-Previews, Video-Embeds (YouTube/Vimeo), ISRC-Referenzen
6. Presse-Downloads: Hochauflösende Fotos, EPK-PDFs, technische Rider
7. Navigation & Links: Externe Plattformlinks (Spotify, Apple Music, YouTube)

Phase 3: Das Next.js Frontend - Performance & SEO

Die nächste Evolution: Geschwindigkeit als Qualitätsmerkmal

Das Frontend wurde vollständig in Next.js 14 mit dem App Router entwickelt. Server Components ermöglichen optimale Performance durch serverseitiges Rendering, während Client Components gezielt für interaktive Elemente eingesetzt werden.

Technische Highlights

1. Statische Generierung (SSG) für SEO-kritische Seiten (Biografie, Repertoire)
2. Incremental Static Regeneration (ISR) für Konzertermine - automatisches Revalidieren
3. Dynamisches Routing für Konzertdetailseiten: /concerts/[slug]
4. next/image für automatische Bildoptimierung und WebP-Konvertierung
5. Structured Data (JSON-LD) für Konzertveranstaltungen nach Schema.org
6. Tailwind CSS + CSS Modules für Styling ohne Runtime-Overhead
7. Framer Motion für dezente, accessible Animationen
8. WCAG 2.1 AA-konform, vollständige Tastaturbedienung

Design & Ästhetik

Das visuelle Konzept entstand aus der bestehenden Druckidentität des Künstlers - Konzertprogramme, CD-Cover, Pressefotos. Dunkelblau als Primärfarbe steht für die Tiefe klassischer Musik, warme Goldtöne spiegeln den Glanz des Konzertsaals wider. Typografie: Elegante Serifenschrift (Cormorant Garamond) für Content, moderne Grotesk (Inter) für UI-Elemente.

Technischer Stack

Frontend: Next.js 14 (App Router) SSG/ISR, React Server Components

CMS: Sanity.io v3, Headless, GROQ, Real-time

Styling: Tailwind CSS + CSS Modules, Utility-first, kein Runtime

Bilder: next/image + Sanity Pipeline, Auto-WebP, AVIF, Lazy Loading

Deployment: Vercel (evtl Docker Image), Edge Functions, Auto-Preview

Analytics: Plausible, Cookie-frei, DSGVO-konform

SEO: Next.js Metadata API, Open Graph, Twitter Cards

Kontakt: Resend + React Email, Transaktionale E-Mails

Die messbaren Erfolge

Performance & Traffic

PageSpeed Mobile:

vorher: 38/100 —> nachher: 97/100 —> SSG + Bildoptimierung

PageSpeed Desktop

vorher: 61/100 —> nachher: 99/100 —> Core Web Vitals optimiert

Seitenaufrufe/Monat

vorher: 1.200 —> nachher: +340%

Organisches Wachstum in 3 Mon.

Ø Session-Dauer

vorher: 1min 12s —> nachher: 4min 38s

Tiefere Content-Engagement

Workflow-Effizienz

Content-Updates

vorher: selbstständig —> nachher: < 3 Minuten —> Eigenständig, sofort live

Google Ranking

vorher: Seite 4-6 —> nachher: Position 1-3 —> Strukturierte Daten + SEO

Mobile Experience

vorher: 65% (unbrauchbar) —> nachher: 65% (optimiert) —> Vollständig responsive

Kundenzufriedenheit

Der Künstler beschreibt die neue Plattform als "befreiend". Zum ersten Mal seit Jahren hat er volle Kontrolle über seine digitale Präsenz. Die Website ist ein Ort, den er stolz an Veranstalter und Journalisten schickt - ein Qualitätsstandard, der seiner künstlerischen Arbeit entspricht.

Die Learnings

Was hat funktioniert?

1. Headless-Architektur: Die Trennung von Content und Präsentation schafft Zukunftssicherheit
2. CMS-Empowerment: Die Integration des Studios unter /studio war entscheidend-eine URL, eine Plattform
3. Performance als Markenstrategie: Eine Website, die in unter 2 Sekunden lädt, ist selbst eine Form von Professionalität
4. Strukturierte Daten: Schema.org Markup für Konzerte und Person-Entitäten verbesserte Rankings massiv

Herausforderungen

1. Content-Migration: 2 Jahre Konzertarchiv aus WordPress manuell übertragen
2. Mehrsprachigkeit: Konsistente Content-Struktur über DE/EN/RU hinweg
3. Change Management: Umstellung von "Agentur macht alles" zu "Ich mache es selbst"

Technische Highlights

1. GROQ-Queries für flexible Content-Abfragen aus Sanity
2. ISR für automatisches Revalidieren bei CMS-Updates
3. Image Pipeline: Sanity → Transformation → WebP/AVIF → CDN
4. JSON-LD für strukturierte Event-Daten (MusicEvent, Person)

Der Ausblick

Phase 4 - Geplante Features

1. Konzert-Kalender-Export: iCal-Feed für Fans und Veranstalter
2. Newsletter-Integration: Automatische Benachrichtigung bei neuen Konzerten
3. Presse-Portal: Geschützter Bereich für Journalisten mit hochauflösendem Material
4. Analytics-Dashboard: Einblick in Traffic-Quellen und beliebte Inhalte

Die Zukunft: Skalierbarkeit

Die Headless-Architektur schafft Flexibilität für kommende Anforderungen. Sollte der Künstler eine native App für Konzertbesucher oder ein internes Tool für seine Booking-Agentur wünschen, steht dieselbe Content-API zur Verfügung - ohne Datenmigration oder Backend-Umbau.

Fazit

Diese Case Study zeigt, wie custom Software ein professionelles Auftreten fundamental transformieren kann. Nicht durch Komplexität, sondern durch:

1. Problemfokus: Jedes Feature löste ein echtes Problem
2. Technische Exzellenz: Performance und SEO als Grundpfeiler
3. User Experience: Intuitive Content-Pflege ohne technisches Vorwissen
4. Ästhetische Qualität: Design auf Augenhöhe mit der künstlerischen Identität

Für den Künstler war es mehr als eine Website - es war die digitale Manifestation seiner Professionalität, die ihm Autonomie und Stolz zurückgab.

Technologie-Stack Zusammenfassung

Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS · Backend/CMS: Sanity.io v4, GROQ · Deployment: Vercel · Analytics: Plausible · Weitere: Framer Motion, next/image, Resend

Projektdauer: 5 Wochen von Discovery bis Launch

Budget: Individuelles B2B-Projekt mit phasenweiser Entwicklung