hackforla / food-oasis

Repository for the current redevelopment of the Food Oasis Los Angeles website
https://foodoasis.la
GNU General Public License v2.0
68 stars 50 forks source link

Redesign the Suggestions Administration board and modals #1131

Open gigicobos opened 2 years ago

gigicobos commented 2 years ago

Overview

Currently, user corrections and new org submissions aren't being processed because they are not visible to admins or volunteers.

We need a way for admins and volunteers to review, triage, track, and view suggestions submitted by the public. This will allow volunteers to update organization details.

This is a first step towards supporting more crowdsourced organization submissions and updates.

Issue created as a continuation of issue #1069 to improve the layout of the Suggestions Administration board.

Current issues:

Proposed Changes: Admin Board:

Correction Modal:

Create Listing Modal: Change fields showing up on modal to match the fields of the “Suggest New Listing Form”. Add fields: Suggestion ID#, Type, Submission Date. Added a new button “Create New Listing” that will open a new tab with the Organizationedit page for a new organization with pre-filled data available from the “New Listing” form.

Action Items

Resources/Instructions

Designs: https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6426%3A11578

P1: Suggestions board - 12/02/21 P2: Suggestions Administration Board V2 - 01/15/22

Related Issues

996 --> Logs from "Organization Email Reminder" will be visualized on the "Suggestions" page.

1139 --> Logs from "Suggestions" accepted logs for each organization will be visualized on the "Status Change" page.

gigicobos commented 2 years ago

Hi @entrotech @Benbaillou @fancyham,

Here is the link to the changes for the Suggestions admin board:

P2: Suggestions Administration Board V2 - 01/15/22

Please let me know if there are any questions.

Thank you!

fancyham commented 2 years ago

Thanks — added two comments re: the titling of the Suggestion record details and placement of the organization name.

Perhaps consider in the top right corner, rather than the org name, putting something about the suggestion record up there in addition to or as the primary identifier? “Suggested correction #102929” (org name would be further down page) “Suggestion #102929 - Correction (New)” “Suggested correction for MountainView ADHC” “MountainView ADHC : Suggested correction #102929”

“Suggested new listing #191219” “Suggestion $102929 - Add listing (New)” “Suggested new listing for MountainView ADHC”

On Jan 20, 2022, at 4:15 PM, gigi @.***> wrote:

 Hi @entrotech @Benbaillou @fancyham,

Here is the link to the changes for the Suggestions admin board:

P2: Suggestions Administration Board V2 - 01/15/22

Please let me know if there are any questions.

Thank you!

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

sei1122 commented 2 years ago

Before designing this issue, I’d like to clarify things below.

Figma file: https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=4982%3A9019

Source of the data

The "Suggestions" will come from three places:

  1. Suggest New Listing ✅
  2. Send Correction ✅
  3. Organization Email Reminder -> where can we find it?
Screen Shot 2022-05-31 at 9 03 48 PM

Suggestions Administration

Screen Shot 2022-05-31 at 9 05 45 PM

What is each status meaning?

Questions:

Note: Change the Suggestion Administration title to be more descriptive?

New listing model

Is this brand new feature?

Screen Shot 2022-05-31 at 9 11 51 PM

Other questions

fancyham commented 2 years ago

Good questions! I’ll do my best to answer based on my understanding:

For item 3 above, we haven’t built the Organization Email Reminder, but the Milestone for that project is https://github.com/hackforla/food-oasis/milestone/15 and https://github.com/hackforla/food-oasis/issues/996 which has a design-in-progress mockup in the Figma file: https://www.figma.com/file/Xkrt1u1TdxHG2H1ppxpAtt/Issue%23-996?node-id=0%3A1

I believe @entrotech has more detail on “Status” but my understanding is that these are way of tracking suggestions: New = a suggestion that hasn’t been acted on yet Pending = Something that is in progress (perhaps being researched) but is not approved yet? Rejected = Rejected (I think this can be hidden by default) Closed = Probably should be “Accepted” — the idea is that the suggestion was accepted and the listing updated.

I’d add that another flag for the future might be “Submitted by organization” — for when we send out emails to orgs asking them to verify or update their listing. If we want to review those updates, this flag would be helpful to know which suggestions are high-quality and need less verification work.

“New listing model” I think this would be a brand-new feature? I like how the fields show the suggestions on each line though I wonder if hours can be entered this way?

This begs the question: how will someone review and update the organizations from the suggestions list? Would it be two windows side-by-side? Or would the suggestions be shown on the existing editor screens? Or some other option?

Is each data source validated in a different way?

  • Suggest New Listing
  • Send Correction
  • Organization Email Reminder

Sorry, I don’t know this but I imagine it’s different, with the second two being similar to each other.

Suggesting a New Listing : would be nice to copy the fields over to a new draft listing, and perhaps to expose the correct fields on the suggestion form to make that easier — less copy and pasting and retyping.

BUT how often do new listings get created? Probably not that often! So maybe lower priority than making corrections easy?

Is this feature currently used by admin volunteers? If it is not used, would they use the feature if it was redesigned? -> because the goal is for this data to be reflected on the website.

I think submitted suggestions are currently ignored! @entrotech ?

What are good metrics to measure this redesign?

I’d say ease of use and how quickly someone can review and update listings

sei1122 commented 2 years ago

@fancyham, @entrotech

I created a user flow to see the overall steps. Currently, we don’t have a way to check whether the info comes from a trusted source or not. All the information must be verified before the information goes on the website.

Figma file https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5414%3A9263

Screen Shot 2022-06-09 at 10 20 07 AM
sei1122 commented 2 years ago

@entrotech, @fancyham The current design, both Correction info and Suggests a New listing data go to the Suggestions Admin Board. At the last meeting, we found out the admin user needs to back and forth between pages.

To improve this, we pivoted direction.

  1. Correction info ----> Verification dashboard column
  2. Suggest a New Listing ----> Suggestions Admin Board

Here is the new user flow for the 1 and 2

Screen Shot 2022-06-14 at 5 06 07 PM

Figma files https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5524%3A9295 https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5529%3A9662

fancyham commented 2 years ago

Looks really good!

On the “Suggest a new listing”

#1131 Sketch for creating new org from suggestion form submissions

Also, I wonder how the admin currently reviews for duplicates before creating a new entry? Is that something we can help with here, like a ‘search for similar’ button/feature perhaps?

We don’t have many suggestions in the LA area but I can imagine that there’ll be lots more in the future as we start supporting other regions.

sei1122 commented 2 years ago

I updated the user flow and designed key pages. Hope we can find a simple design solution and test user flow.

Figma file link https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5680%3A9463

user flow https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5524%3A9295

Screen Shot 2022-06-21 at 9 36 46 PM

design https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5680%3A9463

Screen Shot 2022-06-21 at 9 37 38 PM
sei1122 commented 2 years ago

Update design based on last week's feedback.

Screen Shot 2022-06-27 at 2 17 51 PM Screen Shot 2022-06-27 at 2 18 05 PM

Figma files https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5751%3A9457 https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5754%3A10039

sei1122 commented 1 year ago

@entrotech, @fancyham Here is the final of the Suggested Correction's Flow and Design. I wrote comments on the Figma file. Let me know if you need anything.

Screen Shot 2022-07-07 at 12 57 21 PM

Figma file https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5876%3A9657

sei1122 commented 1 year ago

Now we moved to Suggestion's new listing design.
This is a note from last week. @fancyham and I reviewed the current design that Gigi created earlier.

Here is Ideation https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5781%3A9513

Screen Shot 2022-07-14 at 2 53 05 PM
  1. Update the tile to "Suggestion a New Listing - Admin"
  2. Remove type since this is only for the New Listing
  3. ID still needed? -> this is Optional. Talk to John about the use case.
  4. Delete the suggestion section on dashboard because this is for the correction items
  5. Current status is New, Pending, Rejected, and Accepted. Do we need all status? -> New, Created, Rejected status is maybe enough
  6. How to handle the Status. Change the status on org view? -> Research more
  7. After the org info is created, does all the info stays in this table, or remove once verified? -> Keep for now.
sei1122 commented 1 year ago

Based on last week's meeting, I created 2 design ideas.

  1. Use the current dashboard and detail view modal and redesign them.
  2. One-page style - this design doesn't use a dashboard.
Screen Shot 2022-07-14 at 3 12 03 PM

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5936%3A9568

Things to consider 1 How the admin checks the duplication before creating the new org data? Idea: “Search for similar” button feature. Check by org name?

2 Click Create button and auto fill the data from tipster. How to handle the business hours? Idea: Have notification on business hours page.

3 Check Status Handling -> We need New, Reject, Created, Accepted Create State diagram

4 When the verification is completed, is it possible auto change the status on Suggestion dashboard so that admin doesn’t need to come back. Also, this prevents from multiple checking the org status that have already verified.
-> how to match up the data? use ID?

sei1122 commented 1 year ago

Last week, we talked about using these 3 states: New, Created, and Rejected. However, when I made a state diagram, I found out we need to have one more status that handles the completion of the states.

Here is the state diagram

Screen Shot 2022-07-14 at 3 20 30 PM

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5965%3A10892

sei1122 commented 1 year ago

Based on the last week's feedback, I updated the cross-functional user flow and the designs. https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=4982%3A9019

Things to consider

Current duplicated org check

Screen Shot 2022-07-21 at 9 38 49 AM
fancyham commented 1 year ago

For “If the admin finds duplicated org but there is new info from a tipster, how admin communicate this to a volunteer? e.g via email or chat?”

Perhaps your new ‘suggestions’ flow could be useful for this? — basically admin could convert the new listing info into a suggestion (or write a new one):

  1. Add a new “add a note” button on the database’s org editing page. Perhaps this button only appears for the admin at first?
  2. This spawns a new window with a blank suggestion tied to this organization (similar to the existing public suggestion form). This form is pre-populated with the user’s account info, and the record might even flag this suggestion as coming from a back-end user, which would help with validation.
  3. This would create a new ‘suggestion’ that then appears at the top of the org editing screen next to any other suggestions where a future volunteer can resolve it.
staceyrebekahscott commented 1 year ago

@fancyham @sei1122 What are the next actions that should be taken to move this forward, as per the comment above?

sei1122 commented 1 year ago

@staceyrebekahscott, Here is an update based on this week's meeting. This issue has 2 sections.

  1. org data correction (https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=5876%3A9657)
Screen Shot 2022-07-30 at 9 59 29 AM
  1. suggest a new listing (https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6193%3A10693) Screen Shot 2022-07-30 at 9 59 46 AM

We completed the design of the 1.org data correction. We reviewed this design with John H and sent it to development. We are still working on the 2. suggest a new listing design.

entrotech commented 1 year ago

For corrections to existing listings, created development Issue #1271, #1272, #1273

rylantalerico commented 1 year ago

@entrotech Ready for dev tasks on this!

sei1122 commented 1 year ago

Here is a note about how to move forward Suggest a new listing project

I asked @entrotech about which he thinks better.

  1. Design all the features and send them to development.
  2. Make a happy path/MVP first and add features later.

Here is from John D. I'd say the first step is to get @rylantalerico involved in reviewing the proposed flow. After that, in the spirit of agile development, I think we could create a series of incremental features starting with the ability to create a new listing by selecting a suggestion from the Suggest New Listing dashboard and having a button to push that creates a new listing and opens the OrganizationEdit form on the new listing. It would pre-fill the fields that can be copied from the suggestion, and perhaps show the few fields that cannot be copied directly, like business hours, category, etc. in some sort of panel (similar to how unprocessed suggestions are to be shown for corrections to an existing listing). For this first iteration, the admin would have to manually do queries to check to make sure it isn't a duplicate. The initial status of the new listing would be "Needs Verification", and the admin could do the initial verification personally, or assign it to a volunteer, and then optionally provide verification notes as instructions to the volunteer. If we just implement this and let Jordan Smith try it out first before we do anything more elaborate.

staceyrebekahscott commented 1 year ago

Moving to Questions/ In Review pending Rylan's response to the comment above.

sei1122 commented 1 year ago

I updated the Figma file for MVP and wrote the points need to be clarify with team. Next step is to discuss the interaction and design with @entrotech, @fancyham, and @rylantalerico and finalize.

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6426%3A11578

Screen Shot 2022-08-15 at 10 52 06 AM
staceyrebekahscott commented 1 year ago

I attended the design meeting this afternoon (Wed, Sept 7, 2022) and was brought up to speed on the interaction and design. I give PM approval to proceed with Dev tasks.

sei1122 commented 1 year ago

I updated the design based on yesterday's review. I think this is good for now. When the dev team finished part 1 (Correction section), we can come back and review it again. https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=6426%3A11913

Screen Shot 2022-09-08 at 2 17 18 PM
staceyrebekahscott commented 1 year ago

@sei1122 @fancyham Have you followed up with the Dev team on part 1- correction section, as noted in the comment above? What is the status on their work?

sei1122 commented 1 year ago

I will follow up

sei1122 commented 1 year ago

Here is from @entrotech "Development hasn't started on this issue. The devs are trying to button up a significant internal project in the next week or so, then we will start on new feature issues like this one."

fancyham commented 1 year ago

FYI, Issue #996 has a proposed, non-MVP corrections form (see below).

It's a big lift to do that but if it's built, that would probably have some impact on this suggestions admin flow:

It's also possible (perhaps likely) that we'll start out by using a free-form corrections form, and build this dream corrections interface later, once we've proven and streamlined #996's flows.

More of an FYI to keep an eye on #996 and also to plan for the future.

Sketch of the #996's proposed corrections form: https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-%231?node-id=8272%3A14553&t=VyVJUDNq4jslGEKW-4 Screenshot 2023-02-17 at 11 01 48 AM

fancyham commented 1 year ago

Quick update:

prioritization

These two related issues were evaluated together along with current priorities and knowledge

Now that Erin (Product Manager) has brought managing volunteer updates in-house with UCLA student volunteers (which has been working amazing. Previously it was managed and run by LA Works), we now have the benefit of direct experience with updates and suggestions.

qiqicodes commented 2 weeks ago

@JohnHaoHuang Here is the ongoing conversation regarding the redesign of the Suggestion Dashboard.

We, the developers, are addressing an ongoing issue with the Suggestion Dashboard as outlined in issue #2121. We've noticed that the dashboard currently does not display correction data, and it's not possible to differentiate whether the data originates from the correction form or the suggestion form.

To effectively bridge these gaps until the full redesign is implemented, we propose adding additional columns temporarily. This modification will help ensure that all necessary data is captured during this interim period.

Please keep us informed about the progress of the new design and let us know when it is ready for implementation.

fancyham commented 1 week ago

Hi, I think that adding additional columns temporarily will work in the interim. The goal is to capture and expose all that info so updates can be made more easily, so the proposed steps in #2121 sound great.