Landing Page Tweaks

[bedeho]

Background

The Joystream landing page (http://www.joystream.org) has been live a while now, and it requires some readjustments to align it better with current priorities.

Proposal

• Hierarchy: There is an overall lack of a strong hierarchy on the page, which makes it really easy to loose track of what is being said, and how things fit together. There are two things which currently communicate this, the changing of background colours, and the size of section and content titles. This needs to be cleaned up. Below I make a similar remark about the size of the hero header text.
• Hero:
  • Tagline:
  • There is an issue where some people believe "streaming platform" means a concrete app, like TikTok, and this is also one of the main possible sources of confusion on the entire page, because we show so many product shots. For this reason, changing the title somewhat to correspond to our current tagline may help, namely "A video platform protocol", so the new tagline would be something like "A video platform protocol empowering [x which changes]".
  • I have always felt that we are using a bit of an underpowered font for our biggest titles, so it sort of drowns next to the visuals. Large bold text is beautiful, and can helps organize our page better. Look at this for example: https://www.lens.xyz/
  • Mobile: The whole section does not look so great in mobile mode. The image is just scale down, with tons of really small details, and the text layout and subtitle all looks a bit chaotic. More care is needed here.
  • Bottom Margin: There is a very large space between bottom of hero section and next section ("Key Metrics"). Part of this visual effect may just be that hero section has black bottom gradient, but either way, it looks too large and wastes space.
• Project video: We are going to have a project video published (early sketches https://app.boords.com/s/4pw38n/frame ). It will be an animated video lasting about 60s. The purpose of the video is to give a high level summary of he mission and thesis behind the project, and some of the tech. It is extremely important that people see very early, and its very low friction and visible to start playback. We don't have any clear ideas around video delivery or player here, could be embedded Gleev, or Vimeo or whatever. Space needs to be introduced on the page for this, but not sure where. It could be part of a new hero section or it could be a new section right below.
• Cookies: is there any way to make cookie thing less invasive, or in a different location? Right now it hovers right over the core visual. It may be worth pausing a bit on resolving this, as I'm talking with Dmitry about whether we actually need to show this at all on the landing page.
• Key Metrics: Let's rename this section to "Traction"
  • Lets have the following metrics
  • Videos
  • Comments & Reactions
  • Channels
  • Followers: total size of audience of all joystream creators across all platforms
  • Profiles
  • Creator Rewards
  • NFT Sales
  • Price & supply metrics: using this principle of combining https://github.com/Joystream/joystream-org/issues/649
  • for each one, lets have a tooltip to add context.
  • let us use some space for these metrics, and make it visually appealing, with a line trace, % change, icons. e.g. look at amount of space https://polygon.technology/ uses for its metrics, and also interesting composition. just an idea.
  • can we also add a carousel of creators on the platform, similar to the Gleev YPP page, but whether we include their audience size as a number, and also how much they have earned.
• One platform. Multiple apps.:
  • Let change title to: "One Platform, a Universe of Application"
  • Subtext is too long and too hard to read, in particular because it is centred. The content is quite good actually, but does not look good for this location.
  • The composition sort of looks weird with just two apps, so lets instead add all of the following apps, and lets create a new icon for all of them if they currently don't have quality icons. We already have a design variation for when there are more than 1 app, which has a carousel, and it is great.
  • Gleev: https://gleev.xyz/
  • L1media: https://l1.media/
  • Pioneer: https://pioneerapp.xyz/
  • JoyStats: https://joystreamstats.live/
  • JScan: https://jscan.io/
  • JoyUtils: https://joyutils.org/
  • "How about starting your own video community?" => "Launch your own video app" same with button.
  • "Open source codebase with rich feature set":
  • I think this section should be refocused away from "Atlas", and instead talk about how there are new Web3 creator monetization, so
  • "ATLAS" => "CREATOR MONETIZATION"
  • "Open source codebase with rich feature set" => Next-generation value capture & sharing tools for creators.
  • subtext => something about how there are new tools built into Joystream blockchain that helps 99.9% of creators not served by ad-model.
  • lets change all copy here to not speak creators as the first person, so for example "Rewards for publishing your videos" is instead "Rewards for publishing videos", etc.
  • Lets put "Rewards for publishing your videos" section below the Video NFT section, and remember to pull payout carousel along.
• Builders & Grant Program: Add a new section which advertises an upcoming builder program, where developers can get grants, development support, business model support, and then they can sign up to a mailinglist in that section. Some sort of extra branding may be useful for this program, feel free to create one.
• Chrix Dixon quote: Drop
• Mainfesto section: Drop
• Dashboard: Add a new section which invites user to check out the new dashboard page-
• DAO: Combine DAO into one section, put roles as section after recent proposals.

Addendum

Can we also tackle this one in the same go?

https://github.com/Joystream/joystream-org/issues/618

[mochet]

Hierarchy: There is an overall lack of a strong hierarchy on the page, which makes it really easy to loose track of what is being said, and how things fit together. There are two things which currently communicate this, the changing of background colours, and the size of section and content titles. This needs to be cleaned up. Below I make a similar remark about the size of the hero header text.

I kind of feel like the landing page is really missing a table of contents navigation system on the side, by most standards it is a very long webpage for a landing page.

[bedeho]

Here is some additional POVs from a marketing audit: https://docs.google.com/document/d/1RiVtqAWy4vvN8oiDXF_IqqwXYGoaK8FxfbVAGPbSiUA/edit

[KubaMikolajczyk]

@bedeho I cant open the marketing audit from the link above as there are viewing restrictions on the link 🫣

I haven't finished the work on the landing page tweaks yet but I wanted to share with you this update - I talk about the necessity of different file organisation for the website & the top navigation component which also encapsulates the solution for #618 ✅ Please let me know what you think.

🎥 Video update: https://www.loom.com/share/68a1cf20d3ed46d2b69c1b0208fad520?sid=ffb8eced-cee5-425a-a1af-0946e08700e7

📄 Top navigation: https://www.figma.com/file/3uoobZkRhFF4yibFjCWa2D/Components-library?type=design&node-id=9441-14630&mode=design&t=TKsoKc20EiyRe94D-4

▶️ Mobile top nav prototype: https://www.figma.com/proto/3uoobZkRhFF4yibFjCWa2D/Components-library?page-id=9441%3A2036&type=design&node-id=9441-18456&viewport=3194%2C1869%2C0.3&t=pOI9pRyZFifZNLNu-1&scaling=min-zoom&starting-point-node-id=9441%3A18456&show-proto-sidebar=1&mode=design

▶️ Desktop top nav prototype: https://www.figma.com/proto/3uoobZkRhFF4yibFjCWa2D/Components-library?page-id=9441%3A2036&type=design&node-id=9441-137937&viewport=3194%2C1869%2C0.3&t=pOI9pRyZFifZNLNu-1&scaling=min-zoom&starting-point-node-id=9441%3A137937&show-proto-sidebar=1&mode=design

[bedeho]

Wonderful work! Thank you for cleaning this up. I think we should not go overboard here, so try to restrain your appetite for creating order and beauty, as overall value of it is not as high as for Atlas product.

[KubaMikolajczyk]

@bedeho I finished the work on design tweaks and those are ready to be reviewed ✅ The video is quite long 42min - as it was a lot to address but I tried to discuss only the most important stuff here 🫣

🎥 Video update (42min/x1.2) : https://www.loom.com/share/ecf71aa843c8427293e7665f46a669cf?sid=a56d1593-c80d-4650-9b34-8a946c4659a5

📐 Figma landing page tweaks file: https://www.figma.com/file/dmmYGgpFwRyHJ9cueKiTUx/Homepage?type=design&node-id=9588-235979&mode=design&t=V7peMQZAHRy3hGN9-4

▶️ Landing page prototype: https://www.figma.com/proto/dmmYGgpFwRyHJ9cueKiTUx/Homepage?page-id=9533%3A139718&type=design&node-id=9588-235979&viewport=1672%2C878%2C0.07&t=8nz34GGxWVFzicEl-1&scaling=min-zoom&starting-point-node-id=9588%3A235979&mode=design

[bedeho]

Thank you for this herculean effort!

Meta

• I agree that having the sticky menu is a good idea, because I suspect this page will only keep growing.
• I agree the radius makes everything more calm and harmonic, I noticed right away when I saw ;)

Mobile

Lets try to keep a separate iteration for this, because it became just too complex to give good feedback on both in parallel, and you are also not doing mobile variations of everything in parallel as I understand it. However, what I would ask is that unlike before, please allow me to sign off on mobile, because I think in the past it has been a bit deprioritised in terms of time and care it deserves.

Cookies

• Lets tackle it together, because its just a disaster to open the website on mobile right now 15% of screen height is gone, main graphic is being covered. For example, I see other sites where cookie notifier is not displayed until person starts scrolling, such as https://polygon.technology/, however their mobile variation is also quite intrusive.

Hero

• I think the bold font is a big improvement, but I would love to see a really out there variation where you try to make these headers super prominent.
• I expect us to have the video done before the landing page is redesigned and reimplemented, current estimate is late September, and my sense is we can't get this page shipped a long time before that, or at least that it would be fine to delay final shipment to be at that time.
• I'm not actually sure I agree that having the video as the main hero, on its own make sense. The reason for this is that, starting a video is sort of itself asking the user for a bit of an investment, and its right at the moment they are most uncertain about the value of the page, they have 0 information. A compelling graphic, the way we have, can in a sense transmit more information in an instant that this is a page worth spending a bit of time on. I'm also not sure why we can't have both, one after the other, where hero has nice visual, and the next section is in-depth video which people now are a bit more inclined to view.
• Seeing your design also made me think of what the preview image actually will be, as it will need to do a lot of heavy lifting in enticing the user to consumer the content. I asked the Lemon team what they can do, but you should keep in mind that the effectiveness of the section will be entirely determined by this.
• I think your animation looks really promising, and overall adds to the quality and trust of the website. I think it also very quickly communiates that the whole page has something to do with video streaming, and I have had a lot of positive feedback about the visuals of this page. The only thing I'm torn about is that it perhaps can also cause some confusion about joystream being a specific app, vs. a protocol. But we don't really have any other visual which communciates this distinction more clearly.
• Let us drop subtitle of hero section, it was needed before.
• I think the CTA in the hero distracts a bit from just title+video, which is the main thign we want people to pick up. In a sense, the CTA we want here is watch video. I also think on mobile variation it now takes up a very large % of vertical space, which is not great.
• On mobile, lets just clip "empowering...", its ptaking so much space, pushing down video, etc.
• "click for sound": animation is not worththe the time I think, but useful to have the button
• You have given the player a very nice style, but I'm not sure what player you are imaging here. I actually think we probably should use Vimeo or some other embedded commercial player, but I'm not sure what room ther is to style that. You may ask "why not use Gleev", and I think honestly that infrastructure is still too unpredictable that we want a critical very short experience like this to end up buffering and so on when people hit the site. This is being fixed, but it currently is not, so I think Vimeo is safer, but this raises the question about customisation etc. Perhaps you can look at that. I def. think some of the controls you have in the player will not be applicable, like casting, widescreen, etc.
• I wanted to ask, if we are going to keep the video player + NFT widget, would it be too crowded to add the Creator token holder widget also? I ask because people are these days more aware of the idea of creator tokens because of the huge success of Friend.Tech(https://techcrunch.com/2023/08/21/friend-tech-hype-is-skyrocketing-but-will-it-actually-reach-the-stars/), and showcasing it a bit more prominently can today be good for us. It can also get crowded though, so you let me know.

Key metrics

• I think these look really beautiful, nicely done. I do wonder though if they need to be slightly more clearly differentiated, because the logos are really small, at least when we have as many as six. What do you think?
• I wonder if price data/mcap data either should be removed entirely, or put somewhere else on the page, because it sort of does not feel like it fits in with the other data points. Price really is not traction, but is is useful context. Perhaps we can find some totally separate, but very available place to show price/mcap/supply data?
• I think left-side variants are best indeed.

One universe multipe apps

• Can we make it "One Protocol" rather than "platform"?
• Can you make the app icons for utils, links and scans be more hetrogenous. I think the Gleev and Pioneer logoes also lok better becuase they have one big mark, rather than small text in the icons.
• Can we use the same capitilization style for all headers, so "Launch Your Video Application"

Creator Monetization

• Lets just simplify title even further to "Powerful New Value Capture Tools"

Dashboard section

I like these ideas, but perhaps its best to just pause the finalization of this before the dashboard is done then. So we just launch a frist version of the landing page which does not have this section, as dashbaord may take a lot of time to get done.

DAO

Looks brilliant! But lets

• simplify title to "Join our DAO"
• simplify title to "Build The Future With Us"

Builders Program

• Remember to capitalize
• I agree a single button to exgternal form is great.
• I'm not sold on the first, its too generic and takes a ton of space, but not sure about the other one either, did not see a live demo.

[KubaMikolajczyk]

@bedeho thank you for the feedback! I dont have any comments on most of the points and while I already started iterating on few of those points - few questions came to my mind that I need to ask:

1.Cookies

You mentioned cookies as too large and overlaping main image and specify mobile as the week spot here. I do agree that the main visual is important and if we wouldnt want to collect cookies then removing the small banner altogether seems like the best solution to achieve what you seek here as currently the banner which we use is preety small and even on the smallest mobile screen takes almost the minimum amount of space if we consider the amount of text we have there But if we want to have the cookies and collect it - then even on the polygon site which you mentioned - on mobile, the ussual approach is to make the banner prominent so the user takes the action first and then scroll the page (and it appears even if im not scrolling the page)

From my POV maybe its even better for us to ask user for consent upfront, they are already used to sites asking for it, rather than try to percieve the cookies banner as a part of UI that user has on top of their screen and they browse the page with it being open. Thats my POV, wdyt?

2. Hero

Im a bit confused by the hero feedback to the video hero and to know if you want us to stick with this concept or not as at first you wrote that we can have a first key visual + video below in a separate section ( and Im ok with that - workin on that iteration rn - but still I believe the video here is going to bring much more value than UI screenshots), but then below in CTA feedback you add that hero video should be the main action - is that refering to scenario in which we would keep the video as hero. In case if we would add additional section for video would you consider leaving the cta button at the top?

I have a feeling that CTA button in hero section paints a clear picture about what action we want the user to take next.

3. Video player

In terms of player - Im sure we can at the very least do some styling to a container it is inside even if we want to use an embeded player - though I would reconsider that as the common practice would be to use a "custom" video player - and by custom I mean it can be from some kind of library but one that does not link in any way to external platforms like YT, or Vimeo - using a custom player can give more professional feeling to the site + we dont link to any competitor platforms from it. So from my POV I would advice against using any kind of embeds - just simple player + video file - dont know what FE lang is used in Joystream but example library from react: https://video-react.js.org/

4. Data

I wonder if price data/mcap data either should be removed entirely, or put somewhere else on the page, because it sort of does not feel like it fits in with the other data points. Price really is not traction, but is is useful context. Perhaps we can find some totally separate, but very available place to show price/mcap/supply data?

Sure! I what is the importance of the price/mcap/supply data then? Should it be higher than the traction?

5. Builders

I'm not sold on the first, its too generic and takes a ton of space, but not sure about the other one either, did not see a live demo.

Is there anything in particular that you would like to emphasise in the Builder section? I will make more explorations for this but Im curious if you have a particular vision for the key visual here.

[bedeho]

Thats my POV, wdyt?

I'm not sure, but what if we at least

1. make it appear only when you start scrolling, so first splash is at least not compromised to badly
2. simplify it dramatically, so basically just one enormous accept button, and have way less text than we have now. Arguably, we could just have a button that say "I accept cookies", and then a "find out more link" which is much less prominent.

Hero

No here I'm very convinced that people will not be sufficiently invested to start playing a video, which can and will buffer (and people know as the evaluate whether to even bother) with audio (which they may not even be able to listen to) which will last at leastl 10-15s before you have any clue at all about what is going to happen. It requires too much investment. We have to hook them sooner and convey more in less time, the title of the page helps, but its not enough.

Video player

I honestly did not understand your remark here, sorry :(

Builders

Its really just there to capture early leads, and also to communciate that we are serious about having third party developers building. So it does not need to be very ambitious, its just some small optionality.

[KubaMikolajczyk]

@bedeho here is the hero & video section iteration - I present here some new ideas and concepts which are ready to be reviewed ✅

🎥 Loom video (16min, x1.2): https://www.loom.com/share/b6efc88b68df48e8b5b333befcc26962?sid=804cd82c-5065-4e16-858b-6a9f820d3e69

📄 Landing page tweaks exploration file: https://www.figma.com/file/dmmYGgpFwRyHJ9cueKiTUx/Homepage?type=design&node-id=9711-29985&mode=design&t=NgEvaCTPBOUtXprx-4

[KubaMikolajczyk]

@bedeho here are the designs for all other sections covering the rest of the feedback you left for me here - this is all ready to be reviewed ✅ This time I have a video update and two prototypes for you (everything is explained in the video) 👌

🎥 Video update (18 min, x1.2): https://www.loom.com/share/93661f9fdd37459d8b3f934beb480b24?sid=9ae4e7d7-e42d-41cd-a108-e82994b99ebc

📄 Landing page tweaks exploration file: https://www.figma.com/file/dmmYGgpFwRyHJ9cueKiTUx/Homepage?type=design&node-id=9782-131802&mode=design&t=NgEvaCTPBOUtXprx-4

▶️ Ist Prototype (header hierarchy) : https://www.figma.com/proto/dmmYGgpFwRyHJ9cueKiTUx/Homepage?page-id=9708%3A169936&type=design&node-id=9777-114585&viewport=3963%2C2868%2C0.27&t=dfVbYdSRq7lALU0u-1&scaling=min-zoom&starting-point-node-id=9777%3A114585&mode=design

▶️ 2nd Prototype: (all bolded) : https://www.figma.com/proto/dmmYGgpFwRyHJ9cueKiTUx/Homepage?page-id=9708%3A169936&type=design&node-id=9782-125990&viewport=3963%2C2868%2C0.27&t=dfVbYdSRq7lALU0u-1&scaling=min-zoom&starting-point-node-id=9782%3A125990&mode=design

[bedeho]

Hero & video section iteration

Overall, looks fantastic!

• I agree with subtitles, looks way better in all cases.
• Gradient looks beautiful.
• I think the widget composition is best actually, with the player, because it reinforces the title and, and you understand that these things are related to video.
• I think the video below worked totally fine, but I actually liked your horizintal variation least. I'm not totally which of the two others are best, but I'm curious how the full width variation would be very intriguing to see in practice, we can switch back.

[bedeho]

Key metrics and Other feedback

• I think the small visuals in the growth and metrics section looked really nice, lets be bold!
• When it comes to capitalization I think there are some principled ways of approaching it, see here: https://munch.studio/typography-101-capitalisation-guide/
• App icons look great
• Important metrics looks good also, lets
  • add some hierarchy in each of the two right, so make market cap. & FDV quite a bit bigger than the supply numbers, and reverse order.
  • do you think we could add a small little price trace, just for the visuals, like they have on CMC (see below), and also add %7d change.
  • update header: "Important Metrics" => "Token Metrics"
  • update small header: "TOKEN METRICS" => "TOKENOMICS"
• Let use real people indeed in builders section.
• I actually think all bold did not work so well, it seemed kind of out of balance with a lot of the content, lets stick with just bigger on top.

[KubaMikolajczyk]

@bedeho all of the requested changes to the Landing page are added, the designs are finalized, refreshed the whole UI of the homepage and aligned it with our other landing pages + prepared RWD for the dev so we start using proper grids in here as well ✅ Its ready to be reviewed!

🎥 Video update: https://www.loom.com/share/0942033fb72542ed80a6122ef131f809?sid=cabd7fbd-f78e-4be6-8bfa-cce68d424c99

📄 Homepage changelog: https://www.figma.com/file/dmmYGgpFwRyHJ9cueKiTUx/Homepage?type=design&node-id=9962-134795&mode=design&t=FHVZ9hkvqZSjzEvk-4

🖥️ Prototype: https://www.figma.com/proto/dmmYGgpFwRyHJ9cueKiTUx/Homepage?page-id=9867%3A227646&type=design&node-id=9867-227666&viewport=976%2C4724%2C0.5&t=geNQrT9C81cqfv94-1&scaling=min-zoom&starting-point-node-id=9867%3A227666&mode=design

[bedeho]

Fantastic work, looks great!

• Do we have loading states for some of the metrics? like the price chart for example, it may take a while to load
• I think the current subtitle ("built on..") is actually fine, despite my prior remarks.
• "Video Future is Now" => "Our Vision"