Design System Updates: Search/Filter Modal

[annaseulgi]

Dependency

• Pull data from previous years (e.g. 2023, 2022, etc) #1666
• DEV - Remove Pins from React Redux State #1865

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

• brainstorm w/ design team to identify which features to improve on the calendar picker
• create wireframes and get feedback from design team
• revise wireframes based on feedback and create interactive prototype
• usability test interactive prototype with design team
• run through interactive prototype with developers to identify potential constraints
• 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"
• 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.

[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: #1868

[ryanfchase]

@allisonjeon @Joy-Truex does the design the updated date picker allow for users to type in the date? If so, this addresses one of the Action Steps outlined by our latest usability test data.

• UXR Action Steps '24 tx: Create August 2024 V1.2 Moderated Usability Test Action Steps Spreadsheet #1819
• Action Steps '24 spreadsheet
• Action Steps '24 slideshow, user requesting type-to-edit

[Joy-Truex]

• type to edit is a relatively light design lift
• dev solution will potentially allow for larger than 30 day range
• if that is the case then type to edit will be implemented

[traycn]

Iceboxed issue, dependant on #1865

Dependency is on knowing how much data we are able to request. If 1865 resolves the app crashing when making a request for more than 30 days worth of data, we will be able to use a larger date range for the chips (i.e.: 7 Days, 14 Days, 30 Days).