Try   HackMD

Lightning Landscape QA

Explore page

Header section

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • When no filter added, header should read "Discover {total} lightning projects"
    • with a subtext reading "Explore a directory of lightning startups, projects, and companies."
  • When a filter is added, header should read "Explore 14 lightning projects"
    • with a subtext reading "Filtered by"
  • How to Display filters
    • Founded in "🗓 Founded in 2017"
    • Tags "🏷 Node Operation"
    • Licence type "💻 MIT License"
  • We don't need to display the category as the tab should be pre-selected
  • Use the updated cover image

how it should look

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Filter bar

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • Font size should be 14px. ATM it's too big and overclutters this element
  • Remove padding from the edges of the tabs
  • Spacing between these tabs should be increased by a unit of 8 or 16px
  • "Search Results" should actually be "All projects"
    • Remove the padding from the side of this specific tab
    • A good implementation of this design can be found here
  • If the user selects a category within the Filter page, when re-entering the epxlore page this should be updated and switch to the correct one
  • Remove the fill from an activated tab. Otherwise we have to keep unnecessary paddings. If not possible, keep 8px padding.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

how it should look

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Project card

The client wishes to make it easier to visually differentiate between projects that are alive and inactive. This will eventually become a more complex colour coding system that relies on things like Github activity. However, for now projects should be shown in the following order and priority

  • Projects should always be ordered alphetically, then
  • Projects that are alive/active (shown with green dot) should be displayed first
  • Projects that are dead/inactive (shown with red dot) should be displayed last

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • If it is not possible to show Active, Inactive both alphabetically, we can probably show all projects alphabetically and rely on the green/red dot to show project activity status. This might be less confusing

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Eventually, we can implement a "Sort by" filter than allows users to switch between

  • Alphabetical (A-Z)
  • Activity (High - Low)
  • Activity (Low - High)