Eine exemplarische Vorgehensweise, wie ich eine Landing-Webseite für den Comedy-Podcast Binchtopia entworfen habe

Einführung

Diese Webseite war ein Designprojekt, das ich im Rahmen des 10kdesigners -Bootcamps für Produktdesign durchgeführt habe.

Problemstellung: Entwerfen Sie eine Webseite für einen Internet-Ersteller, die als „Hier beginnen“-Seite fungiert, die ihre Informationen im Internet und ihre besten Arbeiten an einem Ort zusammenfasst.

• Ich beschloss, eine Webseite für Binchtopia, eine amerikanische Komödie und einen Gesellschafts-/Kultur-Podcast, zu erstellen.
• Um alle ihre Links zu aggregieren zu: Podcast-Plattformen, Patreon, Merch-Shop und Kontaktaufnahme für Werbetreibende.
• Mit Schwerpunkt auf der Lösung des Problems, dass zu viele Links über Shownotes und mehrere Plattformen verstreut sind.

Stell dir vor, du hörst eine Folge deines Lieblings-Podcasts und am Anfang der Sendung erwähnen die Moderatoren, dass sie gerade Merchandise herausgebracht haben und es lieben würden, wenn du es dir ansiehst und vielleicht ein paar kaufst. Sie sagen: „Schau dir das an Link in den Shownotes“. Du klickst auf die Shownotes und wirst mit Links zu allen Arten von Plattformen bombardiert, die du kennst und nicht kennst. Und so wird man überwältigt und klickt weg. Oder vielleicht haben Sie vergessen, den Link zu diesem neuen Webshop zusammen mit allen anderen hinzuzufügen. Es gibt viele Was-wäre-wenns: menschliches Versagen, zu viele CTAs und zu viele Plattformen für jeden, tote Links usw.

Im Gegensatz zu YouTubern, Instagram-Influencern oder Twitter-Gurus sind Podcaster nicht an eine Plattform gebunden: Sie werfen ihr Netz weit in die Vertriebskanäle (Spotify, Apple Podcasts, Google Podcasts usw.) und finden verschiedene Wege der Monetarisierung und des Wachstums. Ein verknüpfter CTA könnte also für Patreon, Social-Media-Kanäle, Bewertungen bei Apple Podcasts, Buchungen von Tourtickets, Kooperationen und vieles mehr gelten.

Was ist also die einfachste Lösung für ein so komplexes Problem? Eine Website, die die gesamte Arbeit des Podcasts an einer Stelle zeigt, die der Zuhörer erkunden kann, und eine einzige URL, die der Ersteller in der Folge aufrufen und in den Shownotizen verlinken kann!

Über mein Projekt

Ich habe mich entschieden, mein Projekt um den Comedy-Podcast Binchtopia herum aufzubauen, der am besten beschrieben wird als:

Wenn Plato und Aristoteles internetsüchtig wären und wüssten, was „Gaslighting“ ist, würden sie wahrscheinlich diesen Podcast machen. Die Gastgeberinnen Julia Hava und Eliza McLamb führen Sie durch unsere aktuelle kulturelle Höllenlandschaft, teilen soziologische und psychologische Perspektiven der Popkultur und dekonstruieren alles, was Sie jemals geliebt haben. Kommt und lacht mit uns durch die Endzeit des Spätkapitalismus!

— Binchtopia-Podcast-Beschreibung

Es ist seit ein paar Jahren einer meiner Lieblings-Comedy- und Gesellschafts-/Kultur-Podcasts, und deshalb dachte ich, das Projekt darum herum zu zentrieren, würde es nur reicher machen. In der Vergangenheit hatte ich auch das Vergnügen, einen der besten Business-Podcasts Indiens zu erstellen und mitzuveranstalten, daher hatte ich das Gefühl, dass ich die doppelte Perspektive des Schöpfers und des Zuhörers hatte, um an diesem Projekt zu arbeiten.

Ziele

Warum tust du?

-Derek Sivers, 'Hölle ja oder nein'

Alle bei diesem Projekt getroffenen Designentscheidungen wurden um die 3 wichtigsten Ziele eines Podcasts herum eingegeben

1. Monetarisierungsströme
2. Steigerung der Reichweite des Podcasts
3. Identität herstellen

1. Über den Podcast und die Gastgeber
2. Patreon
3. Neueste Folgen
4. Rezensionen & CTA zur Rezension auf Apple Podcasts
5. Merch-Shop
6. Callout für Werbetreibende
7. Fusszeile

Einstieg

Nachdem ich die Problemstellung definiert hatte, legte ich meinen Designprozess fest.

Wie Sie in diesem Bild sehen werden, beziehe ich mich frech auf etwas als „die Renaissance“. Während Änderungen im Design durch Iterationen üblich sind, habe ich bei diesem Projekt festgestellt, dass ich dieses Projekt (vorübergehend) aufgegeben habe, um andere zu priorisieren. Später besuchte ich diese Webseite mit frischen, neuen Augen und geschärften Designfähigkeiten erneut. Sie werden also einen großen Sprung in der Grafik bemerken, und das ist der Grund (scrollen Sie zum Abschnitt „Grafik“, um einen Eindruck davon zu bekommen, wovon ich spreche).

Forschungen zu Binchtopia

Über

Ich persönlich finde, dass die Beschreibung des Podcasts, die von jeder Streaming-Plattform abgezogen wurde, den Ton, den Humor, den Stil, das Geplänkel und das Thema der Show perfekt zusammenfasst.

Außerdem sagt ein Meme mehr als tausend Worte.

Ton des Podcasts

Beim Erstellen oder Analysieren eines Podcasts ist der Ton entscheidend für die gesamte Sendung. Es ist die Stimmung, das Geplänkel, die Atmosphäre, die man erwartet, wenn man eine Party betritt. Dies ist zwar etwas, das die Gastgeber aktiv aufbauen, aber es ist auch etwas, das sich im Laufe der Zeit ganz natürlich entwickelt.

Meine Aufgabe als Designerin ist es, die Stimmung des Podcasts aufzugreifen, damit die Designs und Erfahrungen sie widerspiegeln. Wir möchten die perfekte Party-Atmosphäre schaffen, nicht eine, in der Sie erwarten, dass es eine Disco-Nacht wird, und sich stattdessen in einem Firmengelände wiederfinden. Das heißt, der Vibe der Website sollte mit dem Vibe des Podcasts übereinstimmen.

Einige kurze Beschreibungen: Memey, informiert und politisch, Gen-Z-Humor/lustig, gesprächig und angetrieben vom Hin und Her zwischen Co-Gastgebern, informativ/erklärend/zugänglich, macht ernste Themen leicht unbeschwert und schmackhaft.

Hier sind einige beliebte Episoden, um Ihnen eine Vorstellung von Inhalt und Ton zu geben.

Humor/Meme

Abgesehen davon, dass Sie sich nur eine Episode anhören, können Sie sich anhand der Memes, die sie in ihren sozialen Medien posten, eine Vorstellung vom Ton des Podcasts machen (hauptsächlich Instagram konnte nicht auf ihr TikTok zugreifen, da die App in Indien verboten ist).

Zielgruppe

Vom Podcast

Die Zielgruppe von Binchtopia tendiert zu Frauen, Gen-Z, aus Ländern der „westlichen Welt“, hauptsächlich aus den USA.

Von dieser Webseite

1. Zuhörer, die zu einem beliebigen CTA (Patreon, Bewertungen, Marsch usw.) in der Folge aufgefordert werden. Dies soll alle Reibungen zwischen dem Audio-CTA und dem Shownotes-Text beseitigen.
2. Jeder, der sie googelt. Derzeit ist ihr Instagram das erste, was auftaucht, wenn man „Binchtopia“ googelt: kein Hinweis darauf, dass es sich überhaupt um einen Podcast handelt.

Das Cover-Artwork stammt von Kohorte Julia Hava, die zuvor davon gesprochen hat, sich vom Stil des amerikanischen Modemagazins der 70er und 80er Jahre inspirieren zu lassen.

Ich habe einige Referenzen von ihrer Instagram-Seite gesammelt, wo sie auch Memes in diesem Stil macht.

Ihre Bedürfnisse verstehen

Ich habe die Bedürfnisse dieser Website basierend auf ihren primären CTAs angenommen (erwähnt in der Folge, Shownotes, wann und wie sie priorisiert werden) und auch basierend darauf, welche ihre primären Einnahmequellen sind. Wie Sie wissen, können Podcasts kostenlos konsumiert werden, sodass die Ersteller ihre Angebote diversifizieren, um ein Einkommen zu erzielen. Und für die Moderatorinnen Julia und Eliza ist der Podcast ihr Vollzeitjob.

• Patreon : Mit unterschiedlichen monatlichen Stufen ist Patreon die Haupteinnahmequelle. Sie bieten ihren Patreonites verschiedene Vergünstigungen und zusätzliche Inhalte.
• Bewertungen bei Apple Podcasts : Der wirkungsvollste Weg für einen Podcast, zu wachsen und ein neues Publikum zu gewinnen, sind die Bewertungen und Rezensionen bei Apple Podcasts. Dies ist ihr sekundärer CTA, den sie in jeder Folge erwähnen
• Merch : Sie haben ein Geschäft (mit einem Drittanbieter), das Tassen, T-Shirts, Hoodies und mehr mit ihren Originaldesigns hat.
• Call-out für Werbetreibende : Während Werbung in der Regel über Verwaltungsagenturen oder Hosting-Provider geschaltet wird, haben die Hosts manchmal CTAs in Episoden für Zuhörer mit Unternehmen, um direkt nach einem Werbespot in einer beliebigen Episode zu suchen.

Erkundungen

Zu Beginn habe ich Referenzen von Podcast-Websites, Podcast-Netzwerken und Podcastern mit persönlichen Websites gesammelt.

Dann sammelte ich allgemeine Verweise auf Websites von Mobbin, basierend auf Kunststil und Layout.

Wireframes: Papier und HF

Ich begann mit einigen Drahtmodellen aus Papier, um die Layouts zu visualisieren, die ich im Sinn hatte. Diese WFs entsprachen der ersten Version der von mir entworfenen Website.

Als ich mich entschied, das Design noch einmal zu überdenken, habe ich einen neuen Satz von Wireframes (auf Procreate) erstellt, um die neuen Pläne widerzuspiegeln, die ich für dieses Projekt hatte.

Visuals

Die Renaissance

Während ich Sie durch die visuellen Designs und Iterationen der einzelnen Website-Abschnitte führe, werden Sie einen Unterschied in den Iterationen bemerken.

Das liegt daran, dass ich mit diesem Design in Monat 1 meines Produktdesign-Bootcamps begonnen und das Design in Monat 3 (dem letzten Monat) des Kurses abgeschlossen habe. So werden Sie in den ersten und endgültigen Designs veränderte Stile, Designphilosophien und Fähigkeiten erkennen. Ich nenne das die Renaissance, von der ich weiß, dass sie dramatisch ist, aber hey, die Verbesserung meiner Designfähigkeiten ist auch dramatisch!

1. Heldenbereich

Die Grundlagen eines Heldenabschnitts sind dieselben: eine Navigationsleiste und Text + Bild. Beim Entwerfen des Heldenabschnitts versuchte ich, Layouts herauszufinden, welche Abschnitte sich überschneiden und allgemeine Grundlagen des Entwerfens.

Hier sind einige wichtige Designentscheidungen, die ich während meiner Iterationen auf Empfehlung meines Design-Mentors getroffen habe.

• Suchleiste : Eines dieser Dinge, die ich standardmäßig hinzugefügt habe, aber im Kontext dieser Website, wofür würde ein Benutzer die Suchleiste verwenden? Episoden finden? Merch finden? Da die Website eine zentrale Anlaufstelle für alle Aktivitäten des Podcasts ist, scheint es hier keine zentrale Aktivität zu geben. Also beschloss ich, es ganz zu streichen, da es im Kontext der Benutzererfahrung keinen Sinn ergab.
• Wie „lang“ sollte das Bild sein : Soll es eine ganze Scroll-Seite einnehmen? Oder kürzer sein, um einen kleinen Vorgeschmack auf den nächsten Abschnitt für einen Benutzer zu geben, der gerade auf der Seite gelandet ist? Die Entscheidung wird basierend darauf getroffen, welchem ​​Zweck das Bild wirklich dient: Ich entschied mich dafür, nur einen visuellen Hinweis auf das Podcast-Artwork zu geben und sonst nichts.
• In diesem Abschnitt und dem Rest des ersten Designs der Website hatte ich Probleme damit, dass alle meine Seiten eher wie PPT-Folien als Website-Abschnitte aussehen . Dafür gibt es zwar keine Patentlösung, aber ich habe in jedem Abschnitt darüber nachgedacht: Wie arbeite ich mit Bildern, Symbolen, Text und CTAs, um die Präsentationsstimmung hier zu zerstören?

Ab diesem Abschnitt muss die Layoutsprache der Website festgelegt werden. Das sind Überschrift/Unterüberschrift/Textformat, CTA-Schaltfläche und Bild-/Videoelement.

3. Patreon

Dies ist ein wichtiger Abschnitt, da er den Moneymaker CTA der Website enthält. Der CTA führt den Benutzer zur Webseite des Podcasts auf Patreon, die die verschiedenen Ebenen enthält und über eine eigene UX verfügt, die zu einem Kauf führt. Was muss dieser Abschnitt also tun? Es soll sie dazu bringen, sich zur Patreon-Seite durchzuklicken und sie einem Kauf näher zu bringen.

Anstatt einfach die 4 verschiedenen Patron-Stufen anzuzeigen, was überflüssig wäre, da es auf der eigentlichen Patreon-Seite angezeigt wird, habe ich mich entschieden, die Vorteile eines Patrons durch niedliche Symbole und Perk-Informationen hervorzuheben.

4. Episoden

Der Baustein der Episodensektion ist natürlich die Episodenkarte. Die erste Karte, die ich erstellt habe, konzentrierte sich auf die beiden Hauptinformationen einer Episode: Titel und Beschreibung.

Aber obwohl dies die wichtigsten Informationen einer Episode sind, reichen sie einfach nicht aus. Außerdem spielte die Karte nicht darauf an, dass es sich um eine Episode handelt, eher um einen Artikel vielleicht? Also verbrachte ich etwas mehr Zeit damit, verschiedene Podcast-Apps zu erkunden, um zu sehen, welche anderen Informationen und visuellen Hinweise eine Episodenkarte ausmachen.

Mit wiederholten Episodenkarten, Überschrift/Unterüberschrift/Text und CTA-Button habe ich den Abschnitt neu ausgerichtet.

5. Überprüfen Sie den CTA

Nach Patreon-Abonnements sind Bewertungen der zweitwichtigste CTA. Nicht nur für Binchtopia, sondern für alle Podcasts. Der effektivste Weg, Ihren Podcast zu erweitern, besteht darin, eine schriftliche Rezension mit einer Bewertung für Apple-Podcasts zu erhalten.

Warum Apple-Podcasts?

Apple Podcasts hält das Monopol, wenn es um das Wachstum und die Anerkennung von Podcasts geht. Die Charts aller Podcast-Plattformen sind mit den Apple-Charts verknüpft (mit Ausnahme von Spotify, die ab 2021 ihre eigenen Podcast-Charts erstellt haben). Diese Charts bringen Ihren Podcast vor Millionen neuer Zuhörer und sind die beste Wahl für Sie, um Ihren Podcast zu erweitern.

6. Waren

Für Musiker und Podcaster gleichermaßen ist Merch oder Merchandise eine gute Möglichkeit, Geld zu verdienen. Binchtopia lässt seinen Merch von Drittanbietern herstellen und auf seiner Plattform hosten. Während sie die Merch-Produktion bei einem Drittanbieter belassen, aber die Einkaufsplattform im eigenen Haus behalten, würden sie ihre Provisionen steigern. Außerdem werden dadurch entgangene Einnahmen von Fans eliminiert, die möglicherweise unwissentlich von gefälschten Verkäufern auf Redbubble kaufen.

7. CTAs für Werbetreibende

Eine Standardeinnahmequelle für Podcasts sind beworbene Werbespots in ihren Folgen. Typischerweise werden diese Werbespots über das Podcast-Netzwerk erworben, bei dem ein Podcast unterschrieben hat, einen Publizisten des Erstellers oder ein Podcast-Werbenetzwerk eines Drittanbieters.

Die Hosts von Binchtopia haben oft Zuhörer mit Unternehmen ermutigt, sich direkt an sie zu wenden, um Werbeflächen zu erhalten. Dies ist nicht üblich, hat ihnen aber in der Vergangenheit einige Werbeplätze gesichert. Also habe ich beschlossen, einen CTA dafür auf der Zielseite zu haben, der zu einem Formular führt, das der Benutzer ausfüllen und senden kann, um kontaktiert zu werden.

8. Fußzeile

Für die Fußzeile habe ich das Design verbessert, indem ich einige Standard-Fußzeilenformate gefunden und mit den Informationen angepasst habe, die ich von der Website in diesem Abschnitt wiederholen möchte.

9. Instagram-Integration (verlassener Abschnitt)

In meinem ersten Design hatte ich daran gedacht, einen Plugin-Bereich zu ihrem Instagram hinzuzufügen, da sie eine große Fangemeinde haben und es weiterhin eine wichtige Plattform für Entdeckungen ist. Aber während ich die Idee mochte

• Ich könnte mir keinen Weg vorstellen, wie ich es tatsächlich implementieren könnte, wenn dies eine echte Webseite wäre. Instagram-Feed-Plug-Ins sind nicht gerade üblich und
• In einem Benutzerfluss machte es keinen Sinn, dass ein Benutzer auf seinem Laptop auf Instagram klickte und ihm auf der Seite folgte.

Die vollständige Webseite

Et voila, wir haben jetzt die ganze Seite!

Raum für Verbesserung

1. Diese Website müsste mobilfreundlich sein, da die meisten Podcasts auf Smartphones angehört werden.
2. Wenn ich die vollständige Website aufbauen würde, würde ich mehr Einblicke in die Benutzerströme und das Verhalten erhalten, die die Homepage verbessern könnten.
3. Kann etwas mehr Zeit damit verbringen, die Reihenfolge der Abschnitte basierend auf der Wichtigkeit verschiedener CTAs zu schärfen.
4. Kann mehr Möglichkeiten finden, Ausschnitte des Podcasts bereitzustellen, um mehr von einem Audioerlebnis in die Webseite zu integrieren. Derzeit gibt es nur das anklickbare Video-Snippet im Bereich „Info“.
5. Ein Künstler zu sein ist zwar ein Kreislauf, in dem man eine Reihe von Projekten aufgreift und sie aufgibt und vielleicht wieder aufgreift, aber ich bin der Meinung, dass ein klarer definierter Zeitplan die Iterationen dieses Projekts hätte verbessern können. Ich werde diese Lektion weiterleiten, um solide Zeitpläne für zukünftige Projekte zu erstellen.

Wenn Sie bis hierher gelesen haben, danke für Ihr Interesse! Ich bin derzeit offen für alle Möglichkeiten des Produktdesigns, also schauen Sie sich mein Portfolio an oder senden Sie mir eine Nachricht auf Twitter , lassen Sie uns eine Verbindung herstellen!

Ich möchte Jonty Chaki besonders dafür danken, dass er mein Design-Mentor bei diesem Projekt war. Sein Feedback als erfahrener Produktdesigner war für mich äußerst wertvoll!

PS: Wenn dir meine Comics und die Fallstudie gefallen haben, drücke lange auf die Klatschtaste