コメディ ポッドキャスト Binchtopia のランディング Web ページをどのようにデザインしたかのウォークスルー

序章

このウェブページは、10kdesignersプロダクト デザイン ブート キャンプの一環として行ったデザイン プロジェクトです。

問題文: Web 上の情報と最高の作品を 1 か所に集約する「ここから開始」ページとして機能するインターネット クリエーター用の Web ページをデザインします。

• アメリカのコメディと社会/文化のポッドキャストである Binchtopia の Web ページを作成することにしました。
• ポッドキャスト プラットフォーム、パトレオン、マーチ ショップ、広告主へのアウトリーチへのすべてのリンクを集約します。
• showotes と複数のプラットフォームに散在するリンクが多すぎるという問題を解決することに重点を置いています。

お気に入りのポッドキャストのエピソードを聞いていて、番組の冒頭で、ホストが商品を発売したばかりで、ぜひチェックして購入したいと言っていると想像してみてください。 showotes のリンク」を参照してください。showotes をクリックすると、認識している、または認識していないあらゆる種類のプラットフォームへのリンクが殺到します。そして、圧倒されてクリックして離れます。または、あなたが見ていると、彼らは他のすべてのウェブショップと一緒にこの新しいウェブショップへのリンクを追加するのを忘れているかもしれません. ヒューマン エラー、CTA の数が多すぎる、それぞれのプラットフォームが多すぎる、デッド リンクなど、多くの what if があります。

YouTuber、インスタグラムのインフルエンサー、または Twitter の専門家とは異なり、ポッドキャスターは 1 つのプラットフォームに縛られることはありません。配信チャネル (Spotify、Apple Podcasts、Google Podcasts など) でネットを広くキャストし、収益化と成長のさまざまな手段を見つけます。したがって、リンクされた CTA は、Patreon、ソーシャル メディア チャネル、Apple Podcast の評価、ツアー チケットの予約、コラボレーションなどに適用できます。

では、この複雑な問題を解決する最も簡単な方法は何でしょうか? ポッドキャストのすべての作品を 1 か所で表示してリスナーが探索できる Web サイトと、作成者がエピソードで呼び出してショー ノートにリンクするための単一の URL です。

私のプロジェクトについて

私はコメディ ポッドキャスト Binchtopia を中心にプロジェクトを構築することにしました。

プラトンとアリストテレスがインターネット中毒で、「ガス灯」が何であるかを知っていたら、おそらくこのポッドキャストを作成したでしょう。ホストの Julia Hava と Eliza McLamb が、現在の文化的な地獄のような風景を案内し、ポップ カルチャーに関する社会学的および心理学的な視点を共有し、これまで愛してきたものすべてを解体します。後期資本主義の終わりの時代を一緒に笑いましょう！

— Binchtopia ポッドキャストの説明

これは数年前から私のお気に入りのコメディ & 社会/文化ポッドキャストの 1 つだったので、このプロジェクトを中心にすれば、より充実したものになると思いました。過去には、インドのトップ ビジネス ポッドキャストの 1 つを構築し、共同ホストを務めた経験もあり、このプロジェクトに取り組むには、クリエイターとリスナーの 2 つの視点があると感じました。

目標

なんでやってんの？

-デレク・シヴァーズ「ヘル・イェー・オア・ノー」

このプロジェクトで行われたデザイン上の決定は、ポッドキャストの 3 つの最も重要な目標に基づいて入力されました

1. 収益化ストリーム
2. ポッドキャストのリーチを拡大する
3. アイデンティティの確立

1. ポッドキャストとホストについて
2. パトレオン
3. 最新のエピソード
4. Apple Podcasts でレビューするレビューと CTA
5. グッズストア
6. 広告主への呼びかけ
7. フッター

入門

問題の説明を定義した後、私は設計プロセスをレイアウトしました。

この画像でわかるように、私は何かを「ルネッサンス」と呼んでいます。反復によるデザインの変更は一般的ですが、このプロジェクトでは、他のプロジェクトを優先するためにこのプロジェクトを (一時的に) 放棄していることに気付きました。私は後でこのウェブページを再訪し、新鮮な目と鋭いデザイン スキルを身に付けました。そのため、ビジュアルが大幅に改善されていることに気付くでしょう (ビジュアル セクションまでスクロールして、私が話している内容を確認してください)。

ビンクトピアの研究

だいたい

個人的には、ポッドキャストの説明は、あらゆるストリーミング プラットフォームから引き出され、ショーのトーン、ユーモア、スタイル、冗談、主題を完全にカプセル化していると感じています。

さらに、ミームは千の言葉に値します。

ポッドキャストのトーン

ポッドキャストを作成または分析する際、トーンは番組全体にとって非常に重要です。それは、パーティーに足を踏み入れたときに期待される雰囲気、冗談、雰囲気です。これはホストが積極的に構築するものですが、時間の経過とともに自然に発展するものでもあります.

デザイナーとしての私の仕事は、ポッドキャストの雰囲気を拾い上げて、デザインと体験がそれを反映するようにすることです. 私たちは完璧なパーティーの雰囲気を作りたいと思っています。ディスコの夜を期待して足を踏み入れるのではなく、会社のオフサイトにいるようなものです. つまり、ウェブサイトの雰囲気はポッドキャストの雰囲気と一致する必要があります.

いくつかの簡単な説明:おしゃべり、情報に基づいた政治的、ジェネレーションズ ユーモア/面白い、おしゃべりで、共同ホスト間のやり取りに駆り立てられる、有益/説明的/アクセスしやすい、深刻な問題を少し気さくで口当たりの良いものにします。

人気のあるエピソードをいくつか紹介して、内容とトーンを理解してもらいましょう。

ユーモア/ミーム

エピソードを聞くだけでなく、彼らがソーシャル メディアに投稿するミームからポッドキャストのトーンを知ることができます (主にInstagramは、アプリがインドで禁止されているため、TikTok にアクセスできませんでした)。

対象者

ポッドキャストの

Binchtopia のターゲット オーディエンスは、主に米国の「西側諸国」の女性、ジェネレーション Z に偏っています。

このウェブサイトの

1. エピソードで CTA (Patreon、評価、行進など) を求められたリスナー。これは、オーディオ CTA と showotes テキストの間のすべての摩擦をなくすためです。
2. それらをグーグルで検索する人。現在、「Binchtopia」をグーグルで検索すると、彼らの Instagram が最初に表示されます。これがポッドキャストであることを示すものはありません。

カバー アートは、70 年代と 80 年代のアメリカのファッション マガジンのスタイルに触発されたと以前話していたコホートの Julia Hava によって作成されました。

彼女もこのスタイルでミームを作成している彼女の Instagram ページからいくつかの参照を集めました。

彼らのニーズを理解する

このウェブサイトのニーズは、彼らの主要な CTA (エピソード、ショーのメモ、いつ、どのように優先されるか) と、主要な収入源に基づいて推測しました。ご存じのように、ポッドキャストは無料で利用できるため、クリエイターは提供物を多様化して収入を得ることができます。ホストの Julia と Eliza にとって、ポッドキャストはフルタイムの仕事です。

• Patreon : 月ごとに階層が異なる Patreon が主な収入源です。彼らはパトレオナイトにさまざまな特典と追加のコンテンツを提供しています。
• Apple Podcasts の評価: ポッドキャストが成長し、新しい視聴者を獲得するためのミストの影響力のある方法は、Apple Podcasts での評価とレビューです。これは、すべてのエピソードについて言及する 2 番目の CTA です。
• グッズ: マグカップ、T シャツ、パーカーなどすべてオリジナル デザインのストア (サード パーティ ベンダー) があります。
• 広告主への呼びかけ: 通常、広告は管理エージェンシーまたはホスティング プロバイダーを介して行われますが、ホストは、ビジネスを持つリスナーが任意のエピソードの広告スポットに直接アクセスできるように、エピソードに CTA を用意している場合があります。

探検

まず、ポッドキャストのウェブサイト、ポッドキャスト ネットワーク、個人のウェブサイトを持つポッドキャスターから参考資料を集めました。

次に、アート スタイルとレイアウトに基づいて、Mobbin から Web サイトの一般的なリファレンスを収集しました。

ワイヤーフレーム: 紙と HF

考えていたレイアウトを視覚化するために、いくつかの紙のワイヤーフレームから始めました。これらの WF は、私が設計した Web サイトの最初のバージョンに対応しています。

デザインを再検討することにしたとき、このプロジェクトの新しい計画を反映するために、(Procreate で) 新しいワイヤーフレームのセットを作成しました。

ビジュアル

ルネッサンス

各 Web サイト セクションの視覚的なデザインと反復を説明すると、反復の違いに気付くでしょう。

これは、プロダクト デザイン ブート キャンプの 1 か月目にこのデザインを最初に開始し、コースの 3 か月目 (最終月) にデザインを終了したためです。そのため、最初のデザインと最終的なデザインで、スタイル、デザイン哲学、スキルが変更されていることがわかります。私はこれをルネッサンスと呼んでいますが、劇的であることはわかっていますが、私のデザインスキルの向上も劇的です!

1.ヒーローセクション

ヒーロー セクションの基本は同じで、ナビゲーション バーとテキスト + 画像です。ヒーロー セクションのデザインは、レイアウト、重複するセクション、およびデザインの一般的な基本を把握することでした。

以下は、私の設計指導者の推薦に基づいて、イテレーションを通じて下したいくつかの重要な設計上の決定です。

• 検索バー: デフォルトで追加したものの 1 つですが、この Web サイトのコンテキストでは、ユーザーは検索バーを何に使用しますか? エピソードを見つけるには？グッズを探すには？Web サイトはポッドキャストのすべての活動のワンストップであるため、重要な活動は 1 つではないようです。そのため、ユーザー エクスペリエンスのコンテキストで意味をなさないため、完全に破棄することにしました。
• 画像の「長さ」 : スクロール ページ全体を占める必要がありますか? それとも、ページにたどり着いたばかりのユーザーに次のセクションへのピークを少し与えるために短くしますか? 決定は、画像が実際に果たす目的に基づいて行われます。ポッドキャストのアートワークの視覚的な手がかりを与えるだけであると判断しました。
• このセクションと、ウェブサイトの最初のデザインの残りの部分では、すべてのページをウェブサイト セクションではなく PPT スライドのように見せることに苦労しました。これには万能のソリューションはありませんが、各セクションで常に考えていたことです: 画像、アイコン、テキスト、CTA をどのように使用して、プレゼンテーションの雰囲気を壊すか?

このセクション以降では、Web サイトのレイアウト言語を確立する必要があります。それは、見出し/小見出し/テキスト形式、CTA ボタン、および画像/動画要素です。

3.パトロン

これは、ウェブサイトのマネーメーカー CTA が含まれているため、重要なセクションです。CTA は、さまざまな層を含み、購入につながる独自の UX を備えた Patreon のポッドキャストの Web ページにユーザーを導きます。では、このセクションは何をする必要があるのでしょうか? クリックしてPatreonページにアクセスし、購入に近づけるためです.

実際のPatreonページに表示されるので冗長になる4つの異なるパトロン層を単に表示する代わりに、かわいいアイコンと特典情報を通してパトロンであることの利点を強調することにしました.

4.エピソード

エピソード セクションのビルディング ブロックは、もちろんエピソード カードです。最初に作成したカードは、エピソードの 2 つの主要な情報であるタイトルと説明に焦点を当てていました。

しかし、これらはエピソードの最も重要な情報ですが、それだけでは十分ではありません。さらに、カードはそれがエピソードであることをほのめかしていませんでした。記事のようなものでしょうか? そこで、エピソード カードを作成するその他の情報や視覚的な合図を確認するために、さまざまなポッドキャスト アプリを調べることにさらに時間を費やしました。

繰り返しのエピソード カード、見出し/小見出し/テキスト、および CTA ボタンを使用して、セクションを再調整しました。

5. CTA を確認する

Patreon のサブスクリプションに次いで、評価は 2 番目に重要な CTA です。Binchtopia だけでなく、すべてのポッドキャストが対象です。ポッドキャストを成長させる最も影響力のある方法は、Apple ポッドキャストの評価を記載したレビューを書くことです。

Apple Podcast を選ぶ理由

Apple Podcasts は、ポッドキャストの成長と認知に関しては独占的です。すべてのポッドキャスト プラットフォームのチャートは、Apple のチャートにリンクされています (2021 年に独自のポッドキャスト チャートを作成した Spotify を除く)。これらのチャートは、ポッドキャストを何百万もの新しいリスナーの前に置くものであり、ポッドキャストを成長させるための最善の策です.

6.グッズ

ミュージシャンにとってもポッドキャスターにとっても、商品やグッズは収益化の良い方法です。Binchtopia には、プラットフォームでホストされているサードパーティ製の商品があります。サードパーティによるグッズ制作を維持しながら、購入プラットフォームを社内に維持することで、手数料を増やすことができます。さらに、これにより、redbubble で偽の販売者から知らないうちに購入する可能性のあるファンからの収益の損失がなくなります。

7. 広告主向け CTA

ポッドキャストの標準的な収益源は、エピソードに広告スポットを掲載することです。通常、これらの広告スポットは、ポッドキャストが署名したポッドキャスト ネットワーク、作成者の広報担当者、またはサードパーティのポッドキャスト広告ネットワークを介して取得されます。

Binchtopia のホストは、ビジネスを持つリスナーに、広告スペースについて直接連絡を取るように勧めることがよくあります。これは一般的な慣行ではありませんが、過去にいくつかの広告スポットを確保するために働いてきました. そこで、ランディング ページに CTA を配置して、ユーザーが入力して送信できるフォームに誘導することにしました。

8.フッター

フッターについては、いくつかの標準的なフッター形式を見つけて、このセクションでウェブサイトから繰り返したい情報に適応させることで、デザインを改善しました。

9. Instagram統合（放棄されたセクション）

私の最初のデザインでは、Instagram にプラグイン セクションを追加することを考えました。しかし、私はそのアイデアが好きでしたが、

• これが実際の Web ページである場合、実際に実装できる方法が思い浮かびませんでした。Instagram フィード プラグインは一般的ではなく、
• ラップトップのユーザーが Instagram をクリックしてそのページをフォローすることは、ユーザー フローでは意味がありません。

ウェブページ全体

ほら、これで完全なページができました！

改善の余地

1. ほとんどのポッドキャストはスマートフォンで再生されるため、この Web サイトはモバイル フレンドリーである必要があります。
2. 完全な Web サイトを構築する場合、ユーザー フローと行動についてより多くの洞察を得て、ホームページを改善することができます。
3. さまざまな CTA の重要性に基づいてセクションの順序を明確にするために、もう少し時間を費やすことができます。
4. ポッドキャストのスニペットを提供して、より多くのオーディオ体験を Web ページに統合する方法をさらに見つけることができます。現在、[概要] セクションにはクリック可能なビデオ スニペットしかありません。
5. アーティストであることは、たくさんのプロジェクトを取り上げては放棄し、場合によってはそれらを再訪するサイクルですが、より明確なタイムラインがあれば、このプロジェクトの反復を改善できたと思います. この教訓を生かして、将来のプロジェクトのためのしっかりしたタイムラインを作成します。

ここまで読んでくださった方、興味を持っていただきありがとうございます！私は現在、あらゆる製品デザインの機会を受け入れているので、私のポートフォリオをチェックするか、 Twitterで私に DM を送ってください。つながりましょう!

このプロジェクトのデザインのメンターであるJonty Chakiに特に感謝したいと思います。経験豊富なプロダクト デザイナーとしての彼のフィードバックは、私にとって非常に貴重なものでした。

PS:私の漫画とケース スタディが気に入ったら、拍手ボタンを長押ししてください