Redesign 'Resources' page for easier navigation

[zguillen]

We have plans for adding more webinars/tutorials, so the vertical list of videos is becoming unwieldy and hard to navigate. We need to brainstorm a different layout that will make it easier for users to find the resources they need quickly.

[jugovimm]

Draft for Resources Page mockup

Notes

• Title blocks are dropdowns; we will likely want the page to initially render with all of them closed
• Clicking the blue links would send the user directly to that item in the carousel
• Let me know what the team prefers for categories and for the order of them; splitting up into "Webinars" (release videos), "Tutorials" (instruction videos), and "Articles" (all non-video content) in that order seemed best given what context I have, but we may want to expand the categories, order them alphabetically, etc.
• If the dimensions of any content (ex an iframe or img element) change between objects in the carousel, all of them will be re-sized to scale to a common width, not height; this is to: (1) ensure if we were to add the sidepanels of the carousel, that they would remain within the page's dimensions, and (2) if we want to optimize the website for mobile, it should be easier to handle a common width when developing for it, rather than a variable width (some items being too wide for the screen, etc.)
• The sidepanels are definitely not part of the minimum-viable product, but could be a nice addition

Mockup

[jugovimm]

Resource Page Redesign v2

Common Navigation Page

• Very simple and similar to Computational Resources navigation page
• This page can be extended in the future for more categories, or can have different categories entirely

Webinars

• Instead of users being provided a search bar, a few recommendations are provided, which could be, for example, our v1 release, the most recent release, another interesting release, etc. If we expect users to want to search through webinars, a search functionality similar to other categories or those on the computational resources pages can be added
• Any and all attachments to a webinar are listed below the video, while the title is listed above
• The user can pan through our list of webinars using the left and right caret buttons / panels

Tutorials

• It is highly expected that users will want to search through tutorials to get help with a particular issue; search function was thus provided
• Users are also provided a text list of all available tutorials which they can scroll through and then click to access that tutorial
• That provided list of tutorials will filter based on the search term
• When a user clicks (or double-clicks) a tutorial in the list, the carousel will pan to that tutorial in particular
• The user can pan through the tutorials in the carousel manually if they so choose
• The tutorial text highlighted in blue will only appear if the user has clicked in order to access that tutorial

Articles

• Given articles have more text information to display than the previous two categories, this category's page is formatted similarly to those under computational resources. We again expect dozens of articles to be present, so pagination, search, etc. is provided here as well
• Since links for articles will likely send the user to an external site, the square-arrow icon should be on the "Read More" buttons when such external linking is present

[jugovimm]

Example update to resources page

• Note updates to presentation of videos and search
• The search dropdown replaces the search box when the user clicks to begin typing a search term