Joystream / atlas

Whitelabel consumer and publisher experience for Joystream
https://www.joystream.org
GNU General Public License v3.0
100 stars 44 forks source link

Design: Unified landing page for creator earnings #6086

Closed dmtrjsg closed 4 months ago

dmtrjsg commented 6 months ago

Context

With launch of creator extended rewards which will be listed in the YPP dashboard (link) it would be good to tell about them in the Gleev app. Now we have 2 dedicated landing pages already so adding another one would be an overkill. Also the core messaging about fast cash in exchange for YT sync is attracting low quality creators and falling short of sending the key message focussed on long term broader opportunities.

Suggestion to collect all monetisation potential into a single landing page and A/ B Test it against the current version.

Scope

Create a new version of the YPP landing page

  1. Update YPP page to "Earn"
  2. Update logo from yt to $
  3. Update H1 tagline to "Embrace Web3 creator economy"
  4. Update H2 tagline to "Connect and discover earning opportunities with Gleev."
  5. Change CTA to "Create New Channel" and remove branding - > this flow will just create member and channel in one flow without syncing. Add second CTA "Sync from YouTube" -> this flow will create channel based on API-less YT flow that you are cooking. Here add a small link to "Earn as viewer> " this points to lowed down on the page for viewers section (described below).
  6. Then we have a carousel of signed up channels.
  7. Then Hero image - entails showcase cascaded screens from Tokens Marketplace/ Rewards Dashboard (with collapsed accordions) / Payments dash with button "Withdraw" visible
  8. Add a widgets with creator earnings: Total Rewards Paid / NFTs sold / Creator Tokens Sold > these will show rewards to date across all channels.

  1. Then we want Section dedicated to "Creator Earning opportunities"
    • YouTubers Connect your channel and get rewarded for synced videos. Some condensed indication of sign up and sync rewards per tier where we can just show tiers as small avatars
    • Creator Tokens Mint your token and raise funding for your channel.
    • NFTs Mint your NFTs and sell on marketplace.
    • Other opportunities Earn with building out community and social promotions.

The entirety of this section is rather condensed and fits to one screen - ends with same CTAs as above - create channel or Sync with Youtube. Also let's add connect with us on Discord.

  1. Then we want current video on how to connect

  1. Then we want "Viewers Earning opportunities"
    • Earn with Referrals Refer YouTube channels and earn when they sign up using your link
    • Claim channels revenue share Buy creator tokens and claim part of channel's revenue
    • Trade Creator Tokens Become an early investor and trade your tokens once the channel grows in popularity
    • Trade NFTs Own and trade collectibles from wide variety of channels small link Learn more (connects to referrals page)

Also let's add connect with us on Discord.


Let's add Roadmap section

And include same features as we have now

msmadeline commented 6 months ago

@dmtrjsg Hey, I finished doing low fidelity design for the landing page. Looking forward to your feedback!

➡ figma file: https://www.figma.com/file/93tBZ0eMm9MZ4afr9rjwdA/Landing-page-for-Creator-Earnings?type=design&node-id=1-642&mode=design&t=L7fJYb5wLgSpKImf-4 🎥 loom video: https://www.loom.com/share/99a2671c652840e0a4537502baebf4ee?sid=0c5db4a8-3d20-45ab-acdf-a80e2c6284ad

msmadeline commented 5 months ago

@dmtrjsg Hey I finished doing high fidelity design for the landing page. Let me know your thoughts!

➡ figma file: https://www.figma.com/file/93tBZ0eMm9MZ4afr9rjwdA/Landing-page-for-Creator-Earnings?type=design&node-id=36-73162&mode=design&t=KlZPCMi9oTJU8NkL-4

🎥 loom video: https://www.loom.com/share/7a67579bde2a4fc08c267d8a1a53daf6?sid=7e27af95-8bf2-4d82-a73e-38be05f2fadb

msmadeline commented 5 months ago

@dmtrjsg Hey! I implemented the feedback that you gave me ✅ Let me know wdyt

➡ figma: https://www.figma.com/file/93tBZ0eMm9MZ4afr9rjwdA/Landing-page-for-Creator-Earnings?type=design&node-id=59-23813&mode=design&t=FnyFLshO6qlcMqTg-4

msmadeline commented 5 months ago

@dmtrjsg Hey I did the RWD for the landing page

➡RWD: https://www.figma.com/file/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?type=design&node-id=6425-67519&mode=design&t=OEW3U0AiHDXekHjd-4

➡Page component: https://www.figma.com/file/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?type=design&node-id=6425-78542&mode=design&t=OEW3U0AiHDXekHjd-4