Posts

Today’s episode is a little different. We are going to talk about the importance of building a great podcast home page, and the role it plays in promoting your podcast.

Podcast Homepage Design Patterns

Let me apologize in advance: Talking about podcast homepage design patterns is a mostly visual exercise. It you are listening and not able to see the video and the show notes, I’ll try my best to verbally explain the page layout elements as we go through.

But the episode features a YouTube video where you can see the visual bits explained in detail, and I’d encourage you to watch it above.

What we are talking about is a highly converting podcast homepage design pattern called “The Upside Down Podcast Home Page” – optimized to create a guided experience for your site visitors, and to encourage them to subscribe to your podcast via email. The video covers 2 versions of this – a more complete version for established podcasts with multiple seasons or topics, and a simple version for new podcast sites with a narrow niche and a focused audience.

But first I want to outline the reasons behind focusing on email list building instead of on iTunes rank and “New and Noteworthy” presence. I get asked about this a lot, especially by “podcasting purists” and “old school” podcasters who are experienced and may already have a solid audience and following. For them, understandably, the primary goal is to serve listeners on iTunes.

Why Podcast Homepage Design Should Focus On Email List Building instead of iTunes Subscribers

The holy grail of podcasting is to get iTunes Subscribers, right? And to get into the “New and Noteworthy” charts, right? And so podcast homepage design should focus on getting visitors to your site to subscribe on iTunes, right?

Well, not from my point of view. For a number of reasons: The iTunes podcast ranking algorithm as well as the “New and Noteworthy” charts are seriously broken at the time of this writing. The top 200 podcasts are being gamed and exploited, and are full of entries who are paying thousands of dollars to overseas click farms for instant presence in the top charts. This is not just my opinion, but has been extensively covered in the podcast news beats. If you want to see a comprehensive video explaining how this is the case, and what the impact on the iTunes ecosystem is, just watch this video by Lime Link.

So why design your podcast website to get people to subscribe on iTunes, when you could be getting people to subscribe to your podcast via email notifications?

I would gladly trade 1,000 iTunes subscribers for 100 podcast email notification subscribers.

Email list building sounds like such a trite concept, but even today it is still one of the most valuable assets your business can build. The fact is that you can provide your audience with more valuable context, and you get to better position your episodes through the email notifications you send. Should you still encourage your listeners to subscribe on iTunes, Google Play or Stitcher? Of course, but it is better to do so after they have opted in via email.

The Inbound Philosophy of the “Upside Down Podcast Homepage” Design Pattern

“Conversion Optimization” is such a crass term. Sounds vaguely exploitative, like you are somehow tricking or taking advantage of your audience.

Let me try and debunk that.

The “Upside Down Podcast Homepage” design pattern is intended to better serve your audience.

It is meant to create a better experience for them. It is based on empathy with your audience. Your podcast homepage design should be intended to help your audience discover your best and most relevant content. Content that resonates the most with their own situation and listening goals, and is also what you are most proud of.

Creating a Guided Experience

And so, the intention is to create a guided experience for your visitors. This means hiding distractions, and reducing some of the options that some visitors may be accustomed to. For example, the presence of a comprehensive menu with lots of choices at the top of the page. Or buttons to jump off to iTunes and Stitcher where they can simply subscribe. From a UX perspective, you may think these make it easier for your visitors, when in fact they can create cognitive friction, overwhelm, and too many choices.

The idea is not to make it “harder” for your visitors to find these links, but to simply guide them on a journey to better understanding your topic, how your podcast addresses their own needs, and how best to stay connected with your content.

None of this can happen if you “make it easy” for your site visitors by placing a “Subscribe on iTunes” button on the top of your site. That just sends them straight to the iTunes store, where they will see a homogenized list of episodes with no context, no background story, no differentiation between one episode and the next.

The subscribe on iTunes links are still there, of course, but placed near the bottom of the page. This means as your visitors scroll through your podcast website, you have the chance to encourage them to discover your content and subscribe to your show via email.

And this is where “Pilot Stories” come in. But first, let’s walk through the upside down podcast home page design one section at a time:

Again, apologies for the visual nature of this, but what follows will talk through a number of website design elements called “page sections”. These are the building blocks of modern web design. They can be thought of as horizontal bands of grouped content. Most of us are familiar with websites that have a “Header” or “Above the Fold” or “Hero” page section. Well, there are other less prominent sections as well, and we’ll talk through each one involved in the “Upside Down Podcast Homepage” pattern.

The “Above The Fold” Section

Above the fold is defined as

positioned in the upper half of a web page and visible without scrolling down the page.

The above the fold section is the first thing that creates an impression when we visit a site. It is often where we find a “Header” or “Hero Image”. The top of the page should be dedicated to one thing: getting people to sign up to your podcast via email.

The Upside Down Podcast Website Design Pattern - Above The Fold
The Upside Down Podcast Homepage Design Pattern – Above The Fold

Look Ma, No Menu: This is what makes it an “upside down” page. Menu links are moved to the footer instead. If you must have menu items, limit them to 3-5.

Showing Face: Showing a face above the fold increases conversions, trust, engagement

Call To Action: Deliver a solid call to action above the fold, but make sure this is NOT an iTunes button.

Social Proof Section

The social proof band establishes you’re not a weirdo, and if possible outlines your best reviews, or that your podcast was in the top 100, or that you’ve been featured elsewhere, including on TV, or even if you’ve appeared on other podcast shows. It is often implemented as a set of light grey logos where you might have been featured, or can include testimonials from your guests. The design reason for “greyed out” logos are that they are a more humble brag, and less likely to visually compete with the design of your site.

The Upside Down Podcast Website Design Pattern - Social Proof Section
The Upside Down Podcast Homepage Design Pattern – Social Proof Section

In our video, notice the design treatment for this section.

The Roadmap Section

The roadmap section provides an multiple choice on-ramp to let your site visitors self-select their journey through your content. It is most often designed as a section with a set of columns or content boxes with an icon, a headline, short description and a button to find out more.

It provides an “at a glance” overview of your podcast’s content, while at the same time encouraging your visitors to select what they are most interested in. Clicking on your road map section represents a sort of “micro-commitment” to further engage with your content.

The Upside Down Podcast Website Design Pattern - Roadmap Section
The Upside Down Podcast Homepage Design Pattern – Roadmap Section

A good example of a roadmap would be for guiding your site visitors through multiple seasons of your podcast. Each season would have a title, a description, and a button to find out more about it. A click on each button triggers a smooth scroll down the page to a pilot story section, which further explains the season and offers some of its best content. This sort of self selective exploration of your content allows your visitors to find what they want as well as stay on your site.

SEO Tip: For extra credit, implement a WordPress plugin called “Reduce Bounce Rate“, which communicates with Google Analytics and records scroll movements. In our tests we have observed improvement in bounce rate from the 80s to the 30s.

The Role of Pilot Stories in Podcast Homepage Design

As covered in our video, there are multiple ways in which pilot stories function within your podcast homepage design to highlight your very best best content.

The Upside Down Podcast Website Design Pattern - Pilot Story Section
The Upside Down Podcast Homepage Design Pattern – Pilot Story Section

If you have a single and focused niche you may only need a single pilot story. But if your podcast homepage design is intended to offer multiple categories of content, or multiple seasons, then you can add “Pilot Story” sections for each.

For listeners unable to see the illustrations in our show notes, the pilot story section features not only the headline and compelling description, but also a mini grid of your best episodes on the related topic. Our own design approach is to split this page section vertically, with the pilot story on one side, and a mini episode grid on the other side.

This allows you to highlight your best content, instead of hiding it deep inside your site. Use Google analytics to identify the best and most popular episodes from the past, and then feature them here.

Pilot Story Section For Seasons

For people with seasonal shows, these sections can tell the story of each season.

  • Having a section for each season provides you with a chance to outline the value proposition of listening to each season.
  • It also lets you highlight the best and most popular episodes, and allows people to jump to the show notes pages for each episode that resonates with them.

Pilot Story Section For Topic Categories

Another way to position the pilot story sections is to categorize your content. Does your podcast offer advice, or tips? If so, chances are that your episodes fall into multiple categories of advice and tips.

  • You can develop a “Pilot Story” for each category, and highlight the best episodes for each.

Your Pilot Story’s Call To Action

One thing all pilot stories have in common is that they offer you the chance to highlight your best content. And it also provides you with the opportunity to offer your audience a call to action. What is it you want them to do?

Don’t miss any new episodes…

The simplest way to implement this is to simply offer a way to subscribe to email notifications as a way to stay connected with your show.

A more advanced call to action provides additional incentives to your audience.

For an example of this, see season 2 of the Positivity Strategist Podcast.

Podcast Website Design Example of a Call To Action
Podcast Website Design Example of a Season And Call To Action

This podcast season talks about “Seven new literacies for living and leading in our times”, and the gift being offered for people to subscribe to the show is a “7 Literacies Guide” to go along with listening to the season.

Associating your podcast homepage with strong calls to action also allows for utilizing paid ads and post boosts on Facebook and other platforms. And, make sure your podcast episode files use Facebook correctly and link to your show notes pages rather than to iTunes.

Podcast Subscription Links Section

Finally, here is the section about how to subscribe on iTunes or other podcast directories. This appears right at the top of the podcast home page in too many podcast homepage designs.

The reason for placing this further down is this: By the time that people scroll to this section, your pilot stories have had ample time to communicate the benefits of signing up via email.

The Upside Down Podcast Website Design Pattern - iTunes Links Section
The Upside Down Podcast Homepage Design Pattern – iTunes Links Section

Minor tip: If you use the icons and graphics provided by each podcast platform, consider adding text explanations under each graphic. Your readers might not recognize each graphic.

The Episode Grid Section

The Upside Down Podcast Website Design Pattern - Episode Grid
The Upside Down Podcast Homepage Design Pattern – Episode Grid

Like the iTunes links, your complete episode grid is purposefully moved towards the bottom of the page layout. This  so people are likely more likely to scroll and discover the highlighted episodes in the “Pilot Story” sections above.

The Navigation Footer

This is what makes this home page “upside-down.”

The Upside Down Podcast Website Design Pattern - Episode Grid
The Upside Down Podcast Homepage Design Pattern – Episode Grid

Most websites have their navigation at the very top of the page, but moving it to the bottom of the page, we have increased focus and conversions.

Conclusion and Examples

We use this design pattern on a number of pages ourselves. And this design pattern is obviously not limited to podcasting websites and homepages. Here are some examples we built for a clients in different industries:

Additional Downloadable Resources

If you are interested in a downloadable PDF version of this design pattern as featured and covered in the video with all the annotations and explanations, please click here to sign up for our podcasting resources guide, which features a PDF version of the entire design pattern with lots of implementation notes.

WordPress Ready Made Podcast Home Page Download

Also, I am creating a “Done For You” version of this design pattern, ready to install on any WordPress site, let me know if that is something you would want in the comments.

This video walk through outlines a highly converting podcast website design pattern called “The Upside Down Podcast Home Page” – optimized to create a guided experience for your site visitors, and to encourage them to subscribe to your podcast via email.

A video walk-through tour of the “Upside Down Podcast Home Page” design pattern

The video covers 2 versions of this – a more complete version for established podcasts with multiple seasons or topics, and a simple version for new podcast sites with a narrow niche and focused audience. In this post I want to outline the reasons behind focusing on email list building instead of obsessing about iTunes rank and “New and Noteworthy”.

Why Podcast Website Design Should Focus On Email List Building instead of iTunes Subscribers

The holy grail of podcasting is to get iTunes Subscribers, right? And to get into the “New and Noteworthy” charts, right? And so podcast website design should focus on getting visitors to your site to subscribe on iTunes, right?

Wrong, in my opinion. The iTunes podcast ranking algorithm, as well as the “New and Noteworthy” charts, are seriously broken at the time of this writing. The top 200 podcasts are being gamed and exploited, and are full of entries who are paying thousands of dollars to overseas click farms for instant presence in the top charts. This is not just my opinion, but has been extensively covered in the podcast news beats. If you want to see a comprehensive video explaining how this is the case, and what the impact on the iTunes ecosystem is, just watch this video by Lime Link.

So why design your podcast website to get people to subscribe on iTunes, when you could be getting people to subscribe to your podcast via email notifications?

I would gladly trade 1,000 iTunes subscribers for 100 podcast email notification subscribers.

Email list building sounds like such a trite concept, but even today it is still one of the most valuable assets your business can build. The fact is that you can provide your audience with more valuable context, and you get to better position your episodes through the email notifications you send. Should you still encourage your listeners to subscribe on iTunes, Google Play or Stitcher? Of course, but it is better to do so after they have opted in via email.

For a comprehensive guide on “How To Promote A Podcast”, click here for the best podcast promotion strategies.

The Inbound Philosophy of the “Upside Down Podcast Home Page” Design Pattern

“Conversion Optimization” is such a crass term. Sounds vaguely exploitative, like you are somehow tricking or taking advantage of your audience.

Let me try and debunk that.

The “Upside Down Podcast Homepage” design pattern is intended to better serve your audience.

It is meant to create a better experience for them. It is based on empathy with your audience. Your podcast website design should be intended for your audience to discover your best and most relevant content. Content that resonates the most with their own situation and listening goals, and also is what you are most proud of.

Creating a Guided Experience

And so, the intention is to create a guided experience for your visitors. This means hiding distractions, and reducing some of the options that some visitors may be accustomed to. For example, the presence of a comprehensive menu with lots of choices at the top of the page. Or buttons to jump off to iTunes and Stitcher where they can simply subscribe. From a UX perspective, you may think these make it easier for your visitors, when in fact they can create cognitive friction, overwhelm, and too many choices.

The idea is not to make it “harder” for your visitors to find these links, but to simply guide them on a journey to better understanding your topic, how your podcast addresses their own needs, and how best to stay connected with your content.

None of this can happen if you “make it easy” for your site visitors by placing a “Subscribe on iTunes” button on the top of your site. That just sends them straight to the iTunes store, where they will see a homogenized list of episodes with no context, no background story, no differentiation between one episode and the next.

The subscribe on iTunes links are still there, of course, but placed near the bottom of the page. This means as your visitors scroll through your podcast website, you have the chance to encourage them to discover your content and subscribe to your show via email.

And this is where “Pilot Stories” come in. But first, let’s walk through the upside down podcast website design one section at a time:

Above The Fold

The top of the page is dedicated to one thing: getting people to sign up to your podcast via email.

The Upside Down Podcast Website Design Pattern - Above The Fold
The Upside Down Podcast Website Design Pattern – Above The Fold

Look Ma, No Menu: This is what makes it an “upside down” page. Menu links are moved to the footer instead. If you must have menu items, limit them to 3-5.

Showing Face: Showing a face above the fold increases conversions, trust, engagement

Call To Action: Deliver a solid call to action above the fold, but make sure this is NOT an iTunes button.

Social Proof

The social proof band establishes you’re not a weirdo, and if possible outlines your best reviews, or that your podcast was in the top 100, or that you’ve been featured elsewhere, including on TV, or even if you’ve appeared on other podcast shows.

The Upside Down Podcast Website Design Pattern - Social Proof Section
The Upside Down Podcast Website Design Pattern – Social Proof Section

In our video, notice the design treatment for this section.

Roadmap

The roadmap section provides an on-ramp to let your site visitors self-select their journey through your content.

The Upside Down Podcast Website Design Pattern - Roadmap Section
The Upside Down Podcast Website Design Pattern – Roadmap Section

This could be navigating through multiple seasons or categories. Each segment or column on the road map smooth scrolls to a pilot story section further down the page. This allows your visitors to stay on your site.

SEO Tip: For extra credit, implement a WordPress plugin called “Reduce Bounce Rate“, which communicates with Google Analytics and records scroll movements. In our tests we have observed improvement in bounce rate from the 80s to the 30s.

The Role of Pilot Stories in Podcast Website Design

As covered in our video, there are multiple ways in which pilot stories function within your podcast website design to highlight your very best best content.

The Upside Down Podcast Website Design Pattern - Pilot Story Section
The Upside Down Podcast Website Design Pattern – Pilot Story Section

If you have a single and focused niche you may only need a single pilot story. But if your podcast website design is intended to offer multiple categories of content, or multiple seasons, then you can add “Pilot Story” sections for each.

Pilot Story Section For Seasons

For people with seasonal shows, these sections can tell the story of each season.

  • Having a section for each season provides you with a chance to outline the value proposition of listening to each season.
  • It also lets you highlight the best and most popular episodes, and allows people to jump to the show notes pages for each episode that resonates with them.

Pilot Story Section For Topic Categories

Another way to position the pilot story sections is to categorize your content. Does your podcast offer advice, or tips? If so, chances are that your episodes fall into multiple categories of advice and tips. You can develop a “Pilot Story” for each category, and highlight the best episodes for each.

Your Pilot Story’s Call To Action

One thing all pilot stories have in common is that they offer you the chance to highlight your best content. And it also provides you with the opportunity to offer your audience a call to action. What is it you want them to do?

Don’t miss any new episodes…

The simplest way to implement this is to simply offer a way to subscribe to email notifications as a way to stay connected with your show.

A more advanced call to action provides additional incentives to your audience.

For an example of this, see season 2 of the Positivity Strategist Podcast.

Podcast Website Design Example of a Call To Action
Podcast Website Design Example of a Season And Call To Action

This podcast season talks about “Seven new literacies for living and leading in our times”, and the gift being offered for people to subscribe to the show is a “7 Literacies Guide” to go along with listening to the season.

Associating your podcast homepage with strong calls to action also allows for utilizing paid ads and post boosts on Facebook and other platforms. And, make sure your podcast episode files use Facebook correctly and link to your show notes pages rather than to iTunes. Our in depth guide on how to increase your podcast listeners delves into  all the reasons to go beyond iTunes.

Podcast Subscription Links Section

Finally, here is the section that unfortunately appears right at the top of the podcast home page in too many podcast website designs. By the time that people scroll to this section, your pilot stories have had ample time to communicate the benefits of signing up via email as well.

The Upside Down Podcast Website Design Pattern - iTunes Links Section
The Upside Down Podcast Website Design Pattern – iTunes Links Section

If you use the icons and graphics provided by each platform, consider adding text explanations under each graphic. Your readers might not recognize each graphic.

The Episode Grid

The Upside Down Podcast Website Design Pattern - Episode Grid
The Upside Down Podcast Website Design Pattern – Episode Grid

Like the iTunes links, your complete episode grid is purposefully moved towards the bottom of the page layout, so people are likely more likely to scroll and discover the highlighted episodes in the “Pilot Story” sections above.

The Navigation Footer

This is what makes this home page “upside-down.”

The Upside Down Podcast Website Design Pattern - Episode Grid
The Upside Down Podcast Website Design Pattern – Episode Grid

Most websites have their navigation at the very top of the page, but moving it to the bottom of the page, we have increased focus and conversions.

Additional Resources & WordPress Template


FREE 2018 Podcasting Resources Guide: Launch and market your podcast

  • check
    Gear Guides
  • check
    "How To" Tutorials
  • check
    Music & Sound Effect Libraries
  • check
    Software & Tools
  • check
    Guest Booking Services
  • check
    General Podcasting Sites & Groups
Podcasting Resources Guide

Where can we send your guide?


Also, if you are interested in a downloadable PDF version of this design pattern as featured and covered in the video with all the annotations and explanations, please sign up below. And I am creating a “Done For You” version of this design pattern using the Thrive Architect content builder, which means this will be a “ready to install” customizable page template on any WordPress site, let me know if that is something you would want in the comments.

Let’s face it, your web site design has a certain shelf life, and the time comes when even the most reticent business owners realize their site is due for a make-over. Being a visual design fanatic, graphic designer and photographer I sympathize with clients who think they have a design problem. Just recently a prospect stated something I hear a lot:

“My biggest problem has always been the design of things”

I think this comes from intuitively recognizing that “there is something wrong or missing” from their site, but failing to realize exactly what it might be. And so the focus falls on “design”, the “look and feel”, the “cool factor”, the latest font choices, video backgrounds and sliders. Thoughts turn to “mobile”, “responsive”, “more modern”.

UX Design Problems Are Hard to Spot At First Glance

hard to spot ux problemMarketers and app developers have embraced user experience as being a fundamental aspect of modern design. But for the average small business owner, blogger, solopreneur and for most lay people, UX is a difficult and mysterious concept to come to grips with, and the lack of a good user experience is hard to spot.
This means that very often site re-designs are based on visual decisions and look and feel only, ignoring the fundamentals of user behavior, research, and customer centric thinking. This also implies little research and planning.

But Digital Strategy Gaps Are Even Harder To Spot

For me, the coolest vanity site out there is useless (or at best a hobby only) if it fails to attract and convert visitors into leads. Or fails to engage consumers of our content. Visitors will come, say “wow this is cool”, and then leave, unless we have a way to capture them. Like being on a blind date with someone beautiful, without ever asking for a name. Now there’s a design problem for you.

Some examples of missed opportunities

We’ve seen carefully crafted corporate site re-designs launch, with no content other than myopic product catalogs, services and company history, all organized by internal departments, and navigable only by the initiated. Why was the site not converting?

Because that’s called an intranet.

So often the language is that of a first person narrative, it’s all me, me, me, or we, we, we.

Sorry, how are you helping your site visitors?

We see sites that advertise their products and services by shouting at a demographic, rather than starting to engage with their prospects.

If you want to start a conversation, don’t shout.

And often we see thoughtful and entertaining blog articles, marooned and hidden away in some far corner of a site without linking to other valuable pages, and without any accessible opt-ins chance to grow email lists for the content owners. Or we’ve seen famous authors book launch site giving away free preview chapters of their book, without a sign up form asking for an email in exchange. I get it, you’re being modest and are providing value, but trust me, it’s OK to have an occasional opt-in asking for a name and email address.

There is such a thing as being too humble.

So the question for me is always one of customer centricity: Who do you place at the center of your site’s experience? Yourself or your visitors?

So what should we focus on when considering a site re-design?

Let us adopt our customer’s point of view. What is our value proposition to them? How can we inform, delight and offer relevant content and experiences to them?

1.) Awareness: Start by realizing the opportunity for re-invention

It starts with simply realizing that each time a web site is re-designed, it is a huge strategic opportunity to re-invent not only the site, but also the way it contributes to your underlying business model.

2.) Education: Why and how content marketing works

Initially, spend more time researching. In my experience, most web design projects benefit from an 80/20 rule: 80% planning, 20% execution. Educate yourself about why content marketing and an inbound approach work so well for most companies that practice it. Here some quick stats and info to understand the opportunity better…

3.) Conversion: Going Inbound

There is no better way to start customer centric thinking than by implementing an inbound content strategy. It will help develop the muscle for customer centric philosophy and language. It will lead not only to a deeper understanding of your site visitors, but also to a better relationship with your prospects.

4.) Marketing Automation: The difference

For small businesses and solopreneurs, the potential of marketing automation cannot be overstated. Once accessible only to relatively large organizations and corporates, marketing automation platforms are now extremely affordable, and an excellent way to design and run sophisticated inbound content campaigns.

5.) Re-Frame the Opportunity: Converting visitors into prospects, prospects into leads

A re-design project is an ideal place to start, because it can provide you with a re-frame: Your site’s job is to convert site visitors into leads, by providing valuable content to your readership in exchange for contact info and email addresses.

Your site can become the central hub of a customer centric overall digital marketing strategy that supports your business goals (and reflects your brand of course).


I’d like to share the following FREE materials with you:

  • WebSite Re-design Checklist

    Optimized for inbound marketing, here is a check-list that you can use when first starting to plan a site-redesign

  • Marketing Automation Platform Price Comparison

    Each web re-design is an opportunity to consider how marketing automation can boost your site conversions and list generation. This price and platform comparison shows how affordable it is becoming.

  • Your Site Re-design Email Course

    Our completely free, completely non-technical site re-design email course. You will learn how to transform your site into a highly converting inbound content marketing hub.

design problems and solutions with our 3 part offer

Where can we send these
useful materials?