UXD - Design Implementation of Copy Audit of Search and Filter Modal

[Joy-Truex]

Overview

We need to implement the designs from our recent copy audit to ensure the recommendations are reflected in our design system.

Action Items

Previous Ticket Review

• [x] Review comments on #1978
  • [x] "1. Adjust to an action focus..." (comment)
  • [x] "2. Shorten text in [Request Types] tooltip..." (comment)
  • [x] "3. Title vs sentence case..." (comment)

Designer Todo

• [x] Update Search and Filter text fields
  • [x] Change “Neighborhood Councils” → “Select a neighborhood”
  • [x] Change date range field → “Select a date range”
• [x] Request Types tooltip
  • [x] Shorten to: “These categories are maintained by the Information Technologies Agency and may not reflect those on MyLA311.”
• [x] Implement capitalization rules
  • [x] Labels / hierarchy → Title Case (e.g., “Neighborhood”)
  • [x] Formal language → Title Case
  • [x] Full sentences → Sentence case
• [x] Make a reusable design system component based on content feedback

Ticket Bookkeeping

• [x] Update Hand Off section with the final design

---

Resources

Click to see: 💱Search and Filter changes

Click to see: ℹ️ Tooltip text for Request Types

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: ✏️ Design System

Before Screenshot

• 
• 

After Screenshot (Finalized)

• 
• 

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]

@Joy-Truex moving back to New Issue Approval, all new tickets exit New Issue Approval through product.

[ryanfchase]

@Joy-Truex

I'm needing a finite list of design implementations for this ticket, we need to determine how the work should be prioritized, or if any work needs to be split up.

[ryanfchase]

@Joy-Truex so we're in a weird spot where the live version matches the feedback we received in the content audit feedback, but there is another design that has been handed-off to dev, which is slightly different. Will you need to adapt the feedback to match the latest design?

Live date selector

Pre-populated Input

Latest date selector styles

No user input

User input captured

Relevant tickets on latest date selector

• design: https://github.com/hackforla/311-data/issues/1600
  • Figma: Search/Filter Modal #1600
• dev: https://github.com/hackforla/311-data/issues/1868

[ryanfchase]

@Joy-Truex I updated the Action Items to make it easier to skim, let me know if they are consistent with your old action items.

previous version of Action Items

• [ ] take note of all changes from live to the finalized version from ticket #1978
  • [ ] Adjust to an action focus that we have in the search bar and the date range. To match those, update the date range prompt to "Select a date range" and Neighborhood Councils to "Select a neighborhood" (original comment)
  • [ ] Shorten text in tooltip to "These categories are maintained by the Information Technologies Agency and may not reflect those on MyLA311." (original comment)
  • [ ] title vs sentence case framework
    • [ ] title or short phrase (ex. Neighborhood) or top hierarchy Title Case
    • [ ] formal language calls for title case
    • [ ] if it is a sentence or stand-alone then use sentence case
• [ ] create a reusable component that will live in our design system
• [ ] Update the Hand Off section of this ticket with the final iteration of this design

[Joy-Truex]

approved, thanks for your help making the instructions more clear. @ryanfchase

[ryanfchase]

Great! This ticket is ready to be picked up 👍🏼

[Joy-Truex]

I noticed recently that there are two versions of the calendar and wasn't sure which version was in development. I will confirm with the design team and update here after, thanks.

UPDATE FOLLOWING MEETING:

• The design from this ticket #1600 should be utilized for the date range picker with the exception of the modification made here to remove the chips.

[Joy-Truex]

@jberzowska the copy we finalized for the one-field version (what is currently live on the site) of the calender was "Select a date range"

However, there is another version of the calendar that was designed, approved but not yet developed, that has two fields. Do you have any strong aversions to this filler texts? ("Start Date" and "End Date") My only thought is that we've since updated our guidelines for case so it should perhaps read "Start date" and "End date"

Thanks!

[pogwon]

Hey @Joy-Truex, just some questions:

1. Tooltip has been updated and ready to go. Should I assume that "Select a Date Range" copy no longer applies, since we are going forward with the "Start Date" and "End Date" copy (mentioned above)?
2. For implementing capitalization rules, does this only apply to only components currently in our design system?

After receiving clarification, ticket should be ready for handoff by Tuesday, October 14.

[Joy-Truex]

@pogwon

1. please use "Start Date" "End Date" for now, once Justyna returns from her vacation next week i'll have her confirm the copy is approved since I dont think she saw my question above but i dont want that to hold you back for now
2. it should apply to components in our design system currently and those moving forward

if you have any further questions lmk and i should be able to reply wednesday morning. ty!

[jberzowska]

@Joy-Truex @pogwon - sorry to have missed this. I do think Start date is more aligned than Start Date, but I don't feel strongly about it. Your pick.

One related thing to review would be if the instructions for using the filters still work with the update... I'll attach the wording I've used in the FAQ (still in review), in case that helps (I have the space to be more wordy here than you do in the modal):

1. To start, enter an address OR select the neighborhood you’re interested in.
2. Then, set both the start and end dates for when the requests came in, e.g. last week or last month.
3. ...

[Joy-Truex]

thank you for your input! let's address the FAQ in that ticket, @pogwon let me know if you have all you have need to move forward here.

[pogwon]

@Joy-Truex Search & Filter fields and Request Types tooltips have been updated, and capitalization rules have been implemented. I think I'm ready to finish everything, but I just wanted to double check about guidelines for updating our design system and whether we should delete older designs (that are being replaced) or put them in archive somewhere. Commented in Figma here.

[pogwon]

Capitalization/copy rules have been implemented in the design system, Search & Filter modal and Request Type tooltip have been updated, older components were moved to design archive, and handoff section has been updated.

[Joy-Truex]

MyLA311 link in tooltip: https://lacity.gov/myla311

[Joy-Truex]

Approved by design lead :)

[krystalphn]

@pogwon @Joy-Truex Hi! Could you please help me figure out if this link is the correct one to the elements linked to this ticket Figma section

[pogwon]

Hey @krystalphn here's updated Search & Filters modal. I also added in the updated Request Types Tooltip in that section.