Przewodnik po tym, jak zaprojektowałem stronę docelową dla podcastu komediowego Binchtopia

Wstęp

Ta strona internetowa była projektem projektowym, który wykonałem w ramach szkolenia z projektowania produktów 10kdesigners .

Opis problemu: zaprojektuj stronę internetową dla twórcy internetowego, która będzie działać jako strona „zacznij tutaj”, która gromadzi informacje w sieci i najlepsze prace w jednym miejscu.

• Postanowiłem zbudować stronę internetową dla Binchtopia, amerykańskiego podcastu komediowego i społeczno-kulturowego.
• Aby agregować wszystkie swoje linki do: platform podcastów, patreon, sklepu z gadżetami i zasięgiem dla reklamodawców.
• Z naciskiem na rozwiązanie problemu zbyt wielu linków rozproszonych po showotekach i wielu platformach.

Wyobraź sobie, że słuchasz odcinka swojego ulubionego podcastu, a na początku programu gospodarze wspominają, że właśnie wypuścili jakiś towar i chcieliby, żebyś to sprawdził i może kupił, mówią: „Sprawdź link w pokazanych materiałach”. Klikasz na pokazywane notatki i jesteś bombardowany linkami do wszelkiego rodzaju platform, które rozpoznajesz i nie. I tak jesteś przytłoczony i klikasz. A może patrzysz, a oni zapomnieli dodać link do tego nowego sklepu internetowego wraz ze wszystkimi innymi. Istnieje wiele „co by było, gdyby”: błąd ludzki, zbyt wiele wezwań do działania i zbyt wiele platform dla każdej z nich, martwe linki itp.

W przeciwieństwie do YouTuberów, influencerów z Instagrama czy guru z Twittera, podcasterzy nie są związani z jedną platformą: szeroko zarzucają sieć w kanałach dystrybucji (Spotify, Apple Podcasts, Google Podcasts itp.) i znajdują różne możliwości zarabiania i rozwoju. Tak więc połączone wezwanie do działania może dotyczyć Patreon, kanałów mediów społecznościowych, ocen w Apple Podcasts, rezerwacji biletów na wycieczki, współpracy, a lista jest długa.

Jakie jest najprostsze rozwiązanie tak złożonego problemu? Witryna, która pokazuje całą pracę podcastu w jednym miejscu, aby słuchacz mógł ją przeglądać, oraz jeden adres URL, który twórca może wywołać w odcinku i link do niego w notatkach do programu!

O moim projekcie

Zdecydowałem się zbudować mój projekt wokół komediowego podcastu Binchtopia, najlepiej opisanego jako:

Gdyby Platon i Arystoteles byli uzależnieni od internetu i wiedzieli, czym jest „gaslighting”, prawdopodobnie stworzyliby ten podcast. Gospodarze, Julia Hava i Eliza McLamb, przeprowadzą cię przez nasze obecne kulturowe piekło, podzielą się socjologicznym i psychologicznym spojrzeniem na popkulturę i zdekonstruują wszystko, co kiedykolwiek kochałeś. Chodź, śmiej się z nami w czasach końca późnego kapitalizmu!

— Opis podcastu Binchtopia

Od kilku lat jest to jeden z moich ulubionych podcastów dotyczących komedii i społeczeństwa/kultury, więc pomyślałem, że skupienie wokół niego projektu tylko go wzbogaci. W przeszłości miałem również przyjemność tworzenia i współprowadzenia jednego z najlepszych podcastów biznesowych w Indiach, więc czułem, że mam podwójną perspektywę twórcy i słuchacza do pracy nad tym projektem.

Cele

Dlaczego robisz?

-Derek Sivers, „Do diabła, tak lub nie”

Wszelkie decyzje projektowe podjęte w tym projekcie zostały wprowadzone wokół 3 najważniejszych celów podcastu

1. Strumienie monetyzacji
2. Zwiększanie zasięgu podcastu
3. Ustalenie tożsamości

1. O podcaście i prowadzących
2. Patreon
3. Najnowsze odcinki
4. Recenzje i wezwania do recenzji w Apple Podcasts
5. sklep handlowy
6. Wezwanie dla reklamodawców
7. Stopka

Pierwsze kroki

Po zdefiniowaniu problemu przedstawiłem proces projektowania.

Jak zobaczysz na tym obrazku, bezczelnie nazywam coś „renesansem”. Podczas gdy zmiany w projekcie poprzez iteracje są powszechne, w przypadku tego projektu (tymczasowo) porzuciłem ten projekt, aby nadać priorytet innym. Później ponownie odwiedziłem tę stronę ze świeżym, nowym spojrzeniem i wyostrzonymi umiejętnościami projektowania. Zauważysz więc duży skok w grafice i dlatego (przewiń do sekcji Wizualizacje, aby zobaczyć, o czym mówię).

Badania nad Binchtopią

O

Osobiście uważam, że opis podcastu, ściągnięty z dowolnej platformy streamingowej, doskonale oddaje ton, humor, styl, przekomarzanie się i tematykę programu.

Poza tym mem jest wart tysiąca słów.

Ton podcastu

Podczas budowania lub analizowania podcastu ton ma kluczowe znaczenie dla całego programu. To klimat, przekomarzanie się, atmosfera, której oczekuje się wchodząc na imprezę. Chociaż jest to coś, co gospodarze aktywnie budują, jest to również coś, co naturalnie rozwija się z czasem.

Moim zadaniem jako projektanta jest wychwytywanie wibracji podcastu, tak aby projekty i doświadczenie były ich odzwierciedleniem. Chcemy stworzyć idealną imprezową atmosferę, a nie taką, w której spodziewasz się, że będzie to noc dyskotekowa, a zamiast tego znajdziesz się poza siedzibą firmy. To wszystko, klimat witryny powinien pasować do klimatu podcastu.

Niektóre krótkie deskryptory: meme, poinformowany i polityczny, humor gen-z/zabawny, gadatliwy i napędzany przez tam i z powrotem między współgospodarzami, informacyjny/wyjaśniający/przystępny, sprawia, że ​​poważne kwestie są lekko beztroskie i przyjemne.

Oto kilka popularnych odcinków, które dają wyobrażenie o treści i tonie.

Humor/memy

Poza samym słuchaniem odcinka, możesz zorientować się w tonie podcastu dzięki memom, które publikują w swoich mediach społecznościowych (głównie na Instagramie , nie był w stanie uzyskać dostępu do ich TikTok, ponieważ aplikacja jest zakazana w Indiach).

Grupa docelowa

Z podcastu

Grupa docelowa Binchtopii skupia się na kobietach z pokolenia Z, pochodzących z krajów „zachodniego świata”, głównie ze Stanów Zjednoczonych.

tej witryny

1. Słuchacze, którzy są proszeni o wezwanie do działania (Patreon, oceny, marsz itp.) w odcinku. Ma to na celu wyeliminowanie wszelkich tarć między dźwiękiem wezwania do działania a tekstem pokazanych notek.
2. Każdy, kto je wygoogluje. Obecnie ich Instagram jest pierwszą rzeczą, która pojawia się, gdy wpiszesz w Google „Binchtopia”: nic nie wskazuje na to, że to nawet podcast.

Okładkę wykonała kohorta Julia Hava, która wcześniej mówiła o inspirowaniu się stylem amerykańskiego magazynu modowego z lat 70. i 80.

Zebrałem kilka referencji z jej strony na Instagramie, gdzie również tworzy memy w tym stylu.

Zrozumienie ich potrzeb

Przyjąłem potrzeby tej witryny na podstawie ich głównych wezwań do działania (wymienionych w odcinku, w notatkach do programu, kiedy i jak są traktowane priorytetowo), a także na podstawie tego, jakie są ich główne źródła dochodu. Jak wiesz, podcasty można konsumować za darmo, więc twórcy dywersyfikują swoją ofertę, aby przynosić dochód. A dla gospodarzy Julii i Elizy podcast to praca na pełen etat.

• Patreon : z różnymi miesięcznymi progami Patreon jest głównym źródłem dochodu. Oferują swoim Patreonitom różne korzyści i dodatkowe treści.
• Oceny w Apple Podcasts : najbardziej wpływowym sposobem na rozwój podcastu i zdobycie nowych odbiorców są jego oceny i recenzje w Apple Podcasts. To jest ich dodatkowe wezwanie do działania, o którym wspominają w każdym odcinku
• Merch : mają sklep (z zewnętrznym dostawcą), który ma kubki, koszulki, bluzy z kapturem i wiele innych z ich oryginalnymi projektami.
• Wezwanie do reklamodawców : podczas gdy zwykle reklamy są tworzone przez agencje zarządzające lub dostawców hostingu, gospodarze czasami mają wezwania do działania w odcinkach, aby słuchacze z firmami mogli bezpośrednio dotrzeć do miejsca reklamowego w dowolnym odcinku.

Eksploracje

Na początek zebrałem referencje ze stron podcastów, sieci podcastów, podcasterów z osobistymi stronami internetowymi.

Następnie zebrałem ogólne referencje stron internetowych Mobbin, oparte na stylu graficznym i układach.

Modele szkieletowe: papierowe i HF

Zacząłem od kilku papierowych szkieletów, aby zwizualizować układy, które miałem na myśli. Te WFy odpowiadały pierwszej wersji strony, którą zaprojektowałem.

Kiedy zdecydowałem się ponownie przyjrzeć projektowi, stworzyłem nowy zestaw makiet (na Procreate), aby odzwierciedlić nowe plany, jakie miałem dla tego projektu.

Wizualizacje

Renesans

Gdy przeprowadzę Cię przez projekty wizualne i iteracje każdej sekcji witryny, zauważysz różnicę w iteracjach.

To dlatego, że po raz pierwszy zacząłem ten projekt w pierwszym miesiącu mojego szkolenia z projektowania produktów i ukończyłem projekt w trzecim miesiącu (ostatnim miesiącu) kursu. Zobaczysz więc zmienione style, filozofie projektowania i umiejętności w pierwszych i końcowych projektach. Nazywam to renesansem, który wiem, że jest dramatyczny, ale hej, poprawa moich umiejętności projektowych jest również dramatyczna!

1. Sekcja Bohaterów

Podstawy sekcji bohatera są takie same: pasek nawigacyjny i tekst + obraz. Projektowanie sekcji dla bohaterów polegało na próbie ustalenia układów, tego, które sekcje się pokrywają i ogólnych podstaw projektowania.

Oto kilka kluczowych decyzji projektowych , które podjąłem podczas moich iteracji, na podstawie rekomendacji mojego mentora projektowego.

• Pasek wyszukiwania : jedna z tych rzeczy, które dodałem domyślnie, ale w kontekście tej witryny, do czego użytkownik użyłby paska wyszukiwania? Aby znaleźć odcinki? Znaleźć Mercha? Ponieważ witryna jest punktem kompleksowej obsługi wszystkich działań związanych z podcastem, wydaje się, że nie ma tu jednej kluczowej czynności. Postanowiłem więc całkowicie go wyrzucić, ponieważ nie miało to sensu w kontekście doświadczenia użytkownika.
• Jak „długi” powinien być obraz : czy powinien zajmować całą przewijaną stronę? A może być krótszy, aby dać mały szczyt następnej sekcji dla użytkownika, który właśnie wylądował na stronie? Decyzja jest podejmowana na podstawie tego, do czego tak naprawdę służy obraz: zdecydowałem, że to tylko wizualna wskazówka grafiki podcastu i nic więcej.
• W tej sekcji i w pozostałej części pierwszego projektu witryny zmagałem się z tym, aby wszystkie moje strony wyglądały jak slajdy PPT, a nie sekcje witryny . Chociaż nie ma na to jednego uniwersalnego rozwiązania, w każdej sekcji myślałem o tym: jak pracować z obrazami, ikonami, tekstem i wezwaniami do działania, aby zniszczyć atmosferę prezentacji?

Od tej sekcji należy ustalić język układu witryny. To jest nagłówek/podtytuł/format tekstu, przycisk wezwania do działania i element obrazu/wideo.

3. Patreon

Jest to ważna sekcja, ponieważ zawiera wezwanie do działania dla zarabiającego pieniądze na stronie internetowej. Wezwanie do działania prowadzi użytkownika do strony internetowej podcastu na Patreonie, która zawiera różne poziomy i ma własny interfejs użytkownika, który prowadzi do zakupu. Co więc musi zrobić ta sekcja? Ma to zachęcić ich do kliknięcia na stronę Patreona i przybliżenia ich do zakupu.

Zamiast po prostu pokazywać 4 różne poziomy Patronów, co byłoby zbędne, ponieważ są wyświetlane na rzeczywistej stronie Patreona, postanowiłem podkreślić korzyści płynące z bycia Patronem za pomocą uroczych ikon i informacji o bonusach.

4. Odcinki

Elementem budulcowym sekcji odcinków jest oczywiście karta odcinka. Pierwsza karta, którą zrobiłem, skupiała się na dwóch głównych informacjach o odcinku: tytule i opisie.

Ale chociaż są to najważniejsze informacje o odcinku, po prostu nie wystarczą. Poza tym karta nie nawiązywała do tego, że jest to odcinek, a może bardziej artykuł? Spędziłem więc trochę więcej czasu na przeglądaniu różnych aplikacji do podcastów, aby zobaczyć, jakie inne informacje i wskazówki wizualne składają się na kartę odcinka.

Z powtarzającymi się kartami odcinków, nagłówkiem/podtytułem/tekstem i przyciskiem CTA ponownie ułożyłem sekcję.

5. Przejrzyj wezwanie do działania

Po subskrypcjach na Patreonie oceny są drugim najważniejszym wezwaniem do działania. Nie tylko dla Binchtopii, ale dla wszystkich podcastów. Najbardziej wpływowym sposobem na rozwój podcastu jest uzyskanie pisemnej recenzji z oceną w podcastach Apple.

Dlaczego podcasty Apple?

Apple Podcasts ma monopol, jeśli chodzi o wzrost i rozpoznawalność podcastów. Wykresy wszystkich platform podcastów są powiązane z wykresami Apple (z wyjątkiem Spotify, który stworzył własne wykresy podcastów od 2021 r.). Te listy przebojów są tym, co stawia Twój podcast przed milionami nowych słuchaczy i jest najlepszym sposobem na rozwój podcastu.

6. Towar

Zarówno dla muzyków, jak i twórców podcastów gadżety reklamowe to dobry sposób na zarabianie. Binchtopia ma swoje towary wykonane przez strony trzecie, hostowane na ich platformie. Utrzymując produkcję towarów z firmą zewnętrzną, ale utrzymując platformę zakupową we własnym zakresie, zwiększyliby swoje prowizje. Ponadto eliminuje to utracone dochody od fanów, którzy mogą nieświadomie kupować od fałszywych sprzedawców na redbubble.

7. Wezwania do działania dla Reklamodawców

Standardowym strumieniem przychodów dla podcastów są reklamowane miejsca reklamowe w ich odcinkach. Zazwyczaj te spoty reklamowe są pozyskiwane za pośrednictwem sieci podcastów, z którą podcast jest podpisany, publicysty twórcy lub zewnętrznej sieci reklamowej podcastów.

Gospodarze Binchtopii często zachęcali słuchaczy z firmami do bezpośredniego kontaktu z nimi w sprawie powierzchni reklamowej. Nie jest to powszechna praktyka, ale w przeszłości pomogło im zapewnić im kilka miejsc reklamowych. Zdecydowałem się więc umieścić CTA na stronie docelowej, które prowadziłoby do formularza, który użytkownik może wypełnić i wysłać, aby się z nim skontaktować.

8. Stopka

W przypadku stopki poprawiłem projekt, znajdując kilka standardowych formatów stopki i dostosowując informacje, które chciałbym powtórzyć ze strony internetowej w tej sekcji.

9. Integracja z Instagramem (opuszczona sekcja)

W moim pierwszym projekcie myślałem o dodaniu sekcji wtyczek do ich Instagrama, ponieważ mają wielu obserwujących i nadal jest to ważna platforma do odkrywania. Ale podczas gdy podobał mi się ten pomysł

• Nie mogłem wymyślić sposobu, w jaki mógłbym to zaimplementować, gdyby to była prawdziwa strona internetowa. Wtyczki do kanałów na Instagramie nie są zbyt powszechne i
• W przepływie użytkowników nie miało sensu, aby użytkownik na swoim laptopie klikał na Instagramie i obserwował ich stronę.

Pełna strona internetowa

Et voila, mamy teraz pełną stronę!

Miejsce na udoskonalenie

1. Ta witryna musiałaby być dostosowana do urządzeń mobilnych, ponieważ większość podcastów jest słuchana na smartfonach.
2. Gdybym miał zbudować pełną stronę internetową, uzyskałbym więcej wglądu w przepływy i zachowania użytkowników, które mogłyby ulepszyć stronę główną.
3. Może poświęcić trochę więcej czasu na doprecyzowanie kolejności sekcji w oparciu o znaczenie różnych wezwań do działania.
4. Potrafi znaleźć więcej sposobów udostępniania fragmentów podcastu, aby zintegrować więcej wrażeń dźwiękowych ze stroną internetową. Obecnie w sekcji Informacje znajduje się tylko fragment wideo, który można kliknąć.
5. Chociaż bycie artystą to cykl zbierania wielu projektów i porzucania ich, a być może ponownego odwiedzania ich, czuję, że bardziej określony harmonogram mógłby poprawić iteracje tego projektu. Wykorzystam tę lekcję do stworzenia solidnych ram czasowych dla przyszłych projektów.

Jeśli doczytałeś do tego miejsca, dziękuję za zainteresowanie! Obecnie jestem otwarty na wszelkie możliwości projektowania produktów, więc sprawdź moje portfolio lub napisz do mnie na Twitterze , połączmy się!

Chciałbym szczególnie podziękować Jonty'emu Chaki za bycie moim mentorem projektowym w tym projekcie, jego opinie jako doświadczonego projektanta produktu były dla mnie niezwykle cenne!

PS: jeśli podobały Ci się moje komiksy i studium przypadku , naciśnij długo przycisk klaskania