Idea: Improve Search

[bedeho]

Background

The search experience on Gleev currently has two quite severe problems

1. It almost never returns accurate results, meaning that even for our very small corpus, it does not find videos which are obvious matches to a search. By obvious I mean that the title and description of the video is very aligned with the search query.
2. It does not rank results based on any quality signals beyond text matching, and I'm not sure even that is taken into account in the ranking itself. Quality indicators, such as the number of views, likes, and perhaps proxies relating to channel quality, probably are needed.
3. It does not work well to search across distinct content types. Currently, we only have videos and channels, in the future we may have shorts, playlists and perhaps even creator tokens. Presently, results are segmented into distinct tabs, which requires the user to put in effort navigating across the the tabs. Also, searching for videos and channels are totally distinct types of contexts. When searching for a channel, you are almost always searching for a channel you already know exists, and there is really only one right answer. You may have seen it before, or someone may have told you, but either way, you are not exploring, you are retreiving. When you search for videos, some times that may also be the case, but a very large share of the time you are also searching for content on a general topic, like "polkadot predictions" or "is HEX a scam". This means that the search results really need to align with these more distinct goals, like it does on YouTube. It does not make sense to for example show a list of 20 videos under this premise.

Proposal

1. Redesign the search experience to be more aligned with user search behaviour. I think the right approach here is to basically do something similar to YT here, so just show 1 single channel as the only channel if it is a sufficiently strong match, and then show ranked list of videos, all on one screen. If no channel has a good score, just show the videos. Drop any tab segmentation.
2. Update search feature in Orion to improve at least 2 dramatically, if 3 is possible then consider it, but it may be complicated how to capture tradeff between text match and popularity, just like we have sort of failed on this when it comes to recence and quality on home feed.

I don't think we need personalisation in search btw. not now, its far more urgent to just resolve 1 and 2.

[bedeho]

Replaces #4060

[msmadeline]

@bedeho Hey, I already changed the search flows

• I've deleted the "tabs"
• I've changed the user stories
• Updated RWD

➡figma file: https://www.figma.com/file/8JhE2GxIjjLP3WU37xPnDH/Search?type=design&node-id=738-72744&mode=design&t=TTJJS99uJ5pzjuhE-4

[bedeho]

Very fast, love it!

Can I ask for a variation where we just do a single column of results? The reason for this is that when you have a single column, its much easier to get a sense of ranking, that is which results is actually better than another, compared to a grid. Also, when people search, they don't really want tons of hits, they want a few hits, and a grid i really optimized for a large number of videos compared to giving each hit more visual sapce for the image, title, etc. In the single column case, we can also scroll to revela more hits, which should be fine.

[msmadeline]

@bedeho Hey! I designed a single column version of search view. Let me know what you think!

➡ figma link: https://www.figma.com/file/8JhE2GxIjjLP3WU37xPnDH/Search?type=design&node-id=1144-68880&mode=design&t=7iuZqb9A91GbOd0N-4

If you approve then I will do the RWD of it as well

[bedeho]

Looks promising, lets double down on this one.
Please move forward and identiy the interactions (for example what hover states are tehre, and what is clickable) and loading state while query is being executed. Also empty state with no hits.

[msmadeline]

@bedeho Hey, I prepared all of the states of the component and interactions. I also designed the empty state of the search view

➡ component states: https://www.figma.com/file/8JhE2GxIjjLP3WU37xPnDH/Search?type=design&node-id=1153-45649&mode=design&t=9CqgZzL5e7rVwS2S-4

https://www.figma.com/file/8JhE2GxIjjLP3WU37xPnDH/Search?type=design&node-id=1153-45115&mode=design&t=9CqgZzL5e7rVwS2S-4

➡ Interactions: https://www.figma.com/file/8JhE2GxIjjLP3WU37xPnDH/Search?type=design&node-id=1148-16706&mode=design&t=9CqgZzL5e7rVwS2S-4

➡ Empty state: https://www.figma.com/file/8JhE2GxIjjLP3WU37xPnDH/Search?type=design&node-id=1155-47583&mode=design&t=9CqgZzL5e7rVwS2S-4