hackforla / hackforla/311-data

UXD - Reset Filter Modal

Open
#2,008 4 comments 0 reactions 1 assignee Claimed by @kiranofans View on GitHub
Complexity: Medium p-feature: Search/Filter Modal ready for design lead role: UI/UX Design size: 1pt
Dominant language
JavaScript
Stars
73
Forks
74
PR merge metrics
No merged PRs in 30d

Description

### Overview
We need to create a way for the user to reset the entire filters modal because it allows the user to reset the form all at once rather than doing each field manually, and preventing users from becoming confused about how to begin new queries.

### Action Items

- [x] Review previous relevant tickets
- [x] https://github.com/hackforla/311-data/issues/1817
- [x] https://github.com/hackforla/311-data/issues/1935
- [x] review similar designs to this feature in our [handoff page](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=4081-9245&t=N6qc1kaoY45Ft1P0-1) and [design system](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=1-5&t=N6qc1kaoY45Ft1P0-1)
- [x] create a clickable "reset" feature
- [ ] design lead's recommendation is to model design after "export" and existing "reset"
- [x] design lead's recommendation is to position feature in upper right quadrant
Modal Screenshot

Image


- [x] provide design justification
- [x] Document user interaction in Figma
- [x] 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 10

Image

Iteration 9 (Finalized)

Image

Iteration 8

Image

Iteration 7

[Reference](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=26699-25399&t=zOS4eL00Rueonahu-4)

Image


Iteration 6

Image


Iteration 5

Image


Iteration 4

Image


Iteration 3

**Iteration 3 - Tried Clear All instead of Reset All**

Image

**Iteration 3.1 and 3.2**

Image


Iteration 2

**Iteration 2 and Iteration 2-JT**

Image


Iteration 1

Image


---

### Hand Off Materials

Figma Section Name: [Issue #2008 hand-off](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=26979-10974&t=ZXhEw7Cd4QsWYy11-4)

Before Screenshot

Image


After Screenshot (Finalized)

Image


### Designer Resources

Iteration Dropdown Copy/Paste

```

Iteration X

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`



```


Instructions for Engineering Hand Off

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.