Ein Verein mit acht Mannschaften, gut besuchten Spielen und bis jetzt keiner eigenen Website
Der TTC Dahn ist ein aktiver Tischtennisverein aus dem Pfälzerwald mit acht Mannschaften und vielen Mitgliedern. Die erste Mannschaft spielt kommende Saison Oberliga, die Heimspiele sind gut besucht. Wer den Verein im Web suchte, landete auf einer generischen Verbandsseite. Kein Branding, keine Kontaktinfo, keine Darstellung des Vereins.
Als aktiver Spieler habe ich das Problem selbst erlebt und die Initiative ergriffen: Domain gesichert, Hosting aufgesetzt, Website von Grund auf neu entwickelt. Design und Development in einem Projekt, ehrenamtlich. Die Aufgabe war nicht einfach eine Seite bauen. Die Aufgabe war, einer Community ein Zuhause im Netz zu geben, das sie selbst pflegen kann.
Welche Frage stellt jemand, der die Seite öffnet?
Weil ich den Verein von innen kenne, konnte ich die Discovery-Phase straffen: keine formalen Interviews, sondern Gespräche im Training, beim Punktspiel, im Vorstand. Das Ziel war zu verstehen, mit welcher konkreten Frage Menschen die Seite ansteuern, und welche Frage nicht auftauchen würde.
Jobs-to-be-done
Was ich wusste
- Mobile First. Trainingszeiten und Spielplan werden zu >80 % unterwegs abgerufen.
- Vereinsfarben. Rot, Schwarz, Weiß, historisch fest verankert, kein Diskussionspunkt.
- Keine Bildwelt. Es gibt keine professionellen Team-Shots, keine Hallenfotos.
- Pflege durch Ehrenamt. Wer das übernimmt, hat keine Web-Erfahrung.
Was ich klären musste
- Hierarchie der Inhalte. Was muss ins Hero, was kann tiefer scrollen?
- Sponsor-Logik. Logos oder Namen, gleichberechtigt oder gestaffelt?
- Spielplan-Pflege. Manuell eintragen oder click-tt synchronisieren?
- Detailtiefe pro Team. Eigene Unterseiten oder eine Übersichtsseite?
Das erste, was Besucher sehen. Und warum kein Foto draufkommt.
Der Hero hat zwei Jobs gleichzeitig: dem Stammspieler in 3 Sekunden sagen, wann er spielt, und dem Neuling zeigen, dass er hier richtig ist. Beide Ziele auf einmal zu lösen, ohne das Design zu überladen, war die zentrale Spannung dieser Section.
Ich habe drei Ansätze wireframed. Alle drei scheitern an irgendeiner Form an der Realität des Vereins, aber auf unterschiedliche Weise. Das hat die Entscheidung am Ende sehr einfach gemacht.
4 Trainingstage, unterschiedliche Gruppen. Auf einen Blick scannen statt suchen.
Die Trainingszeiten-Section hat einen klar definierten Job: jemand öffnet die Seite, will wissen wann seine Gruppe trainiert, und ist in 10 Sekunden wieder weg. An vier Abenden wird trainiert, an manchen davon nur die Jugend. Jedes Layout, das dazu zwingt, erst zu suchen statt direkt zu scannen, macht genau das falsch.
Das klassische Wochen-Raster sieht gut aus im Desktop-Mockup, bricht aber auf dem Smartphone komplett zusammen. Mobile ist hier kein Edge Case, sondern der primäre Use-Case.
10 bis 30 Begegnungen, 8 Mannschaften. Filter statt Kalender.
Der Spielplan ist die zweithäufigst aufgerufene Section. Die Frage ist immer dieselbe: „Wann spielt meine Mannschaft, Heim oder auswärts?" Der Monatskalender ist die naheliegende Antwort, aber gleichzeitig die falsche.
Das Problem: mehrere Spiele am selben Tag machen jede Kalender-Zelle unleserlich. Und auf Mobile kollabiert die 7-Spalten-Ansicht, genau wie bei den Trainingszeiten.
Spielergebnis und Vereins-News. Trennen oder mischen?
Diese Section hatte das interessanteste Inhaltsproblem: zwei grundlegend verschiedene Inhaltstypen. Spielergebnisse sind faktisch, kurz, zeitgebunden. Vereins-News sind länger, redaktionell, haben eine andere Leszeit. Die Frage war, ob die Trennung dem User hilft oder ihn auf zwei Sections verteilt, die er getrennt pflegen muss.
8 Teams. Übersicht ohne Unterseiten.
8 Mannschaften, jede mit Liga, Kapitän, Bilanz und nächsten Spielen. Die erste Frage war nicht, wie man diese Infos darstellt, sondern ob es für jedes Team eine eigene Unterseite braucht. Die Antwort war nein, der Pflegeaufwand hätte den Mehrwert bei weitem überstiegen.
Damit war die Aufgabe: alle relevanten Informationen pro Team auf eine Karte packen, ohne dass es aussieht wie eine Bundesliga-Tabelle.
Hauptsponsor, 2x Premium, 5x Partner. Hierarchie ohne Farb-Chaos.
Sponsor-Sections sind bei Vereinsseiten fast immer dasselbe: ein Logo-Grid, alle gleich groß, alle gleich wichtig. Das Problem: Hauptsponsor und lokale Pizzeria sehen identisch aus, was vertraglich und optisch ein Problem ist.
Die Herausforderung war, Sponsoring-Pakete visuell zu staffeln, ohne auf bunte Logos angewiesen zu sein, die es noch nicht gibt.
Das Ende der Seite. Storytelling und Conversion in einer Section.
Die letzte Section vor dem Footer hat drei Jobs auf einmal: Übergang zur Vereinsseite bauen, Kontaktinfos bereitstellen und die Mitglieds-Conversion triggern. Die Frage war, ob das in einer Section funktioniert oder ob drei separate Sections nötig sind, die den Seiten-Tail lang und träge machen.
Eine Seite, die Stammspieler in 5 Sekunden, Neue in 30 abholt
Vereinsfarben (Rot, Schwarz, Weiß), klare Typo-Hierarchie statt Bildwelt, und Inhalte in der Reihenfolge der häufigsten Fragen: nächstes Spiel, Trainingszeiten, Spielplan, dann Tieferes. Auf WordPress umgesetzt, damit der Vorstand Inhalte selbst pflegen kann, ohne PHP, ohne Theme-Editor.
Das Design entstand direkt aus den Entscheidungen im Wireframe-Prozess. Keine Section ohne einen konkreten Job-to-be-done dahinter.
Design
Was die Seite für den Verein verändert
Die Seite ist seit kurzem live. Harte Conversion-Metriken folgen, aber was sich sofort geändert hat:
Geplante Metriken: organischer Traffic über „TTC Dahn"-Suchen, Kontaktanfragen, Sponsoring-Leads. Sobald Daten vorliegen, folgt hier ein Update.
Was ich aus dem Projekt mitnehme
Drei Muster haben sich durch alle sieben Design-Entscheidungen gezogen, und drei Sachen mussten unterwegs sterben.
Was ich gelernt habe
- Listen schlagen Grids. Trainingszeiten und Spielplan funktionieren chronologisch besser als kalendarisch, weil der mentale Anker der User der Tag ist und nicht das Datum.
- Visuelle Codes ersetzen Beschriftung. Schwarze Kachel = Ergebnis, weiße = News. Kein Section-Header nötig.
- Hierarchie durch Größe, nicht Farbe. Hauptsponsor wird breit, nicht bunt. Funktioniert auch ohne Logos.
Was ich verworfen habe
- Foto-Hero. Keine Hallenfotos, keine Stockbilder. Typo trägt die Identität.
- Detailseiten pro Team. Pflegeaufwand deutlich größer als der Mehrwert für den User.
- Trennung Ergebnisse / News. Macht die Seite länger ohne die User-Frage besser zu beantworten.
Offene Fragen
- Logo-Größen pro Sponsoring-Stufe, das muss noch mit dem Vorstand abgestimmt werden.
- Spielplan: manuell pflegen oder mit click-tt synchronisieren?
- News-Pflege: wer schreibt, wie häufig, mit welchem Workflow?