Creating a landing page to attract more fans for a content creator
This is a walkthrough of how I designed a landing page for a standup comedian/content creator and created a brand identity for them
In July 2022, I joined the 5th Cohort of 10kdesigners, which runs a UI/UX Design program. This project is a part of your second assignment in the cohort. Our task is to follow the design process and the visual design guidelines we learned in the cohort to create a landing page that solves a particular problem for a content creator.
❓Problem Statement
Design a landing page for a Content Creator that aggregates their info on the web and their best work at one place
🏃Getting Started
To move forward with my task, I laid out a plan of how I would go with the whole process. So my journey in this design can be put into the below phases:
🧭 Explore
The first thing that I started doing was exploring different content creators around different niches and checking that even if they are facing the problem I’m trying to solve.
This helped me understand the different types & categories of content they have and whether is that enough to create a landing page.
Also while choosing a creator, I made sure that I understand their niche & personality well enough before starting the design, because that will eventually help me design better.
From all the above creators, I finalized Zakir Khan for this assignment. Now, why did I choose him? Here are a couple of reasons for my selection -
- Zakir has his presence on different platforms which makes it difficult for users to discover all the content.
- He doesn’t have a link in his bio for his social handles like Twitter and Instagram, so a landing page will help with that.
📑 Research
I started with some basic research to understand the kind of content Zakir posts & what are the platforms on which his content is present. Since the creator does not have any visual identity for his brand, this will help me design a visual language and overall brand for the website.
Types of content he generally posts:
The platforms where someone can find his content are
📺 YouTube
📺 Amazon Prime
Also, I needed to understand how should a landing page be structured for a creator in the niche of “comedy”. To do so, I draw some inspiration from similar websites, posters, and other sources by taking screenshots of various layouts and sections. This helped me ideate a structure for the landing page and also understand typography and colors used in such type of niche.
Along with that, I also finalized the target audience i.e. people who’ll be using this page.
✅ Fans/Audiences who want to book tickets for his live shows/tours — Zakir does a lot of live shows in different parts of India and even other countries. Instead of visiting multiple websites, fans can buy tickets from this website.
✅ Existing Fans who want to explore his new/upcoming content
✅ People who do not know Zakir, and would come here to learn more about him — There are a lot of people who don’t know him or just discovered him on the internet. They can visit the website to know more about him and also get to contact him.
🧠 Information Architecture
To move forward with the designs, I wanted to lay out the information in an organized manner that will make it easy to consume & allow the user to navigate through the website to complete their desired task.
Here is the final version of the information architecture :
🧱Wireframing
Once the IA is done, I started with my wireframes of the website in the lo-fi and then the hi-fi stage. I also started iterating a few sections on different wireframes.
While designing the hi-fi wireframes, I also wrote some copy for every section to have a better context of each section while starting with the visual design.
🖌️Visual Design
Style Guide 🎨
I tried to understand the personality and the work of Zakir to create a style guide.
The content he produces has a fun, happy, and soothing side to it. But the most important emotion is laughter. So the website should have both pop colors as well as neutrals to complement that.
I drew inspiration from other standup-comedians websites and comedy shows to create a unique style guide.
🖼️Final Design (Feedback + Iteration)
I broke down each section with the initial errors and feedback I got against them. Then you’ll find the final design of that section.
Hero Section 🦸
The Hero section is probably the most important section of a landing page. This is the first screen a user will land on when they open the website. And based on this section, a user will decide whether to further into the website or not.
- Think about the font of the “Copy“. It’s not being a proper highlight. More focus goes on the image of Zakir.
- Try keeping lesser words for quick scanning for a user.
Final Screen
About Me 🤓
This section will show some details about the creator. Initially, I didn’t want to add this section, since I thought everyone knows Zakir Khan. But during a discussion with my friend, She asked
“Are you talking about Zakir, the musician? I don’t know much about him’’
That’s when I decided that this section is important since a lot of people might not know who he is and through this, they can get some context about the creator.
- Try a different iteration for the image here. Maybe try to blend it with the background.
- Give a heading to understand what this section speaks about
- Highlight certain points here, so that it becomes easy for a quick scan.
Final Screen
Most Loved Videos 📹
This section will ideally be for the videos on YouTube. Since most of his audience comes from YouTube, this should be the first piece of content on the website. At the start I wanted the CTA to redirect to his YouTube channel.
- Think about the “Watch more” CTA. You can make this section differently. Instead of redirecting them at the start, let them have the option to explore this section, and then we can direct them to YouTube.
Final Screen
Shows 👨💻
Designing this part was the hardest thing, because of the different elements present in it. This part is all about the different OTT shows by Zakir.
- This looks interesting and gives enough real estate to each show but can be tedious to go through them all.
- Can have a consistent CTA style across the page.
Final Screen
Tours 🎟️
Apart from online content, Zakir also performs in front of a live audience in the form of small shows or tours. So the audience needs to buy a ticket for the shows, but currently, there are a bunch of websites that sell the tickets and it’s not easy to find. So this section will have tickets to all the upcoming live shows.
- Change the style of the CTA and think about a different position for this.
- Dates look more like a CTA. Try a different approach.
- This layout looks visually balanced but creates a break between the content and the action button.
Final Screen
Course 📚
I found a course by Zakir on Frontrow, so thought of adding that. The section tells a little bit about the course and gives some sneak peek of it.
Footer 🏁
Lastly, it’s the footer where you can find all the links to his social media, press & bookings, etc.
➡️Checkout the full version of this project on Behance along with others
✍️Learnings & Takeaways
- Completing the given work under the deadline: Through this project, I realized the importance of deadlines and how to plan my work well. Though it seems very easy to design a one-pager website, without a deadline it would have gone for a long time. So I planned smaller steps and worked on those to complete the project.
- Understanding how to effectively design a landing page: Since I haven’t designed any landing pages before, I made sure the design solve its purpose well.
- Don’t just assume everything, talk to people to validate your assumption: At times we may know the assumptions are true, but it's always better to validate some of them. Because there might be certain assumptions not fully true.
- The importance of feedback: One of the biggest lessons I learned is the importance of feedback and how much it helps you become better at your work and as a person. So take feedback from your mentors and peers. Because multiple perspectives are going to help you iterate better to design a product that’ll be easy to use.
And it's a wrap. Thank you for reading to the last and hopefully 😅 this was interesting for you. Do let me know your thoughts & feedback in the comments.
I’m currently open to opportunities as a Product Designer 🤝 Do reach out to me on LinkedIn or Twitter for any feedback, discussion, or collaboration.
Do you know, you can give up to 50 Claps by long-pressing the Clap icon 👏, it will mean a lot to me.
