Case Study: How I designed a landing page for India’s Top Leadership Podcast
👋Hey, thanks for hopping by. With this case study, I’ll try to walk you through my design process behind building this landing page for the podcast ‘Figuring Out’.
Context about the project
This project was done as an assignment at 10kdesigners Product Design Cohort, where we had to design a landing page for any creator to solve their problem. The goal of the assignment was to create something visually appealing that also solves some real-world problem.
Problem Statement
Design a landing page for the podcast “Figuring Out: The Indian Dream” by Raj Shamani which would act as a Start Here Page for the podcast and encourage the visitors to engage with the content and subscribe.
Full Figma Prototype
Here’s the full interactive prototype of the landing page, in case you don’t want to scroll.
Design Process
The design process is crucial in any project. It acts as a framework that guides the project from start to finish, ensuring that the final product meets user needs and project goals. However, it’s important to recognize that the design process is not a linear process, and it involves a lot of back-and-forth within various steps.
Research and Discovery
My process begins with researching the problem, which involves web searches, social media analysis, primary and secondary research, user interviews, and competitor analysis. This helps me to gain a clear understanding of the problem and gather all relevant information within a fixed period, based on the project timeline.
The primary goal of this research is to deeply understand the problem, its root causes, why it exists, who the users are, the current status quo, and what the users need. Understanding the problem and user behavior enables me to develop data-driven solutions rather than jumping to the first one that comes to mind.
For this project, I aimed to understand more about the creator, Raj Shamani, his motivations, the podcast’s content and purpose, and the users’ needs and expectations from a podcast landing page.
After the initial explorations, I wanted to learn more about podcast landing pages, their uses, and common patterns among similar websites. To achieve this, I conducted a competitor analysis, which helped me identify patterns and ultimately finalize the website’s Information Architecture. During my analysis, I explored:
- Other podcast websites
- Other product pages
Information Architecture
After collecting the insights from the research, I started to create an Information Architecture for the landing page. Since this is a single-page website for the podcast, the IA consists of different sections of the website and the information that goes into those sections.
I wanted the website to tell a story, so I structured each section as if the host were guiding you through the journey himself, just like in the podcast.
Wireframes
For the next step after creating IA and exploring the structure of the landing page, I started creating some low-fidelity wireframes. Creating lo-fi wireframes, gave me the freedom to iterate more in less amount of time. I tried different formats and also created section-wise wireframes. After that, I created some High-fidelity wireframes which gave me a structure for the landing page before moving to the visuals.
Visual Exploration
After roughly finalizing the structure of the landing, it was time to explore the visuals for the website. I not only explored different podcast pages but also explored other product pages to have a diverse perspective. During this time, I was also collecting section-wise inspirations and grouped them which helped me in finalizing the visual direction of the landing page.
Style Guide
After exploring the visuals it was now time to finalize the visual direction for the landing page and create the style guide for the same.
I decided to use the present theme of the website so I played around with the same dark theme with light blue as the primary color.
- I tried a lot of hues of blue to use as the primary color for the website, which would make the website pleasing to look at.
- I created color styles for different categories like Primary, Generic, and Greys.
- I also created a range of hues and shades to go with the dark theme of the website.
- I also created a few Gradients to work as an accent color, for the elements which needed extra attention.
Then, I experimented with different fonts of different sizes. The thought behind selecting the typeface was that it should be clearly readable in small as well as large places, and it should match the voice of the website and the creator. So, I decided to go for two fonts:
- First was Cormorant, a Serif font for display type.
- And second was Josefin Sans, a sans-serif font for headings and body text.
Section-wise Explanation
Now let’s dive into the landing page section by section and I will try to explain my thoughts and decisions behind those designs.
1. Hero Section
This is the first section of the landing page and is the first thing that users see as soon as they visit the landing page. We have to convey the important things here in a way that attracts the user's attention and inspires and motivates the user to the desired action.
So, I wanted to make the task of scrolling through a website a seamless and engaging experience, that’s why I decided to structure the website as if the user was viewing the podcast.
- As soon as the user enters the landing page, they are introduced to the podcast by the host himself.
- A clear heading informs the user of the podcast and a short description of the podcast with social proof.
- Clear CTA in the form of podcast links which encourages user to listen on their favorite platform.
2. About Section
After welcoming the users in the hero section, it’s time to tell more about the podcast to grab the user’s attention and inform them about the podcast.
This section aims to give an introduction of the host and the podcast like it would have been in any podcast episode, with the help of:
- A clear intro and a cool image to establish a friendly vibe.
- A description of the host to communicate his background, his purpose for starting the podcast, and his social links.
- A clear mission statement for the podcast.
3. Achievements Sections
The main aim of this section is to build the user’s trust by showing them the numbers they have achieved. It shows that the podcast is trusted by millions of listeners and acts as a social proof.
4. Guests Section
After setting the context of the podcast and grabbing the user’s attention, now it’s time to generate some interest in the minds of the users. This section is designed to function as an intro to the guests, like when the host introduces them before the episode starts.
- The profile cards display important info like images and names of the top guests.
- To reduce the cognitive load of the users, I decided to show only the most relevant information and more info. It unfolds as the user engages with the cards.
- That’s why only the name and image appear as you enter the section and as the user shows interest and hovers over the guest card, it shows more. Now the user has a choice: if they want to know more about the guest, they can check out their socials, or if they want to listen to the episode, they can do so by clicking on the play button.
5. Episodes Section
After setting up the context of the podcast, now it’s time for the user to take some action and listen to the podcast episode. This section shows:
- the genres the podcast has to offer which shows the vast variety of the audience they cater to.
- episode cards which display all the relevant information about the podcast episode
This section encourages users to take action, which is to listen to the podcast episode.
6. Reviews Section
This section shows the reviews and comments of the listeners in the form of cards, which also act as social proof for the viewers.
This section is designed in such a way that it resembles the very end of the podcast where the host encourages the user to share their views about the podcast episode after listening to it and share what they like and what they want to listen to next.
7. Footer Section
This section is the last final nudge for the user to subscribe and to encourage them to join the community of like-minded people. This section shows:
- a CTA to encourage the user to subscribe
- all social links of the podcast, so that they can explore and engage on other platforms as well, if they want to.
This section is designed in a way to act as the final part of the podcast where the host asks the user to subscribe if they haven’t already done it.
✏️Learnings from the Project
This project has been a bittersweet journey and I got to learn a lot of important things as well as skills along the way.
- Document everything and keep the Figma files organized to get better mental clarity while going back and forth during the design process.
- Follow the deadlines and structure your time wisely. Don’t think that you will go to the next step when you are completely satisfied with the current step. You can never be satisfied, with whatever you do. You are gonna come back to the previous stages no matter what.
- Iterate More. Try to work in short but fast-paced cycles, so that you can iterate more. The more you iterate, the better you get.
- Feedback is the key to improvement. You should always find someone who can give you an outside perspective because after diving into the project you tend to circle around the same thing and get fixated on the first thing that comes to your mind. So, take feedback at every stage or whenever possible.
Conclusion
And that’s a wrap! Thank you for checking out my case study. Please feel free to leave a comment below to share your thoughts. You can also connect with me on LinkedIn and Twitter.
Also, I’m open to opportunities as a product designer. Do reach out if you’d like to work with me or collaborate on some projects.
PS: If you long-hold the clap button, you can give up to 50 claps on Medium.
