UXD - Mobile Search and Filters Modal

[Joy-Truex]

Overview

We need to rework the search and filters modal to make tap targets acceptable for mobile navigation.

Action Items

3 Main actions:

• The search and filters modal has two states: open and collapsed

  • Make sure the starting state should be open (to avoid intimidating users with a map, with no controls)
  • Add some type of visual indicator, to show that the modal is opened or collapsed (e.g. an arrow)

• The address search should be adjusted to ensure there is enough room for both:
  the search bar and a mobile keyboard on the user's screen

• Make sure there is a Neighborhood Council selection

  • Ensure there is enough room for the NC selection parent box (with a dropdown arrow)
    AND the NC search bar, in addition to a mobile keyboard

• Update component in Design system library

• Document user interaction in Figma

• Update the Hand Off section of this ticket with the final iteration of this design

---

Design Iterations

Please move ticket between In Progress and In Review to assist PM team

Iteration 1

Link to notes: REPLACE WITH COMMENT URL

REPLACE WITH SCREENSHOT UPLOAD

---

Hand Off Materials

Figma Section Name: Original design system component

Before Screenshot

After Screenshot (Finalized)

REPLACE WITH SCREENSHOT UPLOAD

Designer Resources

• Touch Targets on Touchscreens
  
• Potential Designs/Lo-fi iterations

Iteration Dropdown Copy/Paste

<details><summary>Iteration X</summary>
<p>

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

</p>
</details> 

Instructions for Engineering Hand Off

To Start Engineering Hand Off...

1. Ensure all Hand Off Materials are filled in
2. Add the "ready for dev lead" label
3. Leave a comment saying "This ticket is ready for engineering hand off."