Der Fokus von Agenturbetreibern und Freelancern liegt häufig auf der Effizienz der Kundenprojekte – wie erstelle ich Websites schneller? Wie optimiere ich meinen Design-Prozess? Doch dabei werden oft die internen Business-Prozesse übersehen. Dabei lässt sich gerade dort enorm viel Zeit und Mühe sparen. Ein entscheidender Punkt ist der Onboarding-Prozess neuer Kunden.
In diesem Artikel zeige ich dir daher, wie es dazu kam, dass ich mein eigenes Kundenportal erstelle, welche Erfahrungen ich dabei mit vibe coding vor allem dem Tool lovable* gemacht habe und wie du als Freelancer oder Agenturinhaber auch davon profitieren kannst.
Hier geht’s zur Videoreihe der Entwicklung des Kundenportals und hier gleich der Teil 1 davon zum ansehen:
Was ist überhaupt der Onboarding-Prozess in einer Webagentur?
Der Onboarding-Prozess ist die gesamte Vorbereitung, bevor die eigentliche Arbeit an einem Kundenprojekt beginnt. Es geht darum, alle relevanten Informationen vom Kunden zu sammeln, ihn ins Projekt einzuführen und die Grundlagen für eine reibungslose Zusammenarbeit zu schaffen.
In einer Webagentur könnte das konkret so aussehen: Ein neuer Kunde kommt auf dich zu und möchte eine Website erstellen lassen. Jetzt brauchst du von ihm verschiedene Dinge: Informationen über sein Unternehmen, sein Branding, seine Ziele mit der Website, Texte und Bilder, die er verwenden möchte, seine Kontaktdaten, Zugangsdaten für bestehende Systeme – die Liste ist lang.
Gleichzeitig musst du als Agentur den Kunden informieren: Wie läuft der Prozess ab? Welche Schritte sind notwendig? Wann brauchst du welche Informationen von ihm? Wie kommuniziert ihr miteinander? Wer ist sein Ansprechpartner bei dir?
Der Onboarding-Prozess ist also die Schnittstelle zwischen dem ersten Kontakt und dem eigentlichen Projektstart. Er ist entscheidend dafür, dass der Kunde sich professionell behandelt fühlt und dass du alle Informationen hast, die du brauchst.
Typischerweise passiert im Onboarding-Prozess Folgendes:
- Einführung in das Projekt:
Du vermittelst dem Kunden, welche ToDos bei ihm liegen, wie das Projekt und die Zusammenarbeit während des Projektzeitraumes abläuft und was er nun zu tun hat, damit du loslegen kannst - Datensammlung:
Du sammelst Informationen vom Kunden – seine Unternehmensdetails, seine Ziele, seine Vorstellungen für das Projekt, Inhalte, Bilder, Videos etc. - Dokumentation:
Diese Informationen müssen irgendwo zentral gespeichert sein, sodass du und dein Team darauf zugreifen können. - Kommunikation:
Es gibt Fragen des Kunden, Rückfragen von dir, Absprachen – all das muss strukturiert ablaufen. - Verwaltung:
Du brauchst einen Überblick: Bei welchem Kunden bin ich wie weit? Hat er alle Informationen eingereicht? Fehlt noch etwas?
Das Problem: Dieser Prozess wird oft mit mehreren Tools abgewickelt, die nicht miteinander verbunden sind. Das führt zu Ineffizienz, Verwirrung und auch zu einem weniger professionellen Eindruck beim Kunden.
Mein alter Prozess: Vier Tools – viel Chaos
Als ich in die Selbstständigkeit gestartet bin, hatte ich für meinen Onboarding-Prozess vier verschiedene Tools im Einsatz:
Trello für Projektmanagement
Google Forms für Fragebögen
Google Drive für Dateiverwaltung
und meinen E-Mail-Client für die Kommunikation.
Das funktionierte zwar, war aber weder für mich noch für meine Kunden optimal. Multiple Logins, verteilte Informationen und ein wenig professioneller Gesamteindruck waren die Folgen.
Die erste Optimierung: Besser, aber nicht ideal
In einem zweiten Schritt optimierte ich den Prozess: Ich wechselte zu Typeform statt Google Forms und integrierte Automatisierungen mit make.com, um beispielsweise Google-Drive-Ordner automatisch für jeden Kunden zu erstellen. Das reduzierte die manuelle Arbeit, aber es war immer noch keine optimale Lösung.
Die Anforderungen an das richtige Tool
Bei meiner Suche nach einer besseren Lösung zeigte sich schnell: Es gibt durchaus gute Onboarding-Tools am Markt. Doch keine passte wirklich. Die meisten hatten zu viele Funktionen – sowohl für mich als auch für meine Kunden, die sich dadurch überfordert fühlten. Ein weiteres Problem: Sie waren auf Englisch, meine Kunden aber zu 90% aus dem deutschsprachigen Raum. Ich brauchte etwas einfaches und komplett auf Deutsch.
Selbst programmieren? Das hätte so viel Zeit gekostet, das Tool zu erstellen, dass der Nutzen wiederum zu gering gewesen wäre. Und warum selbst programmieren, wenn es ohnehin ein paar Tools am Markt gibt.
In Gesprächen mit anderen Agenturinhabern über ihre Prozesse wurde mir dann zum Tool Notion geraten. Das hatte ich bereits vor Jahren mal für mein Projektmanagement getestet, aber ist damals auch daran gescheitert, dass ich mehr Zeit mit dem Aufbau und Strukturierung in Notion verbracht habe, als mit der eigentlichen Verwendung des Kundenportals mit meinen Kunden.
Mittlerweile geht das schon ein bisschen einfacher, denn auch Notion hat nun einen integrierten AI Agent, den man mit Anforderungen füttern kann und dann wird in Notion das so umgesetzt, wie man es haben möchte. Nach kurzem Test habe ich festgestellt, dass die Grundfunktionen für mein Kundenportal damit zwar umsetzbar sind, aber Notion sieht eben wie Notion aus und das finde ich leider etwas unübersichtlich für meine Kunden. Daher habe ich auch das wieder verworfen.
Die Wendung: Vibe Coding und AI-Tools zur Erstellung von Prototypen und Apps
In den letzten Monaten habe ich mich immer wieder mit KI Tools wie Bolt.new, Greta AI und anderen herumgespielt. Meist versuchte ich kleine Landingpages zu erstellen – aber der Output war eher nicht zufriedenstellend. Das Design war nie richtig gut, sondern eher austauschbar.
Dann dachte ich mir: Ich spiele mal ein wenig mit lovable.dev* herum. Das Tool wurde in den letzten Wochen sehr stark beworben – die dürften ein großzügiges Marketingbudget haben, daher lässt sich darauf schließen, dass das Tool auch mächtig und langfristig ist. Ich habe einfach mal mit Prompts herumgespielt, um ein kleines Kundenportal zu erstellen.
Nachdem ich bemerkt habe, wie gut mitgedacht wurde und wie schnell Funktionen mit 1-2 Prompts entstanden – für die ich bei manueller Programmierung vermutlich einige Stunden gebraucht hätte (z.B. Login-Bereich, Datenbank-Anlage und -Verknüpfung, User-Authentifizierung) – war ich schon mal begeistert.
Da dachte ich: Okay, warum mache ich da nicht mehr draus als nur eine kleine Herumspielerei? Ich will mein Kundenportal so aufbauen, dass ich es wirklich mit meinen Kunden nutzen kann. Daher kaufte ich bei Lovable um 25 Dollar 100 Credits.
Der Weg zur Umsetzung: Anforderungen strukturieren
Bevor ich Lovable überhaupt öffnete, schrieb ich alle Anforderungen in ein einfaches Textdokument – noch gar nicht auf Lovable. Ganz grob meine Ideen dazu, wobei zu diesem Zeitpunkt noch viele Features fehlten, auf die ich erst während der Entstehung kam.
Dann nahm ich diese Anforderungen und gab sie bei Perplexity ein: „Schreibe mir bitte einen optimalen Prompt für das Tool Lovable, um ein Kundenportal für meine Agentur zu entwickeln“ – und kopierte meine Anforderungen aus dem Textdokument ein.
Perplexity schrieb mir einen ausführlichen Prompt mit der Zusammenfassung meiner Anforderungen, den ich wiederum kopiert und bei Lovable 1:1 eingegeben habe.
Warum dieser Zwischenschritt mit Perplexity? Damit der Prompt schon mal ausführlicher wird. Ich sah bereits, dass Perplexity kleinigkeiten hinzufügte wie „einfache Navigation, simples Design, übersichtlich“ etc.
Also: Prompt in Lovable kopiert und das Tool starten lassen, um es arbeiten zu lassen. Nach wenigen Minuten war schon ein erstes Ergebnis zu sehen. Das war zwar noch ein wenig ernüchternd und optisch „okay“ – aber funktionell schon TOP: Hier war bereits eine Datenbank, Routing etc. im Hintergrund angelegt worden und alles funktionierte super.
Das Frontend: Kundenportal mit echtem Mehrwert
Im ersten Teil der Serie habe ich mich mit dem Frontend beschäftigt – also das, was meine Kunden sehen, wenn sie sich einloggen. Das Portal beinhaltet:
- Login-Bereich: Kunden können sich einloggen
- Dashboard: Übersicht mit Checklisten
- Fragebogen: Kunden füllen Fragebögen aus
- Datei-Upload: Kunden können Dateien hochladen (Logo, Fotos, Videos etc.)
- Nachrichtenfunktion: Kunden können mir als Agentur eine Nachricht senden
- Nachrichtenverlauf: Der Nachrichtenverlauf wird gespeichert
- Rechnungsübersicht: Eine Übersicht der Rechnungen
Die Struktur stimmte, das Design war solide.
Der nächste Schritt: Die Admin-Ansicht
Das Portal brauchte aber auch eine Administrationsoberfläche – für mich als Agenturinhaberin. Das war der Fokus des zweiten Videos.
Meine ursprüngliche Anforderung war:
- Im Dashboard die wichtigsten Benachrichtigungen: z.B. „Kunde X hat neue Dateien hochgeladen“, „Kunde Y hat eine Nachricht geschickt“ – und von dort aus sollte man direkt mit einem Klick zum jeweiligen Bereich kommen
- Kundenverwaltung: Eine durchsuchbare Liste aller Kunden, wo ich schnell nach Namen und Projektname suchen kann
- Bei Klick auf einen Kunden: Details sehen (Informationen, Dateien, Nachrichten)
- Menüpunkte: Dashboard, Kundenverwaltung, Message Center
Ich habe das absichtlich im Chat beschrieben – ohne Implementierung – damit das keine Credits verbraucht. So konnte Lovable mir erst zusammenfassen, was es umsetzen würde.
Lovables Vorschlag war:
- Benachrichtigungssektion mit den neuesten 5-10 ungelesenen Benachrichtigungen (mit Icon, Kundenname, Aktion, Zeitstempel – klickbar zu den Details)
- CMS-Sektion: Die Kundenliste
- Statistik-Cards: Gesamtanzahl Kunden, offene Nachrichten, neue Uploads der letzten 7 Tage
- In der Datenbank: Neue Tabelle für Notifications mit entsprechenden Rechten (nur Admin darf das sehen)
Nach diesem Chat habe ich gesagt: „Lass das implementieren.“ Ab jetzt verbrauchte das Credits.
Die erste Implementierung: Funktional, aber nicht perfekt
Nach der Umsetzung sah es so aus:
Das Dashboard:
- Benachrichtigungen, Gesamtkunden, hochgeladene Dateien, offene Nachrichten – das fand ich gut
- Allerdings konnte ich von da aus noch nicht direkt zu den entsprechenden Bereichen springen (das war noch nicht angepasst)
Die Kundenverwaltung:
- Batman Admin stand auch drin – das musste ich noch anpassen, damit ich als Admin nicht bei den Kunden erscheine
- Ich konnte danach suchen
- Aber ich wollte die Kunden als echte Liste haben – mit mehr Details wie Projekttitel, Vorname, Nachname, Unternehmensname
Die Kundendetails:
- Portalinhalte: Hier wollte ich für jeden Kunden individuell Dinge halten (z.B. jedem Kunden ein anderes Video ausspielen und eine Anleitung)
- Hochgeladene Daten: Hier sah ich die Dateien
- Was mir fehlte: Ein richtiges CMS, wo ich von Anfang an die ganzen Daten des Kunden eingebe (Unternehmensname, URL, E-Mailadresse, Kontaktdaten)
Das Message Center:
- Ich hatte Nachrichten abgeschickt (automatische Anfragen wie „Ich interessiere mich für professionelles Fotoshooting oder Image Videos“)
- Ich konnte antworten
- Aber: Der Status war nicht klar. Nachdem ich geantwortet hatte, war immer noch nicht ersichtlich, dass ich das bereits getan hatte
- Ich wollte standardmäßig nur die offenen/unbeantworteten sehen, nicht alle durchgehen müssen
Die Credits: Schon nach der ersten großen Umsetzung war ich von 18,2 auf 14,3 Credits gefallen – etwa 4 Credits für diesen einen Prompt mit mehreren Aufgaben.
Die Optimierungen: Detailarbeit ist teuer
Jetzt machte ich mir eine To-Do-Liste mit all den Dingen, die ich noch anpassen wollte. Ich beschrieb alles detailliert im Chat (wieder ohne Implementierung):
Kundenverwaltung:
- Kundenliste als echte Liste mit mehr Details (Projektname, Vorname, Nachname, Unternehmensname)
Kundendetails:
- Bei den Dateien: Download-Button, um alle Dateien zusammen als ZIP herunterzuladen
- Bei den Fragebogen-Daten: Button zum Download als Textdokument
Message Center:
- Unbeantwortete Nachrichten als Standard-Filter oben
- Bei Klick auf eine Konversation: Alle Nachrichten dieser Konversation sehen
- Als Admin den Status ändern können (z.B. auf „erledigt“ setzen)
- Antwortfunktion direkt in Kundendetails
Nach diesem Chat sagte ich: „Okay, lass das implementieren.“ Und diesmal verbrauchte das Credits – viel mehr, als ich gedacht hätte.
Das Ergebnis der Optimierungen:
- Kundenliste: Jetzt als echte Liste mit Suchfunktion. Ich konnte einen neuen Kunden anlegen, sah den Namen des Unternehmens (das Wichtigste), Projekttitel, Status (Kunde oder Interessent). Bei Klick auf eine Zeile: bearbeiten oder löschen.
- Dateien: Jetzt wurden die Dateien nach Bereich sortiert angezeigt. Ein Button zum Download aller Dateien war da – aber der funktionierte noch nicht ganz (leere ZIP-Datei).
- Fragebogen: Ein Download-Button war vorhanden.
- Message Center: Die unbeantworteten Nachrichten waren jetzt blau hinterlegt. Ich konnte sie als Standard-Filter sehen. Der Status (offen/erledigt) war klarer.
- Fehler: Bei einigen Funktionen entstanden noch kleine Fehler (wie der nicht funktionierende ZIP-Download), die mussten dann einzeln behoben werden.
Nach all diesen Optimierungen waren meine 100 Credits aufgebraucht. Ich musste erneut um 200 Credits für etwa 15 Dollar nachkaufen – das Minimum bei Lovable.
Was ich gelernt habe: Kosten und Detailgrad
Wichtig zu verstehen: Jede Anpassung kostet Credits – und Credits kosten Geld. Ich war anfangs zu vage mit meinen Anforderungen. Das führte dazu, dass der Output nicht ganz dem entsprach, was ich im Kopf hatte. Daher musste ich vieles nachträglich anpassen – und das schlug sich deutlich in den Kosten nieder.
Die Grundzüge waren ganz gut, aber ich hätte schon detaillierter reingehen sollen. Das ist mir erst während der Umsetzung aufgefallen, dass das Tool meine Anforderungen nicht so verstanden hatte, wie ich mich ausgedrückt hatte.
Je präziser die Anforderungen, desto besser das Ergebnis. Desto weniger Nacharbeiten. Desto weniger Credits verbraucht.
Vorteile von Vibe Coding mit Lovable
Geschwindigkeit der Funktionsentwicklung: Funktionen wie Login, Datenbank-Integration und User-Authentifizierung entstehen mit wenigen Prompts in Minuten – nicht in Stunden.
Iterative Optimierung: Man kann schnell Feedback geben und Anpassungen vornehmen. Das Tool antwortet in Minuten, nicht Wochen.
Deutsche Sprache: Das Portal ist vollständig auf Deutsch – genau, was ich brauchte für meine deutschsprachigen Kunden.
Praktischer Nutzen: Es entsteht schnell ein funktionierendes Produkt, kein theoretischer Proof of Concept.
Niedriger Einstieg: Ich bin kein Programmierer, aber ich konnte trotzdem ein funktionierendes Portal erstellen.
Nachteile und Herausforderungen
Credits verbrauchen sich schnell: Eine einzelne umfangreiche Änderung kann 4-5 Credits kosten. Das summiert sich.
Wartezeiten: Die Umsetzung dauert manchmal 4-5 Minuten. Das ist schnell verglichen mit manueller Programmierung, aber trotzdem muss man Wartezeiten einrechnen.
Design ist generisch: Die Designs sind funktional, aber nicht außergewöhnlich oder auffällig.
Detailarbeit ist notwendig: Man muss sehr präzise wissen, was man will und das auch sehr genau formulieren können. Vage Anforderungen führen zu generischen Ergebnissen, die dann angepasst werden müssen.
Fehler müssen einzeln behoben werden: Manchmal entstehen kleine Bugs (wie der nicht funktionierende ZIP-Download), die dann einzeln behoben werden müssen.
Abhängigkeit vom Tool: Wenn etwas nicht funktioniert, kann ich nicht einfach selbst debuggen. Ich bin auf Lovables Support angewiesen.
Fazit: Ein pragmatischer Weg
Vibe Coding mit Lovable ist für mich kein Game-Changer, sondern ein pragmatisches Werkzeug. Für ein internes Tool wie mein Kundenportal – etwas, das funktionieren muss, aber nicht perfekt sein muss – ist Lovable hervorragend geeignet.
Die Alternative wäre gewesen, das Portal selbst zu programmieren oder einen Entwickler zu bezahlen. Beides wäre teurer und zeitaufwendiger gewesen.
Im nächsten Teil der Serie werde ich schauen, wie man das Portal noch weiter optimieren kann, noch ein paar Feinheiten anpassen kann, ein paar kleine Features einbauen kann – und dann geht es auch darum, wie sich das Tool in der echten Verwendung schlägt und wie man das Ganze veröffentlicht.
Vibe Coding ist nicht das Ende der Programmierung – es ist ein neuer Weg, um sch
