UX-Überarbeitung
Wir haben LawDocsOnline neu gestaltet. So sieht Vertrauen bei Rechtsvorlagen aus.
Lawdocsonline.in ist eine echte Bibliothek kostenloser, von Anwälten verfasster Vorlagen, eingepackt in eine WooCommerce-Optik aus der Mitte der 2010er. Wir haben das Frontend rund um eine Frage neu aufgebaut: Würde ein Gründer dieser Seite genug vertrauen, um einen Vertrag von ihr herunterzuladen?

Im April 2026 landeten wir auf lawdocsonline.in, während wir für einen anderen Kunden zu Rechtsvorlagen recherchierten. Die Bibliothek ist echt: von Anwälten verfasste Gesellschaftsverträge, Arbeitsschreiben, SHA-Vorlagen, NDAs. Mehr als 140 Dokumente in dreizehn Kategorien, allesamt kostenlos, jedes Quartal geprüft. Jedes indische Startup würde das nutzen, wenn es davon wüsste.
Die Website vermittelte nichts davon. Standard-WooCommerce-Theme, Lorem-ipsum-Fließtext, kaputte Produkt-Platzhalter, wo Dokument-Cover sein sollten, ein „Spendiere uns einen Kaffee”-Trinkgeldglas als einziger Call-to-Action. Der Kontrast zwischen Substanz und Oberfläche war so steil, dass wir dem Gründer noch am selben Abend unaufgefordert einen Redesign-Entwurf schickten.
In dieser Fallstudie geht es um diesen Redesign. Nicht um die visuellen Entscheidungen, sondern um die UX-Entscheidungen dahinter. Die Frage, die wir uns immer wieder stellten: Würde ein Gründer, drei Wochen vor der Gründung, dieser Seite genug vertrauen, um einen Vesting-Vertrag für Gründer herunterzuladen und zu verwenden?
Im Inneren der LawDocsOnline-UX-Überarbeitung: Vertrauen, Suche und ein Fehlgriff mit Kursivschrift
1. Die drei Probleme der ursprünglichen Seite
Das erste Problem war die visuelle Hierarchie. Die Startseite hatte dreizehn Kategoriekarten, einen Testimonials-Abschnitt, einen Über-uns-Block und ein Kaffee-Trinkgeldglas, alle ungefähr gleich gewichtet. Nichts sagte einem Erstbesucher, wo er anfangen soll.
Das zweite waren die Platzhalterinhalte. Lorem ipsum liest sich nicht wie „das füllen wir später aus”; es liest sich wie „diese Seite ist unfertig”. Für etwas so vertrauensabhängiges wie Recht ist das fatal. Ein Gründer, der einen Vertragsentwurf bewertet, sucht nach Signalen, dass kompetente Menschen diesen Katalog pflegen. Lorem ipsum sagt das Gegenteil.
Das dritte waren die WooCommerce-Platzhalter für kaputte Bilder dort, wo Dokument-Thumbnails hätten sein sollen. Ein Raster grauer Rechtecke mit der Aufschrift „Partnership Deed” vermittelt nichts über das Dokument dahinter. Der Leser muss durchklicken, um irgendetwas zu erfahren, und die meisten tun das nie.
Drei Probleme, eine Grundursache. Die Seite war wie ein generischer E-Commerce-Shop gebaut, aber Rechtsvorlagen sind keine E-Commerce-Kategorie. Der Leser stöbert nicht, er sucht. Er vergleicht keine Preise, weil es keine Preise gibt. Er baut keinen Warenkorb auf, er braucht genau jetzt ein Dokument. Die von der Plattform geerbte Taxonomie kämpfte gegen die eigentliche Aufgabe an.
2. Das Briefing, das wir uns selbst gaben
Ein Satz: Ein Gründer landet auf dieser Seite und fühlt sich innerhalb von dreißig Sekunden sicher genug, um einen Vertrag herunterzuladen und zu unterschreiben.
Das schloss vieles aus. Kein Karussell generischer Rechts-Stockbilder, keine Richterhämmer, keine Waagen. Kein durch nichts belegter „von über 10.000 Nutzern vertraut”-Statistikblock. Keine Paywall, nicht einmal eine sanfte. Kein Newsletter-Modal. Keine Cookie-Wand, die um Marketing-Einwilligung bittet, bevor der Nutzer überhaupt weiß, auf welcher Seite er ist.
Das Briefing definierte auch, was sofort sichtbar sein musste: wer die Dokumente verfasst hat, wie kürzlich sie geprüft wurden, ob sie mit indischem Recht konform sind und welches Format man beim Download erhält. Jedes davon machten wir zu einem einzeiligen Label, das dem Nutzer vor jedem Klick angezeigt wird. Der Hero-Streifen sagt alles: über 140 Vorlagen, quartalsweise geprüft, DOCX + PDF, kostenlos für Startups. Das Briefing als Micro-Copy geschrieben.
3. Suchen vor Stöbern
Wir platzierten die Suchleiste im Hero, nicht im Header.
Das klingt nach einer Kleinigkeit. Ist es nicht. Die ursprüngliche Seite verließ sich darauf, dass der Nutzer die Kategorieliste liest und seinen Bedarf selbst einordnet: „Ich will einen Arbeitsvertrag, also klicke ich auf Beschäftigung.” Das funktioniert, wenn Sie auf Kategorieebene wissen, wonach Sie suchen. Die meisten Gründer wissen das nicht. Sie wissen, dass sie einen „Vesting-Vertrag für Gründer” oder einen „AVV für unseren SaaS-Vertrag” brauchen. Konkrete Dokumentnamen, keine Kategorien.
Wenn die Suchleiste im Header sitzt, liest sie sich als Hilfsmittel, mit demselben Gewicht wie das Menü. Wenn sie im Hero sitzt, mit dem Platzhalter „NDA, Gesellschaftsvertrag, Arbeitsangebot suchen…”, liest sie sich als primäre Aktion. Das Kategorienraster liegt weiterhin darunter für Nutzer, die stöbern wollen, aber der Standardweg ist jetzt die Suche.
Auch der Platzhaltertext ist wichtig. Wir schrieben nicht „Dokumente suchen…”; das ist ein UI-Label. Wir schrieben drei Beispielsuchen, denn sie dienen zugleich als Entdeckungshinweis: Die Seite hat diese Dinge.
4. Dreizehn Kategoriesymbole, die den Typ signalisieren
Jede der dreizehn Kategorien bekam ein einzelnes Lucide-Icon: Building2 für Immobilien, Scale für Vollmacht, Handshake für Partnerschaft, Shield für NDAs, Briefcase für Beschäftigung und so weiter. Sie sind keine Dekoration. Sie sind Wegweiser.
Drei Regeln, an die wir uns hielten: Jedes Icon musste ein einzelnes Konzept sein (keine Kombinationen, keine „Waage-plus-Gebäude”-Mischungen), jedes Icon musste bei 20px darstellbar sein, ohne zu einem Klecks zu werden, und die Metapher jedes Icons musste in unter einer Sekunde von jemandem erkennbar sein, der das Label nicht gelesen hatte. Wir verwarfen zwei frühe Kandidaten, ein generisches Datei-Icon für Bescheide und ein zu cleveres Waage-Icon für Investment, weil beide den Ein-Sekunden-Test nicht bestanden.
Die Kategoriekarten zeigen außerdem die Vorlagenzahl neben jedem Icon: „24 Vorlagen” neben Immobilien. Das sagt dem Leser zweierlei: welche Kategorien tief gehen und dass der Katalog echte Breite hat. Eine Kategorie mit drei Vorlagen würde sich blutleer lesen. In einem früheren Entwurf ließen wir die Zahl auf der Bescheide-Karte weg, und das Feedback der Reviewer war, dass die Kategorie dünn wirkte, obwohl sie dreizehn Vorlagen hatte. Die Zahl anzuzeigen stellte die wahrgenommene Tiefe wieder her.
5. Vertrauenssignale auf jeder Karte
Die meisten Katalog-UIs verstecken Vertrauenssignale auf einer separaten Über-uns-Seite. Die Wette dabei ist, dass Nutzer, denen es wichtig ist, dorthin navigieren. Tun sie nicht, zumindest nicht, bevor sie über einen Download entscheiden.
Also hoben wir die Signale auf die Karten selbst. Jede Dokument-Detailkarte zeigt die Seitenzahl, das Format (DOCX oder DOCX + PDF), das Datum der letzten Aktualisierung und, wo relevant, die Rechtsordnung. Jede Kategoriekarte zeigt die Vorlagenzahl. Der seitenweite Hero zeigt die vier Vertrauenslabels oberhalb der Falzlinie.
Der dunkle Abschnitt „Neu hinzugefügt” verstärkt das mit einer anderen Art von Vertrauen: Aktualität. „Frisch vom Schreibtisch des Anwalts”, jede Beitragskarte datiert. Die implizite Botschaft ist, dass der Katalog gepflegt und nicht verlassen wird. Quartalsweise Prüfungen sind keine Marketingbehauptung, wenn man sie geschehen sehen kann.
6. Der Rhythmusbruch „Frisch vom Schreibtisch des Anwalts”
Katalogseiten haben ein Rhythmusproblem. Wenn jeder Abschnitt ein Raster mit hellem Hintergrund ist, liest sich die Seite wie eine einzige lange Tabelle. Das Auge weiß nicht, wo es innehalten soll.
Wir schoben einen dunklen Abschnitt zwischen zwei helle, genau in die Mitte des Scrollens: „Frisch vom Schreibtisch des Anwalts”, der die vier zuletzt hinzugefügten Vorlagen zeigt. Der Wechsel der Helligkeit erzwingt einen Takt. Er gibt dem Aktualitätssignal auch eine Bühne: Ein dunkler Abschnitt liest sich als hervorgehoben, während sich ein heller nur als weiterer Katalog liest.
Der übrige Seitenrhythmus ist hell, dunkel, hell, dunkel, über Kartenfarben und einen tiefroten-zu-tintenfarbenen CTA-Verlauf nahe dem unteren Rand. Nichts davon ist Dekoration; es sind Navigationshilfen. Ein Gründer, der diese Seite überfliegt, sollte wissen, wo jeder Abschnitt beginnt, ohne eine einzige Überschrift zu lesen.
7. Die Download-Seite ist die Conversion
Die Kategorie- und Startseiten sind Funnels. Die Dokument-Detailseite ist die Conversion. So haben wir sie behandelt.
Das Layout hat zwei Spalten. Links stehen der Titel, eine Zusammenfassung in einem Absatz und eine „Was ist enthalten”-Checkliste mit fünf Punkten: Präambeln, Pflichten, Ausnahmen, Klauseln zum anwendbaren Recht und Unterschriftsblöcke. Rechts ist eine sticky Sidebar mit Format, Seiten, letzter Aktualisierung und Rechtsordnung, darunter ein einziger „Kostenlos herunterladen”-CTA. Unter dem CTA, in kleinerer Schrift: „Keine Anmeldung erforderlich”.
Der Anwaltshinweis sitzt zwischen den beiden Spalten, nicht darunter. „Diese Vorlage ist ein Ausgangspunkt, keine Rechtsberatung. Lassen Sie das finale Dokument von einem Anwalt prüfen, bevor Sie unterschreiben.” Es ist nach dem Titel das am zweithäufigsten gelesene Element der Seite. Es in einer Fußzeile zu vergraben ist die bequeme Wahl; sie untergräbt außerdem das Vertrauen, das wir oben aufgebaut haben. Der Hinweis ist Teil des Werts, keine juristische Absicherung pro forma.
Wir verlangten für den Download keine E-Mail. Jede andere Gratis-Vorlagen-Seite, die wir prüften, nutzt eine sanfte Paywall: E-Mail eingeben, um das PDF zu bekommen. Der aufmerksame Gründer bemerkt, dass seine Angaben das Produkt sind, nicht Ihres. Also machten wir die gegenteilige Entscheidung laut. Keine E-Mail, keine Anmeldung, kein Upsell. Kostenlos herunterladen heißt kostenlos herunterladen.
8. Ein Fehlgriff bei Farbe und Schrift
Der erste Entwurf nutzte ein tiefes Indigo als Markenfarbe und ein Instrument-Serif-Kursiv für die Display-Schrift. Wir dachten „Editorial trifft Recht”: Die Kursivschrift spielte auf Rechtsprechungszitate an, das Indigo wirkte hochwertig und stabil. Zwei Minuten nach der Demo kam das Feedback zurück: „Diese Kursivschrift ist mies, bleibt bei Rot und Weiß”.
Es war die richtige Entscheidung. Das ursprüngliche lawdocsonline.in ist rot, und das ist seine Identität in der Erinnerung des Nutzers. Es durch Indigo zu ersetzen war Neuheit um der Neuheit willen, eine Designentscheidung, die ein Portfolio-Stück ergibt, aber Markenwiedererkennung kostet. Poppins, die bevorzugte Display-Schrift, liest sich freundlich-modern statt juristisch-förmlich, was zu einer Seite passt, deren Publikum Gründer sind, nicht Anwälte.
Wir tauschten die gesamte Markenpalette gegen Rottöne (#fef2f2 bis #7f1d1d) und ersetzten sowohl Display- als auch Fließtextschrift durch Poppins. Die meisten Goldakzente, die wir als dritte Farbe verwendet hatten, wurden zu Rottönungen. Die Seite verlor eine Achse der Vielfalt, gewann aber eine klare Identität.
Die Lektion, klar gesagt: Markenwiedererkennung schlägt Neuheit, wenn das Thema vertrauensabhängig ist. Ein Redesign, das Ihrem Publikum einen Fremden vorsetzt, ist schlimmer als gar kein Redesign.
9. Wie es weitergeht
Der aktuelle Build ist die Frontend-Überarbeitung. Die R2-Anbindung ist verlegt, aber noch nicht befüllt. Wir haben die Infrastruktur dafür gebaut, dass Dokumente im Cloudflare-Objektspeicher liegen, mit presigned URLs für Downloads, aber die eigentlichen Vorlagen müssen noch hochgeladen werden. Die Download-API gibt bis dahin eine klare „R2 nicht konfiguriert”-Meldung zurück.
Drei Dinge auf der Folge-Liste: echte Dokument-Uploads, ein Stempelsteuer-Rechner, der die Kosten für die Registrierung gängiger Dokumente in jedem indischen Bundesstaat schätzt, und ein E-Mail-an-den-Anwalt-Eskalationspfad für Vorlagen, die eine Überarbeitung brauchen. Der letzte ist die Wette: Kostenlose Vorlagen sind ein Top-of-Funnel für Rechtsdienstleistungen, und der Redesign lässt diesen Pfad natürlich statt transaktional wirken.
Fragen zum Projekt
Ist das ein echtes Kundenprojekt oder ein Konzept?
Ein Konzept. Wir schickten den Redesign an die auf lawdocsonline.in angegebene E-Mail als unaufgeforderten Pitch. Sie haben noch nicht geantwortet; diese Fallstudie geht so oder so online.
Wird lawdocsonline.in den Entwurf übernehmen?
Ihre Entscheidung. Der Code liegt in unserem Ordner für potenzielle Kunden, und wir können ihn als schlüsselfertiges Deployment übergeben, wenn sie ihn wollen. Wenn nicht, behalten wir ihn als öffentliches Schaustück.
Wie sieht der Stack aus?
Next.js 16 mit App Router, React 19, Tailwind v4, framer-motion für Eingangsanimationen, lucide-react für Icons. Cloudflare R2 (S3-kompatibel) für die Dokumentspeicherung über @aws-sdk/client-s3 und presigned URLs. Von Grund auf überall hostbar.
Warum Cloudflare R2 statt eines CMS?
Dokumente sind große, überwiegend statische Binärblobs. Sie brauchen kein CMS, sie brauchen günstigen Objektspeicher und ein schnelles CDN. R2 liefert beides, kostet rund 0,015 $ pro GB und Monat und hat kostenfreies Egress, was für eine Gratis-Download-Seite zählt. Ein CMS würde Komplexität und monatliche Kosten hinzufügen, ohne ein Problem zu lösen, das wir haben.
Sind die Dokumente in der Demo echt?
Die Kategoriestruktur und die Dokumenttitel sind echt, entnommen aus dem ursprünglichen lawdocsonline.in-Katalog. Die eigentlichen DOCX- und PDF-Dateien dahinter sind noch nicht hochgeladen. Der Download-Endpunkt leitet in dem Moment auf presigned R2-URLs weiter, in dem sie es sind.