Design System Updates: Search/Filter Modal

[annaseulgi]

Dependency

• Pull data from previous years (e.g. 2023, 2022, etc) #1666
• UXD: basic user flow for Blank Map #1848
• DEV - Remove Pins from React Redux State #1865
• Discussion around pre-defined date range chips resulted in the decision to remove them entirely

Un-Blocks

• Dev Ticket: DEV - Update Datepicker: Start Date, End Date, Remove Chips #1868

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!