Add Export to Search and Filters Modal

[ryanfchase]

Overview

We need to add an export feature to the Search and Filters modal so that users can obtain data while the dashboard page is still WIP.

Action Items

UIUX Designer

• [x] Address the problem overview with possible design solution(s) in a comment
• [x] Complete Design Iterations section below
• [x] Document user interaction in Figma

Dev Lead

• [x] add action items for dev OR create new dev ticket: https://github.com/hackforla/311-data/issues/1785

---

Design Iterations

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

Iteration 1

Link to notes: https://github.com/hackforla/311-data/issues/1695#issuecomment-2175228600 Screenshot 

---

Hand Off Materials

Figma Section Name: Export link button

Before Screenshot

**Search/Filter Modal:**  **Map & Modal:** 

After Screenshot (Finalized)

**Added Export Button to the very bottom of the Search/Filter Modal:**  **The new modal and map:**  **Once the user clicked the Export link button and the system discovered that he/she has selected multiple Request Types, show the confirm/notice message:**  **Once the NC is unselected:**  **Once the NC is unselected and the request type has multiple selection**  **Once no request type and NC has selected:**  **Once user clicked the Export link button and all conditions are met, show the confirmation/notice dialog for the user to confirm the download/export process and the file format:**  **The page when the data is downloading/exporting; the request type checkboxes are disabled during download process:**  **The "Data exported successfully" message shows after the "Data downloading..." once the download/export process complete (The exported data will be immediately save to download folder of each PC/Mac); the request type checkboxes are disabled during download process until the message closes automatically :**  **The page when the download/export process has encountered error or is interrupted, show error message right after "Data downloading..."; this will also disable all the other request types until the error message got closed :** 

Video Upload of "Export Button" demo

**Prototype for only one Request Type warning** https://github.com/hackforla/311-data/assets/12424467/61037820-35f5-4b46-a32b-a758b0f0b482 **Prototype for Multi Request Type selection and NC warning:** https://github.com/hackforla/311-data/assets/12424467/e1618dc9-c26e-4fc6-8275-d35518fa289f **Prototype for No request type and NC selected** Uploading New_unslected NC & request type.mov… **Prototype for NC warning only:** https://github.com/hackforla/311-data/assets/12424467/3e29f1e8-a208-4ee4-923a-4ce99602008b **Prototype for successful data export:** https://github.com/hackforla/311-data/assets/12424467/c4dbabb1-df83-48a2-b026-cb010d0b4072 **Prototype showing downloading error:** https://github.com/hackforla/311-data/assets/12424467/023d8545-4e6b-4be6-85f4-838589507139

Other Resources

Initial demo of an export functionality, taken from: https://github.com/hackforla/311-data/pull/1612#issuecomment-1982269437 https://github.com/hackforla/311-data/assets/107657940/5068eac4-3a55-42a1-912b-818407adc586

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."

[ryanfchase]

I need the estimated size from design leads for them to sign off on this issue. Unless there are concerns/questions, please complete the following...

1. Remove label Size: Missing and replace with the expected size label
2. Remove the draft label since all the info needed to start the ticket is present.
3. Add the ready for prioritization to indicate that it's ready to be added to the backlog (and optionally leave a comment)

[bberhane]

@Joy-Truex, please add a size estimate, then we can remove "draft" and "ready for design lead" labels and add "ready for prioritization" label so a PM can move the ticket to the prioritized backlog. Thank you!

[kiranofans]

Design Iterations

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

Iteration 1

Link to notes: [Link to Figma Handoff including user flow, prototyping, making steps, and finalized screenshots](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=12642-2242&t=CSAfQzYHgvwTiLBx-0) **Static user flow:** 

Hand Off Materials

Figma Section Name: Export link button

Before Screenshot

**Search/Filter Modal:**  **Map & Modal:** 

After Screenshot (Finalized)

**Added Export Button to the very bottom of the Search/Filter Modal:**  **The new modal and map:**  **Once the user clicked the Export link button and the system discovered that he/she has selected multiple Request Types, show the confirm/notice message:**  **Once user clicked the Export link button and has selected only ONE Request Type, show the confirmation/notice dialog for the user to confirm the download/export process and the file format:**  **The page when the data is downloading/exporting:**  **The "Data exported successfully" message shows after the "Data downloading..." once the download/export process complete (The exported data will be immediately save to download folder of each PC/Mac):**  **The page when the download/export process has encountered error or is interrupted, jump from the "Data downloading..." message box:** 

Other Resources

Prototype for only one Request Type can be selected https://github.com/hackforla/311-data/assets/12424467/9740d92e-1318-42eb-b880-22f9ae643214 Prototype for successful data export: https://github.com/hackforla/311-data/assets/12424467/61b6983b-1065-44cf-aec5-d3fb29e1402b Prototype showing error occurred during downloading/exporting: https://github.com/hackforla/311-data/assets/12424467/9d86a135-9c4b-4ca7-9b71-9322961ecb80

---

~note from @ryanfchase: removed the rest bc we only want to know info related to your latest iteration~

[ryanfchase]

@kiranofans well done, thank you for taking the time to format your designs with the proper sections and dropdowns, and for moving the ticket to In Review. This is very helpful to the team. Please also update the main ticket with a link to your comment (by replacing Iteration 1's REPLACE WITH COMMENT URL with the link to your comment). Since your comment also contains the screenshot, you can delete REPLACE WITH SCREENSHOT on the original post's Iteration 1 section.

Screenshot on how to grab links from comments


[ryanfchase]

@annaseulgi I think we'll still need to come up with a way to prevent base designs from affecting hand-offs that utilize those designs. As you can see from Shu's screenshot, the Search and Filter modal does not match what we have on the site at the moment (e.g. compare "Before Screenshot" with our current site).

We can move forward with the dev team implement the relevant UI changes that pertain to the export feature since we'd like to expedite our pre-launch issues. But I believe we ought to come up with a more robust system for preventing this from happening to future designs.

[ryanfchase]

@kiranofans I think there was some confusion with my comment. I was hoping you would put your comment ...

here...


I'm going to hide your comment on the epic -- I didn't mean for you to comment on the Epic. For your future information -- we changed how the 311 Data team is going to use Epics. Now, Epics are really just meant for leads and PMs to track groups of related tickets. Members won't need to comment on them or update them. Hope that clears things up 😃

[ryanfchase]

@kiranofans actually -- I'll go ahead and do it for you this time, since I think this is one of the first instances of the design team filling out this info by a member... and moving forward you guys can use this as an example.

[ryanfchase]

@kiranofans actually -- I'll go ahead and do it for you this time, since I think this is one of the first instances of the design team filling out this info by a member... and moving forward you guys can use this as an example.

I have done it already?

Well you left a comment on the Epic, rather than on the original post of this ticket.

Screenshot of where it was supposed to go


[kiranofans]

@kiranofans I think there was some confusion with my comment. I was hoping you would put your comment ...

here... I'm going to hide your comment on the epic -- I didn't mean for you to comment on the Epic. For your future information -- we changed how the 311 Data team is going to use Epics. Now, Epics are really just meant for leads and PMs to track groups of related tickets. Members won't need to comment on them or update them. Hope that clears things up 😃

Let me clear this up. Do you mean by putting my whole comment with design iteration, videos, and screenshots to the original issue, the epic one? And I'm confused with the sentence, removed the rest bc we only want to know info related to your latest iteration

[ryanfchase]

@kiranofans I think there was some confusion with my comment. I was hoping you would put your comment ... here... I'm going to hide your comment on the epic -- I didn't mean for you to comment on the Epic. For your future information -- we changed how the 311 Data team is going to use Epics. Now, Epics are really just meant for leads and PMs to track groups of related tickets. Members won't need to comment on them or update them. Hope that clears things up 😃

Let me clear this up. Do you mean by putting my whole comment with design iteration, videos, and screenshots to the original issue, the epic one? And I'm confused with the sentence, removed the rest bc we only want to know info related to your latest iteration

@kiranofans oh shoot, that was a mistake. I thought I was seeing something else, my fault! Let me revert that.

[ryanfchase]

@kiranofans ok I've reverted my deletion of your hard work! (i can tell you worked hard on that because it was a pain in the butt to revert lol).

Will I leave a comment on the Epic or on this current issue's main post? Sorry, I just want to make sure.

No comments should go on the epic. If you leave comments on the epic, nobody will see it until it's too late lol. Check out the last two edits on this ticket's original post. You will see what changes I was originally (before I screwed up your comment) asking for. This would have been much easier on zoom -- thank you for being flexible and patient!

[kiranofans]

@kiranofans ok I've reverted my deletion of your hard work! (i can tell you worked hard on that because it was a pain in the butt to revert lol).

Will I leave a comment on the Epic or on this current issue's main post? Sorry, I just want to make sure.

No comments on the epic. If you leave comments on the epic, nobody will see it until it's too late lol. Check out the last two edits on this ticket's original post. You will see what changes I was originally_ (before I screwed up your comment) asking for. This would have been much easier on zoom -- thank you for being flexible and patient!

My bad, I have misread some words. Thanks for the detailed clarification

[ryanfchase]

@kiranofans ok I've reverted my deletion of your hard work! (i can tell you worked hard on that because it was a pain in the butt to revert lol).

Will I leave a comment on the Epic or on this current issue's main post? Sorry, I just want to make sure.

No comments on the epic. If you leave comments on the epic, nobody will see it until it's too late lol. Check out the last two edits on this ticket's original post. You will see what changes I was originally_ (before I screwed up your comment) asking for. This would have been much easier on zoom -- thank you for being flexible and patient!

My bad, I have misread some words. Thanks for the detailed clarification

It's late! Thank you for catching my earlier mistake. You're good to unassign yourself while your work awaits a review -- feel free to pick up more tickets if there are any available.

[kiranofans]

@kiranofans ok I've reverted my deletion of your hard work! (i can tell you worked hard on that because it was a pain in the butt to revert lol).

Will I leave a comment on the Epic or on this current issue's main post? Sorry, I just want to make sure.

No comments on the epic. If you leave comments on the epic, nobody will see it until it's too late lol. Check out the last two edits on this ticket's original post. You will see what changes I was originally_ (before I screwed up your comment) asking for. This would have been much easier on zoom -- thank you for being flexible and patient!

My bad, I have misread some words. Thanks for the detailed clarification

It's late! Thank you for catching my earlier mistake. You're good to unassign yourself while your work awaits a review -- feel free to pick up more tickets if there are any available.

Yes. Good night! I'll leave this message here for you to read when you could, because I have another slight confusion about that Demo video. Should I replace that video with mines or it's better to just leave it like that?

[ryanfchase]

@kiranofans ok I've reverted my deletion of your hard work! (i can tell you worked hard on that because it was a pain in the butt to revert lol).

Will I leave a comment on the Epic or on this current issue's main post? Sorry, I just want to make sure.

No comments on the epic. If you leave comments on the epic, nobody will see it until it's too late lol. Check out the last two edits on this ticket's original post. You will see what changes I was originally_ (before I screwed up your comment) asking for. This would have been much easier on zoom -- thank you for being flexible and patient!

My bad, I have misread some words. Thanks for the detailed clarification

It's late! Thank you for catching my earlier mistake. You're good to unassign yourself while your work awaits a review -- feel free to pick up more tickets if there are any available.

Yes. Good night! I'll leave this message here for you to read when you could, because I have another slight confusion about that Demo video. Should I replace that video with mines or it's better to just leave it like that?

@kiranofans good catch! That was another mistake. I've made sure your uploaded video was represented on the original ticket. Thanks again for the patience with all that.

[annaseulgi]

@ryanfchase Yes I totally agree with the search/filters modal looking different from the demo. Since we're still working through that, I've had designers make comments about the relevant design changes despite some parts looking different (ex. if the map looks slightly different due to small contrast changes but the actual design handoff is pertaining to the addition of a button). The designers have been putting those relevant comments in their handoff section to notify devs what to pay attention to and what to ignore. Would that be okay for the time being?

Allison and Angela are working through the search/filters modal & will eventually be handing off a component that hopefully helps everything become more consistent again (at least in regards to the modal).

[ryanfchase]

@ryanfchase Yes I totally agree with the search/filters modal looking different from the demo. Since we're still working through that, I've had designers make comments about the relevant design changes despite some parts looking different (ex. if the map looks slightly different due to small contrast changes but the actual design handoff is pertaining to the addition of a button). The designers have been putting those relevant comments in their handoff section to notify devs what to pay attention to and what to ignore. Would that be okay for the time being?

Allison and Angela are working through the search/filters modal & will eventually be handing off a component that hopefully helps everything become more consistent again (at least in regards to the modal).

Yes, this will do for now. I'm going to add to the agenda for next week that we come up with a plan for fixing this aspect of our design system.

[ryanfchase]

Oh @annaseulgi -- does @kiranofans' work pass review? Beyond the different base design of the modal, are we good to close this and create dev tickets to implement these designs? I will assign myself for review as well and make sure PM team approves from a product perspective.

[ryanfchase]

Assigning myself for review

• ETA: 6/13/24
• Availability: afternoon + evenings

[ryanfchase]

Requesting changes from @kiranofans -- please modify the design, or provide text indication on Figma if such a change is too complicated

• [ ] Once user clicked the Export link button and has selected only ONE Request Type, show the confirmation/notice dialog for the user to confirm the download/export process and the file format:
  • [ ] It looks like the requests are all selected here. If possible, let's only show 1 request, to demonstrate that only 1 request is allowable at a time
  • [ ] similarly for getting to confirmation dialog, there should be a NC selected, and a date range provided

If this will take more than a few days to complete -- let us know and we can maybe simplify the ask.

[kiranofans]

Requesting changes from @kiranofans -- please modify the design, or provide text indication on Figma if such a change is too complicated

• [ ] Once user clicked the Export link button and has selected only ONE Request Type, show the confirmation/notice dialog for the user to confirm the download/export process and the file format:

  • [ ] It looks like the requests are all selected here. If possible, let's only show 1 request, to demonstrate that only 1 request is allowable at a time
  • [ ] similarly for getting to confirmation dialog, there should be a NC selected, and a date range provided

If this will take more than a few days to complete -- let us know and we can maybe simplify the ask.

I will try to find a way to implement the Request Types related process and discuss it with the teammates working on the search/filter modal for Request Types.

Regarding the confirmation dialog that needs to include a date range (which I guess a calendar already exists ), I believe that you are right, there should be a "Cancel" button or similar one. Let me consider this about 1 day, and I will respond with my decision. Additionally, I might decide to change the dialog's color to ensure consistency with the loaders and other modals.

[kiranofans]

@ryanfchase I just remembered that on the Search/Filter modal there is Date Range, so when user start a download, I guess the data of the date range will be transferred to the download process which is why I didn't consider the date range. Or do you mean by showing the selected date range during download?

[ryanfchase]

@ryanfchase I just remembered that on the Search/Filter modal there is Date Range, so when user start a download, I guess the data of the date range will be transferred to the download process which is why I didn't consider the date range. Or do you mean by showing the selected date range during download?

@kiranofans Yes, we're asking that you modify the Search/Filter modal in your hand off materials to reflect the "correct state" when using the export button. We also advise you add additional screenshots for the other "error conditions", or modify the warning to describe all required fields.

If it's easier, you can just add text notes to your hand-off images, similar to the ones I have on my annotated screenshot below, cc @annaseulgi to advise

Annotated screenshot of modal and confirmation/warning dialog

Please modify mockup to include NC, date range, and only 1 selected request type  Please show warning if user does not select NC, valid date range EDIT: see updated version in a [future comment](https://github.com/hackforla/311-data/issues/1695#issuecomment-2173965163) 

[kiranofans]

@ryanfchase I just remembered that on the Search/Filter modal there is Date Range, so when user start a download, I guess the data of the date range will be transferred to the download process which is why I didn't consider the date range. Or do you mean by showing the selected date range during download?

@kiranofans Yes, we're asking that you modify the Search/Filter modal in your hand off materials to reflect the "correct state" when using the export button. We also advise you add additional screenshots for the other "error conditions", or modify the warning to describe all required fields.

If it's easier, you can just add text notes to your hand-off images, similar to the ones I have on my annotated screenshot below, cc @annaseulgi to advise

Annotated screenshot of modal and confirmation/warning dialog Please modify mockup to include NC, date range, and only 1 selected request type

Please show warning if user does not select NC, valid date range

This is very clear, thanks for making such explanation. I might update the post in few days

[ryanfchase]

Thank you @kiranofans,

As a matter of bookkeeping, please leave a comment with the following items:

• updated ETA
• availability for communications during the week

Please also...

• assign yourself to this ticket while you work on this
• move the ticket back to In Progress

[kiranofans]

updated ETA： 2 to 3 days availability for communications during the week: From Friday to next week until the issue is fully done

[ryanfchase]

@kiranofans following up on our Slack conversation...

[does] the date range has a default value for all users once they open the website?

Answer: yes, the default date range is 1 week

if we say invalid date range has selected, can we adjust the calendar on the search modal to show this error such as to disable date later than today, and so on so it doesn't include in the download process? Or does the invalid date range that's within possible date doesn't support download?

Answer: I actually think we should scrap warnings for "invalid dates". When I made that comment, I forgot that the app automatically supplies a default date -- so this scenario would never happen. So feel free to disregard that particular note.

[ryanfchase]

@kiranofans I've updated my previous note w/ annotations to remove the requirement for "invalid date"

Screenshot with annotation


[kiranofans]

Design Iterations

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

Iteration 1

Screenshot 

---

Hand Off Materials

Figma Section Name: Export link button

Before Screenshot

**Search/Filter Modal:**  **Map & Modal:** 

After Screenshot (Finalized)

**Added Export Button to the very bottom of the Search/Filter Modal:**  **The new modal and map:**  **Once the user clicked the Export link button and the system discovered that he/she has selected multiple Request Types, show the confirm/notice message:**  **Once the NC is unselected:**  **Once the NC is unselected and the request type has multiple selection**  **Once no request type and NC has selected:**  **Once user clicked the Export link button and all conditions are met, show the confirmation/notice dialog for the user to confirm the download/export process and the file format:**  **The page when the data is downloading/exporting; the request type checkboxes are disabled during download process:**  **The "Data exported successfully" message shows after the "Data downloading..." once the download/export process complete (The exported data will be immediately save to download folder of each PC/Mac); the request type checkboxes are disabled during download process until the message closes automatically :**  **The page when the download/export process has encountered error or is interrupted, show error message right after "Data downloading..."; this will also disable all the other request types until the error message got closed :** 

Video Upload of "Export Button" demo

**Prototype for only one Request Type warning** https://github.com/hackforla/311-data/assets/12424467/61037820-35f5-4b46-a32b-a758b0f0b482 **Prototype for Multi Request Type selection and NC warning:** https://github.com/hackforla/311-data/assets/12424467/e1618dc9-c26e-4fc6-8275-d35518fa289f **Prototype for No request type and NC selected** Uploading New_unslected NC & request type.mov… **Prototype for NC warning only:** https://github.com/hackforla/311-data/assets/12424467/3e29f1e8-a208-4ee4-923a-4ce99602008b **Prototype for successful data export:** https://github.com/hackforla/311-data/assets/12424467/c4dbabb1-df83-48a2-b026-cb010d0b4072 **Prototype showing downloading error:** https://github.com/hackforla/311-data/assets/12424467/023d8545-4e6b-4be6-85f4-838589507139

Other Resources

Initial demo of an export functionality, taken from: https://github.com/hackforla/311-data/pull/1612#issuecomment-1982269437 https://github.com/hackforla/311-data/assets/107657940/5068eac4-3a55-42a1-912b-818407adc586

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."

@ryanfchase It might be a bit rough, feel free to fine-tune this :)

[ryanfchase]

Product can sign off on this, awaiting review from design team before handing off to dev

[annaseulgi]

@kiranofans small detail but this screenshot looks like it needs to indicate that the user has only clicked one request type, if I'm understanding the explanation correctly. Currently, the design shows all the request types still selected. (Super nit-picky but just want to make sure the designs can look as accurate as possible for hand-off to minimize the possibility of confusion :).) Thank you! Great work!

[kiranofans]

@kiranofans small detail but this screenshot looks like it needs to indicate that the user has only clicked one request type, if I'm understanding the explanation correctly. Currently, the design shows all the request types still selected. (Super nit-picky but just want to make sure the designs can look as accurate as possible for hand-off to minimize the possibility of confusion :).) Thank you! Great work!

Hi Anna, this is the old screenshot, the new one was in a new comment: https://github.com/hackforla/311-data/issues/1695#issuecomment-2175228600.

[annaseulgi]

@kiranofans I see, gotcha - thanks for letting me know! If you are able, I'd recommend updating that one screen/mockup from the old one to the new one (you referenced in the comment) under section "After Screenshot (Finalized)" that way it's more clear for devs and they don't have to scroll down to examine all of the comments. Let me know if you need help :)

[ryanfchase]

@annaseulgi @kiranofans I offered to update it based on a Slack convo and I just hadn't gotten around to it, my bad!

It is updated now :)

[annaseulgi]

@ryanfchase @kiranofans All good! Just wanted to make sure our hand-off designs were as polished as possible to minimize any confusion since I know our design system is pretty messy/inconsistent at the moment. Thank you Shu & Ryan!

[cottonchristopher]

Hand-off initiated and New Issue Approval

[ryanfchase]

I've added this to prio-backlog for dev lead (myself or @Skydodle, whoever is available first) to get this ready for a developer

[ryanfchase]

@kiranofans now that you've worked on this, can you tell us the Size bucket that reflects how much time a designer would spend on this if they had to do the same amount of work? See our Size Guide for reference. No need to reveal how much time you actually spent, but we'd like to see how close our original Size: 0.5pt estimation was, I'm guessing this was too low.

[ryanfchase]

Now that the dev ticket has been made, I vote we close this ticket since the designer's work has been completed. @annaseulgi I will leave it to you to close, great work @kiranofans!