Redesign address search house icon

[ryanfchase]

Overview

We need to redesign the address search icon since the icon confuses users.

Action Items

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

Resources

V1.2 Moderated Usability Tests

• August '24 slide questioning icon
• Design team discussion (moved to google doc)

---

Design Iterations

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

Iteration 1

Link to notes: Hand-off materials

---

Hand Off Materials

Figma Section Name:

Before Screenshot

After Screenshot (Finalized)

Designer Resources

Iteration Dropdown Copy/Paste

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

<p>

Link to notes: `REPLACE WITH COMMENT URL`


</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

[kiranofans]

Design update: I've changed the search house icon to a location icon and created several designs for the hover box info card.

[kiranofans]

Update, and few question: I've created a version of the info card that includes street view photos of the NCs. I’m wondering if this feature can be implemented? And I’ve utilized Google Maps hyperlink for directions, location details, and street view images demonstration. Is it be possible for the dev to add these?

[ryanfchase]

Hi @kiranofans - feel free to add as much as you need to the hand off materials for this ticket. Design leads will review, and PMs can address concerns, and finally dev lead will comment on technical feasibility.

[kiranofans]

I'm adding social media handles to the info card so I'm wondering if this will be more stable than the website links? And is it possible to implement direction (google or other map direction)?

[ryanfchase]

In the general meeting, we discussed that @kiranofans should go ahead and use the social media handles, and PM team will have a look once this ticket moves to In Review. We will not be implementing direction in the near future, but we can certainly provide a google maps link that has the directions there.

[kiranofans]

I forgot to ask during the meeting that I also have few designs that use the neighbourhood council's street view images from Google Map or the specific map area image, I'm wondering if this could also be implemented? The design mockups are in this link: Design with images @ryanfchase This is not necessary to implement, just to explore the possibility

[ryanfchase]

Hi all! So I've reviewed all the info that's been going back and forth. I'm hearing some really good ideas on design, and I've gotten some questions from leads about making sure the work falls within the scope of the ticket. I'd like to add this to tonight's agenda and we can agree on next steps.

I've gone ahead and created a way for volunteers to document or work they've done that could potentially go in a follow up ticket. We'll be calling it "Emergent Requests", and I've made a Emergent Request issue template to achieve that.

Thanks all for patience! Talk to ya'll soon!

[kiranofans]

Hi all! So I've reviewed all the info that's been going back and forth. I'm hearing some really good ideas on design, and I've gotten some questions from leads about making sure the work falls within the scope of the ticket. I'd like to add this to tonight's agenda and we can agree on next steps.

I've gone ahead and created a way for volunteers to document or work they've done that could potentially go in a follow up ticket. We'll be calling it "Emergent Requests", and I've made a Emergent Request issue template to achieve that.

Thanks all for patience! Talk to ya'll soon!

I have create new ticket for the emergent request. If there's anything wrong just let me know. Thanks

[kiranofans]

This ticket is ready for review.

Hand Off Materials

Figma Section Name: Redesign Search House Icon Hand-Off

Before Screenshot

State 1

State 2

After Screenshot (Finalized)

Changed the blue house icon to a dark blue grey location pin

I have made hover animation over the location pin

location.pin.hover.swap.mov

I also made the location pin clickable, displaying an informative and interactive card. The resulting design includes both Zoomed Out and Zoomed In views.:

Light - Zoomed Out

Light - Zoomed In

The text label above the Google Map icon is a tooltip that appears when the user hovers over it for 1 to 2 seconds, providing assistance. This approach helps keep the design clean and improves clarity in the user flow.

The Google Map icon and the social media handles on the card are also clickable and hover-able; The video clip below demonstrates only the hover and click effects of the icons. The tooltip is not shown most of the time, so I removed it for this demonstration:

info.card.clickables.mov

Designer Resources

Iteration Dropdown Copy/Paste

Info card positioning design iteration

Info card design iteration

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

<p>

Link to notes: `REPLACE WITH COMMENT URL`

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