hackforla
UXD - Mobile Search and Filters Modal
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
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...
- Ensure all Hand Off Materials are filled in
- Add the "ready for dev lead" label
- Leave a comment saying "This ticket is ready for engineering hand off."
Note from 2025-10-28 meeting
- design lead to list out all considerations for each control within the mobile version of search and filters modal
During our 10-29 design breakout, we came up with some potential options for the mobile search & filters modal
Option 1: Nested Scroll
scroll up and down to show rest of the modal that doesn’t fit
Option 2: Combination of accordion+new page on modal
Sections can open and close while active selection being made (See this section for more details)
Option 3: Side Drawer
Opening new side drawer to see filter options for long lists. This reduces nested scrolls
Example: target.com
Option 4: Side Drawer 2
When users click on the filter button, the filter modal takes up the whole page (side drawer?)
Example: homedepot.com
@ryanfchase is this enough for prioritization or should further research and ideation + instructions take place first?