October 23, 2019

Redesigned Podcast Page

Courtland Allen @csallen

We're changing up our email strategy, and going forward different parts of the site will have their own unique newsletters, including the podcast.

I wanted to update the podcast page to call more attention to the "sign up for the podcast newsletter" box, but I got a bit carried away and ended up redesigning the entire page.

The old version is on the left, and the new one is on the right:

Podcast Page Redesign

This definitely isn't the end for the podcast page. I have future plans to make it a bit more usable, including:

  • some filtering features
  • ability to play an episode directly from the list
  • possibly replacing the verbose descriptions with prominent quotes, so it's easier to skim the list and find appealing episodes
  1. 2

    that subscribe form field is HOT.

  2. 2

    Looks sweet. Never seen a button designed like that before.

    You already sell the value really nicely with the arrow and accompanying text. So I'd go with simpler CTA. I think "Stay smart" adds unnecessary friction. Joanna Weibe explains this really nicely:

    ctv

    1. 1

      Good find, that's a great way to think about it.

  3. 1

    Looks really cool. But what is the purpose of such screaming sizes for photos and arrows? I vote for the old size.

    Please, decode the "E" letter for the episodes, you can write the entire "episode" with a small font below the number.

  4. 1

    Courtland, where/how did you learn UI/UX design? Got any recommended sources?

    1. 1

      In the early days, lots of copying better-looking sites and trying to get mine to look as good as theirs, but different. Lots of trial and error.

      Today it's still lots of trial and error. The new podcast page looked like garbage for quite a while as I was designing it. I kept tweaking various elements of it until they looked good, which for me is basically just randomly guessing.

      It's actually quite a frustrating and confidence-shaking experience every time, but if I stick with it for numerous hours, eventually I guess right and can move on to designing the next section…

      1. 1

        That's pretty cool to hear the backstory of the design. I've always thought of IndieHackers as an example of great design, I assumed you were a veteran designer (or maybe even hired a designer).

        1. 1

          I've been doing this trial-and-error designing for 20 years now so I'm somewhat of a vet I suppose

  5. 1

    Looking good!

    Would love to play episodes natively on the page as you mentioned in the road map.

  6. 1

    Looks great.

    Some notes + things I would consider:

    1. I really like the background with all of the profiles. Would it work if you made it a bit less transparent so that we can recognize some of the faces more? Not sure if that would make it too busy, though.

    ---

    1. The colored box-shadow on the email entry box is a bit too much visually and the crooked text underneath also competes for my attention. I think the page-break and white on blue color contrast already do a great job of bringing our attention to signing up.

    ---

    1. Adding the number of subscribers -- I would guess it's a high number + good for social proof.

    ---

    1. Adding user testimonials about why users like the show / what benefit they get from the show.

    Better yet, I think since you have such good engagement with your listeners, you could probably run a poll and ask users what they like about the show and then have some %'s there

    "we asked our listeners:"

    96%
    learn something new every week

    91%
    listen to every episode

    80%
    have gotten extreme value out of the lessons shared in the podcast

    You could also show raw numbers if you think those would also provide social proof.

    ---

    1. Adding links to the most listened to podcasts first (probably some name value to those interviews that might tip the scale to subscribing).

    ---

    1. I agree that the podcast descriptions are a bit text-heavy. I think bullet points would help this a lot.

    An example: https://imgur.com/a/KMSzhzc

    ---

    Cheers & great job

    1. 1

      Thanks for the feedback, good points!

  7. 1

    Looks great. I like the focus on collecting emails, which seems rare for podcast sites/pages.

    I already listen to the podcast, but I just subscribed to the newsletter - interested in seeing in what kind of supplemental content you send out 👍🏽

  8. 1

    Looks great Courtland! I always enjoy your designs, awesome job!

      1. 1

        Your welcome. You have 8 notifications!

  9. 1

    The top background section with the faces looks really good. Do you do the design yourself or do you contract that out?

    1. 2

      I do all my design in HTML/CSS. So for that grid, I just tweaked the CSS for all the episodes to hide their text and only show the faces. Then I took a screenshot of the grid, made it blue, and set it as the background of the header.

  10. 2

    This comment was deleted 8 months ago.

    1. 2

      Yeah I felt the same when designing it, hence my bullet point about replacing the verbose descriptions with quotes. One day…