UXD - Create address details modal

[ryanfchase]

Overview

We need to make it more obvious to the users that the address they have searched is being displayed on the screen via an address details modal, so that users aren't confused about which neighborhood council boundaries contain their searched address.

Releases

• ER: Enhance Address Search House Icon with Additional Features #1859

Action Items

• Complete a high-fidelity mockup for the address details modal, which includes
  • the Neighborhood Council name
  • the searched address
• 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: 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."

---

Other Resources

• ER: Enhance Address Search House Icon with Additional Features #1859
  • Comment with design lead recommendations: ER: Enhance Address Search House Icon with Additional Features #1859 (comment)

Click to see screenshot of proposed designs from ER

Design #3

Click to see Design Lead Recommendation, mid-fidelity mockup

[ryanfchase]

This ticket is prioritized and ready to be picked up 👍

[kiranofans]

I'm just wondering if the modal will be clickable.

[Joy-Truex]

Hi @kiranofans! Definitely hover, I'm open to discussion with you and the team on whether it's clickable, please research and present your recommendation! Thanks 🙂

[kiranofans]

I'm having trouble positioning the modal overlay correctly in the prototype, so I’ve added the static designs here for now!

Design Iterations

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

Iteration 1

Link to notes: REPLACE WITH COMMENT URL

Address modal:

I added drop shadow to enhance readability and contrast in order to improve accessibility, and it will create depth and hierarchy, giving a sense of layering.

Updated design iteration

Link to design iteration

---

Hand Off Materials

Figma Section Name: hand-off link

Before Screenshot

There were only the location pin

Zoomed out

Zoomed in

After Screenshot (Finalized)

Now we get the address modal:

Zoomed Out

Zoomed In

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."