Video category page design

[toiletgranny]

The scope of this issue is to review, update and finalize the designs of the Discover page, formerly created by @KubaMikolajczyk, based on the feedback from Bedeho in #874 and the research done by @KubaMikolajczyk.

This includes:

• Proposing a logic for sorting videos within a category,
• Designing a new way of showcasing featured videos within a category and the logic for choosing those.

[toiletgranny]

⚠️ This is part 2/2 of the update regarding the Discover & Category page designs. If you haven't already, be sure to check out part 1 before this one.

@bedeho Here's the prototype to check out the new iteration for this page, and a video update to learn all about it.

• Figma prototype
• Video update (I apologize for the extreme noise in the background! Next time I'll use an external microphone.)

Please, let me know if you have any questions, ideas, or other things you'd like to discuss. Once this is approved, I can proceed with RWD and preparations for the developer handoff. :)

[bedeho]

Note

I would actually have preferred to provide this feedback directly on the Figma designs somehow, because it makes it easier to describe what I am referring to. Please let me know if this still is possible.

Feedback.

This looks really promising and the video made it very to understand the full design. The subject of this feedback is only the view of each individual category

Here are some observations.

1. I think that the context in which someone enters this view is that they are looking to browse and discover new content and creators. This means they are possibly also doing this sort of activity across multiple categories in one session, and also interleaving search and work in other browser tabs. If this is correct, then we have to be very sensitive to quickly get the user to the content in each category, and as is, this design perhaps is making the header section a bit too tall and intrusive. First off, its very tall just for the primary content itself, and the statistics numbers + margin occupy a lot of vertical space. I don't think these numbers actually have much value to the user regardless of this space problem, most people will ignore them, and even when not ignored, they are not actionable in any real way.
2. I wonder if the primary title on this page should be the category name? If the user most often has navigated here, then they will know, and it would be more useful to either leave this space for the featured content title, or leave free. I guess someone could directly land on this by link or something, so they did not make an affirmative decision to go here, but then they will likely have some external context for why they are coming here. Overall it seems like the categroy name could perhaps be relocated and made smaller, for example adjacent to the top left somewhere.
3. Each section + horizontal line + margin takes a significant amount of space, and the line draws attention in a way which makes it slightly crowded. Do we need all of this?
4. The search feature seems like it could very easily could get overlooked? See my comments below on filtering. I guess designs for the search interaction, possible auto suggestions, response delay and empty states will be done later?
5. On filtering I have a few thoughts

• Realistically, I think when used, language will constitute the overwhelming majority of use cases, license and the other once will very rarely be used. If this is correct, then I think we need to find a much more compact version of this which is not constantly visible taking precious horizontal space that could be used for 1/3 more videos.
• For all of the specific filtering options we have now, I think the user will want to select a single value for almost all cases. If that is the case, then I think showing a long list of alternative at all times is too wasteful, some kind of picker component makes more sense, hiding everything but the selected option.
• There may be a strong case for actually lifting language of content out into a some other more prominent and global choice, because almost all of the time someone is interested in configuring this, its because it is to match their language capabilities, and these do not change from one browsing session to another.
• If the list of videos is to be updated directly as a result of changing the filtering, then remember to also add a loading state and empty state to this section.

6. If some filtering or search feature was going to be consistently visible while browsing through videos, then I think it would be more effective to have that feature be stuck to the top part of the video view, such that it does not occlude or take up vertical space from new videos that are coming in at the bottom. The user will mostly be paying attention to new videos coming, so giving that more space can be very useful.
7. I don't agree with the premise about how people are landing on this page and using the video section, in that it is because they are looking for a specific video and remembering the pagination number from the last time they were on this page. I think the entire premise of this category view is browsing, i.e. finding new things under a given theme or topic. If you know exactly what video you want, you will likely know at least part of the title, or the name of the creator, and search becomes the natural way to identify it. You will probably not even know what category it belongs to unless you found it through browsing a category. If my point of view on this premis is correct, then we probably should have have some sort of dynamic scrolling.

[toiletgranny]

@bedeho Thanks for the feedback! Here's a prototype with the new iteration, and a video update with my commentary.

• Video update
• Figma prototype (a side note after I watched this: I think we should consider having playback speed controls implemented sooner than later 😅)

This time, apart from your feedback around the iteration as a whole, I'll need your explicit decision on which direction you'd like to proceed with in regards to filters in the "All videos" section:

Option A	Option B	⭐️ Option C
Filters as popovers (new components)	Filters as select dropdowns	Filters in a separate column (our recommendation)

[bedeho]

Amazing Option summary, video and work <3.

I think Option A is best, but do we really need an Apply button? Why can't the effect just happen when you do the action?

[toiletgranny]

@bedeho Thanks! I included the "Apply" button because we decided to keep filters separate boxes (popovers). As a consequence, the "Apply" button serves here as a closure: not only does it let you close the filters popover, but it also reassures you about your filtering actually being applied. I hope this makes sense.

@kdembler @eldiegod:

• Designs, functional breakdown description, and RWD screens for the Video category page can be found in the [Page] Discover & Video category Figma file.
• Flows for the "All videos" section (things like applying filters, using the search box, empty & loading states) can be found in the [#12] Video category page flows Figma file.

And while I'm mentioning this throughout the documentation in files listed above, please keep in mind that implementing the new Video category page requires implementing new or adjusting existing components:

• The new "Video hero" & "Video category hero" components,
• Changes in Checkbox and Radio button components,
• Lastly, there's a whole new Popover component we need to implement.

Ideally, we can sync together before you start working on this, just like we did with the Discover page. Let me know when you're available.