Pidkazhu
Vom Logo zur Plattform
Ein Vermittlungsservice für Autowerkstätten in der Ukraine – von Produktregeln und Logo bis zur dreisprachigen Website. Mit einem bewussten Kurswechsel: Als das erste Design zu flach wirkte, wurde das gesamte Designsystem neu aufgebaut.
Ausgangslage & Auftrag
Der Auftraggeber kam mit einer klaren Idee, aber ohne Namen, Marke oder Website. Gebraucht wurde kein weiteres Werkstattverzeichnis, sondern ein Service, dem man sein Auto anvertraut – noch bevor man den Schlüssel übergibt.
Der Gegner heißt Unsicherheit
Das Problem ist nicht, aus zehn Werkstätten eine auszuwählen. Es beginnt in dem Moment, in dem man sein Auto Menschen überlassen muss, die über Reparaturen viel mehr wissen als man selbst.
Trust should come before the keys change hands.
Das Designsystem beginnt mit genau diesem Satz: „We sell confidence, not repairs.“
Erst die Regeln, dann das Design
Bevor eine einzige Seite gestaltet wurde, habe ich das Produkt schriftlich festgelegt: Produktverfassung, Unique Mechanism, Brand DNA und das Kernobjekt „Bearing“. Diese Dokumente haben später jede Designentscheidung beantwortet – nach Regeln, nicht nach Geschmack.
Der Auslöser: der erste Entwurf
Der erste Entwurf vom 30. Juni sah aus wie jedes Vergleichsportal: Sterne, Bewertungen, eine Karte mit Werkstätten, ein Katalog von Leistungen. Technisch sauber – aber genau das Gegenteil von dem, was der Service verspricht. Aus dieser Erkenntnis entstanden die Regeln.
- 01Situation schildern
- 02Gespräch mit dem Manager
- 03Rückfragen
- 04Fotos oder Besichtigung, falls nötig
- 05Auswahl der Werkstatt
- 06Prüfung, ob sie den Auftrag annehmen kann
- 07Abstimmung mit dem Kunden
- 08Übergabe der Daten
- 09Termin in der Werkstatt
Eine Richtung statt einer Liste
Das Herz des Produkts heißt „Bearing“ – eine Karte mit genau einer abgestimmten Werkstatt. Sie hat immer dieselben Felder in derselben Reihenfolge: Werkstatt · Termin · Adresse · wer Sie empfängt. Ihr Gewicht wächst mit der Anfrage und nimmt nach dem Besuch wieder ab – sie bleibt erreichbar, drängt sich aber nicht auf.
Ein Zeichen, das spricht
Die Farbsuche begann mit fünf ruhigen, skandinavischen Paletten. Übernommen wurde keine davon – aus ihnen entstand ein eigenes System: warmes Papier, tiefes Tannengrün für Vertrauen und ein einziger Tonakzent für das Menschliche. Ausdrücklich verboten: das typische Blau-Rot der Autobranche.
Ein Designsystem, kein Moodboard
Aus der Palette wurde ein vollständiges Dokument mit 15 Kapiteln: Markenphilosophie, Gestaltungsprinzipien, Farben, Typografie, Raster, Abstände, Bewegung, Icons, Barrierefreiheit und Komponenten. Jede Farbe und jede Schrift darin ist derselbe Code, der später auf der Website läuft.
Vom Schriftzug zum Zeichen
Im ersten Entwurf war das Logo nur ein Schriftzug: „pidkazhu“ mit einem gelben Punkt am Ende. Der Punkt blieb – als Zeichen für die gefundene Antwort. Im Designsystem v1 wurde daraus das eigentliche Zeichen: das sprechende Quadrat mit dem Punkt in der Mitte.
Die Lösung: ein Zeichen, das spricht
Das Zeichen ist ein „sprechendes Quadrat“: eine Sprechblase mit abgeflachter oberer linker Ecke – Pidkazhu spricht. Der Punkt in der Mitte steht für die gefundene Antwort. Die abgeflachte Ecke trägt jede Karte der Website. Später bekam das Logo eine Bewegung, erarbeitet in sechs Runden: Der Punkt fährt die Kontur nach, biegt nach innen ab und rastet in der Mitte ein; danach läuft ein Tonband über den Schriftzug – 2,1 Sekunden, ohne Nachschwingen.
Die freigegebene Variante V5 A3 – so läuft sie im Header von pidkazhu.com. Beim späteren Redesign blieb das Zeichen erhalten – angepasst wurden nur Schrift und Grünton.
A gewann, weil die Bahn aus der Geometrie des Zeichens selbst berechnet wird – auf kein anderes Logo übertragbar.
Eigene Icons statt Stock
Auch die Icons wurden gezeichnet, nicht gekauft: eine Linienfamilie im 24-px-Raster. Die Icons für Orientierung, Vertrauen und Fürsorge tragen den Ton-Punkt aus dem Logo.
Vom Wireframe zur ersten Live-Version
Ende August entstanden Wireframes für zwei konkurrierende Startseiten, dann ein Hi-Fi-Design für Desktop und Mobil. Umgesetzt mit Astro und einem eigenen PHP-Backend für das zweistufige Anfrageformular – online am 1. September.
Motion-System „Nitka“ – der Faden
Für die persönliche Seite jeder Anfrage habe ich drei Bewegungskonzepte verglichen. Gewonnen hat der „Faden“: Die Anfrage bewegt sich als Punkt entlang einer Linie – Beschreibung, Auswahl, Empfehlung, Kontakt, Besuch. Der Kunde sieht nicht einzelne Bildschirme, sondern wie sein Anliegen vorankommt.
Sauber – aber zu still
Die erste Version war ordentlich, und genau darin lag das Problem. Eine Woche nach dem Start habe ich die eigene Startseite einem Audit unterzogen. Das Fazit: Produkt, Inhalte und Logik stimmen – die visuelle Sprache trägt sie nicht.
Sechs Iterationen im selben System
Es folgten eine Studie mit acht Referenz-Websites und sechs neue Varianten: Nummerierung wie im Magazin, dunkle Bänder, Platz für Fotos, Bearing als roter Faden. Jede war besser als die vorige – keine war gut genug. Die Erkenntnis: Das Problem lag nicht im Layout, sondern in der visuellen Sprache selbst.
01 / 08Version 1 · 1. Sep.Warmes Papier, Serifen, Haarlinien. Sauber – und flach.
02 / 08Feinschliff · 8. Sep.Breiterer Container, ruhigere Abstände. Gleiche Formel.
03 / 08Iteration V2Grünes Verantwortungs-Band, nummerierte Schritte. Mehr Kontrast, gleicher Rhythmus.
04 / 08Iteration V3Problem-Sektion auf eigener Fläche, geteiltes Layout. Ordentlicher, nicht mutiger.
05 / 08Iteration V4Große Ziffern und Platz für Fotos. Bilder sollten tragen, was das System nicht trug.
06 / 08V5 Editorial · 10. Sep.Kapitel wie im Magazin, nach einer Studie von acht Referenzen. Klarer, aber noch leise.
07 / 08V6 Bearing · 12. Sep.Bearing als durchgehende Linie der Seite. Konzeptionell stark, visuell weiterhin Papier.
08 / 08Neues System · liveKühle Flächen, eine Grotesk, dunkle Sektionen – und das Auto als zentrales Objekt.
Der Bruch mit der eigenen Regel
Also wurde das Designsystem komplett neu aufgebaut – inklusive einer Regel, die ich selbst aufgestellt hatte: „keine Autos“. Ein einzelnes, ruhiges Fahrzeug gibt dem Thema sofort ein Gesicht, ohne in Autohaus-Klischees zu kippen. Bewusst kein Supersportwagen, sondern ein schwedisches Coupé der 60er, der P1800: Ein einziger Besitzer fuhr mit diesem Modell über 4,8 Millionen Kilometer – dank regelmäßiger Pflege bei Werkstätten, denen er vertraute. Genau das ist die Idee von Pidkazhu: Zuverlässigkeit entsteht nicht durch das Auto, sondern durch den Service drumherum. Produktregeln, Texte und Bearing blieben unangetastet.
Neues System, gleiche Regeln
Kühles Silbergrau statt warmem Papier, eine einzige Grotesk statt Serifen, dunkle Sektionen als Rhythmus. Das Grün wurde direkt aus dem Lack des Hero-Autos abgeleitet, damit Marke und Bild eine Palette bilden.
Der erste Bildschirm
Das Auto als ruhiges Hauptobjekt, darunter schon die Felder des Ergebnisses: Werkstatt, Termin, Adresse, wer Sie empfängt. Mit der Maus wird es zur Röntgenlinse – unter dem Lack erscheint die Technik.
Der Weg in acht Schritten
Statt „Wir finden die beste Werkstatt“ zeigt die Seite jeden Schritt: was Pidkazhu tut und was der Kunde beitragen muss – meistens nichts.
Zehn Prüfkriterien statt Sterne
Qualifikation, Ausstattung, transparente Rechnungen, Garantie: Jedes Kriterium ist einzeln erklärt – mit der Antwort, warum es für den Kunden zählt.
Das Geschäftsmodell offengelegt
Wer die Provision zahlt und warum das die Auswahl nicht beeinflusst: Die Website beantwortet die unbequeme Frage selbst, bevor der Kunde sie stellt.
Service-Atlas
Ein Auto, acht Ebenen: Jede Leistungsgruppe markiert den Bereich am Fahrzeug, den sie betrifft. Niemand muss wissen, wie das defekte Teil heißt.
Eine Seite pro Leistung
Acht Leistungsseiten in drei Sprachen mit typischen Symptomen und Auswahlkriterien. Sie holen Suchanfragen ab, ohne zu versprechen, was nur die Werkstatt leisten kann.
Anfrage in zwei Schritten
Die Situation in eigenen Worten, Vorschläge als Chips, dann der Kontakt. Eine genaue Diagnose ist nicht nötig.
Mobil zuerst gedacht
Schnell, dreisprachig, ohne Ballast
Die Website ist statisch gebaut und lädt schnell; das Anfrageformular läuft über ein eigenes, schlankes PHP-Backend beim ukrainischen Hoster des Kunden.
Was der Kunde bekommen hat
Kein Template, sondern ein durchdachtes Produkt – von der ersten Regel bis zur letzten Animation. Geschäftszahlen gibt es noch nicht; die Website ist seit September live.
Projekt besprechen
Lassen Sie uns gemeinsam herausfinden, wie UX und klare Informationsarchitektur Ihr Produkt verbessern können.
Strategiegespräch starten