Redesigned Podcast Page
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:
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
that subscribe form field is HOT.
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:
Good find, that's a great way to think about it.
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.
Courtland, where/how did you learn UI/UX design? Got any recommended sources?
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…
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).
I've been doing this trial-and-error designing for 20 years now so I'm somewhat of a vet I suppose
Looking good!
Would love to play episodes natively on the page as you mentioned in the road map.
Looks great.
Some notes + things I would consider:
---
---
---
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.
---
---
An example: https://imgur.com/a/KMSzhzc
---
Cheers & great job
Thanks for the feedback, good points!
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 👍🏽
Looks great Courtland! I always enjoy your designs, awesome job!
Looks amazing!
Thanks!
Your welcome. You have 8 notifications!
The top background section with the faces looks really good. Do you do the design yourself or do you contract that out?
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.
This comment was deleted 8 months ago.
Yeah I felt the same when designing it, hence my bullet point about replacing the verbose descriptions with quotes. One day…