search

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

Referrals page #4931

Closed dmtrjsg closed 1 year ago

dmtrjsg commented 1 year ago

Context

Simplify referrals for new members

Scope

KubaMikolajczyk commented 1 year ago

@dmtrjsg created low fidelity explorations for the Referrals page and recorded a video update about it to further explain the design thinking there ✅

🎥 Video update: https://www.loom.com/share/c13278b2070541549725ffd5ca71a814?sid=57213e47-ee72-43f1-9976-7a182807d23f

📄 Exploration file: https://www.figma.com/file/ZBZI3Od7qHddy1USVYtRaB/Referrals?type=design&node-id=1%3A3&mode=design&t=GclhAOqnwL0ChFum-1

dmtrjsg commented 1 year ago

v2 looks better imho, and added a few comments to Figma

KubaMikolajczyk commented 1 year ago

@dmtrjsg I have the high fidelity first iteration of the Referrals page - its ready to be reviewed ✅

🎥 Video update: https://www.loom.com/share/eea81d810cfd41bc94c9216727e0a100?sid=b69f2cdd-16db-4b80-b21a-c571f75e5dad

📄 Referrals file: https://www.figma.com/file/AHeOPBgaJxmZb0zamEHhq8/Referrals?type=design&node-id=1002-7657&mode=design&t=PM0YRDDN6N5zvEBj-4

🖥️ Prototype: https://www.figma.com/proto/AHeOPBgaJxmZb0zamEHhq8/Referrals?page-id=1%3A15535&type=design&node-id=1069-4670&viewport=-715%2C-479%2C0.26&t=rdfjZxt73y2GVrfn-1&scaling=scale-down&starting-point-node-id=1069%3A4670&mode=design

dmtrjsg commented 1 year ago

@KubaMikolajczyk thank you for putting it together, absolutely love it in high fidelity! ❤️

Comments:

KubaMikolajczyk commented 1 year ago

@dmtrjsg The final designs for the referrals are here, together with user stories, RWD, and custom animation files ✅ Please make sure to check the prototype!

🟠 If you are a developer please watch the whole RWD section walkthrough!

🎥 Video update: https://www.loom.com/share/dcfbecf579ef43b9a63e14cade12e42d?sid=98fc78c3-9d3e-4afa-a48d-b5ec8c02e8c1

🖥️ Prototype: https://www.figma.com/proto/AHeOPBgaJxmZb0zamEHhq8/Referrals?page-id=1115%3A12275&type=design&node-id=1115-12279&viewport=849%2C853%2C0.46&t=2vCmAVLE3UyUVBvF-1&scaling=min-zoom&starting-point-node-id=1115%3A12279&mode=design

📄 Referrals changelog: https://www.figma.com/file/AHeOPBgaJxmZb0zamEHhq8/Referrals?type=design&node-id=1-14419&mode=design&t=VP8fSqL3tuuDIpvD-4

dmtrjsg commented 1 year ago

@KubaMikolajczyk off the back of the marketing sync meeting we have a few things to add to it

  1. Toaster banner showing 30 seconds into the session when user is on Homepage or studio, pulling users to the referrals page
  2. Update referral rewards to 2 dollars for Bronze (add bronze to second section)
  3. Additional tier for Top Referrer component (bronze)
  4. Add link from Dashboard referrals to the referrals page (tbc?)
KubaMikolajczyk commented 1 year ago

@dmtrjsg Every requested change is done and can be reviewed below ✅

📄 Referrals changelog (New tier in tier section + new tier counter in top referrers): https://www.figma.com/file/AHeOPBgaJxmZb0zamEHhq8/Referrals?type=design&node-id=1-14419&mode=design&t=AWBppHxWq3VZRoKo-4

📄 YPP Dashboard changelog (new learn more link): https://www.figma.com/file/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?type=design&node-id=3338-84773&mode=design&t=Dg543KQxARuCqFhL-4

📄 Web components announcements (top banner): https://www.figma.com/file/Pf31tuYpozYmpq163U2ho8/Web-components?type=design&node-id=14281-33200&mode=design&t=eoB7wkLxHNzi1Dh8-4

📄 Referrals changelog (referrals banner user story): https://www.figma.com/file/AHeOPBgaJxmZb0zamEHhq8/Referrals?type=design&node-id=1381-20005&mode=design&t=AWBppHxWq3VZRoKo-4

https://github.com/Joystream/atlas/assets/31144205/57a02ff0-decc-4a2a-bb55-c88e94168fac 👆 *Note: Banner has animated elements inside.

dmtrjsg commented 1 year ago

@KubaMikolajczyk can we do an upgrade of OpenGraph referral links preview (Without the 20%) but similar to how it was done in v2?

KubaMikolajczyk commented 1 year ago

@KubaMikolajczyk can we do an upgrade of OpenGraph referral links preview (Without the 20%) but similar to how it was done in v2?

Its here: https://www.figma.com/file/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?type=design&node-id=5911-40087&mode=design&t=2dBFN4ud05W5bpMS-4

dmtrjsg commented 1 year ago

Great stuff Artem! Almost there..

Banner

1️⃣ Did not trigger for me on the preview branch. Here's the link to user story>

Referrals page

1️⃣ . Colour of hyperlink needs to be double checked

Screenshot 2023-11-03 at 12 22 59

2️⃣ . Top section table animation: can we make animation on the top section to update the table faster (every 2 seconds)

3️⃣ . The "Earn even more section" needs to be commented out as we are not launching this just yet 😬

4️⃣ . The avatar should lines connecting to the tiers:

Screenshot 2023-11-03 at 12 27 46

5️⃣ . Dimensions of the core CTA needs to be revisited (needs to be bigger)

Screenshot 2023-11-03 at 12 28 58

6️⃣ . The header of the section should be Top Referrers

Screenshot 2023-11-03 at 12 29 40

7️⃣ . The central animation with steps needs to change to next step after the previous one is finished See recording (15:30 timestamp)

8️⃣ Referrals link from CTA should get to ypp/dashboard/referrals (now gets to /ypp/dashboard)

9️⃣ Referrals dashboard need to have primary CTA on top in all cases (even if it is empty, as this helps w referrals on mobile)

__ ⚠️ Could not test

  1. Top referrers endpoint as needs to be on dev before I can test
  2. Showing avatar of channel on the referrals page (as assets upload always failed for avatar)
attemka commented 1 year ago

@dmtrjsg thank you for the review.

  1. ✅
  2. ✅ increased speed to 2x, let me know
  3. ✅
  4. ✅
  5. ✅
  6. ✅
  7. ✅
  8. ✅
  9. ✅

p.s. top referrals endpoint works on dev (but with less channels\data)

KubaMikolajczyk commented 1 year ago

Hey @attemka great job! Here are some elements that I spotted:

Grid layout

  1. From LG the layout looks different than on designs - we have 64px paddings on left and right while in designs we have a centered grid
  2. Please check the spacing between sections on different breakpoints - eg. on LG we should have 96px of space between sections not 64px but it depends on the breakpoint
  3. Please double check the spaces inside of sections as those also change across different breakpoints - eg. XXS breakpoint should have small spaces inside of sections while now in How to start we have 72px

Hero section

Overall

  1. Logo being displayed should be gleev not atlas

XXS

image

  1. The top navigation is different than in designs
  2. Logo should be spaced from the top nav
  3. Distance between logo and title header is to small
  4. Distance between header title and desc is too large ^ all of the above holds true for all breakpoints

MD

image

  1. It looks like everything here is not aligned to the center

How much you can earn

Overall

  1. Too big of space between title and description
  2. No lines connecting avatar and cards
  3. Gap between the check icon and list items in tier cards should be 8px

XXS

image

  1. Additional space in vertical layout inside of the cards below the points is not needed here

MD

image 1.Earn for referring is centered instead of being left aligned

LG

image

  1. Cards should use 10 columns of space not whole width of the container + the grid is not like in designs here

Earn even more

Overall

  1. The gap between title and description is too large

XXS

image

  1. Description uses only 10 columns of space image
  2. The illustration is displayed in such way that its cut + it looks like the avatars numbers and the lines are not aligned

SM

image

  1. On this breakpoint this visual should be centered like in designs

LG+

image After LG the grid is centered and do not scale anymore and the elements in this section should take 10 columns of it

How to start

Overall

  1. The steps should have an animated background and change automaticly

XXS

  1. The gap between steps should be 16px
  2. The gap between the number and the title inside of the step should be smaller
  3. The spacing between the elements inside the section is too large

SM

  1. The button should have a fixed width of 240px

MD

image

  1. The video uses incorrect amount of columns and it is not using the correct height it should fill all columns horizontally + adjust vertically to keep the ratio - and now there are gaps on the left and right side
  2. The steps should take 5 columns of width

LG

image

  1. From this breakpoint the whole sexction should use 10 central columns
  2. The above problems from MD brakpoint still exists

Top referrals

Overall

  1. Avatar does not load
  2. The referred channels tiers have the wrong sizing - those are too big - please chek with the designs
  3. If we resigned from border animation please remove the gradient left border on this card

Breakpoints

  1. There are no users except only 1 so I cannot review the full layout for any breakpoints

Bottom CTA

Overall

image image

  1. The gradient on implementation is too intense - its almost all blue while on the design we have a subtle hint of gradient
  2. Space between the title and description is too big

XXS

  1. Padding is too large

XS

  1. Padding is too large

LG

  1. The banner should take 10 columns of space on a centered fixed layout