Redesigning a podcast website [UX Case Study]
What Is ‘My Seven Chakras’?
My Seven Chakras is an alternative health podcast that explores topics such as meditation, chakra balancing, energy healing, and many more. Our client, Aditya Jaykumar (AJ), started the podcast in 2015 and it now has over 350 episodes and 3.6 million streams. During the episodes, AJ interviews a variety of guests that include experienced healers, authors, shamans, entrepreneurs, and many more to share their knowledge and insights with his listeners.
Our team was tasked with a responsive redesign of his current site. We revamped the entire site by introducing a new information architecture, a search function, and visuals to break up the text-heavy content. This project was also selected to be developed by RED Academy’s web development program.
Timeframe: 6 weeks
My Role: One of four UX designers
Goals
Business:
- Increase the conversion percentage for email newsletter sign-ups from new visitors
- Increase subscriptions for his monthly membership program
Project:
- deliver a web experience tailored to both new and existing My Seven Chakras listeners
- Design a website that grows with AJ as he develops several new content channels
User Goals:
- New users: to learn more information about the podcast and host
- Existing users: to easily access and reference the available free resources and to learn more about his membership subscription
Understanding the Problem
Despite the podcast being successful across multiple platforms, AJ felt that the major thing that was lacking from his brand was a visually appealing and functional website. A site that allows visitors to easily navigate through the content he offers or for sponsors to see why they would want to work with him. Furthermore, AJ has recently launched a new membership subscription that contains a masterclass every month and additional perks. He wants potential subscribers to be able to access the sales landing page and be sign up for his membership.
AJ shared with our team that he’s looking to add more content and expand his brand in the coming months; therefore, we felt it was important to come up with a website that could grow with him as My Seven Chakras grows.
Current successes: the website is populated with lots of informative content and users can easily find the latest podcast episode right on the home page
Current pain points:
- Users land on the page but leave because they cannot find their desired information
- there is no search function on the website which makes it difficult for users to search browse through 350+ episodes
Domain Research
Before beginning our project, we conducted domain research on several podcasts. We wanted to look at how other podcast sites structure their content and what features they offer.
We were surprised to see that several websites did not tag or categorize their episodes. This could be due to the fact that these sites are not solely dedicated to podcasts, rather they include other content such as coaching, meditation courses, and other media or workshops.
However, the majority of the sites we looked at had a strong social proof, call-to-actions, and prominent subscription input fields. We determined that there was an opportunity in including a search function. Also, adding more prominent CTAs were something we wanted to improve to help achieve AJ’s business goals.
Research
Talking to the existing listeners
We wanted to learn:
- their personal pain points of the website
- users’ main motivations for using the site
- If users feel that something is lacking from the website
- If users have visited other podcast websites — provides us with more websites to reference
- their podcast selection behaviour — helps us understand what information is essential to podcast listeners
We interviewed 5 current listeners of the podcast.
Some feedback we got from the interviews:
“Would be nice to be able to search the podcasts since there’s so much content”
“I want to read AJ’s blogs and see the booklists he has mentioned in his episodes.”
“I only listen to the episodes I can relate to.”
“If I don’t enjoy the host, I don’t add the podcast to my list.”
Interview Key Findings
Our interviews validated our initial assumption that users would benefit from including a search function.
The interviews were phone interviews and quite difficult to schedule since the available users were quite busy and located in different time zones. I definitely felt that we missed a lot of information we could have gained through face-to-face interviews since we were unable to have a sit down chat with them.
The interviews gave us some good insight into the current pain points of the website; however, we felt that we still didn’t have enough information to move onto our planning phase. We decided to send out two surveys to gain some insight into podcast listening behaviors and any information on how we should structure our information architecture (IA). We felt that a survey would be able to reach more people and answer those questions.
Survey
We wanted to cover all our bases for current and potential users so we decided to send out two forms: one to general podcast listeners and the other to current ‘My Seven Chakras’ listeners.
From the general podcast listeners survey, we wanted to:
- find out more about the factors that influence listeners to choose an episode
- See which platform was most often used to listen to podcasts (for us to consider how that app organizes content)
- Know if they’ve ever visited a podcast website and the motivation behind visiting
From the current ‘My Seven Chakras’ listeners, we wanted to know:
- which features would enhance their’ experience
- if they’ve ever visited the current website
- why they visited the site and [if they do] why they revisit it
Finding out that our general podcast listeners and existing listeners both primarily visit podcast sites to learn more about the podcast and the host allowed us to structure our information architect to ensure that visitors can quickly access the information they’re looking for.
The supplemental resources also allowed us to identify what content AJ could consider implementing and where the content would live in the site.
Planning
Affinity Diagram
To conclude our research phase, we put all our findings into an affinity diagram using Whimsical. We were able to organize the findings into categories and identify recurring themes.
The callout buckets from the affinity diagram were:
- reasons to use the current website: understanding our users’ current motivations reminded us to highlight the content and allow them to access these features more easily
- reasons to visit a podcast website: identifying why users would visit a podcast website ensured that we included all the necessary information so users could accomplish their goals when visiting the redesigned website
- pain points of the current website: this bucket allowed us to make sure we tackle our users’ existing pain points
Personas: Identifying our users
Similar to our surveys, we wanted to cover all our bases and make sure that we kept the goals and pain points of both our target users in mind. Pulling our research findings from our affinity diagram and direct quotes from our interviews, we came up with two personas: Megan and Skye.
Our two personas represent our two main target users and their goals. Megan represents existing listeners who are familiar with the podcast and subscribed to the membership. Her main motivations for visiting the site are to listen to episodes and access her membership information.
On the other hand, Skye has only recently discovered the podcast and is exploring the website hoping to learn more about My Seven Chakras. With Skye in mind, our team explored the touchpoints we could enhance to lead her to sign up for the email newsletter to meet AJ’s business goals of increasing sign up conversions.
With a clearer idea of our target users, we moved on to finalizing the new information architecture. We need to figure out how to structure AJ’s content for Megan and Skye to easily access their desired information.
Information Architecture (IA)
During our research phase, while waiting for our complete survey results, we began working on our IA. We audited the current IA and felt that there were tabs that could be condensed and content hierarchy that needed to be reestablished.
For our first iteration:
- increased the importance of the podcast tab because Megan and Skye both want to listen to episodes they are interested in
- condensed the blog and sponsor tabs into a ‘Resource’ tab to reduce cognitive load
- From our interview responses, several listeners primarily use the website to access the Action Tribe Energy Circle membership subscription. Therefore, we prioritized the membership over the ‘Resources’.
- We split the contact form into two: general inquiries and for companies who would like to work with AJ. The site will act as a landing page for companies looking to work with AJ so we wanted to ensure that they could easily contact him.
After receiving our survey results from existing users, we found that they considered free resources as their most valuable supplemental resource. Therefore, we wanted to prioritize the ‘Resource’ tab.
After laying out our IA we were able to visualize what content the site should include. However, due to time constraints, we had to define a minimum viable product. After reviewing our affinity diagram, we decided that the MVP will:
- be a responsive site
- allow visitors to find information about the podcast and host,
- browse through and search for podcasts
- contact AJ
Design
Since 55% of AJ’s users visit his site on mobile devices, we decided to design mobile screens first.
Low-Fidelity Sketches
To start, we sketched out how we wanted the screens to look.
Mid-Fidelity Sketches
After sketching out our ideas, we moved onto designing our mid-fidelity screens.
After completing our mid-fidelity screens, we wanted to test with some users before moving onto the high-fidelity screens. We needed to know if the users found our IA and information easy to follow.
User Testing & Iterations
We test our main MVP flows, the tasks were to:
- Find information about the host
- Find a “cancer” related episode: prompts users to select a specific category or use the search function
- Find AJ’s articles: prompts users to expand the ‘Resources’ tab
- Contact AJ and ask him a question
Feedback from the 3 user testing participants:
Find information about the host: Two users were uncertain that information about the host would also be located on the ‘About’ page. All users felt that the page was very text-heavy.
- This feedback prompted us to split the about section into two pages: one for the podcast and one for AJ.
- Also to incorporate more icons and group the content into smaller sections.
Find a “cancer” related episode: the users were able to easily navigate through the specific category or utilize the search bar.
Contact AJ and ask him a question: the users were confused when seeing the two buttons and wondering if they should select one or the other
- we made the form into tabs that were visually more easily to recognize as two separate forms
- we also increased the size of the ‘send message’ button considering that the users will be on their mobile and the smaller screen size
General Feedback
One of our users stated that seeing the social proof when arriving at the site would provide her with a greater trust factor about the quality of the podcast. Therefore, we moved the social proof to right under the hero image so that visitors will see it right when they arrive.
All users commented on our use of the word ‘Menu’ for our dropdown menu.
“To even have to process the word ‘menu’… don’t make me think.”
After testing it seemed like users were overwhelming more used to seeing the familiar hamburger menu than the word itself.
We also included a magnifying glass icon to signify that our search bar lives inside the menu. As the users were unable to find it as they navigated through the site.
One of our users expressed that having information about the podcast surrounding the four corners of the card seemed to make the eyes dart around and not know where to focus. The hierarchy was unclear to him. Therefore, my team discussed what information we could trim off the card.
We decided to move the episode number onto the image as an overlay to save space and remove the duration as AJ’s episodes are all long-form interviews that last around an hour.
Something that we did not redesign was the website’s pagination. However, one of our users stated that it may be difficult to navigate if users need to click several times to reach the middle pages.
One of our interviewees also stated that when she discovered the podcast, she went back to listen to the episodes on the website because the early episodes were unavailable on Apple Podcasts. Our team then sought inspiration and decided to use a pagination feature that has an input field that allows the users to navigate to their desired page easily.
After all the iterations, we were able to finalize our high fidelity mobile screens.
The final changes we made were including:
- testimonials on the home page: in addition to the social proof, we wanted to enhance that sense of trust when users visit AJ’s site and see how his podcast has helped other people
- adding a sort feature on the episode page: from our survey results we found that Spotify was the most widely used podcast app and their sort feature only has two options: ‘newest to oldest’ and ‘oldest to newest’. We wanted to incorporate the sort feature for those listeners who want to start from the beginning or find the most popular episodes to listen to.
High Fidelity Screens
After finalizing all our changes, the UI team added their elements to complete our project.
Desktop Screens
Starting with a mobile design made it easier on us to complete our desktop screens. With more space on the screens, we were able to make the transition quite smoothly.
Future Considerations
Incorporating a log-in feature to access the membership portal: a major reason users use the site is to access the membership portal, by adding a link that sends subscribers directly to the log-in for the membership portal could make sure that all the necessary information can be accessed through one platform
Reflections
It was great working with AJ and seeing how his one-man podcast has grown over the years. We hope that our redesign allows his busy listeners to navigate more easily through the site.
The website will be developed by the end of March so we’re looking forward to seeing how it impacts the users and will be judging to see if our design enhanced the experience through the change in bounce rates and the number of visits.
