Design improvement: Discovery of "preview in Kolibri" action in Catalog

Background

The Catalog is frequently shared with partners and users as a way to give them a sense of what is in the Library, and we link to it prominently on the Kolibri product page as well. For many of them, this is their first experience with our products, and we want them to gain as full and rich an understanding and experience as possible. Given the limited metadata and lack of familiarity with many of these sources, a key part of that experience is navigating and viewing the content itself, and so the linking to the catalog demo servers is very important. We want those links to be easily discoverable, from both the list view and the detail view pages.

Current behavior

There is currently only one way to get to the content demo, and that's via the kebab menu:

From my own early experience interacting with it, and from countless calls where people say "Oh, I hadn't realized that was there", it has become clear that this isn't serving its intended purpose.

We have dedicated a top-level action icon for "copying the token", which is one of the less useful functions of the catalog, given these are all public channels that can be seen directly in the Kolibri import UI.

The main thing people do with the cards is click on them, which takes them to the channel metadata overview page. While some of this metadata may be of interest, most of it is very secondary in importance for a user who is "at the catalog stage". This page contains a section called "Sample content from this channel", which contains... unclickable thumbnails and titles.

There is no direct way to jump to actual content previews from within the channel summary page, so once someone is in here, they're even less likely to discover how to get to the content itself.

Suggested changes

Longer-term, we'll continue to iterate on overall UX. In the short term, the critical fixes I see are:

• Remove the "copy token" button from the card (they can still get it after clicking into the channel overview page)
• Add "Go to source website" and "View channel on Kolibri" as top-level action icons on the cards
• Remove the "Sample content from this channel" section, and add prominent, textual call-to-action buttons to navigate through to view the content in Kolibri, instead.