search

Joystream / atlas

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

YPP Atlas Scope #2973

Closed dmtrjsg closed 1 year ago

dmtrjsg commented 2 years ago

Context

Designs Link

LInk to Figma Screens Designs>

Link to Figma User Stories>

Scope

Tech

Design

Gleev branding and messaging

YPP Landing Page:

YPP Auth Flow:

YPP Dashboard:

┆Issue is synchronized with this Asana task by Unito

dmtrjsg commented 2 years ago

❓ - how users would update the email if they provided it wrong? - ✅ - They reach out on Dedicated Discord channel with request to upd email for contact.

⚠️ the link to discord needs to be added to YPP programme status once they are authorised.

KubaMikolajczyk commented 2 years ago

YPP Mid-fi mockups ✅ 🎥 Loom video (x1.5 / 37min): https://www.loom.com/share/fdbdb02678ac41a6bdb5792974544a3f 💾 Figma files: https://www.figma.com/file/Mn2ay2F5pynPQND4nUFxHv/YPP%3A-Youtube-partnership-program?node-id=1181%3A15701

bedeho commented 1 year ago

Thank you for this monster update, really well done, feel like you covered it all really well.

dmtrjsg commented 1 year ago

Hooks / Triggers

  1. Channel YPP widget. Suggest to show status in this widget as opposed to just a link to YPP. Maybe by a dot, grey/ green/ red; for not authorised, authorised, suspended), which serves a tooltip once hovered over.
  2. Where to show YPP: with the channel widget and side-nav, I recall there was an opinion that Banner may be excessive.
  3. Youtube authorised> see point 1 for creators, and for viewers I would not show any youtube info as this is diverting viewers from Joystream to Youtube, which we want to avoid :)
  4. Before creators are authorised, they can still drop down the widget menu to see what is there, but some options are disabled.

Landing Page:

  1. Add a small copy next to "Authorise Youtube Channel" it “it takes under 3 minutes” in the small copy on first screen?
  2. What is JOY - I would not include it, just design tooltip in a way that is discoverable and content that explains it well. (can be copypasted from Adam's designs)
  3. Not a youtube creator -> this needs to go, this page is entirely for creators, so I would go on to show Atlas NFts/ CRTs sections after the process is explained.
  4. Social proof -> I would move this up. Same with the recently paid out channels carousel. So it goes : Hero landing section > Recently paid / Top Authed channels > What do you need to get paid > how to do it > Atlas features.

Flow

  1. Reg creation flow last screen: Copy upd "Heard about youtube?" -> Earn X Joy by simply connecting your youtube Acc. -> Learn more
  2. From @bedeho comment: "Very nice handling of partial progress of user" - I thought We will not be able to display status of the steps on the landing page. Status will only be shown wrt auth state in the Channel widget (one with the downward pointing chevron). ~But happy to go with this if we have an allowance.~ I think not ideal in context of multiple channels see "After auth" section belpw - point 3
  3. Referred by > this should not be optional, but pre-populated with specific referrer or left empty based on cookies.
  4. Authorisation pending -> Most probably creators will be able to know if they are authorised or not immediately based on simple checks done programmatically. If they are not authorised, they will not sign T&Cs but get to the reject screen straight after youtube screens.
  5. I would not go after updating channel assets in modals for this project. But do strict MVP watch a few sessions rec and optimise based on where they drop off.

After authorised

  1. Pending status will not be shown as we will know from the get go if channel meets criteria
  2. Channel YPP widget could display which tier they are in?
  3. ⚠️ I think there will be a provision to authorise multiple channels (I don't see reasons not to), so we should keep the original CTA of landing page and perhaps not go down the path of showing progress/ status on this page wrt to their place in the funnel (no checked box once channel is created).
  4. Only authorised creators can benefit from referral scheme.
  5. Same wrt to Actions for which they get paid -> let's only cite them here without status, and re-cite again in the Channel widget modal - ⭐ great idea including these into the widget as
  6. What does this mean to Share Joystream on SM -> in my understanding they will publish Joystream-promoting content on their Youtube channel only, which then they would also get uploaded to Joystream (adding link to youtube) so that the validation of this would be the same process as regular sync uploads, but get more scores. TBC with Martin, but that's how I see it right now as only feasible way with low demand on operations.
bedeho commented 1 year ago

Social proof -> I would move this up. Same with the recently paid out channels carousel. So it goes : Hero landing section > Recently paid / Top Authed channels > What do you need to get paid > how to do it > Atlas features.

Agreed, was going to write this as well.

bedeho commented 1 year ago

I thought We will not be able to display status of the steps on the landing page

Right, so it depends on some specific channel being in context, which I guess it will not always be on this page, so you are probably right. 👍

dmtrjsg commented 1 year ago

Had a quick review today and here are some points discussed:

Discoverability

  1. Channel page sliding button ( with downward pointing chevron summoning drop down menu) will not be aiding to feature discoverability since does not naturally show in the flow, and has only use case for being visited is to upd channel assets (titile/ ava)
  2. Side nav is the only place where this feature will be persistently displayed. Considered to be okay, since most traffic acquisition will get users straight to the programme landing page.
  3. YPP Banner will be displayed on the channel homepage (viewers) to the channel owners. Banner can be closed permanently.
    🆕 (idea) When closed, we can prompt in a modal that this programme can be accessed from side-menu

Landing page

  1. Top creators authed will not be moving like carousel, but show a static row of cards featuring creators with top youtube followers. (or hand-picked, curated)

Authed status and links

  1. Channel page was considered a suboptimal place for displaying the slide button with YPP status and related links (info or action), due to its low frequency of visits by creators.
  2. YPP enrolment status would be great to decouple from the marketing (conversion- focussed) landing page to a more dedicated space (focussing on relevant links about the programme).
  3. We will explore scenarios of: Creating a dedicated page for the Authenticated users where they can see their status and find relevant links. This page will be accessible from side-nav YPP widget and via link presented on the Landing Page (View your Status)
  4. Status page will display the youtube channel name, for which the status is authorised.

Auth

  1. Youtube channel selection to be added to the email conf modal, as one gmail acc can have multiple channels.

Discussed but will not end up in the upcoming iteration

  1. Dima suggested to explore variation where status and links to relevant pages are shown as a section of the marekting page (underneath the top channels and above "what needs to be done"). A separate page is pretty much the same effort and better focus.
  2. Klaudiusz suggested to find a way and display the status of actions taken and payouts received on the status page (feeding off airtable), but the concern here is to keep the solution more lightweight to avoid committing to operational immediacy as we don't have the bandwidth on real or near-real time processing with this degree of granularity. Will be triaged at later stage and potentially added up as improvement after piloting the flow with ops.

Next steps

Kuba will create low fidelity iteration and distribute the Loom video

@kdembler @bedeho @KubaMikolajczyk @toiletgranny

KubaMikolajczyk commented 1 year ago

The following video update does not cover all feedback from the posts above - It's focusing on explorations for a simple YPP dashboard for users already enrolled in the program. This exploration is a result of our discussion on 25.07 where we decided that the "YPP page's" main function is to serve as a marketing tool, not a place where users goes to perform actions. 🎥 Loom video (13min/x1.5): https://www.loom.com/share/96c3bdc0f364420fb14378de0a6d5c7e 📄 Figma files: https://www.figma.com/file/Mn2ay2F5pynPQND4nUFxHv/YPP%3A-Youtube-partnership-program?node-id=1235%3A68596

Also:

  1. Youtube allows selecting a channel if the user has multiple youtube channels so we are clear.
  2. All of the changes from the feedback above will be available soon in the next update :)
dmtrjsg commented 1 year ago

@KubaMikolajczyk thanks for that, I think its a positive progress on overall legibility 👍

Version 2 is good enough imho and each "action card" would have the evaluation criteria as bullet points, so I see them being extended vertically in reality.

  1. Pls add Youtube channel name and contact email displayed on the "dashboard page".
  2. Please add channel Tier to be displayed on the status page. This is based on number of followers. 3 Tiers only.
  3. Publish on Social media will be Publishing Joystream content on Youtube channel only. With the YT creators this would be the main channel for reaching out their audience and within feasibility to be validated for scoring.
  4. I would not split activities to one time and repeatable. NB: NFT is not a rewardable action in scope of the programme for the time being. But I understand this will be a flexible list, so may change in the future.
  5. I wonder how the landing page would look like wrt the same content? Are you planning to re-use the same section there?

Overall interested to see how this would turn out to look like in high-fi!

bedeho commented 1 year ago

Looks good!

  1. I think the single column design which works across mobile and desktop is better.
  2. Lets avoid embedding payments records, and wait for My Payments.
  3. Can we drop the arrows and just make the whole row clickable? I find the arrow buttons to be notoriously easy to miss.
kdembler commented 1 year ago

@KubaMikolajczyk nice, I think this separate page works much better, glad you explored that.

Look all good to me, personally I prefer the last version you presented (2 columns with activity details on the right). Looking forward to hi-fi!

KubaMikolajczyk commented 1 year ago

Thank you guys for all of the feedback ❤️ Below I have a next hi-fi exploration of the YPP Landing page 👇 ( Be aware that we will discuss here only Landing not the whole flow) 🎥 Loom video: https://www.loom.com/share/5595fb504d334ad99ac9478b2cf22810 📄 Figma files: https://www.figma.com/file/Mn2ay2F5pynPQND4nUFxHv/YPP%3A-Youtube-partnership-program?node-id=1291%3A45406

dmtrjsg commented 1 year ago

Loving it,

Further to Bedeho's comments:

  1. Hero image

The one thing I would be concerned about would be whether people would discover that this center-line is adjustable

As discussed on the call, last iteration is a winner, but to overcome the discoverabilty issue some tuning is advisable.

Options that cross my mind:

  1. Steps to take: The large visual could possibly go and smaller thumbnail images I am in support of as they can communicate the point w/o need to read it. Showing google auth success screen is good, as brings some familiarity to the visual field. Third step of the process (get paid), suggest to use a small widget with your channel balances and CTA "Claim".

  2. Lastly I would possibly add a line of copy somewhere, saying smth along the lines of "Rewards are proportionate to the popularity of your channel. More followers you have - more JOY tokens you get upon verification." info on the Tiers.

  3. Thinking this can be a Tier1/ Tier 2/ Tier 3 slider which would change the remuneration amount on the section with Actions.

@bedeho cc, re tiers suggestion in point 4.

Draft tiers suggested here, but what could be the difference in remuneration? Log increase subject to overall budget for the programme? or Cost of user acquisition conversion chance duration of YPP campaign? This is also raised in the respective ticket here question on tiers.

KubaMikolajczyk commented 1 year ago

Below I have a next hi-fi exploration of the whole YPP flow 👇 🎥 Loom video: https://www.loom.com/share/98ff721e1cae41dab2eda05eac25d827 📄 Figma files: https://www.figma.com/file/Mn2ay2F5pynPQND4nUFxHv/YPP%3A-Youtube-partnership-program?node-id=1527%3A103180

kdembler commented 1 year ago

Cool stuff 😍

  1. I'm not a fan of the nav item on the viewer side. This will not work well with our current pattern of expanding those items:

https://user-images.githubusercontent.com/12646744/183639095-068d807a-ae00-4cf6-8c14-9c90483c9c71.mp4

We would need to instead do some custom things and fade in/fade out the content.

  1. I would go with the first iteration of widgets in the dashboard, like you suggested
  2. I like pattern badges + stepper with number of total tiers
  3. On YPP requirements: a) On what exactly "Joystream channel avatar, cover, title and description is properly set." means, we need your input @bedeho. I don't think it's feasible to actually check if the images are the same as on YouTube, so if that's a must-have validation, IMO we should just verify that they have something set. b) Regarding validation point mentioned above, I think it would make most sense that this validation is actually done in-app and not by the backend so we would need to somehow stop the user along the way if they don't match the criteria c) On all the videos being at least 1 month old, I think it's exactly how it sounds. At least 10 videos that were each published later than 1 month ago
  4. I think we need a clear CTA "Authorize with YouTube" or "Authorize with Google" before we redirect people outside of Atlas to avoid confusion
  5. I think some there's some confusion around the "channel collaborator" thing we mentioned. This is a purely technical thing. It will be just some random membership called "jsgenesis_yt_sync" or something like this, not a real person from the DAO/jsgenesis. This also applies to what's visible on "Publish video on Atlas" task - there's a collaborator info there but I don't think there will be any real assignment to specific channels.
  6. Regarding terms and conditions, I think it's helpful to have those embedded in the app and not an external resource, it's a pattern we already use when creating a membership. Tbh, I would do T&C as a separate step and then show info about adding collaborator to the channel on next step, using the "Your collaborator" step (taking into account point above) that you prepared.
  7. Keep in mind, that after user accepts that we will update their channel, they will need to go through the Polkadot flow and actually wait for the transaction to succeed. Or we could use the minimized transaction snackbar instead maybe. We also need some processing state after the user goes through the full flow and we actually send the data to the backend. We will do a couple things on the backend side so it may take a few seconds to finish.
  8. Regarding the authorization failed step, we won't be able to show this immediately after coming back from Google. To verify this data we actually need to send the data to our backend and as we imagined it, that would happen only after user goes through additional info, T&C and channel update. We could modify the flow to do backend validation right after Google but it wouldn't be trivial so I would recommend adjusting the designs instead
  9. I would skip the split button in channel view to take YPP actions and just redirect the user to the YPP Dashboard to take actions from there instead
dmtrjsg commented 1 year ago

@KubaMikolajczyk excellent work ⭐ we are almost there 👍

LP

Rewards

  1. How can you Earn Rewards? -> Change copy to "Collect rewards for publishing your videos". Add to the existing para after "and much more.." with "Creators with larger audience receive greater rewards."
  2. I imagined we would expose the three tiered rewards, perhaps with a three state toggle, by default on Tier 1. Once state changed, rewards are updated accordingly. We can re-use the component from the Dashboard for this. If that's too expensive this can be achieved with a line of Copy as "Your rewards go x% up with every new popularity Tier achieved." Maybe we should call it Popularity Tier actually.

Three simple steps to start 1.. "Claim your JOY" Cta positioning would be better if we aligned the copy and positioning with the joystream.org landing page.. center it, use same sizing and copy "Claim your channel".

  1. Takes under 3 minutes to start.. could it take under 1 minute? If so, that's more snappy as 3 minutes is too long :)
  2. Three step thumbnail images. I'd use the Google Channel Selector screenshot as this tickles familiarity. Familiar things are good for conversion.

There's a lot more to Youtube programme

  1. I like the visual aesthetics here, but having it repeating the content from the section Rewards downplays it. Would it make more sense to use these elements for the Rewards section above? (we'd need to upd the content in the small font steps, but the interactivity of chevrons expanding to more details is good and would also work for the landing page)
  2. Collaborator would not be shown, it would be a technical account operated by JSgenesis.
  3. Creators would not need to do anything other than stick to the programme rules. Periodic review would be done for all channels partaking in the programme without their need to do anything other than the steps outlined.
  4. Copy is finalised for Joystream.org for the feature sections, so we could just take it from here>

Placement of YPP link

  1. I may be alone here, but this version worked better with me. I would even go further and add a small link "View dashboard".

    Screenshot 2022-08-09 at 16 29 44

  2. If the consensus is to go with the v2 icon, I'd place it closer to followers, rather than next to the Title of channel. Can we make it clickable, so on hover its a pointing finger cursor and takes to dashboard or YPP programme LP?

  3. When you say viewers' POV, is this Creator viewing their OWN channel as Viewer? If so its ok. But I don't think we need to advertise their Youtube channel to all viewers, as this may trigger leakage of traffic, which we don't want.

Dashboard

  1. Links / Widgets -> version one is good
  2. Tiers display UI: Badge and Progress Bars for me worked best.
  3. Actions: I'd suggest to design them in a way that they are fully expanded at all times with clear CTAs linking to the relevant parts of Atlas.
  4. We need to preserve the way for creators to authorise multiple Youtube channels. Perhaps for creators who already authorised we can add a link "Add another channel" or smth.

Creating Joystream Channel Flow

  1. Copy: "Heard about Youtube?" -> "Already a Youtube Creator?"

Authorisation flow

  1. Re "Properly set" I think just having non-empty is good. Creators may choose to express themselves differently on Atlas.
  2. Referrer will be automatically populated based on the info stored in browser cookies. We need this explained in the Tooltip next to it.
  3. [@kdembler covered it mostly I agree with his points, and I like the checklist with failed/ accepted conditions. Shall we go with this and relay this point to Zeeshan while he is working on it if its also a go from your end?

Channel Youtube component (drop down)

  1. I thought we agreed to drop them in favour of Dashboard.
bedeho commented 1 year ago

You guys have this covered, really looks amazing @KubaMikolajczyk , fantastic work :)

KubaMikolajczyk commented 1 year ago

Hey there team 🖐 Below is the last Hi-fi iteration and as much finalization as I could do in those last days of the YPP👇 (the only things left now would be any changes if you have any more comments and RWD for YPP Landing & Dashboard) 🎥 Loom video: https://www.loom.com/share/03c9f087bae240ceb7c584b55b5ad31a 📄 Figma files: https://www.figma.com/file/I55WY2JuOzLYOFVq47RH2v/YPP%3A-Youtube-Partner-Program?node-id=1606%3A85533

dmtrjsg commented 1 year ago

@KubaMikolajczyk amazing, all of this looks so good 🙌 can't wait for this to get released 💪

☝️ Small updates:

Landing Page:

  1. "Manage your channel on a simple dashboard" -> "Manage your participation in a simple dashboard" + Move this section to the bottom of the list, as its prob better to start with real value proposition.
  2. I like variation 3 as this will also work better on mobile devices!

Auth flow:

  1. Reg creation flow last screen: Copy upd "Heard about youtube?" -> Earn X Joy by simply connecting your youtube Acc. -> Learn more
  2. Referrer will be pre-populated based on cookies, there will not be a member lookup
  3. I would remove the actions from here, but show the Popularity Tier of the creator, + Go to dashboard CTA only. Reason: each reward has a set of conditions that worth bringing up before user can start reward flow actions.

Suspended Channel:

  1. Suspended channel dashboard should have CTAs on rewards as disabled CTAs.

cc @toiletgranny

dmtrjsg commented 1 year ago

Things to follow up on:

  1. Update LP CTA to Go to Dashboard for participating channels (+ small note, same as one in the bottom of dashboard on how to add another channel)
  2. Responsive
  3. Remove Links to actions on Auth Flow last step > Confirmation page, only link to dashbaord (maybe some visual?)
  4. We are not able to pre-populate emails for that screen in Auth flow, so microcopy needs to be updated
  5. Auth flow requires signing before revealing the outcome of authorisation (in both success and fail scenarios)
  6. Mechanics of LP hero image default and animation
  7. All other figma comments
toiletgranny commented 1 year ago

Hey @dmtrjsg, all the above points (and more) are now addressed and are ready to be implemented. :)

https://www.figma.com/file/oQqFqdAiPu16eeE2aA5AD5/YouTube-Partner-Program?node-id=1818%3A91087

dmtrjsg commented 1 year ago

MM on Sync up call 8th Feb:

  1. All atlas features will get merged today to the new atlas-dev env. So original milestone of complete baseline atlas QA holds up and starts today 👍
  2. Apps remains on the critical path, and based on some delays with PR reviews by Leszek due to urgent other things with env fixes and ephesus reviews pushed the project back by a few days with the new ETA for apps on Atlas side being next Monday, 13th Feb plus 2 days for testing and small contingency, making it next Wednesday. YT sync for apps will take few days so Released Apps + YTsync side of apps should be completed by end of next week, Friday 17th.
  3. Meaning, fault tolerance testing can only be conducted on wc 20th; Leaving 3 days to execute and a day for updating prod values we are looking at launchable 24th of Feb.
  4. Few days for contingency/ reviews and handovers still realistic to launch it before February ends.

Asana link>

Screenshot 2023-02-08 at 17 49 35

cc @bedeho @drillprop @WRadoslaw @attemka @zeeshanakram3