Une présentation de la façon dont j'ai conçu une page Web de destination pour le podcast comique Binchtopia

Introduction

Cette page Web était un projet de conception que j'ai réalisé dans le cadre du camp d'entraînement de conception de produits 10kdesigners .

Énoncé du problème : concevez une page Web pour un créateur Internet qui agit comme une page "commencer ici" qui regroupe ses informations sur le Web et son meilleur travail en un seul endroit.

• J'ai décidé de créer une page Web pour Binchtopia, un podcast américain sur la comédie et la société/culture.
• Pour agréger tous leurs liens vers : les plateformes de podcast, patreon, la boutique de produits dérivés et la sensibilisation des annonceurs.
• En mettant l'accent sur la résolution du problème d'avoir trop de liens dispersés sur les notes de présentation et sur plusieurs plates-formes.

Imaginez que vous écoutez un épisode de votre podcast préféré et qu'en haut de l'émission, les animateurs mentionnent qu'ils viennent de lancer un produit et qu'ils aimeraient que vous le regardiez et que vous en achetiez peut-être, ils disent : "Vérifiez le lien dans les notes de présentation ». Vous cliquez sur les notes de présentation et vous êtes bombardé de liens vers toutes sortes de plateformes que vous reconnaissez et non. Et donc vous êtes submergé et vous cliquez. Ou peut-être que vous regardez et qu'ils ont oublié d'ajouter le lien vers cette nouvelle boutique en ligne avec tous les autres. Il y a beaucoup de hypothèses : erreur humaine, trop de CTA et trop de plateformes pour chacun, liens morts, etc.

Contrairement aux YouTubers, aux influenceurs d'Instagram ou aux gourous de Twitter, les podcasteurs ne sont pas liés à une seule plateforme : ils ratissent large dans les canaux de distribution (Spotify, Apple Podcasts, Google Podcasts, etc.) et trouvent différentes voies de monétisation et de croissance. Ainsi, un CTA lié pourrait s'appliquer à Patreon, aux canaux de médias sociaux, à la notation sur les podcasts Apple, aux réservations de billets de tournée, aux collaborations, et la liste continue.

Alors, quelle est la solution la plus simple à un problème aussi complexe ? Un site Web qui montre tout le travail du podcast en un seul endroit pour que l'auditeur puisse l'explorer, et une seule URL pour que le créateur l'appelle dans l'épisode et le lien dans les notes de l'émission !

A propos de mon projet

J'ai choisi de construire mon projet autour du podcast comique Binchtopia, mieux décrit comme suit :

Si Platon et Aristote avaient des dépendances à Internet et savaient ce qu'était le "gaslighting", ils feraient probablement ce podcast. Les animatrices Julia Hava et Eliza McLamb vous guident à travers notre paysage culturel infernal actuel, partagent des perspectives sociologiques et psychologiques sur la culture pop et déconstruisent tout ce que vous avez toujours aimé. Venez rire avec nous à travers la fin des temps du capitalisme tardif !

— Description du podcast Binchtopia

C'est l'un de mes podcasts de comédie et de société/culture préférés depuis quelques années et j'ai donc pensé que centrer le projet autour de lui ne ferait que le rendre plus riche. Dans le passé, j'ai également eu le plaisir de créer et de co-héberger l'un des meilleurs podcasts commerciaux de l'Inde. J'ai donc senti que j'avais la double perspective de créateur et d'auditeur pour travailler sur ce projet.

Objectifs

Pourquoi le fais-tu?

-Derek Sivers, 'Enfer ouais ou non'

Toutes les décisions de conception prises sur ce projet ont été saisies autour des 3 objectifs les plus importants d'un podcast

1. Flux de monétisation
2. Accroître la portée du podcast
3. Établir une identité

1. À propos du podcast et des hôtes
2. Patréon
3. Derniers épisodes
4. Avis et CTA à revoir sur Apple Podcasts
5. Magasin de marchandises
6. Appel aux annonceurs
7. Bas de page

Commencer

Après avoir défini l'énoncé du problème, j'ai exposé mon processus de conception.

Comme vous le verrez sur cette image, je me réfère effrontément à quelque chose comme « la renaissance ». Alors que les changements de conception via des itérations sont courants, avec ce projet, je me suis retrouvé (temporairement) à abandonner ce projet pour en prioriser d'autres. Plus tard, j'ai revisité cette page Web avec de nouveaux yeux et des compétences de conception aiguisées. Vous remarquerez donc un grand saut dans les visuels et c'est pourquoi (faites défiler jusqu'à la section Visuels pour avoir un aperçu de ce dont je parle).

Recherche sur Binchtopia

À propos

Personnellement, je pense que la description du podcast, tirée de n'importe quelle plate-forme de streaming, résume parfaitement le ton, l'humour, le style, les plaisanteries et le sujet de l'émission.

De plus, un mème vaut mille mots.

Ton du podcast

Lors de la construction ou de l'analyse d'un podcast, le ton est crucial pour l'ensemble de l'émission. C'est l'ambiance, les plaisanteries, l'atmosphère à laquelle on s'attend en entrant dans une fête. Bien que ce soit quelque chose que les hôtes construisent activement, c'est aussi quelque chose qui se développe naturellement au fil du temps.

Mon travail en tant que concepteur consiste à capter les vibrations du podcast afin que les conceptions et l'expérience en soient le reflet. Nous voulons créer l'ambiance de fête parfaite, pas celle dans laquelle vous vous attendez à ce que ce soit une soirée disco et vous vous retrouvez plutôt dans une entreprise hors site. C'est tout pour dire que l'ambiance du site Web doit correspondre à l'ambiance du podcast.

Quelques descripteurs rapides : memey, informé et politique, gen-z humour/drôle, bavard et motivé par les allers-retours entre les co-animateurs, informatif/explicatif/accessible, rend les problèmes sérieux légèrement légers et agréables au goût.

Voici quelques épisodes populaires pour vous donner une idée du contenu et du ton.

Humour/mèmes

En plus d'écouter un épisode, vous pouvez vous faire une idée du ton du podcast grâce aux mèmes qu'ils publient sur leurs réseaux sociaux (principalement Instagram , n'a pas pu accéder à leur TikTok car l'application est interdite en Inde).

Public cible

du podcast

Le public cible de Binchtopia est plutôt féminin, gen-z, des pays du « monde occidental », principalement des États-Unis.

De ce site

1. Les auditeurs qui sont invités à n'importe quel CTA (Patreon, notes, marche, etc.) dans l'épisode. Cela permet d'éliminer toute friction entre le CTA audio et le texte des notes de présentation.
2. Quiconque les recherche sur Google. Actuellement, leur Instagram est la première chose qui apparaît lorsque vous recherchez "Binchtopia" sur Google : rien n'indique qu'il s'agit même d'un podcast.

La pochette est réalisée par la cohorte Julia Hava, qui a déjà parlé d'être inspirée par le style du magazine de mode américain des années 70 et 80.

J'ai rassemblé quelques références sur sa page Instagram où elle fait aussi des mèmes dans ce style.

Comprendre leurs besoins

J'ai supposé les besoins de ce site Web en fonction de leurs principaux CTA (mentionnés dans l'épisode, les notes d'émission, quand et comment ils sont prioritaires) et également en fonction de leurs principales sources de revenus. Comme vous le savez, les podcasts sont libres de consommation afin que les créateurs diversifient leurs offres pour générer un revenu. Et pour les animatrices Julia et Eliza, le podcast est leur travail à plein temps.

• Patreon : avec différents niveaux mensuels, Patreon est la principale source de revenus. Ils offrent différents avantages et du contenu supplémentaire à leurs Patreonites.
• Notes sur les podcasts Apple : la manière la plus efficace pour un podcast de se développer et de gagner un nouveau public est de se baser sur ses notes et ses critiques sur les podcasts Apple. C'est leur CTA secondaire qu'ils mentionnent à chaque épisode
• Merch : ils ont un magasin (avec un fournisseur tiers) qui propose des tasses, des t-shirts, des sweats à capuche et plus encore avec leurs designs originaux.
• Appel aux annonceurs : alors que les publicités sont généralement diffusées via des agences de gestion ou des hébergeurs, les hébergeurs ont parfois des CTA dans les épisodes pour que les auditeurs avec des entreprises puissent contacter directement un spot publicitaire sur n'importe quel épisode.

Explorations

Pour commencer, j'ai rassemblé des références de sites Web de podcasts, de réseaux de podcasts, de podcasteurs avec des sites Web personnels.

Ensuite, j'ai rassemblé des références générales de sites Web de Mobbin, basées sur le style artistique et les mises en page.

Wireframes : papier et HF

J'ai commencé avec quelques wireframes papier pour visualiser les mises en page que j'avais en tête. Ces WF correspondaient à la première version du site que j'avais conçu.

Lorsque j'ai décidé de revoir le design, j'ai créé un nouvel ensemble de wireframes (sur Procreate) pour refléter les nouveaux plans que j'avais pour ce projet.

Visuels

La Renaissance

Au fur et à mesure que je vous guide à travers les conceptions visuelles et les itérations de chaque section du site Web, vous remarquerez une différence dans les itérations.

C'est parce que j'ai commencé cette conception au mois 1 de mon camp d'entraînement sur la conception de produits et que j'ai terminé la conception au mois 3 (le dernier mois) du cours. Ainsi, vous verrez des styles, des philosophies de conception et des compétences modifiés dans les conceptions initiale et finale. J'appelle cela la renaissance, ce qui, je le sais, est spectaculaire, mais bon, l'amélioration de mes compétences en conception est également spectaculaire !

1. Section Héros

Les bases d'une section héros sont les mêmes : une barre de navigation et un texte + image. Concevoir la section héros pour moi essayait de comprendre les mises en page, les sections qui se chevauchent et les bases générales de la conception.

Voici quelques décisions de conception clés que j'ai prises au cours de mes itérations, sur la recommandation de mon mentor en conception.

• Barre de recherche : une de ces choses que j'ai ajoutées par défaut mais dans le contexte de ce site Web, à quoi un utilisateur utiliserait-il la barre de recherche ? Pour trouver des épisodes ? Pour trouver Merch ? Étant donné que le site Web est un guichet unique pour toutes les activités du podcast, il ne semble pas y avoir une seule activité clé ici. J'ai donc décidé de l'abandonner complètement car cela n'avait aucun sens dans le contexte de l'expérience utilisateur.
• Quelle "longueur" doit être l'image : doit-elle occuper une page de défilement complète ? Ou être plus court pour donner un petit aperçu à la section suivante pour un utilisateur qui vient d'atterrir sur la page ? La décision est prise en fonction de l'objectif réel de l'image : ce que j'ai décidé était juste de donner un repère visuel de l'illustration du podcast et rien d'autre.
• Dans cette section, et dans le reste de la première conception du site Web, j'ai eu du mal à faire en sorte que toutes mes pages ressemblent à des diapositives PPT plutôt qu'à des sections de site Web . Bien qu'il n'y ait pas de solution unique pour cela, c'est quelque chose auquel je n'arrêtais pas de penser dans chaque section : comment puis-je travailler avec des images, des icônes, du texte et des CTA pour démolir l'ambiance de présentation ici ?

À partir de cette section, c'est là que la langue de mise en page du site Web doit être établie. Il s'agit du format de titre/sous-titre/texte, du bouton CTA et de l'élément image/vidéo.

3. Patron

Il s'agit d'une section importante car elle contient le CTA moneymaker du site Web. Le CTA dirige l'utilisateur vers la page Web du podcast sur Patreon qui contient les différents niveaux et possède sa propre UX qui mène à un achat. Alors, que doit faire cette section ? C'est pour les amener à cliquer sur la page Patreon et à les rapprocher pour effectuer un achat.

Au lieu de simplement montrer les 4 niveaux Patron différents, ce qui serait redondant puisqu'il est affiché sur la page Patreon actuelle, j'ai décidé de mettre en évidence les avantages d'être un Patron à travers de jolies icônes et des informations sur les avantages.

4. Épisodes

La pierre angulaire de la section des épisodes est bien sûr la carte des épisodes. La première carte que j'ai faite se concentrait sur les deux informations principales d'un épisode : le titre et la description.

Mais bien que ce soient les informations les plus importantes d'un épisode, elles ne suffisent tout simplement pas. De plus, la carte ne faisait pas allusion à ce qu'il s'agissait d'un épisode, plutôt d'un article peut-être ? J'ai donc passé plus de temps à explorer différentes applications de podcasts pour voir quelles autres informations et indices visuels font une carte d'épisode.

Avec des cartes d'épisode répétées, un titre/sous-titre/texte et un bouton CTA, j'ai réorganisé la section.

5. Examinez l'incitation à l'action

Après les abonnements Patreon, les notes sont le deuxième CTA le plus important. Pas seulement pour Binchtopia, mais pour tous les podcasts. Le moyen le plus efficace de développer votre podcast est d'obtenir une critique écrite avec une note sur les podcasts Apple.

Pourquoi les podcasts Apple ?

Apple Podcasts détient le monopole en matière de croissance et de reconnaissance des podcasts. Tous les graphiques des plateformes de podcast sont liés aux graphiques Apple (à l'exception de Spotify qui a construit ses propres graphiques de podcast à partir de 2021). Ces graphiques sont ce qui place votre podcast devant des millions de nouveaux auditeurs et constitue le meilleur pari pour vous de développer votre podcast.

6. Marchandise

Pour les musiciens et les podcasteurs, le merch ou la marchandise est un bon moyen de monétiser. Binchtopia fait fabriquer ses produits par des tiers, hébergés sur leur plateforme. Tout en gardant la production de marchandises avec un tiers mais en gardant la plate-forme d'achat en interne, ils augmenteraient leurs commissions. De plus, cela élimine les pertes de revenus des fans qui pourraient sans le savoir acheter auprès de faux vendeurs sur redbubble.

7. CTA pour les annonceurs

Une source de revenus standard pour les podcasts consiste à avoir des spots publicitaires annoncés dans leurs épisodes. Généralement, ces spots publicitaires sont acquis via le réseau de podcast avec lequel un podcast a signé, un publiciste du créateur ou un réseau publicitaire de podcast tiers.

Les hôtes de Binchtopia ont souvent encouragé les auditeurs avec des entreprises à les contacter directement pour obtenir de l'espace publicitaire. Ce n'est pas une pratique courante, mais cela a permis d'obtenir quelques spots publicitaires dans le passé. J'ai donc décidé d'avoir un CTA pour cela sur la page de destination qui conduirait à un formulaire que l'utilisateur peut remplir et envoyer pour être contacté.

8. Pied de page

Pour le pied de page, j'ai amélioré la conception en trouvant des formats de pied de page standard et en adaptant les informations que je voudrais répéter à partir du site Web dans cette section.

9. Intégration Instagram (section abandonnée)

Dans ma première conception, j'avais pensé à ajouter une section de plugins à leur Instagram, car ils ont un large public et cela continue d'être une plate-forme importante pour la découverte. Mais même si j'aimais l'idée

• Je ne pouvais pas penser à un moyen de l'implémenter s'il s'agissait d'une vraie page Web. Les plug-ins de flux Instagram ne sont pas vraiment courants et
• Cela n'avait aucun sens dans un flux d'utilisateurs pour un utilisateur sur son ordinateur portable de cliquer sur Instagram et de les suivre sur la page.

La page complète

Et voilà, nous avons maintenant la pleine page !

Marge d'amélioration

1. Ce site Web devrait être adapté aux mobiles, car la plupart des podcasts sont écoutés sur des smartphones.
2. Si je devais créer le site Web complet, j'aurais plus d'informations sur les flux et les comportements des utilisateurs qui pourraient améliorer la page d'accueil.
3. Peut passer un peu plus de temps à affiner l'ordre des sections en fonction de l'importance des différents CTA.
4. Peut trouver d'autres façons de donner des extraits du podcast pour intégrer davantage une expérience audio dans la page Web. Actuellement, il n'y a que l'extrait vidéo cliquable dans la section À propos.
5. Bien qu'être un artiste soit un cycle de ramasser un tas de projets et de les abandonner et peut-être de les revisiter, je pense qu'un calendrier plus défini aurait pu améliorer les itérations de ce projet. Je vais utiliser cette leçon pour créer des échéanciers solides pour les projets futurs.

Si vous avez lu jusqu'ici, merci de votre intérêt ! Je suis actuellement ouvert à toutes les opportunités de conception de produits, alors consultez mon portfolio ou DM moi sur Twitter , connectons-nous !

J'aimerais remercier tout particulièrement Jonty Chaki pour avoir été mon mentor en design sur ce projet, ses commentaires en tant que concepteur de produits expérimenté m'ont été extrêmement précieux !

PS : si vous avez aimé mes BD et l' étude de cas , appuyez longuement sur le bouton clap