Home page redesign

[codemonkey800]

The napari hub home page has stood the test of time since the hub was created 2 years ago. The home page has changed significantly a bit since the beginning with the addition of new features like npe2 metadata and categories, but overall the home page has mostly stayed the same.

Currently we're planning on updating the home page to improve discoverability. This ticket captures the work to accomplish that effort.

Relevant Links

• Designs
• Improved landing page #243

Tasks

• Search section component #1006
  • This will be a generic component used for both home page and plugin pages
  • Refactor SearchBar component to be more generic #1017
• Search page updates
  • Updated search section using <SearchSection /> component #1007
  • Plugin cards section component #1008
  • Backend to return plugin sections data for home page #1035
  • Integrate frontend with plugin sections API #1036
• New plugins page
  • Add /plugins page route #1009
  • Add sort dropdown #1010
  • Update plugin search result UI with different metadata #1011
• Misc changes
  • Refactor home page and plugins page to use new design components #1092
  • Plausible tracking for home page redesign #1037
  • Update E2E tests to use new UI from redesign #1095
• Bugs
  • Remove home page redesign double footer  #1122
  • Update link for Plugins to redirect to new search page #1123
  • [staging] Browse all link is not aligned to header baseline #1135
  • [staging ]Logos in footer not matching design and menu on the left is not centered #1138
  • [staging] Primary filter type color is not changing to blue according to specs and has no hover state #1139
  • [staging] There is no hover state in dropdown for arrow #1140
  • [staging][Mobile] Ghost text in search field is not shortened in Pugins page for mobile #1141
  • [staging][Mobile] Hamburger menu in Plugin page is not aligned to right side #1142
  • Fix colon usage for total installs #1171
• Follow up work
  • Add fields for reader and writer file extensions to /plugin/home/sections/<sections> API #1161
  • Show reader and writer file extensions on home page for reader / writer sections #1162

[Janeece]

@codemonkey800 here's my review feedback on the hub home page. I've grouped feedback by page it applies to and they are roughly in order of importance inside that page group. I've added my prioritization on the feedback (see definitions below).

It seems like a long list, but only two are what I'd consider possible blockers — happy to discuss the prioritization/what can be done with the time you have!

Prioritization Key:

• Must have: blocker, highest priority feedback; implementation is broken or UX is compromised/confusing without update.
• Should have: nonblocker, medium priority feedback; needed to fulfill design spec but not broken.
• Nice to have: nonblocker, low priority feedback

---

Global Nav

• Must Have: Navigation “Plugins” link should go to plugin/search page instead of home page.

Home page

• Should Have: When I click something that will take me off of the home page (“Browse all”, “See All”, Plugin Card), home page goes into a loading state before changing pages; sometimes it takes a while. If there is loading needed, it’d be clearer for the user if they changed pages first, otherwise it feels broken. Speed improved after the first time but it was still happening. This is not a blocker but it is something that I’d encourage us to fix if possible.

homepage to search loading.webm
homepage to plugin page loading.webm

• Should Have: Plugin Card (narrow screens) - increase spacing between description/name/details to 14px
  
• Should Have: Plugin type details should change with the type. Writer plugins should show what extensions it writes; Reader should show file extensions it reads. Currently all types show “Installs”
  
• Should Have/Nice to have - Icon for sample type should change with the type, currently shows “sample data” type icon with widget (see this page for the icons to pair with type)
  

Plugin Page/Plugin Search

• Must have: “Clear all” in filters doesn’t work for desktop, but works on narrow screen.
• Should Have: tag styling updates/tag highlight when filter is active is missing. Filter tags should be primary200. Workflow/Modality tags should also be primary200 if their filter value is active.
  
• Should Have: on search page, narrow screen navigation’s hamburger icon should remain right aligned, even though search is hidden.
  
• Should have: on narrow screens, filter tag text is all caps, should match desktop title case.
  
• Nice to have: on narrow/mobile screens, stack individual plugin listing content instead of 2 columns of content (see design spec)
• Nice to have: reduce spacing between individual plugin listing content
  

[richaagarwal]

@codemonkey800 @junxini Curious if you think the remaining bugs & follow-up work are worth addressing now or leaving in the backlog. I'm going to close this epic out regardless as things look good & we launched yesterday!