Designing a “Start Here” Page for a Creator to display their best work in a place.
In this case study, I will break down my thought process for designing a webpage for a creator that aggregates their info on the web.
👀Background
I was a part of 10k Designers ( Cohort 5 ), In one of our assignments, we were assigned to design a webpage for a creator and practice visual design in Figma along with some simple problem-solving and design processes.
The exact brief was:
Design a web page for a creator that acts as a “Start here” page that aggregates their info on the web and their best work in one place.
Let’s start.
🚩Problem Statement
Problem of discoverability by creating a “Start here” page that collects all their links and shows the highlights from their body of work.
✨Final Design
Before starting out with the Case Study here is the Final Design of the Webpage.
🤔Why did I choose Jay Kapoor?
You might be thinking why did I choose Jay Kapoor in spite of anyone out there? I choose him because I want to do this assignment for someone who I actually follow. I am following him since 2016 and I think he provides a lot of value in his content. Also, currently, he does not have a website.
💁🏻How this website can Impact him?
- Since he has a large body of work many viewers don’t know about his other work. So, the start here page is going to help his viewers to know more about his work.
- He will be able to use this link in his bio on platforms like Twitter and Instagram and viewers can see all details about him in one place.
- His viewers or Brands can reach out to him regarding any promotions or any other query.
⚙️Process
I try to implement what I learned so far and use the design process which helps me break down a project into small stages which are easier to handle.
I keep asking myself at every step “ Is this enough to move forward” if the answer is yes I proceed to the next one. Whenever I feel stuck or facing any difficulty I go back to previous steps to reevaluate the earlier decisions this helps me tackle the problem during the project.
🧭Research and explore
I started the work by doing some research on him and trying to collect his work. My aim was to collect more and more information about him and later I can choose what to put or what not.
💡Key Insights -
- Content on social media with 1 million plus followers.
- Newsletter with 10K + subscribers.
- He also has some Apps and one app has 5M+ downloads on Play Store.
- India’s youngest Youtuber who crossed 1 Lakh Subscribers.
🔬Competitive analysis
After some research, then I go to find some inspiration to find out how other creators are solving their discoverability problem and how they are showcasing their work. I try to get insights from them which helps me in creating my mood board.
For inspiration, I especially look for websites of other content creators. Here are some of the cool content creators’ websites that I looked into:
- https://beerbiceps.com/
- https://shashankudupa.co.in/
- https://ankurwarikoo.com/
- https://www.vedantrusty.com/
- https://www.drriteshmalik.com/
🧠IA
After Research and exploration, I create Information architecture to get a birds-eye view and to know what to put in each section of the website.
I make sure to think about the hierarchy of sections and prioritization of information inside each section.
Information Architecture helps me to know what to include and when to include it.
🧱Wireframes
After working on Information architecture, now I start making paper wireframes and then low-fidelity wireframes to get a rough idea of how my information will look in design.
🌠Visual design
As I have seen in Jay’s videos he is very calm in nature and has a positive vibe, to match up with his personality I used green as my primary color. As green denotes calm vibes. And use Orange and turmeric as an accent color as it goes well with Green color.
🕹️Prototype
✍️ My Learnings
- You can take inspiration from anywhere. Don’t limit yourself by just taking inspiration from your product niche.
- One thing that really helped me is asking a question to myself is this enough to move forward? if the answer is yes then I move forward. This helps me build my forward momentum in such big projects.
- Iterating and taking feedback at early stages can help in saving a lot of time.
- By writing this case study — I learned how to present the information in a structured way.
- Make your internal deadlines and follow them sincerely.
🙏Thankyou
Thank you for reading this till the end. I hope it was worth reading it.
For any feedback feel free to reach out to me on Twitter, Linkedin, or Email me.