2

Designing Graphy Collab’s Landing Page to spark the interest in budding creators

 2 years ago
source link: https://uxplanet.org/designing-graphy-collabs-landing-page-to-spark-the-interest-in-budding-creators-b1a14a350ba2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Designing Graphy Collab’s Landing Page to spark the interest in budding creators

Overview

Graphy is a platform that marks the entry of Unacademy into the creator economy space. At its core, it allows creators to launch their own community & monetize their knowledge.

Graphy also has a program for budding creators where they are provided the right resources to help accelerate the careers of each participant and turn their passions into livelihoods. As a part of the 10kdesigners Cohort 4, we were asked to design a landing page for an upcoming event.

I have been bullish on the creator economy ever since the term came into existence, so I knew I was doing something around it.

I had 3 main objectives directing my approach:

  • Positioning Graphy Collab as an OG player in the Indian creator space.
  • Showcasing the trust creators have in the impact of the program.
  • Motivate prospects enough that they register.

To reach out to budding creators, explain the concept of the program, talk about the details & particulars and motivate them to register.

Getting started

Since the result would mainly depend upon:

  1. How convincing the copy is
  2. What information is being present in what order so as to not confuse the user & make a skim-able, smooth, and straightforward experience
  3. How appealing the visuals are

I started by looking at websites that have been designed for similar purposes. I basically took inspiration for 2 things, structure & visuals.

Research

  1. Understanding what creators want
  2. What is the event about
  3. Why should upcoming creators attend it (and not any random YouTube Binge Watcher)
  4. What kind of audience does Graphy target

There are 2 particulars to keep in mind while designing a landing page, how the information is laid out and how the right information urges you to tap on the CTA.

Information Architecture

After exploring and researching I hopped onto making a detailed Information Architecture, listing out all the sections and the sub-sections the landing page will consist of and what information will go inside it.

1*RZx9EHe8EGZz5A0bdIIjeQ.png?q=20
designing-graphy-collabs-landing-page-to-spark-the-interest-in-budding-creators-b1a14a350ba2

Wireframes!

Visual design

Branding & colors

Even though there was no compulsion as such, but since I had decided to make this as part of Graphy, I worked entirely with the Graphy Select design system.

Colors, fonts, Headings

1*eXFO0hVzdbfQbmKD5PfRaA.png?q=20
designing-graphy-collabs-landing-page-to-spark-the-interest-in-budding-creators-b1a14a350ba2

I went with alternatively aligning the headings and details as the user’s eye can scroll the information in a Z pattern.

Hero Section

The hero section is literally the hero of the website, it takes only 3 seconds to decide whether a user will scroll down or close the tab. Thus, it has to be captivating and speak VALUE.

The Navigation Bar on Top has 2 important questions answered -

  1. Who are the panelists?
  2. What’s in it for the viewer?

Then one the center we have only that information that sparks enough interest that makes scrolling down effortless. Our target user is an existing creator who is growing but not satisfied with the growth.

First up, when & where.

The illustration showcases the creator, and the dream to skyrocket.

1*1p0BzhDYedfE7zLYJep71g.png?q=20
designing-graphy-collabs-landing-page-to-spark-the-interest-in-budding-creators-b1a14a350ba2
The Hero Section

Diving In

In the first section, I added the whole idea behind Graphy Collab.

The important parts were highlighted so that the user could skim through them.

Next is a feel-good quote and then the user can see some social proof with the big sponsors supporting the event.

Below this, the user can find why they should attend the event. Again, skim-able.

1*Ducw_OdxzifQeWuc6wWKig.png?q=20
designing-graphy-collabs-landing-page-to-spark-the-interest-in-budding-creators-b1a14a350ba2

I played with the background of speakers and tried giving it an aesthetic, premium & rich vibe. The speaker’s profile has the name, and title of the speaker. I kept the information centrally aligned to the profiles to maintain the flow.

  • Visual hierarchy is important for communicating the information effectively and giving the user what they want at the right time. Adding extra and unnecessary information can be overwhelming for the user.
  • When everything gets equal attention, nothing ends up getting attention.

Played around with the typography without using colors first to set the hierarchy right. Used subtle colors to give the right emphasis to relevant data.

The Register Section

The most important CTA of the landing page is the registration section. It will break or make the entire purpose of the landing page.

If the page is superb and the registration cards feel good, the effort is wasted. I spent a good amount of time making the cards feel trustworthy and urgent.

You don’t invest in something you are not sure about. Plus, I kept the card with the 3 Day pass on the left to drive most conversions to the entire event.

The strike-throughs help creates a sense of FOMO, coupled with the discount offered.

Went through a lot of iterations in this particular section, and ended with this.

That’s a wrap!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK