Um passo a passo de como projetei uma página inicial para o podcast de comédia Binchtopia

Introdução

Esta página da web foi um projeto de design que fiz como parte do treinamento de design de produto 10kdesigners .

Declaração do problema: Projete uma página da Web para um criador da Internet que atue como uma página “comece aqui” que agregue suas informações na Web e seus melhores trabalhos em um só lugar.

• Decidi construir uma página da web para o Binchtopia, um podcast americano de comédia e sociedade/cultura.
• Para agregar todos os seus links para: plataformas de podcast, patreon, merch shop e divulgação para anunciantes.
• Com ênfase em resolver o problema de ter muitos links espalhados por shownotes e várias plataformas.

Imagine que você está ouvindo um episódio do seu podcast favorito e, no início do programa, os apresentadores mencionam que acabaram de lançar alguns produtos e gostariam que você desse uma olhada e talvez comprasse alguns. link nas notas de apresentação”. Você clica nas notas de exibição e é bombardeado com links para todos os tipos de plataformas que você reconhece e não. E então você fica sobrecarregado e clica. Ou talvez você olhe e eles tenham esquecido de adicionar o link para esta nova loja virtual junto com todas as outras. Existem muitos "e se": erro humano, muitos CTAs e muitas plataformas para cada um, links mortos, etc.

Ao contrário dos YouTubers, influenciadores do Instagram ou gurus do Twitter, os podcasters não estão vinculados a uma plataforma: eles lançam sua rede nos canais de distribuição (Spotify, Apple Podcasts, Google Podcasts, etc.) e encontram diferentes caminhos de monetização e crescimento. Portanto, um CTA vinculado pode ser aplicado ao Patreon, canais de mídia social, classificação em Podcasts da Apple, reservas de ingressos para passeios, colaborações e a lista continua.

Então, qual é a solução mais simples para um problema tão complexo? Um site que mostra todo o trabalho do podcast em um local para o ouvinte explorar e um único URL para o criador chamar no episódio e criar um link nas notas do programa!

Sobre meu projeto

Escolhi construir meu projeto em torno do podcast de comédia Binchtopia, melhor descrito como:

Se Platão e Aristóteles fossem viciados em internet e soubessem o que é “gaslighting”, provavelmente fariam este podcast. As anfitriãs Julia Hava e Eliza McLamb guiam você através de nossa paisagem infernal cultural atual, compartilham perspectivas sociológicas e psicológicas sobre a cultura pop e desconstroem tudo o que você já amou. Venha rir conosco durante o fim dos tempos do capitalismo em estágio avançado!

- Descrição do podcast Binchtopia

Tem sido um dos meus podcasts favoritos de comédia e sociedade/cultura por alguns anos, então pensei que centrar o projeto em torno dele só o tornaria mais rico. No passado, também tive o prazer de criar e co-apresentar um dos principais podcasts de negócios da Índia, então senti que tinha a dupla perspectiva de criador e ouvinte para trabalhar neste projeto.

Metas

Por que você está fazendo?

-Derek Sivers, 'Inferno, sim ou não'

Quaisquer decisões de design feitas neste projeto foram inseridas em torno dos 3 objetivos mais importantes de um podcast

1. Fluxos de monetização
2. Aumentando o alcance do podcast
3. Estabelecendo uma identidade

1. Sobre o podcast e os hosts
2. Patreon
3. Últimos episódios
4. Comentários e CTA para revisar no Apple Podcasts
5. loja de produtos
6. Chamada para anunciantes
7. Rodapé

Começando

Depois de definir a declaração do problema, expus meu processo de design.

Como você verá nesta imagem, eu me refiro descaradamente a algo como “o renascimento”. Embora as mudanças no design por meio de iterações sejam comuns, com este projeto eu me encontrei (temporariamente) abandonando este projeto para priorizar outros. Mais tarde, revisitei esta página da Web com novos olhos e habilidades de design aprimoradas. Então você notará um grande salto nos visuais e é por isso (role até a seção Visuals para dar uma espiada no que estou falando).

Pesquisa sobre Binchtopia

Sobre

Pessoalmente, sinto que a descrição do podcast, retirada de qualquer plataforma de streaming, encapsula perfeitamente o tom, o humor, o estilo, as brincadeiras e o assunto do programa.

Além disso, um meme vale mais que mil palavras.

tom do podcast

Ao criar ou analisar um podcast, o tom é crucial para todo o programa. É a vibração, a brincadeira, a atmosfera que se espera ao entrar em uma festa. Embora isso seja algo que os hosts constroem ativamente, também é algo que se desenvolve naturalmente com o tempo.

Meu trabalho como designer é captar as vibrações do podcast para que os designs e a experiência sejam um reflexo disso. Queremos construir a atmosfera de festa perfeita, não aquela em que você espera que seja uma noite de discoteca e, em vez disso, encontra-se em um local corporativo externo. Ou seja, a vibração do site deve corresponder à vibração do podcast.

Alguns descritores rápidos: memey, informado e político, humor gen-z/engraçado, falador e impulsionado pelas idas e vindas entre os co-anfitriões, informativo/explicativo/acessível, torna as questões sérias levemente alegres e palatáveis.

Aqui estão alguns episódios populares para dar uma ideia do conteúdo e do tom.

Humor/memes

Além de ouvir um episódio, você pode ter uma ideia do tom do podcast pelos memes que eles postam em suas redes sociais (principalmente Instagram , não conseguiu acessar o TikTok porque o aplicativo foi banido na Índia).

Público-alvo

do podcast

O público-alvo da Binchtopia se inclina para mulheres, gen-z, de países do “mundo ocidental”, principalmente dos EUA.

deste site

1. Ouvintes que são solicitados a qualquer CTA (Patreon, avaliações, marcha, etc) no episódio. Isso é para eliminar todo o atrito entre o CTA de áudio e o texto do shownotes.
2. Qualquer pessoa que os pesquisar no Google. Atualmente, o Instagram deles é a primeira coisa que aparece quando você pesquisa “Binchtopia” no Google: não há indicação de que seja um podcast.

A arte da capa é feita pela coorte Julia Hava, que já falou sobre se inspirar no estilo da revista de moda americana dos anos 70 e 80.

Peguei algumas referências da página dela no Instagram onde ela faz memes nesse estilo também.

Entendendo suas necessidades

Assumi as necessidades deste site com base em seus CTAs principais (mencionados no episódio, notas do programa, quando e como eles são priorizados) e também com base em quais são suas principais fontes de receita. Como você sabe, os podcasts são gratuitos para consumo, então os criadores diversificam suas ofertas para gerar renda. E para as apresentadoras Julia e Eliza, o podcast é o trabalho em tempo integral.

• Patreon : com diferentes níveis mensais, o Patreon é a principal fonte de renda. Eles oferecem diferentes vantagens e conteúdo adicional para seus Patreonites.
• Avaliações em Apple Podcasts : a maneira mais impactante de um podcast crescer e ganhar um novo público é por meio de suas classificações e críticas nos Apple Podcasts. Este é o CTA secundário que eles mencionam todos os episódios
• Merch : eles têm uma loja (com um fornecedor terceirizado) que possui canecas, camisetas, moletons e muito mais, todos com seus designs originais.
• Chamada para anunciantes : embora geralmente os anúncios sejam feitos por meio de agências de gerenciamento ou provedores de hospedagem, os hosts às vezes têm CTAs em episódios para ouvintes com empresas para alcançar diretamente um anúncio em qualquer episódio.

Explorações

Para começar, reuni referências de sites de podcasts, redes de podcasts, podcasters com sites pessoais.

Em seguida, reuni referências gerais de sites do Mobbin, com base no estilo de arte e layouts.

Wireframes: papel e HF

Comecei com alguns wireframes de papel para visualizar os layouts que tinha em mente. Estes WFs correspondiam à primeira versão do site que desenhei.

Quando decidi revisitar o design, criei um novo conjunto de wireframes (no Procreate) para refletir os novos planos que tinha para este projeto.

Visuais

O renascimento

À medida que o conduzo pelos designs visuais e iterações de cada seção do site, você notará uma diferença nas iterações.

Isso porque comecei este design no mês 1 do meu treinamento de design de produto e terminei o design no mês 3 (o último mês) do curso. Então você verá estilos alterados, filosofias de design e habilidades nos designs inicial e final. Estou chamando isso de renascimento, que eu sei que é dramático, mas ei, a melhoria em minhas habilidades de design também é dramática!

1. Seção de Herói

O básico de uma seção de herói é o mesmo: uma barra de navegação e texto + imagem. Projetar a seção do herói para mim foi tentar descobrir os layouts, quais seções se sobrepõem e os fundamentos gerais do design.

Aqui estão algumas decisões importantes de design que tomei por meio de minhas iterações, por recomendação do meu mentor de design.

• Barra de pesquisa : uma daquelas coisas que adicionei por padrão, mas no contexto deste site, para que um usuário usaria a barra de pesquisa? Para encontrar episódios? Para encontrar Merch? Como o site é um ponto único para todas as atividades do podcast, não parece haver uma atividade principal aqui. Portanto, decidi descartá-lo completamente, pois não fazia sentido no contexto da experiência do usuário.
• Qual deve ser o comprimento da imagem : ela deve ocupar uma página inteira de rolagem? Ou ser mais curto para dar uma espiada na próxima seção para um usuário que acabou de acessar a página? A decisão é tomada com base no propósito que a imagem realmente serve: o que eu decidi era apenas dar uma dica visual da capa do podcast e nada mais.
• Nesta seção, e no restante do primeiro design do site, lutei para que todas as minhas páginas parecessem slides PPT em vez de seções do site . Embora não haja uma solução única para isso, é algo em que fico pensando em cada seção: como trabalho com imagens, ícones, texto e CTAs para demolir a vibração da apresentação aqui?

A partir desta seção é onde o idioma do layout do site precisa ser estabelecido. Esse é o formato de título/subtítulo/texto, botão CTA e elemento de imagem/vídeo.

3. Patrão

Esta é uma seção importante, pois contém o CTA lucrativo do site. O CTA leva o usuário à página do podcast no Patreon, que contém as diferentes camadas e possui sua própria UX que leva à compra. Então, o que esta seção precisa fazer? É para levá-los a clicar na página do Patreon e aproximá-los para fazer uma compra.

Em vez de simplesmente mostrar os 4 níveis diferentes de patrono, o que seria redundante, já que é exibido na página real do Patreon, decidi destacar os benefícios de ser um patrono por meio de ícones fofos e informações sobre vantagens.

4. Episódios

O bloco de construção da seção de episódios é o cartão de episódio, é claro. O primeiro cartão que fiz focou nas duas informações principais de um episódio: título e descrição.

Mas embora essas sejam as informações mais importantes de um episódio, elas simplesmente não são suficientes. Além disso, o cartão não aludia a ser um episódio, mais como um artigo, talvez? Então, passei mais tempo explorando diferentes aplicativos de podcasts para ver quais outras informações e dicas visuais compõem um cartão de episódio.

Com cartões de episódios repetidos, título/subtítulo/texto e botão CTA, reorganizei a seção.

5. Revise o CTA

Depois das assinaturas do Patreon, as avaliações são o segundo CTA mais importante. Não apenas para Binchtopia, mas para todos os podcasts. A maneira mais impactante de aumentar seu podcast é obter uma crítica por escrito com uma classificação nos podcasts da Apple.

Por que Apple Podcasts?

O Apple Podcasts detém o monopólio quando se trata de crescimento e reconhecimento de podcast. Todas as paradas das plataformas de podcast estão vinculadas às paradas da Apple (exceto Spotify, que construiu suas próprias paradas de podcast a partir de 2021). Esses gráficos são o que colocam seu podcast na frente de milhões de novos ouvintes e são a melhor aposta para você aumentar seu podcast.

6. Mercadorias

Tanto para músicos quanto para podcasters, produtos ou mercadorias são uma boa maneira de gerar receita. A Binchtopia tem seus produtos feitos por terceiros, hospedados em sua plataforma. Mantendo a produção de mercadorias com terceiros, mas mantendo a plataforma de compras interna, eles aumentariam suas comissões. Além disso, isso elimina a perda de receita de fãs que podem comprar sem saber de vendedores falsos no redbubble.

7. CTAs para anunciantes

Um fluxo de receita padrão para podcasts é ter anúncios publicitários em seus episódios. Normalmente, esses espaços de anúncio são adquiridos por meio da rede de podcast com a qual um podcast assinou, um publicitário do criador ou uma rede de anúncios de podcast terceirizada.

Os anfitriões da Binchtopia muitas vezes encorajaram os ouvintes com empresas a contatá-los diretamente para obter espaço publicitário. Isso não é uma prática comum, mas funcionou para garantir a eles alguns espaços publicitários no passado. Então decidi ter um CTA para ele na página de destino que levaria a um formulário que o usuário pode preencher e enviar para ser contatado.

8. Rodapé

Para o rodapé, melhorei o design encontrando alguns formatos de rodapé padrão e adaptando com as informações que gostaria de repetir do site nesta seção.

9. Integração com o Instagram (seção abandonada)

No meu primeiro design, pensei em adicionar uma seção de plugins ao Instagram deles, já que eles têm muitos seguidores e continuam sendo uma importante plataforma de descoberta. Mas embora eu tenha gostado da ideia

• Não consegui pensar em uma maneira de realmente implementá-lo se fosse uma página da web real. Os plug-ins de feed do Instagram não são exatamente comuns e
• Não fazia sentido em um fluxo de usuário para um usuário em seu laptop clicar no Instagram e seguir sua página.

A página web completa

Et voila, agora temos a página inteira!

espaço para melhorias

1. Este site precisaria ser compatível com dispositivos móveis, já que a maioria dos podcasts são ouvidos em smartphones.
2. Se eu construísse o site completo, obteria mais informações sobre os fluxos e o comportamento do usuário que poderiam melhorar a página inicial.
3. Pode gastar mais tempo aprimorando a ordem das seções com base na importância de diferentes CTAs.
4. Pode encontrar mais maneiras de fornecer trechos do podcast para integrar mais uma experiência de áudio na página da web. Atualmente, há apenas o trecho de vídeo clicável na seção Sobre.
5. Embora ser um artista seja um ciclo de pegar um monte de projetos e abandoná-los e talvez revisitá-los, sinto que uma linha do tempo mais definida poderia ter melhorado as iterações deste projeto. Levarei esta lição adiante para criar cronogramas sólidos para projetos futuros.

Se você leu até aqui, obrigado pelo seu interesse! No momento, estou aberto a todas e quaisquer oportunidades de design de produtos, então confira meu portfólio ou envie-me um DM no Twitter , vamos nos conectar!

Gostaria de agradecer especialmente a Jonty Chaki por ser meu mentor de design neste projeto, seu feedback como designer de produto experiente foi extremamente valioso para mim!

PS: se você gostou dos meus quadrinhos e do estudo de caso , pressione e segure o botão de palmas