Una panoramica di come ho progettato una pagina web di destinazione per il podcast comico Binchtopia

introduzione

Questa pagina web era un progetto di design che ho realizzato come parte del campo di addestramento sul design del prodotto 10kdesigners .

Dichiarazione del problema: progetta una pagina Web per un creatore di Internet che funga da pagina "inizia qui" che aggrega le sue informazioni sul Web e il suo miglior lavoro in un unico posto.

• Ho deciso di creare una pagina web per Binchtopia, un podcast americano di commedia e società/cultura.
• Per aggregare tutti i loro collegamenti a: piattaforme di podcast, patreon, negozio di merchandising e sensibilizzazione per gli inserzionisti.
• Con un'enfasi sulla risoluzione del problema di avere troppi collegamenti sparsi su shownote e piattaforme multiple.

Immagina di ascoltare un episodio del tuo podcast preferito e all'inizio dello show i presentatori menzionano che hanno appena lanciato del merchandising e vorrebbero che tu lo dessi un'occhiata e magari ne comprassi un po', dicono: "Controlla il link nelle note di presentazione”. Fai clic sulle note dello spettacolo e sei bombardato da collegamenti a tutti i tipi di piattaforme che riconosci e non. E così vieni sopraffatto e fai clic. O forse guardi e si sono dimenticati di aggiungere il link a questo nuovo negozio online insieme a tutti gli altri. Ci sono molti what if: errore umano, troppi CTA e troppe piattaforme per ciascuno, link morti, ecc.

A differenza degli YouTuber, degli influencer di Instagram o dei guru di Twitter, i podcaster non sono legati a una piattaforma: allargano la loro rete nei canali di distribuzione (Spotify, Apple Podcasts, Google Podcasts, ecc.) E trovano diverse strade di monetizzazione e crescita. Quindi un invito all'azione collegato potrebbe essere applicato a Patreon, ai canali dei social media, alla valutazione sui podcast Apple, alle prenotazioni dei biglietti per i tour, alle collaborazioni e l'elenco potrebbe continuare.

Quindi qual è la soluzione più semplice a un problema così complesso? Un sito Web che mostra tutto il lavoro del podcast in un punto che l'ascoltatore può esplorare e un singolo URL che il creatore può richiamare nell'episodio e collegarsi nelle note dello spettacolo!

Sul mio progetto

Ho scelto di costruire il mio progetto attorno al podcast comico Binchtopia, meglio descritto come:

Se Platone e Aristotele avessero una dipendenza da Internet e sapessero cos'è il "gaslighting", probabilmente farebbero questo podcast. I padroni di casa Julia Hava ed Eliza McLamb ti guidano attraverso il nostro attuale inferno culturale, condividono prospettive sociologiche e psicologiche sulla cultura pop e decostruiscono tutto ciò che hai sempre amato. Vieni a ridere con noi durante la fine dei tempi del capitalismo in fase avanzata!

— Descrizione del podcast di Binchtopia

È stato uno dei miei podcast di commedie e società/cultura preferiti per alcuni anni e quindi ho pensato che incentrare il progetto su di esso lo avrebbe solo reso più ricco. In passato, ho anche avuto il piacere di costruire e co-ospitare uno dei migliori podcast aziendali dell'India, quindi ho sentito di avere la doppia prospettiva di creatore e ascoltatore per lavorare a questo progetto.

Obiettivi

Perché stai facendo?

-Derek Sivers, 'Inferno sì o no'

Tutte le decisioni progettuali prese su questo progetto sono state inserite intorno ai 3 obiettivi più importanti di un podcast

1. Flussi di monetizzazione
2. Aumentare la portata del podcast
3. Stabilire un'identità

1. Informazioni sul podcast e sugli host
2. Patreon
3. Ultimi episodi
4. Recensioni e invito all'azione da rivedere su Apple Podcast
5. Negozio di merchandising
6. Callout per gli inserzionisti
7. Piè di pagina

Iniziare

Dopo aver definito la dichiarazione del problema, ho esposto il mio processo di progettazione.

Come vedrai in questa immagine, mi riferisco sfacciatamente a qualcosa come "il rinascimento". Sebbene i cambiamenti nel design tramite iterazioni siano comuni, con questo progetto mi sono ritrovato (temporaneamente) ad abbandonare questo progetto per dare la priorità ad altri. In seguito ho rivisitato questa pagina web con occhi nuovi e capacità di progettazione affinate. Quindi noterai un grande salto nella grafica ed è per questo (scorri fino alla sezione Immagini per dare un'occhiata a ciò di cui sto parlando).

Ricerca su Binchtopia

Di

Personalmente ritengo che la descrizione del podcast, presa da qualsiasi piattaforma di streaming, incapsula perfettamente il tono, l'umorismo, lo stile, le battute e l'argomento dello spettacolo.

Inoltre, un meme vale più di mille parole.

Tono del podcast

Durante la creazione o l'analisi di un podcast, il tono è fondamentale per l'intero spettacolo. È l'atmosfera, le battute, l'atmosfera che ci si aspetta quando si entra in una festa. Mentre questo è qualcosa che gli host costruiscono attivamente, è anche qualcosa che si sviluppa naturalmente nel tempo.

Il mio lavoro come designer è raccogliere le vibrazioni del podcast in modo che i design e l'esperienza ne riflettano. Vogliamo creare l'atmosfera di festa perfetta, non quella in cui ti aspetti che sia una serata in discoteca e invece ti ritrovi in ​​un'azienda fuori sede. Questo è tutto da dire, l'atmosfera del sito web dovrebbe corrispondere all'atmosfera del podcast.

Alcuni rapidi descrittori: memey, informato e politico, umorismo gen-z/divertente, loquace e guidato dal avanti e indietro tra co-conduttori, informativo/esplicativo/accessibile, rende le questioni serie leggermente spensierate e appetibili.

Ecco alcuni episodi popolari per darti un'idea del contenuto e del tono.

Umorismo/meme

Oltre ad ascoltare semplicemente un episodio, puoi farti un'idea del tono del podcast dai meme che pubblicano sui loro social media (principalmente Instagram , non è stato in grado di accedere al loro TikTok poiché l'app è vietata in India).

Destinatari

Del podcast

Il pubblico di destinazione di Binchtopia è orientato verso le donne, gen-z, provenienti dai paesi del "mondo occidentale", in gran parte dagli Stati Uniti.

Di questo sito web

1. Ascoltatori a cui viene richiesto qualsiasi invito all'azione (Patreon, valutazioni, marcia, ecc.) nell'episodio. Questo per eliminare ogni attrito tra l'invito all'azione audio e il testo delle note di presentazione.
2. Chiunque li cerchi su Google. Attualmente il loro Instagram è la prima cosa che appare quando cerchi su Google "Binchtopia": nessuna indicazione che questo sia anche un podcast.

La copertina è realizzata dalla coorte Julia Hava, che in precedenza aveva parlato di essersi ispirata allo stile della rivista di moda americana degli anni '70 e '80.

Ho raccolto alcuni riferimenti dalla sua pagina Instagram dove crea meme anche in questo stile.

Capire le loro esigenze

Ho assunto le esigenze di questo sito Web in base ai loro CTA primari (menzionati nell'episodio, nelle note dello spettacolo, quando e come hanno la priorità) e anche in base a quali sono le loro principali fonti di reddito. Come sai, i podcast sono liberi di consumare, quindi i creatori diversificano le loro offerte per ottenere un reddito. E per le conduttrici Julia ed Eliza, il podcast è il loro lavoro a tempo pieno.

• Patreon : con diversi livelli mensili Patreon è la principale fonte di reddito. Offrono diversi vantaggi e contenuti aggiuntivi ai loro Patreoniti.
• Valutazioni su Apple Podcast : il modo più efficace per far crescere un podcast e ottenere un nuovo pubblico è attraverso le valutazioni e le recensioni su Apple Podcast. Questo è il loro CTA secondario che menzionano in ogni episodio
• Merch : hanno un negozio (con un venditore di terze parti) che ha tazze, magliette, felpe con cappuccio e altro, tutti con i loro disegni originali.
• Call-out per gli inserzionisti : mentre di solito gli annunci vengono fatti tramite agenzie di gestione o provider di hosting, gli host a volte hanno CTA negli episodi per gli ascoltatori con le aziende per raggiungere direttamente uno spot pubblicitario su qualsiasi episodio.

Esplorazioni

Per cominciare ho raccolto riferimenti da siti Web di podcast, reti di podcast, podcaster con siti Web personali.

Poi ho raccolto riferimenti generali di siti web da Mobbin, basati su stile artistico e layout.

Wireframe: carta e HF

Ho iniziato con alcuni wireframe di carta per visualizzare i layout che avevo in mente. Questi WF corrispondevano alla prima versione del sito web che ho progettato.

Quando ho deciso di rivisitare il design, ho creato un nuovo set di wireframe (su Procreate) per riflettere i nuovi piani che avevo per questo progetto.

Immagini

Il Rinascimento

Mentre ti guido attraverso i progetti visivi e le iterazioni di ogni sezione del sito web, noterai una differenza nelle iterazioni.

Questo perché ho iniziato questo progetto per la prima volta nel mese 1 del mio campo di addestramento sulla progettazione del prodotto e ho terminato il progetto nel mese 3 (l'ultimo mese) del corso. Quindi vedrai stili, filosofie di design e abilità cambiati nel primo e nel design finale. Lo chiamo il rinascimento, che so essere drammatico, ma hey anche il miglioramento delle mie capacità di progettazione è drammatico!

1. Sezione Eroe

Le basi di una sezione hero sono le stesse: una barra di navigazione e testo + immagine. Progettare la sezione dell'eroe per me significava cercare di capire i layout, quali sezioni si sovrappongono e le basi generali del design.

Ecco alcune decisioni di progettazione chiave che ho preso durante le mie iterazioni, su consiglio del mio mentore di progettazione.

• Barra di ricerca : una di quelle cose che ho aggiunto per impostazione predefinita ma nel contesto di questo sito Web, per cosa un utente utilizzerebbe la barra di ricerca? Per trovare gli episodi? Per trovare merchandising? Poiché il sito Web è un punto di riferimento per tutte le attività del podcast, non sembra esserci un'attività chiave qui. Quindi ho deciso di eliminarlo del tutto poiché non aveva senso nel contesto dell'esperienza dell'utente.
• Quanto "lunga" dovrebbe essere l'immagine : dovrebbe occupare un'intera pagina a scorrimento? O essere più breve per dare un piccolo picco alla sezione successiva per un utente che è appena arrivato sulla pagina? La decisione viene presa in base allo scopo reale dell'immagine: ho deciso che era solo per dare un'indicazione visiva dell'opera d'arte del podcast e nient'altro.
• In questa sezione e nel resto del primo design del sito Web ho faticato a far sembrare tutte le mie pagine come diapositive PPT piuttosto che come sezioni del sito Web . Sebbene non esista una soluzione valida per tutto, è qualcosa a cui ho continuato a pensare in ogni sezione: come posso lavorare con immagini, icone, testo e inviti all'azione per demolire l'atmosfera di presentazione qui?

Da questa sezione in poi è dove deve essere stabilita la lingua di layout del sito web. Questo è il formato titolo/sottotitolo/testo, pulsante CTA ed elemento immagine/video.

3. Patreon

Questa è una sezione importante poiché contiene il CTA moneymaker del sito web. Il CTA conduce l'utente alla pagina web del podcast su Patreon che contiene i diversi livelli e ha una propria UX che porta a un acquisto. Quindi cosa deve fare questa sezione? È per convincerli a fare clic sulla pagina Patreon e avvicinarli di più per effettuare un acquisto.

Invece di mostrare semplicemente i 4 diversi livelli di Patron, che sarebbero ridondanti dal momento che sono visualizzati sulla pagina Patreon vera e propria, ho deciso di evidenziare i vantaggi di essere un Patron attraverso icone carine e informazioni sui vantaggi.

4. Episodi

L'elemento costitutivo della sezione degli episodi è ovviamente la scheda dell'episodio. La prima scheda che ho realizzato si concentrava sulle due informazioni principali di un episodio: titolo e descrizione.

Ma mentre quelle sono le informazioni più importanti di un episodio, semplicemente non sono sufficienti. Inoltre la carta non alludeva al fatto che si trattasse di un episodio, forse più simile a un articolo? Quindi ho passato un po' più di tempo a esplorare diverse app di podcast per vedere quali altre informazioni e segnali visivi costituiscono una scheda episodio.

Con schede episodi ripetute, intestazione/sottotitolo/testo e pulsante CTA ho modificato la sezione.

5. Rivedi l'invito all'azione

Dopo gli abbonamenti Patreon, le valutazioni sono il secondo CTA più importante. Non solo per Binchtopia, ma per tutti i podcast. Il modo più efficace per far crescere il tuo podcast è ottenere una recensione scritta con una valutazione sui podcast Apple.

Perché Apple Podcast?

Apple Podcasts detiene il monopolio quando si tratta di crescita e riconoscimento dei podcast. Le classifiche di tutte le piattaforme di podcast sono collegate alle classifiche di Apple (tranne Spotify che ha creato le proprie classifiche di podcast a partire dal 2021). Queste classifiche sono ciò che mette il tuo podcast di fronte a milioni di nuovi ascoltatori ed è la soluzione migliore per far crescere il tuo podcast.

6. Merce

Sia per i musicisti che per i podcaster, il merchandising o il merchandising è un buon modo per monetizzare. Binchtopia ha il proprio merchandising realizzato da terze parti, ospitato sulla propria piattaforma. Pur mantenendo la produzione di merchandising con una terza parte ma mantenendo internamente la piattaforma di acquisto, aumenterebbero le loro commissioni. Inoltre, questo elimina le entrate perse dai fan che potrebbero inconsapevolmente acquistare da falsi venditori su redbubble.

7. CTA per inserzionisti

Un flusso di entrate standard per i podcast consiste nell'avere spot pubblicitari pubblicizzati nei loro episodi. In genere questi spot pubblicitari vengono acquisiti tramite la rete di podcast con cui ha firmato un podcast, un pubblicista del creatore o una rete pubblicitaria di podcast di terze parti.

Gli host di Binchtopia hanno spesso incoraggiato gli ascoltatori con le aziende a contattarli direttamente per gli spazi pubblicitari. Questa non è una pratica comune, ma in passato ha funzionato per garantire loro alcuni spot pubblicitari. Quindi ho deciso di inserire un invito all'azione sulla pagina di destinazione che porterebbe a un modulo che l'utente può compilare e inviare per essere contattato.

8. Piè di pagina

Per il piè di pagina ho migliorato il design trovando alcuni formati standard di piè di pagina e adattando le informazioni che vorrei ripetere dal sito Web in questa sezione.

9. Integrazione Instagram (sezione abbandonata)

Nel mio primo progetto avevo pensato di aggiungere una sezione plugin al loro Instagram, dato che hanno un grande seguito e continua ad essere un'importante piattaforma di scoperta. Ma mentre mi piaceva l'idea

• Non riuscivo a pensare a un modo in cui avrei potuto effettivamente implementarlo se questa fosse una vera pagina web. I plug-in dei feed di Instagram non sono esattamente comuni e
• Non aveva senso in un flusso utente che un utente sul proprio laptop facesse clic su Instagram e seguisse la pagina.

La pagina web completa

Et voilà, ora abbiamo la pagina intera!

Margini di miglioramento

1. Questo sito Web dovrebbe essere ottimizzato per i dispositivi mobili poiché la maggior parte dei podcast viene ascoltata su smartphone.
2. Se dovessi costruire il sito Web completo, otterrei maggiori informazioni sui flussi e sul comportamento degli utenti che potrebbero migliorare la home page.
3. Può dedicare più tempo ad affinare l'ordine delle sezioni in base all'importanza dei diversi CTA.
4. Può trovare altri modi per fornire frammenti del podcast per integrare più di un'esperienza audio nella pagina web. Attualmente c'è solo lo snippet video cliccabile nella sezione Informazioni.
5. Sebbene essere un artista sia un ciclo in cui raccogliere una serie di progetti e abbandonarli e forse rivisitarli, ritengo che una sequenza temporale più definita avrebbe potuto migliorare le iterazioni di questo progetto. Porterò avanti questa lezione per creare solide tempistiche per progetti futuri.

Se sei arrivato a leggere fin qui, grazie per il tuo interesse! Al momento sono aperto a tutte le opportunità di progettazione di prodotti, quindi dai un'occhiata al mio portfolio o scrivimi in DM su Twitter , connettiamoci!

Vorrei ringraziare in modo speciale Jonty Chaki per essere stato il mio mentore di design in questo progetto, il suo feedback come designer di prodotti esperto è stato estremamente prezioso per me!

PS: se ti sono piaciuti i miei fumetti e il case study , premi a lungo il pulsante clap