📄Don’t like reading?,📺 watch it here!

So, I joined this UI/UX design program called 10kdesigners in November 2022. And for our second assignment, I had to make a website for a creator. My goal was to become a better designer by making a website that looks awesome and works great. I picked AevyTV, which is India’s fastest growing youtube channel, and made a website for an event hosted by them called Creative Growth Summit.

Here’s the prototype of the landing page i designed, have a look & i’ll take you the exciting journey which led to this amazing website!

prototype video

Design an event landing page organized by AevyTV, the theme is Creators & Growth of content story telling in India, with some top India creators as guests.

In the Cohort we were free to choose on what we had to work, so me being a fan of Varun Mayya, I choose design something about him, but i wasn’t sure what should I?, so Abhinav helped to decide on what should i go ahead with, so i decided to design an event landing page for a creator summit organized by Aevy TV

AevyTV banner

Pro tip: if you’re stuck somewhere, always ask out the seniors for help.

Promote event by providing the exact details, such as date, time, location & guests attending

Sell tickets, by attracting the visitors with the perks & fun at the event

Plug AevyTV’s Social media

So for research i only did secondary research as it was more than enough to provide me with right insights & structure to move forward

I looked at many creator event websites & most of them lacked visual design in them, either their website were templates or basic, so i researched hard to find “good looking” event websites.

I sorted the inspiration in a unique way which helped me to make better decisions. It is like the following:

Visual Inpiration

Pattern Inspiration

Content Inpiration

CTA Inspiration

ps: use cards to take notes right beside the webpage

After research my direction was set in a good way, taking down the points in cards helped a lot to lay out all the information clearly according to priority so that the target audience can understand.

So i asked 2 question to myself before i started IA.

- What does my audience want to do on the website? - What do i want my audience to do on the website?

Based on these, I planned IA for Creative Growth Summit as seen below:

After IA i straight away jumped to sketching as my mind was ideating a lot of solutions along the way, i didn’t want to loose any😅.

Taking small notes right beside the sketch helped me to retain my idea, & also making different versions right after each other, helped me to iterate faster.

AevyTV didn’t have a website & their social handles didn’t have any posts, i was only left with their videos which were colorful & vibrant, so i started to moodboard & After iterating a bit, this is the final style guide that I came up with.

Moodboarding properly gave me a good sense on how to approach the style guide.

For the final UI i made close to 20+ iterations, while tweaking my IA & wireframes mostly, here’s a walk through of a few crucial iterations i made.

🦸🏻‍♀️ Hero Section

For hero section, the information has to be clearly delivered, since the users see this first they start to look at things & form assumptions about the event, so it need to gain the trust of the audience.

some of the iterations made for hero section

Need a proper branding of AveyTV, to showcase they are organizing.

The location & time need more emphasis.

The caption can be shorten down.

Sponsor CTA can be given less emphasis.

The tickertape isn’t standing out.

Doesn’t give the sense of a “creator” event.

Made their team picture as main background image.

Made the location & time background a bit dark to standout.

Used ChatGPT to shorten the caption down.

Made a tertiary 1 liner CTA for sponsors.

Gave a lighter background for the ticker.

On mouse movement, India’s top creators will be shown.

✍️ About Section

In about section, user wants to briefly understand what’s the event about, so i wanted to make the copy as crsip & easy to scan, also with a good CTA.

some of the iterations made for about section

Sponsors section can be moved down as it’s not so important.

Make the image frame minimal.

Highlight the Important text.

Used AevyTV’s logo as a branding element.

I moved the quick stats up, which were in the bottom.

Removed the abstract elements, also made the image black & white.

Made the text more readable by highlighting.

Used Logo as a branding element.

📷 Creator Section

This section showcase the creators who are going to attend the event & their stats.

some of the iterations made for creator section

Heading isn’t hierarchical.

Creator names overpower heading.

Heading line makes UI busy.

Made the heading bigger.

Made the creator font weight smaller.

Removed the heading line.

On hover shows stats of the creator.

📝 Schedule Section

This is the most important section, as this shows the whole event strucutre, so it had to deliver the information perfectly.

some of the iterations made for workshop section

Heading isn’t hierarchical.

Layout isn’t scalable.

Information is not perfectly delivered.

Used a tab to reduce the heading size, which will auto scroll to the next one.

Got a good suggestion from Abhinav about layout & i tweaked it a bit to make this masterpiece.

Gave good hierarchy to the workshop information.

⌛️ Timer Section

This creates a feeling of FOMO (fear of missing out) among the audience, prompting them to purchase a ticket.

some of the iterations made for creator section

Contrast is too high.

Heading is in the face.

Made the heading first letter caps.

Added a small caption.

Made the timer more visually attractive.

💲 Pricing Section

This section needs good attention, as this is where the user converts & the goal was to convert them to the highest price possible.

some of the iterations made for pricing section

The heading line is disturbing the UI.

Copy can be simplified.

Prompt the user to buy the costly ticket first.

Made the heading line a little less emphasis.

Used ChatGPT to simplify the copy.

Put the high price one at the beginning.

Made the gradient a bit vibrant to hook users.

🔌 AevyTV plug section

Here if a user doesn’t know about them, then this can be a good plug to attract new audience to their channel.

some of the iterations made for plug section

Make the picture less emphasis.

The social icons are getting unnoticed.

Show AevyTV’s branding.

Used hierarchical color to maintain emphasis.

Added gradient to icons.

Used AevyTV’s logo as a branding element.

📃 Below the fold

For this section i iterated a few solutions, & landed at this.

I used a very minimal layout here as people would anyhow figure things out at FAQ & footer.

I pushed sponsors at last as i observed a pattern on other pages as well, where they put it below the fold.

Gave the footer standard layout.

Feedback: You have to constantly take feedback from your mentors or seniors who can help you understand where you can get more insights & different perspective, i learnt that async feedback works well as most of the mentors would be busy.

Iterations: It is important to continually improve your current solution, even if you believe it is already good. One helpful approach is to duplicate each section and iterate on it.

Patterns: Try to look at patterns of different websites, no matter the niche or domain, you can find inspiration anywhere, it’s just you have to be constantly looking for it.

BTS of the iterations

I really enjoyed to design this page trying out new interactions & layouts, with different color! - Learned to listen actively to the feedback. - Iterating is the soul of the project.

📞Want to collaborate or chat? Book a Discovery call with me