UIUX: Display address pins outside of NC boundaries

[ryanfchase]

Overview

We need to create a user flow for when they submit an address that falls outside of a Neighborhood Council boundary so that we can communicate the distinction between Neighborhood Councils boundaries, LA County boundaries, neutral areas (parks, lakes, etc), and areas that are un-related to Los Angeles.

Action Items

• Address the problem overview with possible design solution(s) in a comment
• Complete Design Iterations section below
• Document user interaction in Figma

---

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

Example: Far from Los Angeles - Miami

Example: Next to Los Angeles - West Hollywood

Example: Outside Los Angeles but nearby - Thousand Oaks

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]

I've created this as a Pre-Launch issue, it seemed to raise an important question about a potentially significant number of our users: people who don't reside (or know of) addresses within a Neighborhood Council. Open to feedback on priority on this, adding ready for design lead for leads to weigh in.

If this ticket needs discussion, please add the Discussion label, and be sure to add it to the agenda for next week's meeting. Thanks!

[ryanfchase]

This is ready to be picked up!

[Joy-Truex]

Inspiration

• input box is outlined in red
• error message explains what is wrong and how to fix it

• border highlighting, iconography, and red text

Iteration 1

• map will not change
• invalid or out of bounds address will result in change of color to red underline and text
• this requires expansion of modal so that the error message has room to display
• next time you type and hit enter (on a valid address) error message disappears

invalid address

blank state (expanded modal)