Snapshot
Problem
Eine Werkstatt lebt von Wiederkehr. Wann das Auto wieder dran ist, steht auf einem Zettel im Handschuhfach, den niemand liest.
Ziel
Der Kunde sieht seine Historie und den nächsten Termin ohne Konto und ohne App. Der Betrieb sieht morgens, wer überfällig ist.
Meine Rolle
Konzept, Gestaltung, Umsetzung und Datenmodell, allein. Dazu zwei Strukturvarianten der Startseite.
Ergebnis
Ein Serviceheft mit Anmeldung über Kennzeichen und vier Ziffern, und eine Verwaltung, die den Folgetermin selbst vorschlägt.
Kontext
Werkstattseiten haben einen Besucher, der es eilig hat und schlecht gelaunt ist. Etwas leuchtet, etwas klappert, der TÜV läuft ab. Niemand ist hier, um sich über Zündkerzen zu informieren.
Dieser Besucher stellt drei Fragen, in dieser Reihenfolge: Machen die das überhaupt? Was kostet es? Wann bekomme ich einen Termin? Die meisten Werkstattseiten beantworten die erste in einem Aufklappmenü, die zweite gar nicht und die dritte mit einer Telefonnummer.
Sieben Leistungen (TÜV, Inspektion, Reifen, Öl, Klima, Bremsen, Diagnose) mussten also erfassbar sein, ohne dass jemand ein Menü öffnet. Das war der erste Teil der Arbeit, und darüber handelt der Strukturvergleich weiter unten.
Der zweite Teil kam aus einer Frage, die eine Seite allein nicht beantwortet: Was bringt den Kunden in zwölf Monaten wieder her? TÜV alle 24 Monate, Inspektion und Ölwechsel alle 12 Monate oder 15.000 Kilometer, Reifen zweimal im Jahr. Der Bedarf ist da, und er wiederholt sich. Nur weiß der Kunde das Datum nicht, und der Betrieb erfährt erst beim nächsten Mal, dass er woanders war.
Hinweis zur Einordnung
APEX ist ein Konzeptprojekt. Betrieb, Preise, Kennzahlen und Bewertungen sind erfunden; es gab keinen Auftraggeber und keine Nutzerforschung. Gestaltung, Umsetzung, beide Strukturvarianten und die gemessenen Werte sind real.
Highlight · Das digitale Serviceheft
Das gedruckte Serviceheft liegt im Handschuhfach. Es wird beim Verkauf hervorgeholt und sonst nie. Alles, was darin steht, ist für den Halter unsichtbar, bis er danach sucht, und für die Werkstatt ist es gar nicht mehr einsehbar, sobald das Auto vom Hof ist.
Also habe ich es dorthin gelegt, wo beide es finden: in die Webseite. Eine Seite für den Kunden, eine für den Betrieb, dieselben Daten von zwei Seiten aus gesehen.
Anmeldung ohne Konto
Der Kunde gibt sein Kennzeichen und die letzten vier Ziffern der Telefonnummer ein, die ohnehin in der Kundenkartei steht. Kein Registrieren, kein Passwort, keine Bestätigungsmail.
Das ist die eigentliche Entscheidung an dieser Stelle. Wer zweimal im Jahr in eine Werkstatt fährt, legt dafür kein Konto an. Ein Verfahren mit Registrierung hätte die Funktion gehabt und die Nutzung nicht.
Beides zusammen weiß nur, wer das Auto fährt und in der Kartei steht. Für ein Serviceheft ist das die passende Hürde: hoch genug, dass Fremde nicht hineinsehen, niedrig genug, dass man es an der Ampel schafft.
Die Liste, die der Betrieb morgens öffnet
Die Verwaltung steht nicht im Menü der Webseite und ist über die robots.txt von Suchmaschinen ausgeschlossen. Sie ist Werkzeug, kein Seiteninhalt.
Oben stehen vier Zahlen: Kunden, überfällig, bald fällig, diesen Monat erledigt. Darunter die Kundenliste, durchsuchbar nach Kennzeichen, Name, Telefon oder Marke, jeder Eintrag mit farbigem Status.
Damit beantwortet die Seite die eine Frage, mit der jemand morgens hier hereinschaut: wen sollte ich heute anrufen? Aus der Kundenkarte heraus öffnet „Erinnerung senden“ WhatsApp mit fertigem Text.
Der Folgetermin rechnet sich selbst aus
Nach jedem Service wird ein Eintrag geschrieben: Datum, Kilometerstand, dann zeilenweise, was gemacht wurde, mit Teil, Marke und Menge.
Aus der ersten dieser Zeilen und dem Kilometerstand schlägt das System den nächsten Termin vor: ein Ölwechsel bei 98.400 km wird zu 113.400 km und einem Datum ein Jahr später. Überschreiben lässt es sich immer, es ist ein Vorschlag, keine Regel.
Hier wird das Ganze für den Betrieb billiger als der Zettel: die Wiedervorlage entsteht als Nebenprodukt des Eintragens, nicht als eigene Arbeit, die abends noch ansteht.
Der Ablauf, kurz
- Neuer Kunde. Kennzeichen, Telefon, Name, Marke und Modell. Das Formular für den ersten Serviceeintrag öffnet sich direkt im Anschluss.
- Nach jedem Service. Kunden suchen, Eintrag anlegen, Positionen erfassen. Der Folgetermin steht danach schon da.
- Der Kunde sieht es sofort. Sobald gespeichert ist, steht der Eintrag in seinem Serviceheft, ohne dass ihm jemand etwas schicken muss.
- Wenn es fällig wird. Der Status springt auf „bald fällig“, später auf „überfällig“. Eine Schaltfläche öffnet die Erinnerung.
Einmal im Monat lädt „Sicherungskopie“ den gesamten Bestand als CSV-Datei herunter, die sich in Excel öffnen lässt. Ein Betrieb, der seine Kundenkartei einem System anvertraut, sollte sie jederzeit auch ohne dieses System in der Hand haben.
Vier Entscheidungen im System
Die Sperre liegt in der Datenbank
Fünf falsche Versuche in fünfzehn Minuten sperren das Kennzeichen. Geprüft wird das in der Datenbank, nicht im Browser: im Browser wäre die Sperre mit einem geöffneten Entwicklerfenster erledigt.
Das Kennzeichen wird nicht korrigiert
Deutsche Kennzeichen haben keine feste Länge (S-AB 1234, M-X 12). Eine Autokorrektur könnte jemanden in den Datensatz eines Fremden schicken. Also nur Großbuchstaben und Leerzeichen weg, sonst nichts.
Intern bleibt intern
Betrag und Notiz stehen im selben Formular wie alles andere, erscheinen im Serviceheft des Kunden aber nicht. Der Betrieb braucht ein Feld für „Ölverlust im Auge behalten“, ohne dass daraus eine Ansage wird.
Zwei Stufen bis zur Cloud
Ohne hinterlegte Zugangsdaten läuft alles im Browser weiter, mit Testdaten, und die Seite sagt das selbst in einem Hinweis. Erst mit Supabase sehen Kunden ihre Daten auch vom eigenen Telefon.
Was der Vorschlag nicht kann: Intervalle gibt es nur dort, wo sie fachlich existieren, also für TÜV, Inspektion, Ölwechsel, Klima und Reifen. Für Bremsen, Diagnose und Sonstiges schlägt das System nichts vor, weil ein erfundenes Intervall schlimmer wäre als ein leeres Feld. Diese Termine trägt der Betrieb von Hand ein.
Davor · zwei Strukturen, eine verworfen
Bevor das System dazukam, stand die Frage nach der Startseite. Ich hatte eine Struktur, die funktionierte. Das ist der Moment, in dem man normalerweise weiterbaut, und nie erfährt, ob die erste Idee auch die beste war oder nur die erste.
Also habe ich eine zweite Startseite von Grund auf gebaut: anderer Kopfbereich, andere Reihenfolge, alle sieben Leistungen sofort als Symbolleiste, dazu eine beschriftete Motorgrafik mit vier Prüfpunkten. Kein Entwurf, sondern eine fertige Seite. Anders lässt sich nicht vergleichen.
Variante 2 · verworfen
Führt mit einem technischen Anspruch, zeigt alle sieben Leistungen als Symbolreihe direkt unter dem Kopfbereich und erklärt mit einer beschrifteten Motorgrafik, worauf bei einer Inspektion geschaut wird.
Warum nicht: Die Symbolreihe sagt, dass es die Leistung gibt, nicht was sie kostet oder wie lange sie dauert. Wer unter Zeitdruck entscheidet, ist danach genauso weit wie vorher.
Variante 1 · gewählt
Führt mit einem Versprechen und drei Belegzahlen, dann Leistungen als Karten: jede mit echtem Werkstattfoto, Startpreis und Zeitangabe.
Warum: Drei Karten mit „ab 89 €“ beantworten mehr als sieben Symbole ohne Preis. Die restlichen vier Leistungen sind einen Klick entfernt: für jemanden, der sie sucht, reicht das.
Gestaltung
Drei Entscheidungen, die alle aus der Eile des Besuchers folgen.
Preis vor dem Anruf
Jede Leistung nennt einen Startpreis und eine Dauer. Das ist die Information, für die sonst angerufen wird, und der Anruf, der oft gar nicht stattfindet.
Anthrazit, kein Nachtschwarz
Die dunkle Anmutung soll nach Werkstatt aussehen, nicht nach Gaming. Der blaue Akzent wurde mehrfach zurückgenommen, bis er präzise wirkte statt effekthascherisch.
Belege, keine Adjektive
Meisterbetrieb, werksgarantie-konform, TÜV-Annahmestelle: nachprüfbare Angaben statt „Ihr zuverlässiger Partner“.
Barrierefreiheit
Beim Aufbau dieser Fallstudie habe ich die Seite geprüft und zwei echte Kontrastfehler gefunden, beide in Bereichen, die man beim Gestalten übersieht, weil sie klein und grau sind:
- Die Zertifikatsleiste stand bei 2,4:1, knapp die Hälfte des WCAG-AA-Mindestwerts. Ursache war eine Deckkraft von 0,7 auf einer ohnehin blassen Textfarbe.
- Die Fußzeile lag bei 3,61:1, ebenfalls unter dem Schwellenwert von 4,5:1.
Nach der Korrektur der ersten trat die zweite überhaupt erst zutage: Kontrastfehler decken einander zu. Barrierefreiheit stieg von 95 auf 100.
Fehlersuche · Die Seite sprang beim Laden
Die Messung war zuerst schlecht: Cumulative Layout Shift 0,318, der Wert dafür, wie stark sich eine Seite während des Ladens verschiebt. Ab 0,1 gilt sie als unruhig. Praktisch heißt das: Man beginnt zu lesen, und der Text rutscht weg.
Ich habe dreimal falsch geraten, bevor der Grund feststand. Jede Vermutung war in zehn Minuten widerlegt, weil ich nach jeder erneut gemessen habe statt weiter zu argumentieren.
- Fehlende Bildmaße. 95 Bilder in allen Projekten haben jetzt
widthundheightaus der Datei. Richtig und behalten: am Verschiebungswert änderte es nichts. - Schriftnachladen. Probehalber auf
font-display: optionalumgestellt, damit die Ersatzschrift nie ausgetauscht wird. Unverändert. Zurückgenommen. - Die animierten Kennzahlen. Der Zähler schreibt jeden Frame neuen Text. Mit jeder Ziffer wird das Element breiter. Klang überzeugend; Lighthouse bewertete genau dieses Element mit 0,000.
Der Bericht benennt das verschobene Element selbst: die dekorative Rasterfläche im Kopfbereich, verschoben um rund 300 Pixel. Sie liegt absolut im Kopfbereich, also musste etwas darüber plötzlich verschwinden.
Es war das Mobilmenü. Es hatte overflow: hidden und einen Übergang, aber keine Anfangshöhe im Stylesheet. Zugeklappt wurde es erst von JavaScript. Die Seite erschien also mit vollständig aufgeklapptem Menü, dann lief das Skript, klappte es zu, und alles darunter sprang um dessen Höhe nach oben. Genau die 300 Pixel.
Die Behebung ist eine Zeile CSS: das Menü wird zugeklappt ausgeliefert statt zugeklappt geschaltet. Verschiebungswert 0,318 → 0, Performance 61 → 78. Derselbe Fehler steckte in zwei weiteren Projekten und ist dort ebenfalls behoben.
Ergebnis
Gemessen mit Lighthouse gegen die veröffentlichte Seite, mobil, im privaten Fenster:
78
Performance
100
Barrierefreiheit
100
Best Practices
100
SEO
Largest Contentful Paint 4,3 s · Total Blocking Time 0 ms · Cumulative Layout Shift 0. Vor der Fehlersuche unten stand hier 61 bei einem Verschiebungswert von 0,318. Was bleibt, ist die Ladezeit des Kopfbilds. Einzelne, saubere Messung, nicht der beste aus mehreren Durchläufen; die Werte schwanken zwischen den Durchläufen um einige Punkte. Gemessen wurde die Webseite; Serviceheft und Verwaltung kamen später dazu und sind in diesen Werten nicht enthalten.
Serviceheft ohne Konto
Kennzeichen und vier Ziffern genügen. Historie, Kilometerstand und der nächste Termin stehen für den Halter bereit.
Wiedervorlage als Nebenprodukt
Der Folgetermin entsteht beim Eintragen, nicht als zweite Arbeit. Der Betrieb sieht morgens, wer überfällig ist.
Preis vor dem Anruf
Alle sieben Leistungen nennen Startpreis und Dauer im Voraus.
Ohne Sprung geladen
Verschiebungswert 0,318 auf 0, Performance 61 auf 78.
Gelernt
Eine zweite Variante kostet weniger, als man denkt
Die zweite Startseite war an einem Tag gebaut, weil Farbsystem, Bauteile und Inhalte schon standen. Verglichen mit dem Risiko, monatelang die erstbeste Struktur zu verteidigen, ist das billig.
Mehr sichtbar heißt nicht mehr beantwortet
Variante 2 zeigte sieben Leistungen statt drei und half trotzdem weniger. Sichtbarkeit ist nicht dasselbe wie Entscheidungsgrundlage. Das war der eigentliche Erkenntnisgewinn des Vergleichs.
Die Anmeldung entscheidet, ob eine Funktion benutzt wird
Am Serviceheft war der Bauteil, über den ich am längsten nachgedacht habe, nicht die Historie, sondern das Anmeldefeld. Mit Registrierung wäre es technisch sauberer gewesen und praktisch leer geblieben. Kennzeichen und vier Ziffern sind die schwächere Sicherung und die einzige, die jemand an der Ampel benutzt.
Was ich als Nächstes prüfen würde
Ob die vier nicht auf der Startseite gezeigten Leistungen tatsächlich gefunden werden, dafür würde ich fünf Leuten die Aufgabe „finde, was ein Klimaservice kostet“ geben und zusehen. Beim Serviceheft würde ich zusehen, wie jemand sein eigenes Kennzeichen eintippt: ob mit Bindestrich, mit Leerzeichen oder ganz ohne, und ob die vier Ziffern ohne Erklärung verstanden werden. Und die Ladezeit des Kopfbilds, die jetzt der begrenzende Wert ist.
Kurz gefasst
Eine Werkstatt lebt davon, dass der Kunde wiederkommt, und das Datum dafür steht auf einem Zettel, den niemand liest. Also habe ich das Serviceheft in die Webseite geholt: der Halter kommt mit Kennzeichen und vier Ziffern hinein und sieht seine Historie und den nächsten Termin, der Betrieb sieht morgens eine Liste, wer überfällig ist, und der Folgetermin rechnet sich beim Eintragen selbst aus.
Davor lag die Frage nach der Startseite. Um sicherzugehen, dass die erste Struktur nicht nur die erste war, habe ich eine zweite komplett gebaut und verglichen, und die verworfen, die mehr zeigte, aber weniger beantwortete. Beide sind online, damit die Entscheidung nachprüfbar bleibt.
Live ansehen
Beide Strukturvarianten sind erreichbar, so lässt sich der Vergleich der Startseiten selbst nachvollziehen.
Variante 1 öffnen → Variante 2 ansehen
Konzeptprojekt: Betrieb, Preise und Kontaktdaten sind erfunden. Serviceheft und Verwaltung laufen ohne hinterlegte Zugangsdaten im Demo-Modus, also mit Testdaten im Browser; die veröffentlichte Demo zeigt derzeit den Stand der Webseite ohne diesen Teil.