Komedi podcast'i Binchtopia için nasıl bir açılış web sayfası tasarladığıma dair bir izlenecek yol

Giriş

Bu web sayfası, 10kdesigners ürün tasarımı temel eğitim programının bir parçası olarak yaptığım bir tasarım projesiydi .

Sorun bildirimi: Bir internet yaratıcısı için, web'deki bilgilerini ve en iyi çalışmalarını tek bir yerde toplayan bir "buradan başlayın" sayfası gibi davranan bir web sayfası tasarlayın.

• Bir Amerikan komedi ve toplum/kültür podcast'i olan Binchtopia için bir web sayfası oluşturmaya karar verdim.
• Tüm bağlantılarını bir araya getirmek için: podcast platformları, patreon, merch shop ve reklamverenler için sosyal yardım.
• Gösteri notlarına ve birden çok platforma dağılmış çok fazla bağlantıya sahip olma sorununu çözmeye vurgu yaparak.

En sevdiğiniz podcast'in bir bölümünü dinlediğinizi hayal edin ve programın başında sunucular yeni bir ürün piyasaya sürdüklerini ve onu kontrol etmenizi ve belki de biraz satın almanızı çok seveceklerini söylüyorlar, "Şunu kontrol edin: gösteri notlarındaki bağlantı ”. Shownotes'a tıklıyorsunuz ve tanıdığınız ve tanımadığınız her türlü platforma ait bağlantılarla bombardımana tutuluyorsunuz. Ve böylece bunalmış olursunuz ve tıklarsınız. Ya da belki bakarsınız ve diğerleriyle birlikte bu yeni web mağazasının bağlantısını eklemeyi unutmuşlardır. Pek çok eğer varsa: insan hatası, çok fazla CTA ve her biri için çok fazla platform, ölü bağlantılar, vb.

YouTuber'ların, Instagram etkileyicilerinin veya Twitter gurularının aksine, podcast yayıncıları tek bir platforma bağlı değildir: ağlarını dağıtım kanallarında (Spotify, Apple Podcasts, Google Podcasts, vb.) yayınlarlar ve farklı para kazanma ve büyüme yolları bulurlar. Dolayısıyla bağlantılı bir CTA, Patreon, sosyal medya kanalları, Apple Podcast'lerde derecelendirme, tur bileti rezervasyonları, işbirlikleri için geçerli olabilir ve liste uzayıp gider.

Peki bu kadar karmaşık bir problemin en basit çözümü nedir? Dinleyicinin keşfetmesi için tüm podcast çalışmalarını tek bir noktada gösteren bir web sitesi ve içerik oluşturucunun bölümde seslenebileceği ve şov notlarında bağlantı kurabileceği tek bir URL!

projem hakkında

Projemi, en iyi şekilde şu şekilde tanımlanan Binchtopia komedi podcast'i etrafında inşa etmeyi seçtim:

Platon ve Aristoteles'in internet bağımlılıkları olsaydı ve "gaslighting"in ne olduğunu bilselerdi, muhtemelen bu podcast'i yaparlardı. Sunucular Julia Hava ve Eliza McLamb, mevcut kültürel cehennemimizde size rehberlik ediyor, popüler kültür üzerine sosyolojik ve psikolojik bakış açılarını paylaşıyor ve sevdiğiniz her şeyi yapısöküme uğratıyor. Gelin, geç dönem kapitalizmin son zamanlarında bizimle birlikte gülün!

— Binchtopia podcast açıklaması

Birkaç yıldır en sevdiğim komedi ve toplum/kültür podcast'lerinden biri oldu ve bu yüzden projeyi onun etrafında toplamanın onu daha da zenginleştireceğini düşündüm. Geçmişte, Hindistan'ın en iyi iş podcast'lerinden birini oluşturma ve birlikte barındırma zevkini de yaşadım, bu nedenle bu proje üzerinde çalışmak için yaratıcı ve dinleyicinin ikili bakış açısına sahip olduğumu hissettim.

Hedefler

Neden yapıyorsun?

-Derek Sivers, 'Evet ya da Hayır'

Bu projede alınan herhangi bir tasarım kararı, bir podcast'in en önemli 3 hedefi etrafında girildi.

1. Para kazanma akışları
2. Podcast erişimini büyütme
3. Bir kimlik oluşturmak

1. Podcast ve sunucular hakkında
2. Patreon
3. Son bölümler
4. İncelemeler ve CTA, Apple Podcasts'te incelenecek
5. Ürün mağazası
6. Reklamverenler için açıklama metni
7. Altbilgi

Başlarken

Problem bildirimini tanımladıktan sonra tasarım sürecimi ortaya koydum.

Bu görselde göreceğiniz gibi, bir şeye küstahça “rönesans” diyorum. Yinelemeler yoluyla tasarımdaki değişiklikler yaygın olsa da, bu projeyle kendimi (geçici olarak) diğerlerine öncelik vermek için bu projeyi terk ederken buldum. Daha sonra bu web sayfasını yeni gözlerle ve keskinleştirilmiş tasarım becerileriyle tekrar ziyaret ettim. Böylece görsellerde büyük bir sıçrama fark edeceksiniz ve bu yüzden (neden bahsettiğime bir göz atmak için Görseller bölümüne gidin).

Binchtopia Araştırması

Hakkında

Şahsen, herhangi bir akış platformundan çıkarılan podcast'in açıklamasının şovun tonunu, mizahını, tarzını, şakalaşmasını ve konusunu mükemmel bir şekilde özetlediğini hissediyorum.

Ek olarak, bir mem bin kelimeye bedeldir.

Podcast'in tonu

Bir podcast oluştururken veya analiz ederken, ton tüm şov için çok önemlidir. Bir partiye girerken beklenen atmosfer, şakalaşma, atmosfer. Bu, ev sahiplerinin aktif olarak oluşturduğu bir şey olsa da, aynı zamanda doğal olarak zamanla gelişen bir şeydir.

Tasarımcı olarak benim işim, tasarımların ve deneyimin bunun bir yansıması olması için podcast'in titreşimlerini toplamak. Mükemmel bir parti atmosferi yaratmak istiyoruz, bir disko gecesi olmasını bekleyip kendinizi bir şirket dışında bulan bir parti değil. Hepsi bu kadar, web sitesi havası podcast'in havasıyla eşleşmelidir.

Bazı hızlı tanımlayıcılar: memey, bilgili ve politik, 2. nesil mizah/komik, konuşkan ve yardımcı sunucular arasında gidip gelen, bilgilendirici/açıklayıcı/erişilebilir, ciddi sorunları biraz neşeli ve hoş hale getirir.

İşte size içerik ve üslup hakkında bir fikir vermek için bazı popüler bölümler.

Mizah/Memler

Sadece bir bölümü dinlemenin dışında, sosyal medyalarında yayınladıkları memlerden podcast'in tonu hakkında bir fikir edinebilirsiniz (öncelikle Instagram , uygulama Hindistan'da yasaklandığından TikTok'larına erişemedi).

Hedef kitle

podcast'in

Binchtopia'nın hedef kitlesi, ağırlıklı olarak ABD olmak üzere “Batı dünyası” ülkelerinden kadın, z kuşağına yöneliyor.

Bu web sitesinin

1. Bölümde herhangi bir CTA'ya (Patreon, reyting, marş vb.) yönlendirilen dinleyiciler. Bu, sesli CTA ile shownotes metni arasındaki tüm sürtüşmeleri ortadan kaldırmak içindir.
2. Onları Google'layan herkes. Şu anda "Binchtopia"yı Google'da aradığınızda ilk görünen şey onların Instagram'ı: Bunun bir podcast olduğuna dair hiçbir belirti yok.

Kapak resmi, daha önce 70'ler ve 80'ler Amerikan moda dergisinin tarzından ilham almaktan bahseden kohort Julia Hava tarafından yapıldı.

Bu tarzda memler yaptığı Instagram sayfasından bazı referanslar topladım.

İhtiyaçlarını anlamak

Bu web sitesinin ihtiyaçlarını birincil CTA'larına (bölümde bahsedilen, notları göster, ne zaman ve nasıl önceliklendirildikleri) ve ayrıca birincil gelir kaynaklarının hangileri olduğuna göre kabul ettim. Bildiğiniz gibi, podcast'leri kullanmak ücretsizdir, bu nedenle içerik oluşturucular gelir elde etmek için tekliflerini çeşitlendirir. Ve sunucular Julia ve Eliza için podcast onların tam zamanlı işi.

• Patreon : farklı aylık katmanlarla Patreon ana gelir kaynağıdır. Patreonitlerine farklı avantajlar ve ek içerikler sunarlar.
• Apple Podcasts Derecelendirmeleri : Bir podcast'in büyümesinin ve yeni bir izleyici kitlesi kazanmasının en etkili yolu, Apple Podcasts'teki derecelendirmeleri ve incelemeleridir. Bu, her bölümde bahsettikleri ikincil CTA'larıdır.
• Merch : Kupalar, tişörtler, kapüşonlular ve daha fazlasının kendi özgün tasarımlarına sahip olduğu bir mağazaları (üçüncü taraf bir satıcı ile) var.
• Reklamverenler için çağrı : Reklamlar genellikle yönetim ajansları veya barındırma sağlayıcıları aracılığıyla yapılırken, sunucular bazen bölümlerde, işletmeleri olan dinleyicilerin herhangi bir bölümdeki bir reklam noktasına doğrudan ulaşması için CTA'lara sahiptir.

Keşifler

Başlamak için podcast web sitelerinden, podcast ağlarından, kişisel web siteleri olan podcast yayıncılarından referanslar topladım.

Daha sonra, Mobbin'den web sitelerinin genel referanslarını sanat stiline ve düzenlerine göre topladım.

Tel çerçeveler: kağıt ve HF

Aklımdaki düzenleri görselleştirmek için bazı kağıt tel çerçevelerle başladım. Bu WF'ler, tasarladığım web sitesinin ilk versiyonuna karşılık geliyordu.

Tasarımı tekrar gözden geçirmeye karar verdiğimde, bu proje için sahip olduğum yeni planları yansıtmak için (Procreate'te) yeni bir dizi tel kafes hazırladım.

görseller

Rönesans

Sizi her bir web sitesi bölümünün görsel tasarımları ve yinelemelerinde gezdirirken, yinelemelerde bir fark göreceksiniz.

Bunun nedeni, bu tasarıma ilk olarak ürün tasarımı temel eğitim kampımın 1. ayında başlamam ve tasarımı kursun 3. ayında (son ay) bitirmemdi. Böylece ilk ve son tasarımlarda değişen stiller, tasarım felsefeleri ve beceriler göreceksiniz. Buna dramatik olduğunu bildiğim rönesans diyorum, ama hey, tasarım becerilerimdeki gelişme de dramatik!

1. Kahraman Bölümü

Bir kahraman bölümünün temelleri aynıdır: bir gezinti çubuğu ve metin + resim. Benim için kahraman bölümünü tasarlamak, düzenleri, hangi bölümlerin örtüştüğünü ve tasarımın genel temellerini anlamaya çalışmaktı.

Tasarım danışmanımın tavsiyesi üzerine yinelemelerimde aldığım bazı önemli tasarım kararları burada.

• Arama çubuğu : varsayılan olarak eklediğim şeylerden biri, ancak bu web sitesi bağlamında, bir kullanıcı arama çubuğunu ne için kullanır? Bölümleri bulmak için mi? Ürünleri bulmak için mi? Web sitesi, podcast'in tüm etkinlikleri için tek durak olduğundan, burada tek bir önemli etkinlik yok gibi görünüyor. Bu yüzden, kullanıcı deneyimi bağlamında mantıklı gelmediği için onu tamamen bir kenara atmaya karar verdim.
• Görüntü ne kadar "uzun" olmalıdır : Tam bir kaydırma sayfasını kaplamalı mı? Veya sayfaya yeni gelen bir kullanıcı için bir sonraki bölüme küçük bir zirve vermek için daha kısa mı? Karar, görüntünün gerçekte hangi amaca hizmet ettiğine bağlı olarak verilir: bunun yalnızca podcast çiziminin görsel bir ipucunu vermek olduğuna karar verdim, başka bir şey değil.
• Bu bölümde ve web sitesinin ilk tasarımının geri kalanında, tüm sayfalarımın web sitesi bölümleri yerine PPT slaytları gibi görünmesini sağlamakta zorlandım . Bunun için her şeye uyan tek bir çözüm olmasa da, her bölümde düşündüğüm bir şey var: Buradaki sunum havasını yıkmak için resimler, simgeler, metin ve CTA'larla nasıl çalışırım?

Bu bölümden itibaren web sitesinin yerleşim dilinin oluşturulması gereken yer burasıdır. Bu, başlık/alt başlık/metin formatı, CTA düğmesi ve resim/video öğesidir.

3. Patron

Bu, web sitesinin para kazandıran CTA'sını içerdiği için önemli bir bölümdür. CTA, kullanıcıyı podcast'in Patreon'daki farklı katmanları içeren ve satın almaya götüren kendi UX'ine sahip web sayfasına yönlendirir. Peki bu bölümün ne yapması gerekiyor? Patreon sayfasına tıklamalarını sağlamak ve onları bir satın alma işlemi yapmaya bir adım daha yaklaştırmaktır.

Gerçek Patreon sayfasında görüntülendiği için gereksiz olacak olan 4 farklı Patron katmanını göstermek yerine, sevimli simgeler ve avantaj bilgileri aracılığıyla bir Patron olmanın faydalarını vurgulamaya karar verdim.

4. Bölümler

Bölümler bölümünün yapı taşı elbette bölüm kartıdır. Yaptığım ilk kart, bir bölümün iki ana bilgi parçasına odaklandı: başlık ve açıklama.

Ancak bunlar bir bölümün en önemli bilgileri olsa da, yeterli değiller. Artı kart, bunun bir bölüm olduğunu ima etmiyordu, belki daha çok bir makale gibi? Bu yüzden, başka hangi bilgilerin ve görsel ipuçlarının bir bölüm kartı oluşturduğunu görmek için farklı podcast uygulamalarını keşfetmek için biraz daha zaman harcadım.

Tekrarlanan bölüm kartları, başlık/alt başlık/metin ve CTA butonu ile bölümü yeniden düzenledim.

5. CTA'yı gözden geçirin

Patreon aboneliklerinden sonra reytingler ikinci en önemli CTA'dır. Sadece Binchtopia için değil, tüm podcast'ler için. Podcast'inizi büyütmenin en etkili yolu, Apple podcast'lerinde derecelendirilmiş yazılı bir inceleme almaktır.

Neden Apple Podcast'leri?

Apple Podcasts, podcast'in büyümesi ve tanınması söz konusu olduğunda tekeli elinde tutuyor. Tüm podcast platformlarının çizelgeleri, Apple çizelgelerine bağlıdır (2021 itibariyle kendi podcast çizelgelerini oluşturan Spotify hariç). Bu çizelgeler, podcast'inizi milyonlarca yeni dinleyicinin önüne koyan şeydir ve podcast'inizi büyütmeniz için en iyi bahistir.

6. Ürünler

Hem müzisyenler hem de podcast yayıncıları için, ürün veya ticari ürünler, para kazanmanın iyi bir yoludur. Binchtopia'nın ürünleri, platformlarında barındırılan üçüncü taraflarca yapılır. Ürünlerin üretimini bir üçüncü şahısta tutarken satın alma platformunu şirket içinde tutarken komisyonlarını artıracaklardı. Ayrıca bu, bilmeden redbubble'da sahte satıcılardan satın alabilecek hayranların gelir kaybını ortadan kaldırır.

7. Reklamverenler için CTA'lar

Podcast'ler için standart bir gelir akışı, bölümlerinde reklamı yapılan reklam noktalarına sahip olmaktır. Tipik olarak bu reklam noktaları, bir podcast'in imzaladığı podcast ağı, içerik oluşturucunun bir yayıncısı veya üçüncü taraf bir podcast reklam ağı aracılığıyla alınır.

Binchtopia'nın sunucuları çoğu zaman işletmeleri olan dinleyicileri reklam alanı için kendileriyle doğrudan iletişime geçmeye teşvik etti. Bu yaygın bir uygulama değildir, ancak geçmişte onlara birkaç reklam noktası sağlamada işe yaramıştır. Bu nedenle, açılış sayfasında, kullanıcının doldurup iletişim kurulması için gönderebileceği bir forma yol açacak bir CTA'ya sahip olmaya karar verdim.

8. Altbilgi

Altbilgi için bazı standart altbilgi formatları bularak ve bu bölümde web sitesinden tekrarlamak istediğim bilgilerle uyarlayarak tasarımı geliştirdim.

9. Instagram entegrasyonu (terk edilmiş bölüm)

İlk tasarımımda, büyük bir takipçi kitlesine sahip oldukları ve önemli bir keşif platformu olmaya devam ettikleri için Instagram'a bir eklenti bölümü eklemeyi düşünmüştüm. Ama fikri beğendim

• Bu gerçek bir web sayfası olsaydı, onu gerçekten uygulayabileceğim bir yol düşünemezdim. Instagram besleme eklentileri tam olarak yaygın değildir ve
• Bir kullanıcı akışında, bir kullanıcının dizüstü bilgisayarından Instagram'a tıklayıp onları takip etmesi mantıklı değildi.

Tam web sayfası

Et voila, artık tam sayfamız var!

İyileştirme Odası

1. Çoğu podcast akıllı telefonlarda dinlendiğinden, bu web sitesinin mobil uyumlu olması gerekir.
2. Tam web sitesini oluştursaydım, ana sayfayı geliştirebilecek kullanıcı akışları ve davranışları hakkında daha fazla fikir edinebilirdim.
3. Farklı CTA'ların önemine göre bölümlerin sırasını keskinleştirmek için biraz daha zaman harcayabilir.
4. Web sayfasına daha fazla ses deneyimi entegre etmek için podcast'in parçalarını vermenin daha fazla yolunu bulabilir. Şu anda Hakkında bölümünde yalnızca tıklanabilir video snippet'i var.
5. Sanatçı olmak, bir dizi projeyi alıp onları terk etmek ve belki de yeniden ziyaret etmek döngüsü olsa da, daha tanımlanmış bir zaman çizelgesinin bu projenin yinelemelerini iyileştirebileceğini düşünüyorum. Bu dersi gelecekteki projeler için sağlam zaman çizelgeleri oluşturmak için ileriye taşıyacağım.

Buraya kadar okuduysanız, ilginiz için teşekkür ederiz! Şu anda tüm ürün tasarım fırsatlarına açığım, bu yüzden portföyüme göz atın veya Twitter'da bana DM gönderin, hadi bağlanalım!

Bu projede tasarım danışmanım olduğu için Jonty Chaki'ye özel olarak seslenmek istiyorum , deneyimli bir ürün tasarımcısı olarak onun geri bildirimleri benim için son derece değerliydi!

Not: Çizgi romanımı ve vaka incelemesini beğendiyseniz, alkış düğmesine uzun basın