Feature: Advanced filters for search

[fancyham]

Overview

We need to have advance search on our site to make it easier for the user to find micro-targeted listings

Details

Currently, the user can only search by location, pantry, and meal, but we have lots of good info locked in our database that would be really helpful to answer common questions like:

• Show me places open on Tuesday? (my day off)
• Do they speak Spanish?
• Is there bible study?
• Age restrictions?
• Is it a shelter?
• LGBTQ-friendly?
• Halal, Kosher, Veg, etc.?
• Do I need to wear a face mask?
• Delivery?
• Open to all?
• Open Now

Action Items

• [x] Have a feasibility conversation with Dev
  • [x] Evaluate what other filters can the database easily support?
  • [x] how much lift?
• [x] Have a conversation with Design
  • [x] time would be required to design
• [ ] Make an issue for user research to answer the following questions
  • [ ] What types of filters do our users want? (for example, open on certain days of the week, religious or not, vegetarian, shelter or not, etc.)
• [x] Make an issue for design with the following action items
  • [x] Design an intuitive UI for the advanced filters

A quick sketch of how this might look:

Figma mockup and prototype for simple filter

VERSION 1 launched! (2024-08)

VERSION 2 in progress

• [ ] Consider : should this be a new issue?
• [ ] Add other filters
• [ ] Clarify "No known eligibility requirements" with a tooltip or some other descriptive text so food-seekers understands what this item means.

[fancyham]

A version of the filter that has text searches, because things like language spoken, etc. are currently in free-form text note fields.

The idea is that text entered here searches all text fields. Things that are in the database as structured data (like days and hours) should have their own independent filter buttons so as to not rely on text search.

Use analytics to track search terms and filters.

[fancyham]

Another UI direction possibility, inspired by Google Maps

[fancyham]

This would be an additional filter: Filter by last updated date

• 1247

[GigiUxR]

I posted up the Food Oasis link in a couple of the Reddit forums (e.g. "Foodstamps") in which people who are in dire need of food assistance come to share/receive info on resources. In such a post, I also asked people to share their thoughts right there in the forum with me about the web tool and so far have received this useful one, from a "SNAP Policy expert":

“One piece of feedback is that it’s a little subtle how to know when these places are open, especially since most have pretty limited hours. You might want to make knowing what’s near you and open now easier.”

He continued to clarify in a subsequent comment:

Yep, I understand it's there! What I'm getting at is functionality vs. "what's easiest, what's harder."

Right now by default the core dimension is location, but I'd be curious if that's actually what a person who comes to it is primarily focused on given that when the food is available is pretty dang important.

Right now that info requires 2 interactions (selecting an entity, then knowing that it's under "Details" which in my experience is not a thing people jump to click on.)

If you haven't done this already - rather than the usability test you initially posted that was about initial screen - I'd consider running some Google Ads targeted at Los Angeles for folks searching keywords like "food pantry" or "free food" or "food bank." That could direct them to a quick way for them to give you their phone number and you could reach out and actually set up a call to listen to them narrate their experience using your tool.

Also worth noting, Google has explicitly built some of this functionality into Search now, so you also might think about whether improving the "Place" data that Google relies on -- and which providers can take ownership of via Google tools -- may be even higher-impact for folks: https://findfoodsupport.withgoogle.com/#food-banks-and-pantries

[fancyham]

• This is related to this unresolved but closed issue: #62

Anyone know why #62 was closed?

[itserindean]

Prioritizing the following user stories: Which are we tracking this? (if not how easy would it be?)

MVP

1. Open to all? (this could be designed so that we could add to the criteria in the future) This could include: -not tagged as ID required? -not tagged as address required? -not tagged as age restrictions? -not tagged as appointment required -not tagged as required bible study? -not tagged as for shelter residents only?
2. Show me places open on specific day (my day off) (ideally/optionally hours too)
   • [ ] get difficulty on days vs hours
3. Open Now?

NEXT

4. Do they speak Spanish?
   • [ ] which languages are we tracking
5. Halal, Kosher, Veg, etc.?
6. LGBTQ-friendly?
7. Do I need to wear a face mask?
8. Is it near public transportation?
9. open soon?
10. Delivery? (things like meals on wheels likely wouldn't show up on our map, would we want future support?)

[itserindean]

For dev: which of these are we tracking in the database?

• [ ] is it open to everyone?
• [ ] is ID required?
• [ ] is home address required?
• [ ] are there age restrictions?
• [ ] is an appointment required
• [ ] is there a required bible study?
• [ ] is it for shelter residents only?
• [ ] days a place is open
• [ ] hours a place is open
• [ ] Open Now?
• [ ] Do they speak Spanish?
• which languages are we tracking?
• [ ] Halal food available?
• [ ] Kosher available?
• [ ] Vegetarian available?
• [ ] LGBTQ-friendly?
• [ ] Do I need to wear a face mask?
• [ ] Is it near public transportation?
• [ ] open soon?
• [ ] do they offer delivery?

[entrotech]

• This is related to this unresolved but closed issue: Support filtering by future days/times #62

Anyone know why #62 was closed?

Issue #62 was apparently implemented on the legacy version of the application in 2017, two years before the rewrite.

[entrotech]

For dev: which of these are we tracking in the database?

• [ ] is it open to everyone? E
• [ ] is ID required? E
• [ ] is home address required? E
• [ ] are there age restrictions? E
• [ ] is an appointment required
• [ ] is there a required bible study? E
• [ ] is it for shelter residents only? We do not have shelter listings
• [ ] days a place is open Yes
• [ ] hours a place is open Yes
• [ ] Open Now? Yes
• [ ] Do they speak Spanish? L
• which languages are we tracking? L
• [ ] Halal food available? Tag?
• [ ] Kosher available? Tag?
• [ ] Vegetarian available? Basically all pantries will have some vegan/vegetarian food.
• [ ] LGBTQ-friendly? Tag?
• [ ] Do I need to wear a face mask? If you rephrase this to ask if there are any COVID-related requirements, we could query for listings where there is something recorded in the COVID requirements field.
• [ ] Is it near public transportation? Given a map of public transportation locations and distance specifications, this is possible, but probably a moderately significant project.
• [ ] open soon? Same as "hours a place is open", Yes
• [ ] do they offer delivery? We do not have a field for this, but could add one.

Keep in mind that there is a huge cost in trying to collect extremely detailed information about pantry and meal program offerings and other details. To put this in context, almost all other pantry and meal program listing sites only include name, address, web site, phone number and sometimes hours and a small text description, and will simply say "call ahead to verify this information".

E: Many of these dimensions are only captured in the field called "eligibility requirements", which is represented in the database by a single free-form text field. We did this because eligibility requirements cover a very wide range of "dimensions", and in many cases, different forms of documentation. For example, in cases where there is a residency requirement, the area might be specified by city(ies) or other geographic boundaries, and might require some sort of document showing the customer's address. If there is a maximum income requirement, there will be income thresholds and acceptable forms of income verification. Eligibility sometimes also requires a registration process, limits on the number of times a customer can visit per week or month, etc. The possibilities are basically endless, and trying to collect this in a structured form that would be queryable would require many dozens of additional fields for volunteers to understand and enter, and we would never be abel to answer every possible query about eligibility.

L: A somewhat easier "lift" is languages. right now, we just have a free-form test entry field where users can type in languages, and the volunteers tend to type in the non-English languages spoken, but do not explicitly type in English. We could just search this field by string-matching for specific languages, which would kind of work where the languages entered by volunteers are spelled correctly. A more reliable approach would be to change the languages entry to multi-select list box which could be queried correctly. It would be pretty easy to allow as many languages as wee deem appropriate - it could easily be 50 or so.

For types of food, Jenny Mikesell insisted that the six types we currently have are some sort of "standard" categorization of types, though I don't know the source of that information. I've worked at a pantry called "Nourish LA", and the specific foods available were always "hit and miss", depending on what surpluses were in the supply chain that week. They basically distributed whatever they could get their hands on, so trying to publish each location's inventory is probably not practical. Usually vegetarians and vegans were happy with what was on offer, and would just decline the non-vegetarian offerings. I think finding kosher or halal food would be difficult, unless a pantry specifically makes a real effort to service that population. (See "Tags" below.)

I don't know how we would collect the information about which organizations are LGBTQ-friendly. (Maybe a "Tag"?)

Tags: We do have the ability to create a list of custom "Tags" for each site (Los Angeles, Hawaii, etc.), and then organizations can be associated with the appropriate tags. This might be helpful for querying very specific binary bits of data, such as whether an organization is LGBTQ-friendly or Kosher, or whatever we feel is a critical thing to search by. This would require training volunteers to ask specific questions for the tags we want to use, and would take a while to populate, since we would have to wait for the verification process to cycle through all the listings before the information was collected.

[fancyham]

Thanks for the detailed response! Glad to see hours and days is possible. That one seems to be in high demand and a hefty design problem that we can get started on right away.

We’ll have to evaluate how important the rest are for the future — effort vs effect, perhaps with some user research.

Some of my thoughts for documentation’s sake:

Re: eligibility Age, veteran, residency, mailing address, ID requirements, attributes like kosher, language — should investigate/research how much better it’d be vs what we have before putting huge effort into this type of tagging.

Re: ‘delivery?' This one came up during my talk with @itserindean when we were talking about transportation, especially in LA where transit is harder to get. Realized that if we added food/meal delivery like Meals on Wheels someday, we’d have to specify a service area/region where they operate!

[itserindean]

Thanks for all the insight @entrotech!

re: hours/days I agree it's great that's currently possible!

re: delivery @fancyham I think there may have been a slight miscommunication as I was trying to convey that LA is well-covered by public transit (not always particularly convenient routes point to point but you're never very far from a bus stop.) My initial thought is that delivery/meals on wheels integration is beyond the scope of our current charter but I agree I could see a time in the future where it integrates well.

re: general I see the list of filters we assembled not as "here's everything we think is important" but as "here are things that might be useful" so we can find out what we already track.

re: eligibility I realize now that the intention behind eligibility may have been lost in my formatting--it was not to suggest that all of those elements were required to be tracked or included to determine if something was open to all (and certainly not as part of an MVP.) It was a list of things that could affect eligibility so we could find out which we track (And I now understand that we only have the one text field.) I added minor clarification in my first comment above. I agree we should investigate more before investing engineering hours here. I think there could be a less granular stop-gap solution that would have high impact --after confirming that the database doesn't have instances where the text of eligibility requirements say something like "none" we could then interpreting a blank field to mean no eligibility requirements and that might get the job done.
The user story here is what I experienced when helping an elderly woman in Santa Monica search for food and listing after listing excluded her and i was longing for a "no exclusions" filter so the map would only include places she could actually go.

[staceyrebekahscott]

@JohnHaoHuang As per the chat in the fola Slack channel, assigning this to you and moved it into In Progress.

[itserindean]

clarifying priority based on what's possible right now: For dev: which of these are we tracking in the database?

pri 1

• pantry vs meal
• days a place is open
• Open Now?
• hours a place is open

Pri 2

• No known eligibility requirements? (no text in the free form eligibility field means no.)
• Languages spoken

[fancyham]

Link to in-progress Figma drawings

Also, for reference, check out this Google Search UI when I searched for "farmers markets sunday san francisco" (it didn't select a day automatically — I did that manually)

[fancyham]

@JohnHaoHuang Please add a few screenshots of your latest version when you're ready to share!

[fancyham]

We have another filter we can add!

Food types: Baked goods, dry goods, produce, dairy, prepared food, meat (with the ability to select multiple and it would show listings that match all items that were selected)

i.e. If user selected Prepared goods and meat, then it would only show results that have both prepared goods and meat.

Turns out those are in the database and people will probably find them useful — can you add this to your designs, please? Thx!

[JohnHaoHuang]

Thanks for letting me know. Yes, I will add it to the design. Once the missing font is fixed.

[JohnHaoHuang]

@entrotech Hi John, I have a question regarding what's possible/difficult with our React / Material UI system for scrolling horizontally. Please have a look in the link below to see the prototype. Currently, the prototype is only set to have horizontal scrolling, "days" tab be clickable, and toggle between map and list mode. Please let me know if this design is possible/difficult to implement. I will revise accordingly. Thank you.

https://www.figma.com/proto/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=8652%3A17370&scaling=scale-down&page-id=2886%3A7816&starting-point-node-id=8652%3A16780&show-proto-sidebar=1

[fancyham]

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

Looking good — one issue is that we should make sure there's some kind of legend for the colors (blue = pantry, orange = meal) so that folks know what is what. Perhaps that's in the filter?

Also, if using different background/active colors from the current style guide helps, mock something up and let's review? (One thing to watch for is making a filter look grey/'disabled' rather than just not active)

[fancyham]

@jelenaUX is looking into how often the pantry and meal program buttons are used by current users (via google analytics) and that might help inform our filter menu.

One limitation of that data is that we currently don't support filtering to "pantry AND meals at a single location", so we probably won't know if people look that particular filter for until we build it.

Also, a side note: it's hard to put so many filters on a tiny screen!

[jelenaUX]

Based on Google Analytics data, about a third of visitors in the last week have clicked on "MEALS" button and about a fifth have clicked on "PANTRIES" button. Here is a donut chart of most used buttons:

[fancyham]

We definitely should have 'open to all' as one of the filter options — I was going through and finding it's really a lot of work to find ones I would qualify for — some listings are only for residents or for students of a school.

This would be worth throwing human volunteers at to add to the database and as a filter : create a checkbox in the database and have volunteers go through and determine if site is open to all.

[fancyham]

Meeting notes from May 6, 2023 https://docs.google.com/document/d/198szdapfsNE5Xz6YpHsY-bXeaGjWfJuaDcRfXXG-jfM/edit

General priorities pri 1

• pantry vs meal (already have)
• Show me only things open on this day
• Show me only what's open now?
• Show me only things open on this day & time
• Do they offer choices of what you get (Any choices??? Amount, no fridge, no stove, vegetarian, choose your own)

Pri 2

• Show me only things with no eligibility requirements? (after confirming that the database doesn't have instances where the text of eligibility requirements say something like "none" we could then interpret a blank field to mean no eligibility requirements and that might get the job done.)
• Languages spoken

Pri 3

• Is it religiously affiliated?

Design thoughts

• John H has some pretty far along designs
• Prioritize a design that could grow to accommodate more filters
  • If we got a million dollar grant and could hire everyone full time for a year how would we accommodate fitting in more filters?

[fancyham]

Would also be nice to have a 'what's open now and soon'

I've seen some directories that list things as 'opening soon'… so someone searching at 10:59am can see things that open at 11am

[fancyham]

Had a meeting with @JohnHaoHuang (designer) and @itserindean (PM) to figure out next steps.

• We're putting aside the bigger map/list/split view layout designs and will push it to a different, future design issue that looks at possible improvements to mobile layouts (which would be a much larger effort). Designs are good provocations but are not MVP for filters.

• Erin made provocative point that we can get super simple MVP for the user interface, even possibly removing the Pantry and Meal buttons from the map/list view. We don't know that those buttons are really necessary, so let's find out with a simpler MVP prototype.

• Pursuing two designs — one MVP design that gets filters in front of users and lets us refine our UIs (and good for user testing), one stretch version that we'd like to see (which can utilize results from MVP)

This MVP would ideally be a live, working alpha version, worked on by a dev, so we'll want to talk to them to find out what's doable in the MVP and the stretch versions.

Initial direction — John will be working on more detailed designs next to put in front of engineers, and to start collaboration on MVP and then, ideally, stretch

[itserindean]

I would clarify for the MVP above that we're not pursuing a search bar at this time. and when you click on filter the ui behind it wouldn't change (I know that was just because you were working quickly but wanted to call it out.

Also in addition to days & hours it should have pantries/meals toggles & open now toggle.

[fancyham]

Presented simplified ‘MVP’ and ‘Ideal’ mobile designs, along with an early desktop UI sketch, to Team Leads and PMs meeting on Aug 3.

Well received! Had discussion about how items worked, and how the time part worked, in particular. Devs said Ideal was doable and to continue refining that version.

Next steps:

• Reduce to actual initial filter set (open now, days and times)
• Get to final designs… think about user needs (will post my suggestions next)
• Refine desktop version
• User testing, if possible! Others on PM team were also interested in/suggested doing quick user tests with prototypes ( I recommend doing this — great experience and also suggest looping in researchers as the tester/moderator and either/both of you as note-taker/observer)
• Collaborate with devs to prototype, see if it feels right, do some user testing and adjust logic as needed.

[fancyham]

I wrote up some thoughts about user needs/goals that I think of to help direct designs, and help to evaluate/judge the various design directions…

Think of these as ‘unit tests’ — that whatever the design ends up being, ask yourself if it satisfies all of the needs:

Suspected “user needs” / (use cases), most important are at top:

• “Show me everything that’s nearby. I hope there’s something I can use.”
• “I am am only available at certain times and days…what’s available?” (I’d like to easily select a range of days and times, if at all possible, because I have limited time and availability)
  • MVP: Open at specific day and specific time
  • Ideal: “I work two jobs. I know my schedule - tell me what’s open during the days and times I’m available.”
• ? “I’m hungry or can do errands now, what’s near here?” (Bryan: how about show things open now as well as those opening soon: “opens in 2 hrs”… if you’re hungry now, finding food ASAP is the real goal.) the below are things we might address in the future; showing it here for context
• “I want to know about my options… and I was pleasantly surprised to find that language/diapers/dietary/LGBT-friendly was an option”
• “I don’t have ID / citizenship. Is there something for me”?
• “I am looking for specific items, like diapers, etc.… what’s out there?”
• “I am looking for long-term food resources”
• “I have limited mobility — what’s available?”
• “I can’t leave my house easily - is there home delivery?”
• “I would like to avoid having to sit in on a sermon… what’s available?”

Also: We have a range of users:

• “I am not good with computers — simpler is better for me. Also, I’m on a mobile phone.”
• “I am good with computers and am a power user. I know what I want — please don’t get in my way!”
• “I want to feel like the people designing this tool know what I need as a user. Seeing that makes me feel good, and that they understand what I’m going through.”

Some additional thoughts:

• I did a quick user test of the MVP and Ideal mobile design with Fern on the design team. Will share the video with you.

[fancyham]

Did a quick remote user test with Fern (FOLA designer) and wrote up some findings for her (digital native, frequent maps searcher)

Top-line results:

• She would use the date and time selector to select multiple ranges of time from the 2023-08-03 prototypes. Preferred the version shown over a simplified UI allowing one day or a single time.
• Was confused by the times starting at midnight — accidentally entered 1am when she wanted 1pm
• Would like to see a warning on places are closing close to her end time so she knows there’s a chance she’d miss the food
• Would use the ‘open now’ and if nothing open, would check next likely time range.

https://docs.google.com/document/d/1oIWDeay1VL4xZ3zxFAHXAB4Q08c4n1jNDUEWVKgjtNI/edit

Suggest continuing to test your designs with real users to see what people want & are comfortable with, and find frustrations.

[JohnHaoHuang]

Hello Dev. Team, thank you for listening to my presentation. Please use the Figma link to find the prototype for the filter feature. In the Figma file, the final design should be on the bottom right. It should look exactly like the picture you see here. Please let me know if you have any questions. Thank you.

Best, John

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-%231?type=design&node-id=2886%3A7816&mode=design&t=Cpdd0nY4ch8i5TYp-1

[fancyham]

Dev is working on this in these issues (and perhaps others)

• 1806

• 1807

• 1808

• 1810

• 1812

• 1813

• 1819

[fancyham]

New version is up on the public site. Please test and add any issues you find here or design changes that we'll need so that we can create issues to address

I noticed:

• On desktop, the button color when hovering over a filter button looks just like the 'I'm currently selected' color, so caused me some confusion. Suggest: Make 'hover' a different color from 'selected'
• On desktop, the selected state is indicated by a slightly thicker border around the filter button. Can we make it thicker or more obvious? I totally missed it at first. This combined with the hover color was a bit confusing.

[fancyham]

If you have time, please check out a new feature which I think is a first step towards meeting a lot of food-seeker needs: Advanced filters! It's on http://foodoasis.la right now.

Please play with it and add any usability, bug, possible future notes you have here as a comment.

We can make child issues from any show-stoppers or usability improvements.

Next, let's start planning for what we'd could do next that will help our users and prioritize now that this framework is in place. I can discuss with you all what are easy and difficult to do, technically.

To get your brain thinking, here are some UX ideas I've already entered that could serve as a basis for new filtering… check out below:

• Full text searches (#2117),
• Additional tags and filters (#2115)
• Org name search (#1115 and #2117)

Also, check out Ingrid's secondary research about food-seeking, and a needs diagram/outline that she did based on that research -- those will help inform our filter prioritization.

Design team: @fancyham @ihorng @Shienny1

[Shienny1]

@JohnHaoHuang @ihorng @fancyham On "FILTER" panel --> "No Known Eligibility Requirements"

Does " NO KNOWN ELIGIBILITY REQUIREMENTS" mean that they (for sure) do not need to have these requirements? This can be misleading, especially for people who English is not their first language. ? Have we verified that ID and or address is not required in the listed pantry?

Can we have an "i" or information icon on hover with a pop-up window to clarify what this means? Or simple subtitle text below "NO KNOWN ELIGIBILITY REQUIREMENTS" (because you can't hover when using a mobile device) Information Window message can be: "No known eligibility requirements means : These locations do not specifically require ID or permanent mailing address information, however, please call your selected locations to verify before going.

@ihorng prepared: https://docs.google.com/document/d/1oIP9mGy3gJVGBDLC1549l3Rc_cqC0UQEotOxwpBCnKE/edit)

Eligibility requirements (What are the requirements to access food?) For people who are undocumented For people with no ID For people with no permanent or mailing address (necessary for government food programs)