Landing-Page-Workflow: In 9 Schritten zum perfekten Ergebnis (inkl. Checkliste)

Du willst eine großartige, erfolgreiche Landing Page effizient und zügig erstellen ohne unnötige Korrekturläufe? Mit diesen 9 Tipps und der Checkliste „Landingpage Qualitätskontrolle“ verbesserst Du deinen Workflow, vermeidest peinliche Fehler, reduzierst Korrekturschleifen, sparst effektiv Zeit und begeisterst Deine Kunden. Je nach Größe des Betriebs ist die Herangehensweise wahrscheinlich etwas anders, doch diese 9 Schritte, können größere Fehler und Unterbrechungen vermieden werden.

Die Vorbereitung

1. Briefing

Im besten Fall erhält man vom Kunden ein ausführliches Briefing-Dokument, aus dem alle benötigten Informationen die für einen Projektstart benötigen werden, hervorgehen. Doch das ist häufig nicht der Fall. Daher empfehle ich ein Dokument, eine Checkliste oder E-Mail vorzubereiten, mit sämtlichen Fragen und Auswahlmöglichkeiten. Dieses Dokument soll der Kunde erhalten und ausgefüllt zurückschicken. So hast du gleich alle Informationen vor Projektbeginn zur Hand und vermeidest, dass Du während Umsetzung auf Informationen warten musst und sich dadurch der Zeitplan verschiebt.

2. Kick-Off

Vor dem Start eines Projektes ist es ratsam, dass sich alle, die an dem Projekt beteiligt sind, zusammensetzen. Hier werden Ziele definiert, der Zeitplan festgelegt und Aufgaben verteilt.

Mögliche Ziele:

• Produkt-Launch
• Lead Generierung
• Neue Kunden gewinnen
• Kunden halten
• Marktforschung

Zu verteilende Aufgaben:

• Projektmanagement
• Konzeption
• Content erstellen
• Gestaltung der Landing Page
• Programmierung

Das Ziel des Meetings ist es, alle Beteiligten auf den gleichen Stand zu bringen und Fragen zu klären.

Beteiligte Personen können sein:

• Projektmanager
• Texter
• Freelancer
• Designer
• Programmierer
• Kampagnenmanager
• Ggf. der Kunde

Die Umsetzung

3. Konzeption

Auf Basis des Briefings und der Informationen aus dem KickOff Meeting, wird nun das Ziel festgelegt und Inhalte der Landing Page schriftlich festgehalten. Als nächstes kann nun eine grobe Layout-Struktur, auch Wireframe genannt, erstellt werden. Mittels Wireframe werden Elemente platziert, besondere Funktionen beschrieben und Texte Platzhalter platziert. Bevor das Konzept und das Wireframe von einem Grafik Designer umgesetzt wird, sollten es natürlich vom Kunden freigeben werden. Sollte es von Kundenseite Änderungswünsche geben, sind diese in der Konzeption schneller und einfacher umsetzbar, als in der Designphase.

4. Design

Wurde das Konzept vom Kunden abgenommen, startet die Designphase. Anhand des Briefings, des Konzeptes und des Wireframe kann der Webdesigner nun mit seiner Arbeit beginnen. Dies erfolgt durch eines der gängigen Grafikprogramme, wie z.B. Photoshop, Sketch. Beachte, dass das schönste Design nicht immer das effektivste ist, jedoch sollte die Landing Page auch zeitgemäß aussehen. Falls nicht schon in der Konzeption geschehen oder aus dem Design heraus neue Ideen entstehen, legt der Webdesigner die Funktionen fest, die die verschiedenen Elemente auf der Landing Page haben sollen.

Diese Elemente dürfen auf einer Landing Page nicht fehlen:

• Logo
• Navigation
• Headline/Subline
• Einleitung
• UVP (Unique Value Proposition)
• Reason Why
• Produktabbildung
• Preis
• Call-to-Action
• Funktionsprinzip
• Trust Elemente
• Testimonials

Im Artikel meiner Kollegin “Gut performende Landing Pages – Struktur & Elemente”, wird nochmal genauer auf die Struktur und die Elemente eingegangen.

Sind die Arbeiten an dem Design abgeschlossen, ist es empfehlenswert die Entwürfe mittels einer Eytracking Software analysieren zu lassen. So siehst Du, welche Elemente in den ersten 3 Sekunden erfasst werden. Werden nicht die gewünschten Elemente erfasst, so hast Du die Möglichkeit noch einmal nachzubessern und können anschließend die positive Analyse mit den Entwürfen an den Kunden verschicken.

Ist die Freigabe erfolgt, werden alle Informationen und Grafiken gesammelt und an den Web Entwickler weitergeleitet.

5. Programmierung

Nachdem die Design-Entwürfe final vom Kunden freigeben wurden und der Web Designer alle nötigen Informationen und Grafik-Snippets zur Verfügung gestellt hat, kann die Landing Page programmiert werden. Auch hier sollte aus dem Briefing und dem Kick-Off hervorgehen, welche Informationen benötigt werden, damit der Workflow nicht unterbrochen wird.

Diese Punkte sollten vor der Umsetzung geklärt sein:

• Host
• Domain
• Statischen HTML oder CMS?
• Responsive Umsetzung?
• Einbindung des Formular
• Spezielle Funktionen von Elementen
• SOI-, DOI- und Danke-Seite
• Conversion Code
• Google Analytics Code

Nach der Fertigstellung durch den Programmierer, sollte die Landing Page erst einmal zurück an den Designer gehen, damit dieser seine Entwürfe mit der programmierten Landing Page vergleichen kann.

6. Qualitätskontrolle

An dieser Stelle als einzelner Punkt aufgeführt, da er sehr wichtig ist. Denn bevor die fertig programmierte Landing Page an den Kunden geht, sollten mehrere Augen drüber geschaut haben und alle Funktionen der Seite überprüft werden.

Was Du bei der Qualitätskontrolle beachten solltest:

• Wurde alles so umgesetzt wie vom Design vorgegeben?
• Funktionieren alle spezielle Funktionen
• Wird die Landing page (inkl. aller Unterseiten) korrekt in den zu unterstützenden Browsern dargestellt?
• Responsive: Wird die Landingpage auf dem Smartphone/Tablet korrekt dargestellt?
• Funktioniert das Formular und der Prozess dahinter?
• Ist der Google Conversion Tracking Code, Remarketing-Code integriert?

Checkliste „Landingpage Qualitätskontrolle“

7. Finale Abnahme

Erst nach der finalen Abnahme durch den Kunden, geht wird die fertig programmierte Landing Page online gestellt und für einen möglichen Kampagnen Einsatz fertig gemacht. Gibt es eine Vorgänger Landing Page, sollte die neue mittels A/B Tests getestet werden.

Optimierung

8. Dokumentation

Vor der Umsetzung der neuen Landing Page sollten einige Daten der alten Landing Page erfasst werden, damit wir die Daten der neue Landing Page mit der alten Landing Page vergleichen können. Das Ziel einer jeden neuen Landing Page ist es, in den meisten Fällen eine höher Conversion Rate zu erzielen. Haltet die Daten fest, macht Screenshots der alten und neuen Landing Page und erstellt ein Dokument, in dem alles festgehalten wird.

9. A/B-Testing

Nach der Erstellung der neuen Landing Page geht die Arbeit, bzw. das Vergnügen erst richtig los. Mit einem A/B-Test kann nun die neue Landing Page optimiert werden. Dies kann man mithilfe von Tools oder einer Agentur, bzw. eines Webentwicklers erledigen. Hier sind ein paar Möglichkeiten, mit denen effektiv getestet werden kann:

• Webentwickler
• Optimizley
• Google Optimize
• Hubspot

Einen ausführlichen Beitrag zum Thema A/B-Testing findest Du hier.

Fazit

Ein sauberer Workflow ist das A und O einer perfekten Landing Page. Ist man einmal eingespielt, kann man wertvolle Zeit sparen, was wiederum eine bessere Qualität zur Folge hat. Arbeite mit Checklisten – so hast Du stets alle notwendigen Informationen zur Hand und Fehler können vermieden werden. Funktioniert die neue Landing Page nach einem A/B-Test besser als die alte Landing Page, solltest Du nicht aufhören zu testen. Ich wünsche viel Erfolg bei der Optimierung Deines Workflows.

Geschrieben von

Alexander Welk

Facebook LinkedIn Xing

Alex ist Grafikdesigner bei morefire. Er war von 2004 bis 2011 in der Print-Branche tätig und seit 2012 für morefiremedia im Online-Marketing. Sein Aufgabenbereich umfasst die Optimierung von Landing Pages, die Konzeption und Kreation von kompletten Webauftritten, bis hin zur Gestaltung von Produkten für den Print-Bereich.