Panduan tentang bagaimana saya merancang halaman web arahan untuk podcast komedi Binchtopia

pengantar

Halaman web ini adalah proyek desain yang saya lakukan sebagai bagian dari kamp pelatihan desain produk 10kdesigners .

Pernyataan masalah: Rancang halaman web untuk pencipta internet yang bertindak sebagai halaman "mulai di sini" yang mengumpulkan info mereka di web dan karya terbaik mereka di satu tempat.

• Saya memutuskan untuk membuat halaman web untuk Binchtopia, podcast komedi dan masyarakat/budaya Amerika.
• Untuk menggabungkan semua tautan mereka ke: platform podcast, patreon, toko merchandise, dan penjangkauan bagi pengiklan.
• Dengan penekanan pada pemecahan masalah memiliki terlalu banyak tautan yang tersebar di seluruh shownotes dan berbagai platform.

Bayangkan Anda sedang mendengarkan episode podcast favorit Anda dan di bagian atas acara pembawa acara menyebutkan bahwa mereka baru saja meluncurkan beberapa merchandise dan ingin Anda memeriksanya dan mungkin membeli beberapa, mereka berkata, “Lihat link di shownote”. Anda mengklik shownotes dan Anda dibombardir dengan tautan ke semua jenis platform yang Anda kenal dan tidak. Jadi Anda kewalahan dan mengklik. Atau mungkin Anda melihat dan mereka lupa menambahkan tautan ke webshop baru ini bersama yang lainnya. Ada banyak bagaimana jika: kesalahan manusia, terlalu banyak CTA dan terlalu banyak platform untuk masing-masing, tautan mati, dll.

Tidak seperti YouTuber, influencer Instagram, atau guru Twitter, podcaster tidak terikat pada satu platform: mereka menyebarkan jaringan mereka secara luas di saluran distribusi (Spotify, Apple Podcasts, Google Podcasts, dll) dan menemukan jalan monetisasi dan pertumbuhan yang berbeda. Jadi CTA yang ditautkan dapat diterapkan ke Patreon, saluran media sosial, peringkat di Podcast Apple, pemesanan tiket tur, kolaborasi, dan masih banyak lagi.

Jadi, apa perbaikan paling sederhana untuk masalah sekompleks ini? Situs web yang menampilkan semua karya podcast di satu tempat untuk dijelajahi pendengar, dan satu URL untuk dipanggil oleh pembuat podcast di episode dan ditautkan ke dalam catatan acara!

Tentang proyek saya

Saya memilih untuk membangun proyek saya di sekitar podcast komedi Binchtopia, yang paling tepat digambarkan sebagai:

Jika Plato dan Aristoteles memiliki kecanduan internet dan tahu apa itu "gaslighting", mereka mungkin akan membuat podcast ini. Pembawa acara Julia Hava dan Eliza McLamb memandu Anda melalui lanskap budaya kami saat ini, berbagi perspektif sosiologis dan psikologis tentang budaya pop, dan mendekonstruksi semua yang pernah Anda sukai. Ayo tertawa bersama kami melalui akhir zaman kapitalisme tahap akhir!

— Deskripsi podcast Binchtopia

Ini telah menjadi salah satu podcast komedi & masyarakat/budaya favorit saya selama beberapa tahun, jadi saya pikir memusatkan proyek di sekitarnya hanya akan membuatnya lebih kaya. Di masa lalu, saya juga senang membangun dan menjadi tuan rumah bersama salah satu podcast bisnis top India, jadi saya merasa memiliki perspektif ganda pencipta dan pendengar untuk mengerjakan proyek ini.

Sasaran

Kenapa kamu melakukan?

-Derek Sivers, 'Ya atau Tidak'

Setiap keputusan desain yang dibuat pada proyek ini dimasukkan sekitar 3 tujuan terpenting podcast

1. Aliran monetisasi
2. Meningkatkan jangkauan podcast
3. Membangun identitas

1. Tentang podcast dan host
2. Patreon
3. Episode terbaru
4. Ulasan & CTA untuk ditinjau di Podcast Apple
5. Toko merchandise
6. Panggilan untuk pengiklan
7. Catatan kaki

Mulai

Setelah mendefinisikan pernyataan masalah, saya menyusun proses desain saya.

Seperti yang akan Anda lihat di gambar ini, saya dengan nakal menyebut sesuatu sebagai "kebangkitan". Meskipun perubahan desain melalui iterasi adalah hal biasa, dengan proyek ini saya mendapati diri saya (sementara) meninggalkan proyek ini untuk memprioritaskan yang lain. Saya kemudian mengunjungi kembali halaman web ini dengan mata baru yang segar dan keterampilan desain yang lebih tajam. Jadi Anda akan melihat lompatan besar dalam visual dan inilah alasannya (gulir ke bagian Visual untuk mengintip apa yang saya bicarakan).

Penelitian tentang Binchtopia

Tentang

Secara pribadi saya merasakan deskripsi podcast, menggunakan platform streaming apa pun, dengan sempurna merangkum nada, humor, gaya, olok-olok, dan pokok bahasan acara.

Selain itu, meme bernilai ribuan kata.

Nada podcast

Saat membuat atau menganalisis podcast, nada sangat penting untuk keseluruhan pertunjukan. Itu adalah getaran, olok-olok, suasana yang diharapkan saat berjalan ke pesta. Meskipun ini adalah sesuatu yang dibangun oleh tuan rumah secara aktif, ini juga merupakan sesuatu yang berkembang secara alami dari waktu ke waktu.

Pekerjaan saya sebagai desainer adalah mengambil nuansa podcast sehingga desain dan pengalaman menjadi cerminannya. Kami ingin membangun suasana pesta yang sempurna, bukan suasana yang Anda harapkan akan menjadi malam disko dan malah menemukan diri Anda berada di luar kantor perusahaan. Artinya, getaran situs web harus sesuai dengan getaran podcast.

Beberapa deskriptor cepat: memey, terinformasi & politis, gen-z humor/lucu, cerewet dan didorong bolak-balik antara co-host, informatif/penjelas/mudah diakses, membuat masalah serius sedikit ringan & enak.

Inilah beberapa episode populer untuk memberi Anda gambaran tentang konten dan nada.

Humor/meme

Selain hanya mendengarkan sebuah episode, Anda bisa mendapatkan gambaran tentang nada podcast dari meme yang mereka posting di media sosial mereka (terutama Instagram , tidak dapat mengakses TikTok mereka karena aplikasi tersebut dilarang di India).

Audiens sasaran

Dari podcast

Target audiens Binchtopia condong ke wanita, gen-z, dari negara-negara "dunia Barat", sebagian besar AS.

Dari situs web ini

1. Pendengar yang diarahkan ke CTA apa pun (Patreon, rating, march, dll) dalam episode tersebut. Ini untuk menghilangkan semua gesekan antara CTA audio dan teks shownotes.
2. Siapa pun yang meng-Google mereka. Saat ini Instagram mereka adalah hal pertama yang muncul saat Anda mencari "Binchtopia" di Google: tidak ada indikasi bahwa ini bahkan podcast.

Seni sampulnya dibuat oleh kohort Julia Hava, yang sebelumnya berbicara tentang terinspirasi oleh gaya majalah mode Amerika tahun 70-an dan 80-an.

Saya mengumpulkan beberapa referensi dari halaman Instagram-nya di mana dia juga membuat meme dengan gaya ini.

Memahami kebutuhan mereka

Saya mengasumsikan kebutuhan situs web ini berdasarkan CTA utama mereka (disebutkan dalam episode, catatan acara, kapan dan bagaimana mereka diprioritaskan) dan juga berdasarkan sumber pendapatan utama mereka. Seperti yang Anda ketahui, podcast gratis untuk dikonsumsi sehingga pembuat konten mendiversifikasi penawaran mereka untuk menghasilkan pendapatan. Dan untuk pembawa acara Julia dan Eliza, podcast adalah pekerjaan penuh waktu mereka.

• Patreon : dengan tingkatan bulanan yang berbeda Patreon adalah sumber pendapatan utama. Mereka menawarkan fasilitas berbeda dan konten tambahan untuk Patreonite mereka.
• Peringkat di Podcast Apple : cara yang berdampak kabut bagi podcast untuk tumbuh dan mendapatkan audiens baru adalah dengan peringkat dan ulasan mereka di Podcast Apple. Ini adalah CTA sekunder mereka yang mereka sebutkan di setiap episode
• Merch : mereka memiliki toko (dengan vendor pihak ketiga) yang memiliki mug, t-shirt, hoodies dan banyak lagi dengan desain aslinya.
• Ajakan untuk pengiklan : meskipun biasanya iklan dilakukan melalui agensi manajemen atau penyedia hosting, pembawa acara terkadang memiliki CTA dalam episode untuk pendengar dengan bisnis untuk menjangkau langsung tempat iklan di episode mana pun.

Eksplorasi

Sebagai permulaan, saya mengumpulkan referensi dari situs web podcast, jaringan podcast, podcaster dengan situs web pribadi.

Kemudian saya mengumpulkan referensi umum situs web dari Mobbin, berdasarkan gaya seni dan tata letak.

Wireframes: kertas dan HF

Saya mulai dengan beberapa gambar rangka kertas untuk memvisualisasikan tata letak yang ada dalam pikiran saya. WF ini sesuai dengan versi pertama situs web yang saya rancang.

Ketika saya memutuskan untuk meninjau kembali desainnya, saya menyiapkan satu set gambar rangka baru (di Procreate) untuk mencerminkan rencana baru yang saya miliki untuk proyek ini.

Visual

Renaisans

Saat saya membawa Anda melalui desain visual dan iterasi dari setiap bagian situs web, Anda akan melihat perbedaan dalam iterasinya.

Itu karena saya pertama kali memulai desain ini di bulan 1 boot camp desain produk saya dan menyelesaikan desain di bulan 3 (bulan terakhir) kursus. Jadi, Anda akan melihat perubahan gaya, filosofi desain, dan keterampilan dalam desain pertama dan terakhir. Saya menyebutnya renaisans, yang saya tahu dramatis, tapi peningkatan keterampilan desain saya juga dramatis!

1. Bagian Pahlawan

Dasar-dasar bagian pahlawan adalah sama: bilah navigasi dan teks + gambar. Mendesain bagian pahlawan bagi saya adalah mencoba mencari tahu tata letak, bagian apa yang tumpang tindih, dan dasar-dasar umum desain.

Berikut adalah beberapa keputusan desain utama yang saya buat melalui iterasi saya, atas rekomendasi mentor desain saya.

• Bilah pencarian : salah satu hal yang saya tambahkan secara default tetapi dalam konteks situs web ini, untuk apa pengguna menggunakan bilah pencarian? Untuk menemukan episode? Untuk menemukan Merchandise? Karena situs web adalah satu atap untuk semua aktivitas podcast, sepertinya tidak ada satu aktivitas utama di sini. Jadi saya memutuskan untuk menghapusnya sama sekali karena tidak masuk akal dalam konteks pengalaman pengguna.
• Berapa "panjang" seharusnya gambar itu : Haruskah itu mengambil halaman gulir penuh? Atau lebih pendek untuk memberikan sedikit puncak ke bagian berikutnya untuk pengguna yang baru saja membuka halaman? Keputusan dibuat berdasarkan tujuan sebenarnya dari gambar tersebut: yang saya putuskan hanya untuk memberikan isyarat visual dari karya seni podcast dan tidak ada yang lain.
• Di bagian ini, dan sisa desain pertama situs web, saya kesulitan membuat semua halaman saya terlihat seperti slide PPT daripada bagian situs web . Meskipun tidak ada satu solusi yang cocok untuk semua untuk ini, ini adalah sesuatu yang terus saya pikirkan di setiap bagian: bagaimana cara bekerja dengan gambar, ikon, teks, dan CTA untuk menghancurkan getaran presentasi di sini?

Dari bagian ini, bahasa tata letak situs web perlu ditetapkan. Itu adalah format judul/subjudul/teks, tombol CTA, dan elemen gambar/video.

3. Patreon

Ini adalah bagian penting karena berisi CTA penghasil uang dari situs web. CTA mengarahkan pengguna ke halaman web podcast di Patreon yang berisi berbagai tingkatan dan memiliki UX sendiri yang mengarah ke pembelian. Jadi apa yang perlu dilakukan bagian ini? Ini untuk membuat mereka mengklik ke halaman Patreon, dan membuat mereka lebih dekat untuk melakukan pembelian.

Alih-alih hanya menunjukkan 4 tingkatan Patron yang berbeda, yang akan mubazir karena ditampilkan di halaman Patreon yang sebenarnya, saya memutuskan untuk menyoroti manfaat menjadi Patron melalui ikon lucu dan informasi manfaat.

4. Episode

Blok bangunan dari bagian episode tentu saja adalah kartu episode. Kartu pertama yang saya buat berfokus pada dua informasi utama sebuah episode: judul dan deskripsi.

Tetapi meskipun itu adalah informasi terpenting dari sebuah episode, itu tidak cukup. Ditambah kartu itu tidak menyinggung itu sebagai sebuah episode, lebih seperti sebuah artikel mungkin? Jadi saya menghabiskan lebih banyak waktu menjelajahi berbagai aplikasi podcast untuk melihat informasi dan isyarat visual apa yang membuat kartu episode.

Dengan kartu episode berulang, tajuk/subjudul/teks dan tombol CTA, saya menyusun ulang bagian tersebut.

5. Tinjau CTA

Setelah langganan Patreon, peringkat adalah CTA terpenting kedua. Bukan hanya untuk Binchtopia, tapi untuk semua podcast. Cara paling berpengaruh untuk mengembangkan podcast Anda adalah dengan mendapatkan ulasan tertulis dengan peringkat di podcast Apple.

Mengapa Apple Podcast?

Podcast Apple memegang monopoli dalam hal pertumbuhan dan pengakuan podcast. Semua bagan platform podcast ditautkan ke bagan Apple (kecuali Spotify yang membuat bagan podcast mereka sendiri per 2021). Bagan inilah yang menempatkan podcast Anda di depan jutaan pendengar baru dan merupakan taruhan terbaik bagi Anda untuk mengembangkan podcast Anda.

6. Barang dagangan

Untuk musisi dan podcaster, merch atau merchandise adalah cara yang baik untuk menghasilkan uang. Binchtopia memiliki merchandise yang dibuat oleh pihak ketiga, dihosting di platform mereka. Sambil menjaga produksi merchandise dengan pihak ketiga tetapi tetap mempertahankan platform pembelian, mereka akan meningkatkan komisi mereka. Plus ini menghilangkan pendapatan yang hilang dari penggemar yang mungkin tanpa sadar membeli dari penjual palsu di redbubble.

7. CTA untuk Pengiklan

Aliran pendapatan standar untuk podcast adalah mengiklankan tempat iklan di episode mereka. Biasanya tempat iklan ini diperoleh melalui jaringan podcast yang telah ditandatangani oleh podcast, humas pembuat, atau jaringan iklan podcast pihak ketiga.

Pembawa acara Binchtopia sering kali mendorong pendengar yang memiliki bisnis untuk langsung menghubungi mereka untuk mendapatkan ruang iklan. Ini bukan praktik umum tetapi berhasil mengamankan beberapa tempat iklan di masa lalu. Jadi saya telah memutuskan untuk memiliki CTA untuk itu di halaman arahan yang akan mengarah ke formulir yang dapat diisi dan dikirim pengguna untuk dihubungi.

8. Catatan kaki

Untuk footer saya memperbaiki desain dengan menemukan beberapa format footer standar dan menyesuaikan dengan informasi apa yang ingin saya ulangi dari situs web di bagian ini.

9. Integrasi Instagram (bagian yang ditinggalkan)

Dalam desain pertama saya, saya berpikir untuk menambahkan bagian plugin ke Instagram mereka, karena mereka memiliki banyak pengikut dan terus menjadi platform penting untuk penemuan. Tapi sementara saya menyukai ide itu

• Saya tidak dapat memikirkan cara yang benar-benar dapat menerapkannya jika ini adalah halaman web yang sebenarnya. Plug-in umpan Instagram tidak terlalu umum dan
• Tidak masuk akal dalam aliran pengguna bagi pengguna di laptop mereka untuk mengklik Instagram dan mengikuti halaman mereka.

Halaman web lengkap

Et voila, kami sekarang memiliki halaman penuh!

Ruang untuk Perbaikan

1. Situs web ini harus ramah seluler karena sebagian besar podcast didengarkan di telepon pintar.
2. Jika saya membangun situs web lengkap, saya akan mendapatkan lebih banyak wawasan tentang alur dan perilaku pengguna yang dapat meningkatkan beranda.
3. Dapat meluangkan lebih banyak waktu untuk mempertajam urutan bagian berdasarkan pentingnya CTA yang berbeda.
4. Dapat menemukan lebih banyak cara untuk memberikan cuplikan podcast untuk mengintegrasikan lebih banyak pengalaman audio ke dalam halaman web. Saat ini hanya cuplikan video yang dapat diklik di bagian Tentang.
5. Meskipun menjadi seorang seniman adalah siklus mengambil banyak proyek dan meninggalkan dan mungkin meninjaunya kembali, saya merasa garis waktu yang lebih jelas dapat meningkatkan iterasi proyek ini. Saya akan melanjutkan pelajaran ini untuk membuat garis waktu yang solid untuk proyek-proyek mendatang.

Jika Anda telah membaca sejauh ini, terima kasih atas minat Anda! Saya saat ini terbuka untuk setiap dan semua peluang desain produk, jadi lihat portofolio saya atau DM saya di Twitter , mari terhubung!

Saya ingin memberikan sapaan khusus kepada Jonty Chaki karena telah menjadi mentor desain saya dalam proyek ini, umpan baliknya sebagai desainer produk yang berpengalaman sangat berharga bagi saya!

PS: jika Anda menyukai komik saya dan studi kasusnya , tekan lama tombol tepuk