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
• New Filter Designs:
  • Design Issue Update the design and prototype for My Projects Filters on Figma #1885
  • Link to new prototype on Figma
  • Link to interactive prototype
• Old Filter Designs:
  • 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

[malubongestab]

Progress: Completed on my end
Availability/duration: 3h30
Blockers:
Possible dependency if any changes occur on the design of the My Projects page (issue #1816)

Using the resources added to this issue I mapped out the previous designs of the filter in the Status column to understand what was already done.

So based on filter re-designs made on issue #1816, I only added the requested changes in the current issue to the latest Status filter design with a couple of variants for my peers to choose from, which I believe would improve user experience by adding simplicity and clarity to an already very information-loaded table. The changes include:

• Removed search by keyword field.
• Changed copy on drafts/snapshots section.
• Reordered layout to follow better UX.
• Changed copy for active/deleted projects section.
• Included option with radio button for active/deleted project section.
  Figma File

Design decisions for each version:

V1
Kept the design as it was. Just removed the keyword search bar.

V2 Moved the sorting section down, since to my knowledge a user will first choose what he wants to see and then select he wants
to see first. Plus it makes even more sense especially when he selects the option ”both”.



Changed copy from “Drafts and Snapshots” to ”Both”. It was a bit repetitive, stating the obvious and helping make the modal look cluttered.

Removed copy explaining the action: “Click to show or hide deleted projects". I felt it a bit confusing and adding clutter. So I removed it and added the word ”show” to the copy to help the user understand that this action will also open/show deleted projects.

V3 The Only difference to V2 is the addition of the word ”Also” to the active/deleted section to help eliminate any ambiguity, due to the developer's concerns listed on the issue that ”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?).”.

V4 Just in case developers or stakeholders push for radio buttons all over this filter, here it is.

[malubongestab]

Based on feedback from my team lead I changed back the sorting section to the top in all the versions proposed here. This way consistency is kept with the other filter overlays recently designed for the other columns on this table. (view issue #1816)

• Moved the sorting section to the top of the modal.
  


[NilakshiS]

Approved by design. Design suggests version 3.1. Ready for feedback from dev and product.

[NilakshiS]

3.1 is approved. Dev will create issue to apply the change.

[ExperimentsInHonesty]

@thetanmancan Why is this in the questions column?