Update the design for filters on "Status" 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 "Status" column remove the "Search By Keyword" option, change the sort options and redesign the selection for filter options.

Details

The current design of status filters

Link to design on Figma

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

• Consider if we need to change 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 "Snapshot" and "Draft".

• The selection of "Draft", "Snapshot" and "Draft and Snapshot" choices needs to be redesigned but it seems the dev team's suggestion was designed but changed for some reason. Research the previous designs and determine the best course of action.

  • Dev suggests changing the checkboxes to radio buttons for the "Draft", "Snapshot" and "Draft and Snapshot" choices:

    The three choices for filtering by status are "Draft", "Snapshot" or "Draft and Snapshot", which would be better represented by a set of three radio buttons with the corresponding labels. Using two checkboxes like the prototype has a problem where unchecking both boxes would filter out all projects and isn't a useful choice, so we can prevent this problem by switching to radio buttons.

  • However the design was changed from Radio buttons to check boxes in the design.
    Notes by the designer on 03/21/2024 mentioning the change

    Previous design of status filters

    Link to previous status filter design on Figma

    

    Current design of status filters

    Link to current status filter design on Figma

    

• Dev team also suggests adding a second set of radio buttons to filter for "Active" and "Deleted" projects instead of a checkbox for "Deleted projects". Redesign the filter for based on the feedback.

  IMO, we should use a second set of three radio buttons for filtering by Active vs Deleted, with the choices "Active", "Deleted" or "Active and Deleted" instead of a single checkbox, because the prototype design with a single checkbox is ambiguous to users (if the box is unchecked, will you see just the deleted projects or both the active and deleted projects?).

Action Items

• Create a prototype for the new design:
  • Remove "Search by Keyword".
  • 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 )
  • Redesign selection for "Draft", "Snapshot" and "Draft and Snapshot" choices.
  • Redesign selection for "Active", "Deleted" and "Active and Deleted" choices.
• 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.

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