

Designing Graphy Collab’s Landing Page to spark the interest in budding creators
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:
- How convincing the copy is
- What information is being present in what order so as to not confuse the user & make a skim-able, smooth, and straightforward experience
- 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
- Understanding what creators want
- What is the event about
- Why should upcoming creators attend it (and not any random YouTube Binge Watcher)
- 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.

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

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 -
- Who are the panelists?
- 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.

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.

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 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!
Recommend
-
104
-
3
(Neo4j Blog)←[:BACK] Gartner’s Getting Graphy at Highly Anticipated Data & Analytics Summit
-
1
Welcome to the Reuters.com BETA. Read our Editor's note on how we're helping professionals make smart decisions.
-
6
Ripple Lanches Xpring – An Initiative To Foster Budding Entrepreneurs by Editor's Desk
-
3
Can we add the -graphy to the crypto tag? In some cases we get stories mis-tagged with crypto when they should be tagged with merkle-trees. Maybe expanding adding the suffix to crypto
-
5
Budding PS4 emulator starts to show progress, can run hundreds of games Spine is pushing ahead as the first PS4 emulator capable of running commercial games By...
-
7
@patrickhagertyPatrick HagertyPassionate about decentralized and disruptive technology. Blockchain and Web3 writer.
-
5
The best way to create & share charts on the internetSort by: Hey Product Hunt 👋 I’m Andrey, cofounder of Graphy. Massive thanks to @benln for hunt...
-
3
Apple class gets budding artists started by designing custom Ted Lasso ‘Believe’ poster News
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK