UIUX: Blank Map On Page Load

[ryanfchase]

Overview

We need to design a flow for page-load where no data is visualized, instead we will prompt the user on how to use the application, which will significantly cut back on the amount of time it takes to open our site and help user retention.

Product Requirements

1. Consider adapting the loading modal's language to signify that we are just preparing the map (and not loading any data)

Current Loading Modal

2. Consider adapting the acknowledgement modal to provide some basic instructions on how to use the Search & Filters Modal

Current Acknowledgement Modal

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

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]

Coming from Bonnie, this is a Pre-Launch ticket. Please try to prioritize discussing and advancing this ticket as soon as you are able. Thanks.

[Joy-Truex]

This feels like a larger project for pre-launch in my opinion, I think this needs further discuss (although I see the discussion label on it).

I feel to do an adequate job this feels like an additional feature rather than simply a modal-- feels like it is asking for an onboarding/tutorial flow that may not be able to be addressed by one screen and would require user testing to ensure that it is adequately sufficient. Can we discuss more at our next meeting?

[ryanfchase]

This feels like a larger project for pre-launch in my opinion, I think this needs further discuss (although I see the discussion label on it).

I feel to do an adequate job this feels like an additional feature rather than simply a modal-- feels like it is asking for an onboarding/tutorial flow that may not be able to be addressed by one screen and would require user testing to ensure that it is adequately sufficient. Can we discuss more at our next meeting?

Sure! This has been added to Topic Requests for 2024-10-23 Weekly meeting.

[Joy-Truex]

@ryanfchase Upon discussing and reviewing with the team at our last meeting, our feedback is that this was previously addressed by Issue 1655 with the loading modal- any other small solution would likely have a similar impact to that Can you review with PM team and let us know if you have further thoughts on how to proceed or need more clarification? TY!

[Joy-Truex]

Discussion on 10-13 with UX design team:

Potential Solutions (please note this discussion was with the assumption that map cannot load in the background)

• enter request first
• map loads part by part
• load part of the map, maybe just one district
• loading progress modal final thought
• this was previously addressed by Issue 1655 with the loading modal- any other small solution would likely have similar impact to that

Discussion on 11-13: we now consider that entering the request while the map data loads in the background can allow us to buy time.

please advise if you'd like us to further explore what this solution could practically look like!

[ryanfchase]

I will be assigning myself while I provide some data visualizations mockups that only work with a Blank Map on page load. No action needed from design for now.

[ryanfchase]

Adding this for agenda for tonight. I want to see if dev lead has something in mind, since we are working on updates to our Performance Epic: https://github.com/hackforla/311-data/issues/1890

[ryanfchase]

This discussion has been kicked back to the Product Planning meeting

[ExperimentsInHonesty]

no defined dependency, moving back to new issue approval

[ryanfchase]

Moved out of icebox (it was awaiting discussion in Product Planning).

• [ ] Question for design lead: does this need any further information or updates? Let me know if I need to add anything that was discussed in Product Planning in order for you to proceed.

[Joy-Truex]

@ryanfchase I believe this is part of this ticket and not separate-- I would like to add the need for a final user flow for this

[ryanfchase]

I believe this is part of this ticket and not separate-- I would like to add the need for a final user flow for this

Thank you @Joy-Truex! I'm providing a screengrab so people can see this basic user flow at a glance (although, glancing is not a substitute for a full read-through of each design and dev note. Other readers be warned ⚠).

Screengrab of Blank Map user flow

I don't see any further questions for product. Moving to New Issue Approval with draft assigned to you while you prepare this ticket for design. If this ticket requires more extensive work than our normal design tickets allot, we can work together to modify this ticket accordingly.

[Joy-Truex]

Will be discussed at breakout room of 2-12-25 general meeting. To update ticket with notes after meeting.

[ryanfchase]

FYI Moving to questions, since it won't receive updates until after being discussed. @Joy-Truex thank you for using on agenda: general, that was the correct label to use. I can get this clarified, but New Issue Approval should mean "ticket is waiting on input from lead". PMs can move this back to New Issue Approval after tonight's meeting.

[ryanfchase]

This agenda item was discussed at the weekly meeting. Moving back to New Issue Approval.

[Joy-Truex]

have solicited feedback from design team. will provide an update on steps forward prior to next GM. ETA 2/19

[Joy-Truex]

Lofi action steps discussed at GM breakout figma file section

1. Welcome to 311 Data message

• [ ] Adapt the loading modal's language to signify that we are just preparing the map (and not loading any data)
• [ ] Adapt the acknowledgement modal to provide some basic instructions on how to use the Search & Filters Modal
• [ ] instead of doing two separate pop-ups, combine them into one that is two pages; with next and then ok

2. blank map & blank filters 3. confirm

• [ ] consider moving search bar to within filters not before filters

• [ ] no address filled in

• [ ] no boundaries (NC)

• [ ] no date range

  • [ ] remove date chips (last week, last month, etc)

• [ ] no request type

• [ ] no request status

  • [ ] reorder: open, closed, all

• [ ] confirm so that the map doesn’t load “by accident” thus wasting time

• [ ] consider a "cancel" option while map loads

4. loading modal

• [ ] explains what is happening with more of a countdown or more indication of what is happening (for example when you’re downloading a large file)

[ryanfchase]

I've added this to tonight's agenda so we can hopefully get a quick answer and close this ticket:

• https://github.com/hackforla/311-data/issues/1907#issuecomment-2683906730

[Joy-Truex]

This ticket can be marked as completed/closed. Thanks!