hsv.de ist der zentrale digitale Anlaufpunkt für Fans, Presse und Interessierte: mit Live-Spielständen, Vereinsnachrichten, Videoinhalten und einem Archiv von über 15.000 Artikeln in Deutsch und Englisch.

Die Plattform basierte auf einer über viele Jahre gewachsenen TYPO3-Instanz und damit auf einem monolithischen System. Für die Weiterentwicklung des digitalen Auftritts sollte daher eine flexiblere technologische Grundlage geschaffen werden, die moderne Inhaltsmodelle und unterschiedliche digitale Ausgabekanäle unterstützt.

Der HSV brauchte kein Facelift, sondern ein solides technisches Fundament: headless, skalierbar, redaktionell stark, bereit, nicht nur die Website, sondern auch nachgelagerte Konsumenten wie die Mobile App zu versorgen. Ziel war die Neuentwicklung und Modernisierung des Webauftritts auf Basis einer flexiblen, headless-orientierten Architektur mit Hilfe von modernen, KI-basierten Entwicklungsmethoden.

Turbine Kreuzberg überführt hsv.de in eine headless Architektur auf Basis von Storyblok als CMS und Next.js auf Vercel als Frontend. Das Ergebnis ist eine skalierbare Plattform mit sauberer Content-Modellierung, flexiblen Seitentypen und einer redaktionellen Oberfläche, die Redakteur:innen gerne nutzen wollen.

Echtzeit-Sportdaten laufen über eine API direkt in die neue Website: Spielstände, Tabellen und Statistiken, live und redaktionell eingebettet. Alle weiteren Drittanbieter für Video, Stellenanzeigen, Anzeigenauslieferung sowie Consent und Tracking sind DSGVO-konform integriert.

Ausgewählte Inhalte der HSV-App werden über einen eigenen API-Endpunkt aus dem Storyblok-Content-Modell gespeist. Die Website ist damit nicht nur eine Website: sie ist ein Content-Layer für das digitale Ökosystem des Vereins.

Der gesamte Entwicklungsprozess wurde AI-first aufgesetzt: mit einem schlanken Senior-Team aus zwei erfahrenen Developer:innen, einem Quality-Assurance-Manager, einem Product Owner und natürlich mit Claude von Anthropic. Komponenten entstehen über den Figma MCP Server, der zunächst manuell erstellte Designs und Screenshots direkt in den Agenten liefert und pixel-genaue Specs automatisch extrahiert. Da kein offizieller Storyblok MCP Server existierte, haben wir einen gebaut. Tickets werden KI-generiert aus einem versionierten Knowledge-Base-Repository und direkt mit Jira synchronisiert. Ein living Styleguide dokumentiert jeden Baustein und dient als Single Source of Truth für das gesamte Team.

Die Architektur haben wir von TYPO3 auf Storyblok als Headless CMS migriert. Content-Modelle wurden sauber neu definiert, das Frontend läuft via React Server Components mit Storyblok Visual Editor Bridge und Draft Mode, mehrsprachig in Deutsch und Englisch. Wir haben UI Komponenten für sämtliche Bereiche entwickelt, von Navigation und Teaser-Systemen bis hin zur Live Match Stage und der League Table. Barrierefreiheit wurde von Anfang an als zentrale Anforderung berücksichtigt und nicht nachträglich ergänzt.

Für die Content Migration haben wir die TYPO3-Datenbankstruktur reverse-engineered, FlexForm-XML geparst und über 15.000 Artikel in Deutsch und Englisch vollständig auf das neue Storyblok-Datenmodell gemappt, inklusive Inline-HTML, Bild-Referenzen, eingebetteter Videos und URL-Redirects für SEO-Kontinuität. Die zahlreichen Redakteure des HSV wurden im Zuge der Übergabe aktiv eingearbeitet.

Darüber hinaus haben wir einen dedizierten API-Endpoint für die HSV Mobile App entwickelt, der Storyblok-News strukturiert für App-Konsumenten aufbereitet. Storyblok ist damit nicht nur das CMS der Website, sondern bildet eine Content Ebene für das digitale Ökosystem des Vereins. SEO-Grundlagen wie Meta-Tags, OG-Daten, Sitemap und strukturierte Daten sind von Anfang an eingebaut, ebenso wie Grundlagen zur GEO-Optimierung.

Was HSV davon hat:

• Moderne headless Plattform, die mit den Anforderungen des Vereins mitwächst

• Redakteur:innen arbeiten effizienter, mit einer CMS-Oberfläche für Geschwindigkeit

• Echtzeit-Sportdaten direkt in der Website, ohne Umweg über Drittquellen

• Über 15.000 Inhalte sauber migriert, inklusive Redirects und SEO-Kontinuität

• Barrierefreiheit von Anfang an als zentrale Anforderung

• HSV-App wird direkt aus Storyblok versorgt, als Content-Layer für alle Kanäle

• Hohe Entwicklungsgeschwindigkeit und schneller Go-live durch AI-first Ansatz bei gleichbleibender Codequalität

Jede großartige Mannschaft braucht die richtigen Spieler. Wir haben sie. Unser Team aus Entwicklern, Strategen und Produkt-Experten macht nicht nur im Sammelheft was her, sondern liefert in jeder Partie ab. Dazu ein starkes Netzwerk aus Tech- und Solution-Partnern, das die Spezialpositionen auf dem Platz besetzt.