Redesign date selection in search & filters modal to be type-to-edit

[ryanfchase]

Overview

We need to improve the usability of the date selection component of the search and filters modal, since users are reporting it does not behave the way they expect it to.

Action Items

• Address the problem overview with possible design solution(s) in a comment
  • PM Requirement: add double chevron to date picker/calendar to indicate earliest date of data collection
  • PM Requirement: remove "Last 3 Months" from the date range dropdown and replace with "Custom Date Range"
• Complete Design Iterations section below
• Document user interaction in Figma

Resources

V1.2 Moderated Usability Test

• October '23 slide on wanting to type-to-edit date range
• October '23 slide on users not noticing calendar dropdown icon
• August '24 slide on wanting to type-to-edit date range

Comments on V1.2 August Presentation by UIUX Design Team Members

• link to google doc with comments

---

Design Iterations

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

Iteration 1

Link to notes: REPLACE WITH COMMENT URL

REPLACE WITH SCREENSHOT UPLOAD

---

Hand Off Materials

Figma Section Name: REPLACE WITH SECTION NAME

Before Screenshot

REPLACE WITH SCREENSHOT UPLOAD

After Screenshot (Finalized)

REPLACE WITH SCREENSHOT UPLOAD

Designer Resources

Iteration Dropdown Copy/Paste

<details><summary>Iteration X</summary>
<p>

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

</p>
</details> 

Instructions for Engineering Hand Off

To Start Engineering Hand Off...

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

[ryanfchase]

Ready for design lead input. Please add:

• any further required information
• any possible blockers
• remove Size: Missing and add appropriate size

[Joy-Truex]

@allisonjeon Can you please review the information on this ticket and address the points ryan has commented and add the size and determine if it should be combined with #1600