Landingpage Case Study

Ein Web Design Case Study meiner Podcast Landingpage. Von der Planung, über das Konzept bis hin zur detaillierten Ausarbeitung des Designs.

Um mich intensiver mit Design-Themen zu beschäftigen und meine Erfahrungen als Web und UI Designer auch an andere weiterzutragen, habe ich Anfang des Jahres einen wöchentlichen Design Podcast gestartet.

Mit diesem Podcast wollte ich nicht nur neue Designer erreichen, sondern auch mehr Vertrauen zu meinen schon bisherigen Blog-Lesern aufbauen.

Meine Inhalte und Themen nicht nur aufzuschreiben, sondern auch über die „Stimme” zu vermitteln, war für mich die nächste Stufe des Content-Marketing.

Projekt Details

Arbeit: Landingpage Konzept und Layout
Werkzeug: Sketch App
Jahr: 2017
Vorschau: jonasarleth.com/podcast

Das Problem

Mein Podcast erreichte neue Zuhörer nicht schnell genug.

Die Episoden wurden von meiner Kern-Leserschaft des Blogs abgespielt, hatten aber lange nicht so viele „Plays” wie manche Blog-Beiträge neue Besucher hatten.

Ich musste mehr Designer dazu bringen, den Podcast zu abonnieren und die Sendung regelmäßig zu hören.

Viele von ihnen hatten aber keine Ahnung, dass dieser deutsche Design Podcast überhaupt existiert. Hier und da kamen ein paar neue Besucher über Google Suchanfragen auf meinen Blog und blieben anschließend bei einer Podcast-Folge hängen, aber es gab keinen zentralen Ort, wo mein Podcast präsentiert und vorgestellt wurde.

Podcast Cover und Player Design

Bisher konnte man nicht wirklich etwas finden, wenn man „Design Podcast Deutsch” bei Google suchte.

Es wurden vorrangig immer wieder englischsprachige Podcasts vorgestellt, obwohl meiner ja vorhanden war.
Eine Analyse der Google Suchanfragen ergab, dass in Deutschland aber durchaus Interesse für Design Podcasts besteht. Sie hatten nur nicht die richtige Anlaufstelle, die sie abfängt. Genau das musste ich ändern.

Fünf Podcast Episoden Cover horizontal dargestellt
Das Ziel

Den Podcast Bekanntheitsgrad erhöhen und Website Traffic steigern

  • Dafür in 2 Monaten 8 Podcasts veröffentlichen, die zusammen 2000 mal abgespielt werden.
  • In den Podcast iTunes Charts in der Design-Kategorie bei "neu und beachtenswert" auftauchen.
  • Innerhalb von 2 Monaten 5.000 einzelne Besucher auf die Website bekommen und damit die Chance auf eine neue Projektanfrage erhöhen.
  • Mehr Vertrauen zu meinen bisherigen Zuhörern und Lesern aufbauen, um ihnen in diesem Jahr noch einen Online-Kurs zu verkaufen.

Die Idee

Ich arbeite selbst oft für Kunden, die eine Landingpage brauchen, um ein bestimmtes Produkt oder einen Service zu bewerben. Was sie damit erreichen wollen, ist, den Seitenbesucher zu einer bestimmten Handlung zu bringen. Diese messen sie anschließend in einer „Conversion Rate” und wissen dadurch, wie viele Kunden sie über die Landingpage generiert haben.

Es geht von Marketingkampagnen, Aktionsangeboten, Produktankündigungen, bis hin zu E-Mail Marketing oder Online Kursen.

Ich brauchte im Prinzip nichts anderes. Eine Website, die mein Produkt, also den Podcast, präsentiert und gleichzeitig auch Seitenbesucher in Kunden umwandelt, also dementsprechend in neue Podcast-Abonnenten.

Podcast Cover Sammlung

Meine Vorteile durch die Erstellung einer Landingpage:

Der Podcast wird bekannter.

Zudem erreiche ich zusätzlich Designer und potentielle Kunden, die sich darüber informieren wollen, was eine Landingpage ist und wie man sie aufbaut.

Durch den Prozess bekomme ich genügend neues Design-Material, um den Podcast auf Design-Plattformen wie Dribbble zu promoten. Dabei kann ich Bilder und Ausschnitte hochladen, die meine Gedanken dahinter visualisieren und gleichzeitig natürlich auf meinen Podcast aufmerksam machen.

Um die Landingpage bestmöglich zu dokumentieren, starte ich auch gleichzeitig eine mehrteilige Video-Produktion, die ich auf YouTube veröffentlichen kann. Dadurch erreiche ich auch auf dieser Plattform neue Zuhörer.

Ich kann neue potentielle Kunden, die auf der Suche nach einer Landingpage sind, bestmöglich von mir überzeugen, da ich ihnen mein Expertenwissen über diese mehrteilige Landingpage-Serie genau vorweisen kann.

Durch die Dokumentation erhalte ich zusätzlich neues Material, das ich auf meinem Blog und auch in meinem Podcast veröffentlichen kann.

Andere Designer sehen einen genauen Einblick in meinen Arbeitsprozess und bauen dadurch mehr Vertrauen zu mir auf.

Ich selbst lerne eine Menge und es ist ein gutes Training um demnächst einen Online-Kurs zu starten.

Ich bekomme direkt neues Material für mein Portfolio, um eine Case Study aufzubauen und diese für Kunden auf meiner Website zu präsentieren. Dadurch erhalten sie einen genauen Einblick, wie ich gedanklich arbeite und wie mein Design-Prozess aussieht.

Meine Zielgruppe

Da ich in der gleichen Branche wie meine Zielgruppe arbeite, kenne ich mein Publikum recht gut.

Die Hauptzielgruppe des Podcasts und der Landingpage sind Designer mit unterschiedlichen Bedürfnissen und Funktionen.

Primäre Zielgruppe:
  • Designer im allgemeinen
  • Design Freelancer
  • Festangestellte Designer
  • Studenten, Auszubildende und Design-Starter
Sekundäre Zielgruppe:
  • Entwickler/Programmierer

Damit ich genau weiß, was ich selbst in meinem Layout auf der Landingpage darstellen muss, habe ich mich in meine Zielgruppe hineinversetzt, andere Podcast-Webseiten analysiert und zusätzlich Designer befragt. Dadurch entstand eine Liste an Inhalten, die die Zielgruppe auf der Landingpage beantwortet haben muss (siehe Abbildung Notizen).

Landingpage Zielgruppen Analyse Skizzen

Was erwartet die Zielgruppe auf der Landingpage? Meine Zusammenfassung und Notizen aus dem Brainstorming-Prozess zu Beginn der Recherche.

Das Konzept erstellen

Wie kann ich das, was die Zielgruppe auf der Landingpage sehen will, gestalterisch darstellen?

Um mir eine sichere Ausgangslage zu verschaffen, habe ich das, was die Zielgruppe auf meiner Landingpage erwartet (Abbildung oben), vorerst konzeptionell und mit „Wireframes” dargestellt. Das heisst, ich gebe dem Layout schon mal ein Grundgerüst und fange an, die Inhalte logisch zu strukturieren.

Beispiel

Was der Besucher erwartet

Der Seitenbesucher möchten einen Podcast probehören, um sich ein Bild von der Qualität zu machen und zu schauen, ob ihm auch die Stimme und der Inhalt gefällt.

Was im Layout dargestellt werden muss

Dementsprechend muss es im Layout eine Möglichkeit geben, in eine Podcast-Folge hineinzuhören (Player, Cover, Beschreibung).

Einblick in den Aufbau des Konzepts der Landingpage.

Landingpage Zielgruppen Analyse Skizzen

Wichtig war mir bei diesem Prozess, dass ich mich nicht an Details festklammere, sondern schnell verschiedene Steps auszuprobieren konnte. Sobald dieser Schritt abgeschlossen war, konnte ich mich dem Design zuwenden und Details von Elementen ausarbeiten. Erst dadurch bekam die Landingpage ihr Aussehen und den richtigen Feinschliff.

Video Case Study #02

Landingpage Konzept erstellen

Schau dir in diesem Artikel detailiert an, wie ich das Konzept und die Wireframes erstellt habe.

Das Design

Jetzt geht es um das Design und die Harmonie aller Landingpage Elemente zueinander.

Jeder Design-Prozess fängt bei mir mit der Recherche an. Dabei halte ich interessante Inhalte, Funktionsweisen und Design-Inspirationen in einem Moodboard fest. Dieses zeigt mir anschließend gut, in welche Richtung das Layout gehen könnte.

Landingpage Moodboard

Durch die genaue Analyse meiner Website Statistiken wusste ich, dass neue Seitenbesucher zu 80% über einen Desktop-Computer auf meine Website kommen und weniger über ihr Smartphone. Also konzentrierte ich mich beim Erstellen des Layouts auch primär auf diese Bildschirmbreite.

Das fertige Layout

Podcast Landingpage Start Bereich mit Podcast Beschreibung und Player

Der Einstieg der Landingpage sollte sich immer im sichtbaren Bereich des Besuchers befinden. Hier muss sich der überzeugende Teil abspielen. Deshalb versuchte ich schon hier alle Fakten zu übermitteln. Jeder Besucher muss sofort wissen, um was es geht.

Podcast Cover Sammlung in einer Slideshow

Der Seitenbesucher sollte sich einfach und schnell eine Übersicht von den besten Podcast-Episoden verschaffen. Egal von welchem Endgerät aus er die Landingpage besucht. Dafür habe ich diese Cover-Slideshow integriert. Sie kann einfach erweitert werden und gibt dem user einen guten Überblick über Themenbereiche, die ich in meinem Podcast behandele.

Da heutzutage aber jede Website auf unterschiedlichen Geräten funktionieren muss, habe ich das Landingpage Design auch zusätzlich auf kleinere Größen adaptiert. Durch diese Anpassung konnte ich sichergehen, dass ich auch wirklich jeden User von meinen Inhalten überzeugen konnte – egal von welchem Gerät aus er die Landingpage gerade betrachtet.

Responsive Beispiel Layout Anpassung Desktop, Tablet, Mobile
Video Case Study #03

Der Design Prozess

Damit auch der Design Prozess von vorne bis hinten dokumentiert wurde, habe ich ein Video und Blogbeitrag zum Thema Landingpage Design, Inspiration (Moodboard) und Gestaltung veröffentlicht.

Podcast Cover auf dem Smartphone

Die Ansicht der Podcast Episoden Slideshow auf dem Smartphone.

Tablet Ansicht der Vorteile des Webdesign Podcasts aufgelistet in acht Punkten

Suchmaschinenoptimierung

Auch als Designer und gerade beim Aufbau des Layouts, muss man viel über Suchmaschinenoptimierung (SEO) wissen und beachten.
Es gibt Inhalte, die primär meine Landingpage-Besucher überzeugen und genauso gibt es Texte, die für Google wichtig sind.

Auch wenn sich auf meiner Landingpage alles um Audio-Inhalte dreht, ist es wichtig, diese auch verständlich für Suchmaschinen zu erklären, damit sie den Aufbau und die Texte der Website einfach scannen können.

Es hätte also nichts gebracht, auf dieser Landingpage einfach nur einen Podcast-Player zu zeigen. Die entscheidenden und überzeugenden Inhalte müssen auch in Text und Bildform integriert werden.

Text über den Podcast Host auf dem Smartphone
Responsive Podcast Landingpage Mobile Screenshot
Landingpage Podcast Rezensionen auf dem Smartphone
Landingpage Einleitungstext auf Smartphone-Größe
Tablet Ansicht des Landingpage Call To Action und Newsletter Bereich

Das Ergebnis

Ein sehr wichtiger Part der Landingpage ist natürlich die Auswertung und Optimierung der Seite. Nur so kann ich sichergehen, dass meine Ziele auch wirklich erreicht wurden. 

Landingpage Statistiken und Auswertung

Eine Auswertung, die ich schon in den ersten 2,5 Wochen analysieren konnte. 

Seite 1 auf Google

Dank der Landingpage wurde mein Podcast schon nach kurzer Zeit bei Suchanfragen wie „Design Podcast” oder „Design Podcast deutsch” auf den ersten Plätzen von über 300 Millionen Ergebnissen gelistet.

Mehr Aufrufe als alle anderen Seiten

Die Landingpage ist schon nach kurzer Zeit zu meiner am meisten aufgerufenen Seite der Website geworden.

Tausende Podcast Zuhörer weltweit

Schon nach einem halben Jahr hatte der Podcast mehrere tausend neue Zuhörer erreicht. 

 

Vorschau: jonasarleth.com/podcast

Interessiert an einer Zusammenarbeit?

Projektanfrage senden