Filter Button Placement and Styling Edits

[tcmoorman]

During user testing, we observed some participants taking extra time to navigate from the Filter back to the Property List page, or overlooking the Property List and heading straight for the map once their filters were applied. User research notes

In the current user flow, the user clicks the Filter button to open the filter, then clicks either the 'X' icon in the top right, or clicks the Filter button again to close the filter and return to the Property List. The interaction of clicking 'Filter' to close the filter is not immediately clear without prior experience with filter navigation, or additional visual elements communicating its function. The X icon is ambiguous and may suggest that it will clear the filter if clicked. The following changes are intended to boost visibility of the Filter button and make its function more clear:

• Move the button next to 'Total Properties'
• Style the button as a Secondary button in the Style Guide
• When the filter is open, the button's text should change to "View Properties". When the filter is not open, the text will still read "Filter"
• Remove the 'X' button from the Filter page

Prototype pages included in Figma

Current styling

Edits to make