search

Joystream / atlas

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

YPP 2.0 - landing page #4824

Closed dmtrjsg closed 11 months ago

dmtrjsg commented 1 year ago

Context

Scope

:one:

Walkthrough Video

Add section with video walkthrough of the sign up

:two:

Connecting is Safe

Add section about "read only" scopes, verified by google and risk free sync. It needs to be re-assuring, and emphasise the point that Gleev is Verified by Google Auth Team, and only gets readonly access to YT data via public API.

Here's what we have on it: 

During the authorisation, backend application g*leev-creators* operated by JS Genesis needs to be granted access to 

- Access to the YT content (`youtube.readonly`  scope), to fetch channel meta data, content information and enable the sync service
- Email address for the Google account connected with YouTube channel that gets connected from `[user.email](http://user.email)` scope
- `user.id` from `user.profile`  scope for authentication

:three:

Tiers

Update YPP landing page with new tiers (iron, bronze, silver, gold)

:four:

Monetization

Update section on the monetization features

Remove the section that talks about Dashboard, Upload of videos and Auto-sync. And instead, replace with section on "There are more ways to monetize your channel with Gleev"

NFTs Creator tokens Tips (visual) Gated content (we need one visual)

:warning: the auto-sync feature would need to be still somehow explained early on. We will have the improvements for the dashboard with syncing queue and verification status, so maybe we can do a visual on that if that's not out of place (tbc)

KubaMikolajczyk commented 1 year ago

@dmtrjsg I finished exploring solutions for this issue which are ready to be reviewed now ✅

🎥 Loom video: https://www.loom.com/share/29aeea87d8af4d4093f4dd2384bd38b8?sid=9a411ba7-299a-482d-911f-252394078dc0

📄 Exploration file: https://www.figma.com/file/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?type=design&node-id=4756%3A52380&mode=design&t=3pcIDLIlLHJdMhc9-1

▶️ Prototype preview: https://www.figma.com/proto/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?page-id=4756%3A52380&type=design&node-id=4796-176658&viewport=3800%2C933%2C0.22&t=gR3adDrbI7AGXwCf-1&scaling=min-zoom&starting-point-node-id=4796%3A176658&mode=design

dmtrjsg commented 1 year ago

Thank you @KubaMikolajczyk for a quick turnaround, nicely done!

  1. Video hero -> I would keep the original hero visual on the landing page and add "How to get started" as a second section from top (or actually even third one after rewards). So it goes
    • Original Visual
    • Creators paid already carousel
    • Rewards
    • How to get started
    • It's safe
    • Monetization features

In terms of placement keeping the centered titles work best for me. Perhaps even adjust the font of the bold titles to match with the ones that you are using for the Joystream.org.

  1. Tiers: I like the concept and presentation, we just need to work on the copy. Grades:

    • Bronze, silver, gold, diamond Card:
    • Drop the "requirements" title. Single "Rewards" title may be just enough.
    • Rename reward types: -- Sign up -- Sync per video -- Referral
    • Requirements Wording would need to be updated, the one used there is meant to be internal guideline only 😅 but will provide the copy on the next iteration.

  2. Connecting is safe: Perhaps we can use a big banner, instead of the fully fledged section. Not sure if we want it interactive either. Was thinking perhaps we could use smth similar to what we have here in the bottom of the page:

    Screenshot 2023-09-11 at 14 47 17

  3. Monetization Looks great! Just let's rename "Support" to "Tip" on the third feature

  4. We dropped "Three simple steps" section. The video walktrhough will cover for this case.|

  5. Use gradients from joystream.org (and font for section titles) to connect the two.

KubaMikolajczyk commented 1 year ago

Hey @dmtrjsg I finished the updating deigns and implementing your suggestions ✅

🎥 Video update: https://www.loom.com/share/fcd58fb407614540a77752fd63d6d08c?sid=980618e2-31fc-4507-b054-0923ea2dabb3

🖥️ Prototype: https://www.figma.com/proto/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?page-id=4825%3A14669&type=design&node-id=4826-20683&viewport=2998%2C837%2C0.18&t=JqaQMODOCP4Ygqw4-1&scaling=min-zoom&mode=design

📄 Exploration file: https://www.figma.com/file/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?type=design&node-id=4826-20683&mode=design&t=SgzSZPfrnc7E0hee-4

dmtrjsg commented 1 year ago

@KubaMikolajczyk Great job sir!! ABSOLUTELY LOVING THE REFRESHED LOOK OF THE LANDING PAGE ❤️

Comments and copy suggestions are left on the prototype.

KubaMikolajczyk commented 1 year ago

Hey @dmtrjsg @attemka I finished updating all final files for the changes on the landing page - it required not only updating the page itself, but also creating new typography styles for our design system and creating animated background assets - but its done ✅

🎥 Video update (24min in x1.2): https://www.loom.com/share/2bd542a1686c45b892bc1ac888989370?sid=62011edc-84b5-4075-8e66-d13bb1fe545c

📄 YPP Changelog: https://www.figma.com/file/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?type=design&node-id=3338-84773&mode=design&t=ZpmRwcRoT9HHpM43-4

dmtrjsg commented 12 months ago

Review of https://atlas-90xe0j4dd-joystream.vercel.app/ypp

  1. Would it be possible to start the CSS animation when its in the bottom of the container, otherwise it looks very different:

    Screenshot 2023-09-26 at 16 14 27

  2. The Cookies popup seem to have been added to the revised container and looks cut off in the bottom:

    Screenshot 2023-09-26 at 16 14 10

  3. I'm not sure why do we have the Diamond tier pre-selected? This section now is not interactive as I understand @KubaMikolajczyk should we drop the rectangle?

  4. This text need to be updated to match the designs

    Screenshot 2023-09-26 at 16 20 41

  5. Is carousel not showing because will only work on Dev?

    Screenshot 2023-09-26 at 16 21 39

  6. Dimensions of the tier boxes seem to be slightly wider compared to designs:

    Screenshot 2023-09-26 at 16 23 10

  7. There's a scroll bar on the video, perhaps the dimensions of the box would need to be updated

    Screenshot 2023-09-26 at 16 23 43

  8. Have we removed this part?

    Screenshot 2023-09-26 at 16 25 16
WRadoslaw commented 12 months ago

@dmtrjsg

  1. I can, but it will look different since we use CSS instead of video.
  2. Can reproduce, plus modal were not touched in this pr
  3. I'd say diamond is not preselected, it just has border to seem premium
  4. Fixed
  5. Yeah, it's not working on dev
  6. Adjusted
  7. It only scrolls when there is a video error, which won't happen when we have our demo video. (now we use some random orion video)
  8. WDYM? If you mean why 2nd img YT one is not dimmed, I couldn't make it happen with CSS, since img and animation are on different layers
dmtrjsg commented 12 months ago
  1. If it can start in a diff position (not from the top that'd be ace).
  2. True, I had the browser in a diff dimension and zoom level 🤓
  3. If its not confusing then I guess we can keep it like that..
  4. There' was a background image there with YT sliding, but I see that is now overwritten by the blue effect css layer so no worries there sir, thanks for clarification.
dmtrjsg commented 12 months ago

@KubaMikolajczyk

We discussed everything and all looks fine just agreed to start the glare effect on the top section from the botton right. Have a look and if all is good we are shipping it as is.

KubaMikolajczyk commented 12 months ago

(cc @dmtrjsg ) @WRadoslaw thank you for this implementation 👌 I'm sad to see that many sections do not use grid system and a lot of them is missing rules that were described in the RWD designs. I found a lot of issues which I list below by section and then by breakpoint 😢

Overview and conclusion

Hero container

Universal

  1. The gradient animation jumps when reaches about 75% of animation it does not complete a full circle (not looped)
  2. Space between the copy (title and description) & Youtube + Goolge logos should be equal to 48px, while space between those logos and the button should be equal to 24px
  3. The YouTube preview behind the Gleev preview in key visual should gradually loose opacity as user scrolls

Breakpoint XXS

  1. Border radius of the hero container should be 24px instead of 32px
  2. Hero section overlaps with top navigation menu button image

Breakpoint SM

  1. Border radius of the hero container should be 24px instead of 32px
  2. Both main h1 and subtitle should take 10 columns of width - and I feel now they take 8 columns
  3. Hero section overlaps with top navigation menu button image

Breakpoint MD

  1. The title should take all 12 columns of width image
  2. The subtitle should take 8 columns of width
  3. Top padding should be 32px not 96px

Breakpoint LG

  1. The h1 title should take 10 columns of width
  2. The subtitle should take 6 columns of width
  3. The key visual should have max width 1082px

Recently paid out channels

Rewards section

Universal

  1. The tier names inside of the rank cards are missing a box shadow on the text
  2. The rank icons have 42x42px of size - it should have 48x48px
  3. The gradient on the rank cards looks like a simple linear gradient - while in designs its a radial gradient (looks different than in designs)
  4. "Payments are made in JOY tokens" is not aligned horizontally with the information icon

Breakpoint XXS

  1. In header of this section title and subtitle should have 16px of gap - now it has 12px gap + 16px of top margin on subtitle
  2. Space between subtitle and the first rank card should be 48px not 64px
  3. Gap between cards should be equal to 16px not 24px
  4. Space between last card and the "Payments are made in JOY tokens" should be equal to 16px not 40px

Breakpoint SM

  1. In header of this section title and subtitle should have 16px of gap
  2. Both title and subtitle should take 10 columns of space
  3. Rank cards (tiers) - should take 10 columns of space - and not be of fixed width as it is right now.
  4. Space between header (title &subtitle) and the cards should be equal to 48px not 64px.
  5. "Payments are made in JOY tokens" is displayed outside of the 10 columns container which should align with the right side of the cards container
  6. Gap between cards should be equal to 16px not 24px

Breakpoint MD

  1. In header of this section title and subtitle should have 16px of gap
  2. Title should take 12 columns of space
  3. Subtitle should take 8 columns of space

Breakpoint LG

  1. Header title + subtitle are not using grid system - the width is set to fixed value. Header should take 8 columns of space and subtitle should take 6 columns of space
  2. Gap between them should be 16px
  3. Ranking cards should take 10 columns of width not be on fixed width.
  4. "Payments are made in JOY tokens" is displayed outside of the 10 columns container which should align with the right side of the cards container

Sign up in 30 seconds

Universal

  1. The player has 640px max width and is not using any grid system. It should be using grid system

Breakpoint XXS

  1. Gap between the section header (title & subtitle) and the player should be equal to 48px

Breakpoint XS

  1. After reaching 680px - video no longer fills the 12 columns (full width) and stops at 640px max width

Breakpoint SM

  1. Video player should take 10 columns of space

Breakpoint MD

  1. Video player should take 8 columns of space

Breakpoint LG

  1. Video player should take 6 columns of space

Connecting is safe

Breakpoint XXS

  1. The check icon should be 40x40px
  2. The "List" container should have 16px padding both vertical and horizontal
  3. "We can read" header inside the list container should use H400
  4. Gap between each individual list item should be 16px while gap between the whole list and its header should be 24px

Breakpoint XS

  1. The "list" container should use 12 columns not a max fixed width.

Breakpoint SM

  1. Both header title and subtitle should use 10 columns of space
  2. The "list" container should use 10 columns of space
  3. The list text should use T400 from this breakpoint
  4. The check icon should be 56x56 not 52px
  5. Padding should be 24px in list container not 32px

Breakpoint MD

  1. Both header title and subtitle should use 10 columns of space
  2. The subtitle should use T500 from this breakpoint
  3. The "list" container should use 8 columns of space
  4. Gap between list container and the header (title&subtitle) should be 64px from this breakpoint

Breakpoint LG

  1. Both header title and subtitle should use 10 columns of space
  2. The subtitle should use T500
  3. The "list" container should use 6 columns of space

Monetize

Universal

  1. All illustrations are not using the grid to define the width but just have min and max width set + 100% width. It shouldn't work like that please read the RWD docs.

Breakpoint XXS

  1. All illustrations are not using the grid but just have fixed width and are cut when displaying them on small screen. Not adjusted to small screen
  2. The gap between illustration and its content should be equal to 24px not 16px
  3. Content titles should be equal to H400 not H500

Breakpoint SM

  1. Header (title+subtitle) should use 10 columns of the grid
  2. All illustrations should use 10 columns of grid in width (for now those are set for max width 640px)
  3. All content elements should use 8 columns of grid

Breakpoint MD

  1. Header title uses 12 columns of grid
  2. Subtitle uses 8 columns of grid

Breakpoint LG

  1. Header title uses 8 columns of grid
  2. Subtitle uses 6 columns of grid

Bottom Banner CTA

Universal

  1. Not using the grid. Spacing in designs is documented based on grid.
  2. Should have 8px of border radius

Breakpoint XXS

  1. Should have 24px of padding not 64 and 32.
  2. Header text is not set to fill container width

Breakpoint XS

  1. Should use 32 padding

Breakpoint SM

  1. Text not using the whole width of container
  2. Padding should be 64 vertical and 48 horizontal not 32
  3. The patterns are badly positioned - please export them once again I cut it to the size so you don't have to make effort to position it absolutely (please remember that each breakpoint has different patterns positioning so please change assets on breakpoints)

Breakpoint MD

  1. Text not using the whole width of container
  2. Padding should be 64 vertical and 48 horizontal
  3. Export patterns for this breakpoint separately.

Breakpoint LG

  1. Text not using the whole width of container
  2. Padding should be 64 vertical and 48 horizontal
  3. Export patterns for this breakpoint separately.
  4. Banner should use 10 columns of space and not be using fixed width.

Bottom CTA Links

Universal

  1. Should have border radius 8px

Breakpoint XXS

  1. Gap between cards should be equal to 16px not 32
dmtrjsg commented 11 months ago

There will be a small change to the landing page reward tiers

🆕

Sign up: Diamond: 100 USD Gold: 50 USD Silver: 25 USD Bronze: not paid

Referral: up to 50 USD - For all tiers

KubaMikolajczyk commented 11 months ago

@dmtrjsg @WRadoslaw I did a second review of the landing page today and out of 86 issues, 33 still remain unresolved, additionally, 5 new issues were spotted after the recent implementation changes.

I decided to not follow with a written review in GitHub - instead, I copied my last review to Figma and did a second one by checking each pointed-out issue with implementation and noting on top of it.

📄 Link to the review in figma: https://www.figma.com/file/H8DZFcbPjP431NBoa48FVr/Untitled?type=design&node-id=1-14&mode=design&t=MqDNGJcoD7iqJkvp-4