Design a way to see what filters have been chosen

[NilakshiS]

Overview

As a user, I want to be able to see what filters and sorting I have chosen and what filters / sorting are selected by default so I understand my results better.

Details

If you have all the popups closed, there is no indication of which, if any, filters are applied and no indication of any applied sorting.

Screenshots of TDM dev to illustrate the issue

I chose this filter

And then after I applied, it was not possible to see that I had used the filter

Action Items

• Compare the current designs (in figma), to see if there was something that did not get developed and needs to be sent again to dev.
• If there is no design already, create one and update the Figma Designs and Prototype.
  • Also decide on icons for the design: Re-Design Filters: select new icons to indicate filter state #1837
• 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

An example of how Google Sheets indicates selected filters

• Link to "My Projects" page
• Design Issue Design Mockup: Redesign the My Projects Filtering UI #1578
• Link to Figma file
• Link to the Figma Prototype for filtering UI

[lbeatonn]

I did not see a design solution for this in the Figma file so I checked the first action item " Compare the current designs (in figma), to see if there was something that did not get developed and needs to be sent again to dev."

[lbeatonn]

Update: Iteration #1 shows the filter tags front facing, awaiting feedback from the team

[NilakshiS]

Feedback received in the Stakeholder Prep meeting (09/19/24):

This list would get too long if multiple addresses are selected.

[lbeatonn]

UPDATE - Sept 25th

Bonnie FEEDBACK Sept 20th - Bonnie said the list would get too long if 10 addresses are selected.

Iteration 2

States

[Short List] [Default] (3 or less filters selected)

[Long List] [Default/Collapsed]

[Long List] [Expanded]

Bonnie FEEDBACK after seeing the above Sept 25th -
make sure the view more and clear all fits well with the design system
what happens with extreme use case with 20 - 30 entries
Should you be able to hide/show all filters because you can pick so many and so many can appear???

[greenishviolet]

10/08 Progress Update

Progress

• I have created four variations of the side drawer where the pills will be stored
• I created a mockup of the My Projects page with the side panel opened
• I am playing around with how users will access the side panel. I have created different variations of the filter button and am experimenting with different places to place it.
• I noticed that the side drawer does not fill the length of the page on the TDM Dev website. It might be a problem when more than 10 items are on the page.

Gif of TDM Dev website

• I made a prototype of a possible solution, where the side panel's position is sticky.

Gif of prototype

Blockers
None at the moment

Availability
I can dedicate about 12 hours this week

ETA
I am hoping to complete this issue by next week, which might be a bit ambitious

Pictures

My Projects page with side panel

Side panel variations

Accessing the side panel - filter button next to the search bar

With the search button

Without the search button

Accessing the side panel - filter bar below tool bar

[NilakshiS]

Feedback from stakeholder meeting on 10/15: We will not have this feature this time but we'll keep these designs for future developments.