Update the design for filters on "Visibility" on my projects page

[NilakshiS]

Possible Dependency

• Re-Design sort options: change toggle buttons to radio buttons for mutually exclusive options and update style guide #1834

Overview

For the filter options on "Visibility" column remove the "Search By Keyword" option, change the sort options and change the filter order to "Visible", "Hidden" and "Both".

Details

The current design of visibility filters

Link to design on Figma

• The visibility column has only three options for filtering: "Visible", "Hidden" or "Both". Hence, it is suggested to remove the "Search by Keyword" control, since it is unnecessary and possibly confusing.

• Dev team also suggests changing the order of the filter items keeping "Visible" as the first choice, since it should be the default and the most common choice.

• Another change is needed in the sorting options, currently the options are "sort A to Z" and "sort Z to A", which might be confusing to the users when the only values in the column are "Hidden" and "Visible". Dev suggests changing it to "Sort Visible first" and "Sort Hidden first".

  A visual for suggested sort options

  

Action Items

• Create a prototype for the new design:
  • Remove "Search by Keyword"
  • Change the order of Filter options
  • Change Sort options (for updated sort design refer to Re-Design sort options: change toggle buttons to radio buttons for mutually exclusive options and update style guide #1834 )
• Review with Product, Dev and Research and iterate if needed based on feedback.
• Update the style guide to add the new design.
• Once finalized, get Stakeholder sign-off via the stakeholder meeting slide deck.
• Will be added to style guide and approved by stakeholders using Design: Create Style Guide Presentation (My Projects dashboard) #1843

Resources

• My Project's page https://tdm-dev.azurewebsites.net/projects
• Design Issue for filters Design Mockup: Redesign the My Projects Filtering UI #1578
• Link to Figma file (Refer to designs dated 01/31/2024 and 02/15/2024)
• Link to the Figma Prototype for filtering UI

[NilakshiS]

Closed by #1885