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

• Have a feasibility conversation with Dev
  • Evaluate what other filters can the database easily support?
  • how much lift?
• Have a conversation with Design
  • 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.)
  • What’s feasible technically? What’s easy, what’s hard?
• Make an issue for design with the following action items
  • Design an intuitive UI for the advanced filters
• Choose items to build
  • Design specs for devs to build from
• Devs implement
• Beta test
• Launch

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

• Feature idea: Search for recently-updated organization records #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]

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)

• Advanced Filtering: Days #1806
• Advanced Filtering: Remove the "Search this area" button #1807
• Advanced Filtering: Pantries and Meals Buttons #1808
• Advanced Filtering: Open Now button #1810
• Advanced Filtering: Create Container to contain filtering buttons #1812
• Advanced Filtering: Create reusable Button component for filter buttons on map #1813
• Advance Filtering : Update the display method for the 'show list' on the left side of the page by adding a 'temporary navigation drawer' feature #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 (Feature: Full text search for our listings #2117),
• Additional tags and filters (Feature: Add (or expose) tags for Baby diapers, Period products, and similar properties… to the org listings, search, and edit screens #2115)
• Org name search (Add search for organization names #1115 and Feature: Full text search for our listings #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)

[fancyham]

Very related to the research done in

• Research and document food-seeker needs — what do they need? #2222

@ingrid, If you have time: do you have any recommendations from your research there?

i.e. If someone asked, what would you say are the 5 or 10 most important filters you'd recommend us adding, based on your research?

(We'll use that for prioritization and difficulty evaluation)

[ihorng]

@fancyham Last month when I presented the mapping exercise, we touched on the challenges of gathering data for some of the filter options. Could you provide which filter options are feasible from our end, so I can tailor the recommendations accordingly?"

[fancyham]

I guess there are two parts of this.

1) What do users need, and what might they’d find most useful from our app?

• Let’s find the top ten most important items so we can prioritize
  • With your work from Research and document food-seeker needs — what do they need? #2222, what would you recommend as the top items as most important to food-seekers (ignore feasibility)? (number them in order from Darragh #1 top priority to Create Web API endpoints for resources & organizations #10)
  • I’ll also do a pass at the Research and document food-seeker needs — what do they need? #2222’s mind map to give you my opinions
  • You might also run it by an interested researcher (I might Sarah C or Jelena perhaps?) to do the same.

Create a document or add a section to the mind map to tally those up, and let’s summarize here in this issue’s comments.

Based on that, we can go to the next step:

2) What can our app provide? and difficulty level of building it?

• This would take the answers from 1 above and then running it by the devs (John D knows the most about this) to get difficulty levels.
• We might also figure out workarounds to get close to what food-seekers need

From this flow, we’ll know what we can design. (It’ll likely be just a few new filters)

[ihorng]

Got it, I'll take a look at this.

Also, I've made a note of an usability issue down below:

Usability issue:
The current advanced filter design lacks a quick and clear indication of which filters or how many are selected. Users may need to scroll up and down within the filter panel to recall their selections, leading to potential frustration. This design choice violates Nielsen’s #1 Visibility of System Status (from the 10 usability heuristic), which emphasizes keeping users informed of the current state and any changes they make without requiring additional effort.

Suggestions:

• Desktop & mobile: Indicate the number of filters are being selected and display it on the filter button as "More Filters (5)"
  On the desktop, if the advanced filter panel is closed, there is still an additional indication displayed on the page.
• Desktop: There is also room to display it on top of the advanced filter panel as "Filters (5)"