Design Mock ups for my project page

[Biuwa]

Dependency

• [x] #1591
• [x] #1579
• [x] #1578
• [x] #1580
• [x] #1369
• [x] #1371
• [x] #1383
• [x] #1384
• [x] #1385
• [x] #1388

Overview

This issue will track the mocks up and designs changes to my project page.

Resources/Instructions

• Options availability Chart
• Meeting notes and recommendations are detailed in #1357
• Delete/Hide feature Video Guide
• Filter feature Guide
• Snapshot filter Guide
• DROs Map

[Biuwa]

Order of Priority:

1. Create Snapshot
2. Share Snapshot
3. Navigation to the snapshot page from my projects page
4. The appearance of the snapshot vs the project on my projects page
5. Filter
6. Delete/hide
7. Submit Badge

[ExperimentsInHonesty]

Video

0.57 having the grayed out snapshot icon with the tooltip is a great idea.

1:30 I understand the hesitation, the google series was cited. I will give an example where the hide being on a separate page is a totally PTA. I hide almost every drive all the time. But sometimes, I want to find the shared drive for a specific project. I don't know if I have hidden it or not, and the fact that there is not one place where I can see them all, is a PTA that has frustrated me at least 20 times in the past year. Most of the examples that you are siting are really for a small number of results. There needs to be a way to manage a large set of results that's the most flexible. I can give another example of a function that GitHub has made for their discussion tab that is equally frustrating.

3:44 The new search/date design seems like a good solution. TBD if users are clear enough how to use it.

Additional screens

the wording of "send a snapshot" is possibly going to be confusing. Because it also freezes that version. So I look forward to seeing the screens that follow if you click on the snapshot link

Does the duplicate offer you the chance to give it a name. If so, we would like to see that screen.

[Biuwa]

2023-08-08 STAKEHOLDERS' MEETING FEEDBACK:

• [x] Change Download to Download PDF
• [x] Change Print a Copy to Print Summary

This change should also be done on every page where the same words appear

---

On the filter by Date range:

• [x] Change Entered by to Created on
• [x] Change Modified by to Last Modified

On the admin screen or view:

• [x] Change Entered by to Created by

---

• [ ] A snapshot project should not disappear automatically from the user flow.

Bonnie: We will figure out what to do about it, it should change to this automatically (page 4 on the 'user creates snapshots' user flow) if you have done that (created a snapshot of a project), and then you can hide it if you want to, it should not hide it automatically

---

• [x] Move 'Hidden' to the bottom of the status options

  

• [x] Make the name of the project the snapshot link instead of the word 'snapshot' as it currently shows.

Both Emily and Xander preferred Option 1 which has the titling for each text box

---

• [x] Users should be able to rename their projects before sharing snapshot

Emily: Is there a step in the create a snapshot flow where you can have someone rename it? potentially like someone might add a version #, add a date, or whatever into the title of their snapshots when they are creating it? otherwise, someone is going to make a snapshot and realize they can't change the name of it and have to go back and change the name of their project and make another one if they decide to change the name of it?

Bonnie: yeah, they could make a copy, they could thrash the previous snapshot though.......yeah I get it. okay.

Emily: Easiest flow change will be to add a warning here like 'it will be the name that your project is currently named and you won't be able to change it if you want it to have a different name, go change the name of your project right now'

Bonnie: ...yeah, yeah, it will no longer be editable and that included the name or No aspects of this including your name will be editable or something like that?

Emily: Yeah, and another option is to like have kind of like a special name your snapshot moment in this flow.

Bonnie: ...Sure! it can have another step in this flow where it says proceed the name is gon be this, do you agree, do you wanna change it, change it now, and if they say yes, then it basically still in project mode, just allowing them to change it and then now create snapshot

Emily: Uh huh...

John: So that will change the project name, is that right?

Emily and Bonnie: Yes

John: Okay! and that will change the last saved date to be the time you created the snapshot?

Bonnie: Yes!

Emily: oh right! because you're not...the snapshot isn't like a new project, the snapshot moves the project from a draft to a snapshot?

Bonnie: yea right, it converts it to a snapshot. .... we could have a checkbox that says confirm the name is okay and if they don't confirm it, and they try to proceed, it will just say you haven't confirmed that the name is okay if you want to change the name, cancel this process, change the name of the project and make a snapshot.

Emily: Yeah and maybe a language tweak on this will help make it more clear. Instead of creating a snapshot of your project, it's turning your project into a snapshot, you would not find it in your drafts anymore, that project is a snapshot; that is its status and its essence now.

---

There were a lot of misunderstandings about the hidden functions and it was concluded that it needed rework and corrections. Please listen here

[Noushie]

Hi Ebi, thanks- made the following corrections. Will be waiting for the recordings/further clarifications, already have some ideas to combat some of misunderstandings/issues shown here.

[Biuwa]

@Noushie I uploaded the Voice recordings, please ignore the background noise

[Noushie]

All versions of will now be listed below in the form of Figma links.

8/8 or 1st Version of 'My Projects'

• Adheres strictly to the provided screenshots and checklist

8/20 or Latest Version of 'My Projects'

• Adheres to checklist/screenshots and voice recordings

Prototype Handoff to UXR

All files are side-by-side and colour coordinated for easier readability. Any changes will also be in this format unless requested otherwise.

I can make any necessary edits or fixes.

[Noushie]

8/28 or the third iteration of 'My Projects' addresses the following:

Question(s):

• Can the table headers be adjusted, as shown here (i.e., 'Deleted On' in place of 'Last Modified' alongside the warning banner):

• Are we able to get user insights to get a better gauge on 'my projects' current usability?

[Noushie]

Newest version of the 'My Projects' pages are found here

[Parisajf]

2023-10-03 STAKEHOLDERS' MEETING FEEDBACK:

10/03 or Latest Version of 'My Projects' addresses the following:

• [ ] If the user selects multiple projects with different statuses (e.g deleted, not deleted together). The Trash should be grayed out with a hovering tooltip when they mouse over saying: 'These projects do not have the same status, they cannot be deleted -while undeleted- (check exact wordings with john/Bonnie)' or 'This is not available because you have deleted items in your list or 'you have deleted items in your list/selection'

• [ ] The same case should also be applied if a user selects hidden and active projects, 'Hide from view' should be grayed out with a tooltip when you hover over it saying 'This is not available because some of your projects are already hidden' or 'you have mixed selected statuses'

• the default filters are Active projects for Project type; All for Status; and Visible for visibility. (correct the Status default to 'All' by moving it to the top of the list options)

[Noushie]

@Parisajf -

I can also discuss this with y'all on Wednesday - but I'm assuming the tooltip specifications are for the following:

• Active Projects: If both hidden and visible are displayed together - hidden option is disabled on mass actions
• All Projects: both hidden/deleted options are disabled (if the user has hidden and/or deleted projects) on mass actions

Does that mean the shared, mass actions for All projects (deleted/hidden/etc.) are:

1. Download PDF
2. Print summary
3. Export as csv.

If that's the case, then the Deleted Projects should have these actions as well (as of right now, deleted projects are only recoverable).

[Parisajf]

@Noushie New updates after the call :

• Please remove the gridlines from the new design once you are done - specially before the Tuesday calls wi the customer.

• The whole three-dot menu could be removed since it's adding an extra layer.

• The 'Print' and 'Hide' options will be added to the top (next to the recycle bin) with just an icon of an eye and a printer. Export as CSV' already exists (with a download icon), so there's no need to bring the CSV icon to the top.

In cases where wrong selections have been made: -A tooltip will be shown on the grayed item when hovering over it.

• Tool tip for print/export in case they select more tan one project " Please select only one item" (we don't want to make a huge file)

• Tool tip for delete/hidden in case their selection already has deleted items " Your selection includes deleted/hidden items"

Make sure:

• In the tooltip, change the word 'disabled' to 'hidden.'
• Use the same gray saturation for the tooltip and the grayed-out option.

In the Filter modal:

• Under status we need to add 'submitted' option too.

• We also need to add a DRO to the filters , suggestion is: Move the Visibility to the white space next to the project type Use the new space for DOR with two options : Assigned, Not Assigned

Please continue with your research to determine the best design for these changes.

Not a priority at this point ( project submission design is more important than this):

• We also need to add a new column to the page called DRO with the option to sort (a small arrow)
• We need to be creative to make room for the new column a suggestion is to change "Alternative No." to "Alt #"

[Noushie]

Hi @Parisajf and @Biuwa

So the gridlines are not left by designers- that is a weird thing that Figma does out of our control (that has been an issue for awhile and none of us can figure why that happens since we almost never have our grids on).

Here's the shortcut to remove that: MacOS: Control G. Windows: Ctrl Shift 4.

Shortcut Icons:

To be sure, is this what was being proposed:

• All icons are now displayed at the top (if this is the case, then for best practice/consistency, all selection types should have all icons displayed like this)

• Users are only allowed to mass delete or hide (if applicable) - all other actions must be done individually?

Filter Adjustment:

The space is getting quite limited on the filter modal - so I'm suggesting we do the following formatting change:

• Have the top filters as dropdown selection (it will display the default option then provide the rest of the other options when clicked)

• DRO will be disabled until applicable- the default being assigned?

• Add submitted date, with the other date pickers

• Have a scroll bar in-order to allow users to view all options (to combat what feels to be relatively tight/cramped)

Please let me know asap if this works - I did not adjust ALL wireframes to reflect this as I am waiting for feedback.

[Biuwa]

@Anuosha, Thanks for the feedback, this seems to capture all of the changes and for the filter, I think it might be best to show stakeholders both options and then get back to your team with their selection.

Please change the print tooltip to the words Parisa provided above

[Parisajf]

@Noushie The tool tip for hidden and deleted options would be different:

For delete: "Your selection includes deleted items"

For hidden "Your selection includes hidden items"

instead of "Your selection includes deleted/hidden items"

[Biuwa]

Adding this here for reference:

https://github.com/hackforla/tdm-calculator/issues/1440#issuecomment-1747875967

" 2023-10-04 STAKEHOLDERS MEETING FEEDBACK:

@Noushie

Projects should be filtered by Development Review Offices (DRO) instead of Regions Yes, LADOT wants it visible to users(Submitted project only), so they can be able to see inquiries and statuses about their projects so it can be directed to the Development Review Offices. The also provided us a link to the map of the DROs: https://lahub.maps.arcgis.com/apps/instant/nearby/index.html?appid=3f1ffa8b2949449e9038ee54aede3458 "

[Noushie]

@Biuwa @Parisajf

Questions of 11/2 Meeting:

1. What is the confirmed distinction between 'Print Summary' and 'Download PDF'

• Does 'Download PDF' need to become 'Download as .csv,' if there's no difference?

• Do we need to bring back the option to 'Export as .csv'?

2. Are these 'Active Project' tooltip selection variations correct?

Single Selection Active Projects:

• All options are only enabled here, correct?

Multiple Selection Active Projects:

• Same status + different visibility

• What about different statuses? What are the options for multi-selection/single selection?

• What about the sharing option?

3. Are these 'All Project' tooltip selections variations correct? Note: Possible word change in 'Your selection includes -- items" -> item(s)?

• Multi-selection:

• Single-selection (deleted):

• What about recovery option? Is that just not included in selection mode?

• Single-selection (visible + draft or snapshot):

• Single-selection (hidden + draft or snapshot)

[Parisajf]

@Noushie I created a chart for availability of options; it's actually 8 different scenarios. @bonniewolfe please check the chart and let me know if it needs any changes

[Biuwa]

2023 STAKEHOLDER MEETING FEEDBACK:

• During the meeting, we noticed that some of the mockups were missing addresses, please re-add the address column to the mockups' missing addresses
• All pages need to be consistent in Figma. But because of the ever-changing feature/requirements, one single page should be made that shows the finished my project page column, headers, and all possible values.
• If a user selects a project that is not applicable from the menu options, will those options be grayed out with a hover tooltip or be missing from the menu options? E.g If a user selects a project that does not meet the target points or a non-snapshot, should the submit to LADOT or share snapshot be grayed out with a hover tooltip or not available on the menu options?

[Biuwa]

2023-01-09 STAKEHOLDERS' MEETING NOTES:

For the dev Team:

• [ ] Users should be allowed to search by all text (from every column) and then allow the search to be narrowed down.
• [ ] Move the slide-in filter to the right so it's near the filter button,
• [ ] Current search by date format is in MM/DD/YYYY and needs to be changed to ISO YYYY-MM-DD and should be implemented to search as it is not currently functioning
• [ ] The N/A columns should be removed from the CSV

For the design team:

• [ ] Move the Project name, Address, and alternative no below the created on, modified on the filter slide-in in with the header search specific fields

[Biuwa]

Please provide an update:

1. Progress(What is the current status of your project? What have you completed, and what is left to do):
2. Blockers(Difficulties or errors encountered):
3. Availability(How much time will you have this week to work on this issue):
4. ETA(When do you expect this issue to be completed):
5. Pictures (if necessary)(Add any pictures that will help illustrate what you are working on):

[ExperimentsInHonesty]

2023-01-23 Stakeholder meeting feedback:

• Emily and Xander both agreed that filter choices should be saved for the session, but not beyond. A Session was then defined as until you log out or close the tab.

• See the screenshots on recreation.gov for how it shows the number of filters you are using:

[Biuwa]

@limjoyce

Please provide an update:

1. Progress(What is the current status of your project? What have you completed, and what is left to do):
2. Blockers(Difficulties or errors encountered):
3. Availability(How much time will you have this week to work on this issue):
4. ETA(When do you expect this issue to be completed):
5. Pictures (if necessary)(Add any pictures that will help illustrate what you are working on)

[Parisajf]

• Remaining item from this issue moved to https://github.com/hackforla/tdm-calculator/issues/1683