Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design Mockup: Redesign the My Projects Filtering UI #1578

Closed
2 of 3 tasks
Tracked by #1386
Biuwa opened this issue Jan 14, 2024 · 17 comments
Closed
2 of 3 tasks
Tracked by #1386

Design Mockup: Redesign the My Projects Filtering UI #1578

Biuwa opened this issue Jan 14, 2024 · 17 comments

Comments

@Biuwa
Copy link
Member

Biuwa commented Jan 14, 2024

Overview

We need to redesign the filter user experience so that its self explanatory

Action Items

  • Change the funnel icon (e.g to an arrow)
  • Let the placement of the icon change with the user's interaction (e.g right facing to open, left facing to close
  • Reimagine how the filters could work

Resources/Instructions

Screenshot 2024-01-14 at 10 13 15 AM
@yiranshan
Copy link
Member

  1. Progress: communicated with teammates about how to approach this problem. Watched the weekly video recording and thought maybe the whole search panel should be moved to the side like the other pages.
  2. Blockers: Not sure what criteria are final for the project page. mock-up and test site should have different items.
  3. Availability: most nights from 9 pm to 11 pm.
  4. ETA: after the next weekly meeting, once all questions cleared and talked to teammates, we should be able to finish all 3 issues around search functions.
    #1578 - ONGOING
Screen Shot 2024-01-27 at 2 07 11 PM

@yiranshan
Copy link
Member

Progress

  1. made a new filter button option based on the current design and setup. (see image 1 and 2)
  2. designed a new version of searching and filtering inspired by LinkedIn and Google sheet (see image 3 and 4)
    Blockers
  3. still need to confirm what items would be included in the chart
  4. don't know if it's doable for dev team
    Availability
    6 hours min
    ETA
    hopefully the end of the week.
    Filter Side Placement (#1579)
    Filter Side Placement (#1579) (1)

#1578 - 02 06 2024 version 2
#1578 - 02 06 2024 version 3

@yiranshan
Copy link
Member

Meeting summary:

  1. focus on the google Sheets version
  2. main search bar can search name, address, description, alt#
  3. take in the toolbox that’s been developed into the mock-up
  4. move the search bar to the top right side
  5. create a search box for each column name
  6. default items for each page with a selection of how many items to add
Screen Shot 2024-02-13 at 11 08 20 PM Screen Shot 2024-02-13 at 11 06 17 PM Screen Shot 2024-02-13 at 11 06 03 PM

Update issue on Github 02.13.2024:
Progress:

  • finalized version 3 which it simulates google sheets on the filtering system

  • changed page selection and added items per page option

  • pulled in the box on left corner

  • updated keywords in the general search box

    Click here for prototype.

Blockers: not sure how the toolbox would interact with the table
Availability: unsure
ETA: depends on the user feedback

@ExperimentsInHonesty
Copy link
Member

ExperimentsInHonesty commented Feb 15, 2024

Permit Number Format

https://www.permitla.org/ipars/permit_help.cfm#:~:text=The%2010%2Ddigit%20number%2C%20with,the%20plans%20were%20first%20submitted

This is a 10-digit number assigned by the PCIS system when an applicant first applies for a permit. The purpose of this number is to identify the plans that are associated with the application or permit. There is a "one-to-many" relationship between the plan check number and the associated application or permit number(s). If an application or permit does not require plan check, this number is referred to as a "Job Number". Otherwise, it is referred to as a "Plan Check Number" (PC Number) . The 10-digit number, with the format TYYOO#####, has the following meaning:

  | T = The type of plans that were checked (B = Building, E = Electrical, G = Grading, M = Mechanical, X = Express Permit [no plan check required]).
  | YY = The 2-digit year when the plans were first submitted.
  | OO = A 2-digit code that corresponds to the LADBS branch office where the plans were submitted (and usually reviewed). It can have the following values: LA = Metro, VN = Van Nuys, WL = West LA, SP = San Pedro, SL = South LA.
  | ##### = A 5-digit sequential number so the entire 10-

@yiranshan
Copy link
Member

02.15.2024 before meeting
Progress:
changed sort by for each filter
added states for sort buttons
added top labels for different types of projects
autocomplete for some filters

Prototype link (old)

Screen Shot 2024-02-15 at 11 41 35 PM Screen Shot 2024-02-15 at 11 41 23 PM

02.15.2024 after the meeting:
Progress:
changed sort by for some filters
auto-complete follow Google sheet
added modified and deleted items
added page drawer
got rid of top labels

Updated prototype link

Screen Shot 2024-02-15 at 11 39 14 PM Screen Shot 2024-02-15 at 11 39 33 PM Screen Shot 2024-02-15 at 11 39 58 PM Screen Shot 2024-02-15 at 11 40 12 PM Screen Shot 2024-02-15 at 11 49 26 PM

@Biuwa
Copy link
Member Author

Biuwa commented Feb 21, 2024

2023-02-20 STAKEHOLDERS MEETING NOTES:

  • In Items per page, the largest amount needs to be ALL, not 100 as it currently shows.

  • Bring back the three dots on the right of each line, that represents the More menu (As it shows in the image below)
    image
    The three dots when clicked showed a list of options like print summary etc., see Figma for the approved list of options

  • Emily asked for a select all and clear all (see screenshot)
    image

  • Abbreviate Development to Dev in the header (also make it singular) and remove the Development Review from the content (e.g., Valley Development Review becomes Valley).
  • Don’t color the header if sort order chosen.
  • On address drop down, currently it shows left and right scroll bars, please make the box wider up to the right margin, when content requires it. If the item still doesn't fit on the line, wrap.
  • Add submitted date column (shows up blank if they have not submitted) - it should be the second to last column
  • Move the Dev Review Office to the last column
  • Remove the word On from Created On and Modified On
  • The Dev Review office column will not have any content unless the project is submitted

In admin view

  • Add a notes column to the far right, it should have two mutually exclusive icons, one for making a note and one for seeing/editing an existing note
  • Dev Review Office is a drop-down select

@yiranshan
Copy link
Member

Update issue on Github 02.22.2024:
Progress:
for user view:
Edited item per page to include “all”
Added the 3 dots back to the right
added select all and clear all to address the filter and increased the width to remove the scroll bar
Abbreviated DRO and removed development review
Add submitted
removed “on” in created and modified
no content for non-submitted projects for certain columns
Prototype link
Screen Shot 2024-02-22 at 2 41 32 PM
Screen Shot 2024-02-22 at 2 41 21 PM
Screen Shot 2024-02-22 at 2 41 11 PM

@yiranshan
Copy link
Member

yiranshan commented Feb 29, 2024

Update issue on Github 02.29.2024:
Progress:
for user view:

  • change page to right justified

  • add a scroll bar to the bottom (don’t include the check box and the 3 dots)

  • change “clear selection” to “clear all selection”

  • Keep “DRO” as is for now and see if need to update

  • Make a mock-up for a long address wrap

  • Add updated 3 dots menu

    Please see the [Prototype Here](https://www.figma.com/proto/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=12173-2052&t=9jie4ZgndIHK1zt4-1&scaling=scale-down&page-id=2499%3A11472&starting-point-node-id=11997%3A885&mode=design).
    

(address filter might need a refresh page to look proper)

Screen Shot 2024-02-29 at 4 29 51 PM Screen Shot 2024-02-29 at 4 29 39 PM Screen Shot 2024-02-29 at 4 29 30 PM

for admin view -- in progress

@Biuwa
Copy link
Member Author

Biuwa commented Mar 9, 2024

2023-03-05 STAKEHOLDERS' MEETING FEEDBACK NOTES

  • Change name of page to My Projects, not active projects
  • Gray out the trashcan or other top icon if it's not available
  • Move the showing and hiding options for deleted projects to the status drop-down making it a separate option from what Draft/Snapshot/Both radio button

@yiranshan
Copy link
Member

yiranshan commented Mar 10, 2024 via email

@ExperimentsInHonesty
Copy link
Member

@yiranshan are these changes completed? Please provide 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 or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."
  • remember to add links to the top of the issue if they are going to be needed again.

@yiranshan
Copy link
Member

Progress:
for user view:
 Change the name of the page to My Projects, not active projects
 Gray out the trashcan or other top icon if it's not available
Move the showing and hiding options for deleted projects to the status drop-down making it a separate option from what Draft/Snapshot/Both radio button

Blockers:
not sure if status should use radio buttons
not sure if DRO should stay abbreviated

Availability: had flu the past 2 weeks, should be able to 6 hrs per week onward
ETA: next week

Link to the prototype.

Screen Shot 2024-03-21 at 11 07 35 PM

@yiranshan
Copy link
Member

yiranshan commented Mar 22, 2024 via email

@ExperimentsInHonesty
Copy link
Member

snapshot will have icon next to it if its shared
"(deleted)" notation will be moved to the Status

@yiranshan yiranshan added size: 8pt Can be done in 31-48 hours level: medium and removed size: missing level: easy labels Mar 28, 2024
@Parisajf
Copy link
Member

The issue reopened to let the Dev ask their questions.

@ExperimentsInHonesty ExperimentsInHonesty moved this from In progress (actively working) to Questions/Clarifications in P: TDM: project board Sep 4, 2024
@ExperimentsInHonesty
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Released
Development

No branches or pull requests

6 participants