Improve visibility of Catalog search

[dredecki]

What's wrong? Describe the what you're seeing

Searchability in the Destinations catalog - there are so many, if you don’t know what category it’s in, you may not find it!

Problem location

https://segment.com/docs/connections/destinations/catalog/

Suggestions for a fix

Add search / learn user how to find the right destination.

[dredecki]

I found a few things that we can fix for a better user experience.

1. I'm suggesting to add a small tooltip for all users' first visit to learn them about docs search functionality.
2. The current search engine isn't perfect. Searching 'Google analytics' gives me all kinds of different results. Instead, we need to present the tool in the first place and only relevant information later. Any results for only 'analytics' word should be there. I also changed the visual layer a bit for better readability.

Here is the Figma file: https://www.figma.com/file/NiNCSnUj5XVyQqc3AUEvfX/Docs?node-id=38%3A5530

[sanscontext]

I think that would help 🤔 the box is a little big and dark for me, personally, what do you think?
If we're going to do this, I'd love to get a second one to point out the rating tools as well.

[dredecki]

I've provided two more options to choose from but for me, the dark one is the best. It stands out from other elements on the page, which was the goal here.

https://www.figma.com/file/NiNCSnUj5XVyQqc3AUEvfX/Docs?node-id=38%3A5530

[sanscontext]

Gotcha, I agree that it's the most visible, I just thought we had a lighter blue/purple in our swatches that we could use?

What would this look like if it had three steps in the walkthrough? (A ... at the bottom to show which of the three you were on?)

[dredecki]

I've prepared a few more options for you — https://www.figma.com/file/NiNCSnUj5XVyQqc3AUEvfX/Docs?node-id=38%3A5530

Regarding the search funcionality. We can work on the visual aspect, but hierarchy and order in the search results in job for your devs. They need to change order (in swiftype) and make results from catalog to be on top of the list.

Do you want to proceed with walkthrough right now?

[sanscontext]

Yes, 100% onboard with having the Swiftype stuff fixed on our end, no question there. (We have a Jira ticket for it and everything!)

I do still want to do a walkthrough. Really like #5, a good balance between dark (so it stands out) but not too spooky. :)

I imagine three bubbles as part of an onboarding: Search, the feedback tools, and the edit/gh issue buttons (once we've made them). Does that sound reasonable? Is there anything else you think we should highlight? I want to keep it to <4.

[dredecki]

I've prepared a quick prototype for you — https://www.figma.com/proto/NiNCSnUj5XVyQqc3AUEvfX/Docs?node-id=185%3A7819&viewport=780%2C240%2C0.25&scaling=min-zoom

We need to work on the copy, that for sure. I'm not super sold on the idea of onboarding for docc. What would you want to tell people regarding edit and feedback tools?