Startseiten-Redesign für NoCap Barbers, einen Luxus-Barbershop am Hohen Markt in Wien: ein Salient-Child-Theme, das mobile Besucher in unter fünfzehn Sekunden zur Treatwell-Buchung führt und vom Shop selbst über typisierte Admin-Sektionen gepflegt wird.
Kunde
NoCap Barbers Vienna
Rolle
Solo
Status
Live
Jahr
2025
Stack
WordPress
CMS + Editor-Workflow
Salient
Parent-Theme, unverändert
PHP
Child-Theme + Custom Sections
JavaScript
Reveal + Hero-Parallax
Links
Kern des Projekts
Am Anfang klang Auftrag nach "Startseite hübscher machen". Erstes Gespräch hat das geradegerückt: eigentliches Problem ist Buchungspfad. Wer vom Handy kommt und in unter fünfzehn Sekunden keine Antwort findet, ist weg. Redesign musste deshalb zuerst Funnel sein, dann Optik — und gleichzeitig so simpel bleiben, dass Shop es nach Launch ohne Entwickler weiterführt. Genau diese zwei Bedingungen haben jede Designentscheidung entschieden.
3700+
verifizierte Google-Treatwell-Reviews früh sichtbar
12
typisierte Homepage-Sektionen, vollständig admin-pflegbar
Treatwell
Buchung an bewährten externen Flow übergeben
Problem
Problem
Alte Seite war Stock-Salient: Slider, Karussells, drei gleichwertige CTAs nebeneinander (Buchen, Anrufen, Kontakt). Über achtzig Prozent des Traffics kommt vom Handy, meist direkt aus einer Google-Suche, mit klarer Frage im Kopf — was kostet ein Schnitt, wann ist offen, wie buche ich. Beantwortet hat die Seite davon nichts. Stattdessen Bildershow und drei Buttons, die alle gleich aussahen. Buchungen versickerten zwischen Optionen, die keine Hierarchie hatten.
Ansatz
Salient-Parent bleibt unberührt, alles Neue lebt im Child-Theme — Updates des Parents brechen damit nichts und Rollback ist ein Klick im WP-Admin. Startseite komplett ersetzt durch zwölf typisierte Sektionen mit Admin-Feldern, damit das Team Inhalte ohne Entwickler ändert. Layout zuerst bei 375 Pixel entschieden, Desktop ist abgeleitet. Genau eine sichtbare Buchungs-CTA pro Sektion, Telefon und Adresse bleiben sichtbar als sekundäre Links. Treatwell übernimmt Zahlung und Erinnerungen, Schema-Markup liefert Google verifizierte Reviews und Öffnungszeiten direkt im Snippet.
Pipeline
Jeder Schritt hat eine klare Aufgabe und einen Fallback, den der Shop ohne Entwickler bedienen kann. Genau das hält die Seite nach dem Launch lebendig.
Alter Salient-Stack, Mobile-Traffic, Abbruchstellen
Layout zuerst portrait, Desktop wird daraus abgeleitet
Salient-Parent bleibt unangetastet, Overrides isoliert
12 typisierte Sektionen mit Admin-Feldern, kein freies HTML
Treatwell-Buchung, Schema-Markup, Funnel beobachten
Was sich geändert hat
Altes Layout hatte Buchen, Anrufen und Kontakt gleich groß. Heatmaps haben gezeigt: geklickt wurde der größte Button, egal mit welcher Absicht — Entscheidung war verloren, bevor CTA-Text überhaupt zählte. Neues Layout zeigt pro Sektion genau eine Buchungs-CTA. Telefon und Adresse bleiben erreichbar, aber sichtbar zurückgestuft: kleineres Gewicht, kein Button-Chrome, keine Konkurrenz fürs Auge.
Erst bei 375 Pixel designt, dann nach oben skaliert. Vermeidet die klassische Falle, ein Desktop-Comp solange zu schrumpfen, bis es aufs Handy passt — also genau die Version, die mobile Besucher tatsächlich sehen. Tap-Targets, Zeilenlängen und Bildausschnitte sind portrait-first entschieden; Desktop erbt Proportionen, die schon auf dem kleinsten Screen funktioniert haben.
Im Hero stehen jetzt 3700+ verifizierte Bewertungen von Treatwell und Google noch vor dem ersten Scroll, mit beiden Logos sichtbar, damit es als Drittquelle gelesen wird, nicht als Eigenlob. Der Lift kam weniger aus Styling als daraus, dass neue Besucher den Proof sofort sehen — nicht nach drei Bildschirmen Brand-Storytelling, durch die sie sowieso nie scrollen würden.
Jeder Homepage-Block ist eine typisierte Sektion mit Admin-Feldern: Hero, Services, Reviews, Produkte, Galerie, Team, FAQ, Kontakt. Edits dauern Sekunden und können das Layout nicht brechen, weil jedes Feld einen Fallback hat und die Struktur fix bleibt. Der Shop ändert Copy und Fotos direkt; freies HTML kommt nie auf die Startseite.
Technische Entscheidungen
Runtime
Ein Barbershop hat keinen On-Call-Entwickler. Die Seite muss weiter funktionieren, wenn das Team ein Foto tauscht, Öffnungszeiten anpasst oder einen neuen Service einträgt. Das Child-Theme behandelt jedes Editor-Feld als typisierten Wert mit Fallback, damit nichts bricht, wenn ein Feld leer bleibt.
Erst bei 375px entworfen, Desktop kommt daraus. Tap-Targets und Zeilenlängen stimmen, bevor irgendein Breakpoint greift.
Jeder Block ist eine typisierte Sektion mit Admin-Feldern und Fallbacks. Leere Werte rendern nicht blank, sondern fallen auf sinnvolle Defaults zurück.
Salient als Parent wird nicht angefasst. Das Child-Theme überschreibt nur, was nötig ist, damit Salient-Updates weiter sauber durchlaufen.
Was daraus rauskam
Hat funktioniert
Hat nicht funktioniert
Nächste Baustellen
Klarheit gewinnt
Buchungs-CTA-Klicks in Analytics verdrahten und Lift gegen das alte Theme messen
FAQ- und LocalBusiness-Schema hinzufügen, damit Google reichere Snippets ziehen kann
Hero-LCP entschärfen: Poster-Bild + Preload-Tweaks für langsame Mobile-Verbindungen
Galerie
03
Nächstes Projekt
Schreib mir kurz, worum es geht — ich melde mich.