Design System Updates: Search/Filter Modal

[annaseulgi]

Dependency

• https://github.com/hackforla/311-data/issues/1666

Overview

The design team needs to update the calendar picker to address the following issues identified by the research and product teams:

• No confirmation after users select a date range
• Layout of the calendar is not intuitive
• Data is limited to the past 30 days (NEW issue as of 2/21/24)

Action Items

• [x] brainstorm w/ design team to identify which features to improve on the calendar picker
• [x] create wireframes and get feedback from design team
• [x] revise wireframes based on feedback and create interactive prototype
• [x] usability test interactive prototype with design team
• [x] run through interactive prototype with developers to identify potential constraints
• [x] add popover message to show users that data is limited to the past 30 days
• [ ] ~add double chevron to date picker/calendar to indicate earliest date of data collection~
• [ ] ~Remove "Last 3 Months" from the date range dropdown and replace with "Custom Date Range"~
• [x] handoff to developers

Hand Off Materials

Figma Section Name: Search/Filter Modal #1600 - Final

Before Screenshot

After Screenshot (Finalized)

Resources/Instructions

• Interactive Prototype Figma file - please refer to the 'Allison J' page and the wireframes under 'INTERACTIVE PROTOTYPE - 2.27.24'
• Popover Message Figma file - refer to the 'Anna K' page and the 'Popover' section

[ryanfchase]

FYI @allisonjeon @giraffe2003

Please add this to action items

• [ ] we need to add a restriction to the calendar to limit to 30 days
• [ ] need to add some messaging on how this is a limitation of a low-cost infrastructure

[cottonchristopher]

Ticket Outline/Review

Title: Overview: we need X for Y

• (try to keep to 1 sentence. What we want to do and why)
• Y = the definition of done (objective criteria)

Description/Details: (optional if needed)

• may include more of a description of the overview,
• may include an image of the problem

Action Items:

• tasks that can be checked off/completed.
• [ ] make checkable

Resource/links:

• include links and resources so that you don't have to search outside of the ticket for information
  • examples: Figma, links to other issues, resources, standards, and criteria used in completing the document.
• Screenshots: should be easily viewable, pertinent info (only)
• Screenshots: before and after shots
  • make screenshots collapsable

[bberhane]

We'll need to update the last three action steps based on the dependency, as Dev is working to load multiple years of data. Unassigning @allisonjeon and @giraffe2003 for now!

[cottonchristopher]

We are no longer limited to 30 days of data. However, we need to add another option to the date picker; below "3 Month Range," add "Custom Date Range." In addition, we need to add the double chevron to indicate the beginning of the data set.

[bberhane]

We'll be updating this ticket with the above instructions and will notify you once we do so!

[bberhane]

Based on our PM meeting on 5-30-24 and for the purposes of the demo, we will be limiting data to 30 days, to avoid slow loading times. This ticket has been updated with new instructions and is ready to be assigned.

[annaseulgi]

assigning @allisonjeon and @giraffe2003 to this ticket for the modal redesign + updated date range picker

(note from planning meeting: for demo purposes, dev team wants to constrain the date range to be the past 30 days so the implications with design, we might want to heavily simplify the date range picker if the user is only supposed to click within a 30 day range)

assigning myself for the popover component

[annaseulgi]

@allisonjeon @giraffe2003 hi all, for this ticket, I'm going to add an action item where part of the deliverable is to design the modal to look similar with the existing modal on the demo (other than what's being specifically changed to improve the modal of course).

This is because the dev team is having confusion/trouble with distinguishing what's being handed off/changed when parts of the design do not look identical to what exists in the demo. Because our design system is a mess at the moment, sometimes the modal component being used in hand-offs doesn't look the same to what is already existing in the 311 site demo.

The image below is what I screenshotted from the live site. If the modal for this ticket is being handed off and the only changes you want the dev team to make is the date range picker, then the rest of the design should look exact. If other parts are being intentionally changed, then no worries and that can be noted when everything is being handed off. Lmk if you have questions!

(tagging @ryanfchase for visibility)

[ryanfchase]

If the modal for this ticket is being handed off and the only changes you want the dev team to make is the date range picker, then the rest of the design should look exact. If other parts are being intentionally changed, then no worries and that can be noted when everything is being handed off.

@annaseulgi this is very helpful for the dev team, thank you for adding this as an action item. Agreed, if other parts change, we should note this on the ticket or in a comment

[ryanfchase]

Hi Angela,

Please leave a comment with the following items:

• updated ETA
• progress from the last week (if applicable)
• availability for communications during the week

[giraffe2003]

Hi Ryan!

ETA: 2 weeks? Progress: should have some designs to show design team for this upcoming meeting 6/26 Availability: Monday and Tuesday after 6PM

[Joy-Truex]

Hi Angela,

Please leave a comment with the following items:

• updated ETA
• progress from last week
• Any blockers this week?
• availability for communications during the week

Thanks!

[Joy-Truex]

Unassigned Angela who is no longer active with 311Data

[allisonjeon]

Hi @ryanfchase @bberhane for the last two checklist items (see below) - are these required before handing off the design to developers? Or is it something that can be implemented in another round of revisions to the search/filter modal?

• [ ] add double chevron to date picker/calendar to indicate earliest date of data collection
• [ ] Remove "Last 3 Months" from the date range dropdown and replace with "Custom Date Range"

The search/filter modal has been updated significantly to address these two original issues:

• No confirmation after users select a date range
• Layout of the calendar is not intuitive

If possible, I was wondering if we could add the two checklist items to ticket #1818 and move forward with the following design: Interactive Prototype Figma file - please refer to the 'Allison J' page and the wireframes under 'INTERACTIVE PROTOTYPE - 2.27.24'

Please let me know, thank you!

[ryanfchase]

@allisonjeon yep, works for me. I've moved those two action items to #1818, and I will strike them off this ticket. Good thinking, thanks!

[ryanfchase]

@allisonjeon I've also modified this ticket's original post with a ### Hand Off Materials section, so that it is similar to our existing design tickets (we are no longer doing Design to Engineering Hand Off tickets).

Please provide any relevant "Before Screenshots" and "After Screenshots", either in the original comment (in their designated areas), or you can paste them in a new comment and I can help you format the ticket for hand off.

[allisonjeon]

Hey @ryanfchase I've updated the original comment with the relevant "Before Screenshots" and "After Screenshots". Please let me know what else is needed for hand off. Thank you!

[ryanfchase]

This is looking good @allisonjeon -- I'll have the PM team review it tomorrow evening. I'll adjust the labels and status to reflect "In Review", thanks 😄

[bberhane]

PMs have OK'ed this. G2G for dev

[traycn]

Engineering issue made for the Search/Filter Modal design update here: https://github.com/hackforla/311-data/issues/1868