This project was a beast - not only for design, but also for engineering. The data was messy and it was really difficult to design filters on mobile.
We spent a year designing a comprehensive web-based, mobile-responsive search resource directory and database manager for Baltimore residents and care providers to search for social health resources. This tool integrated via API with a product I concurrently designed for navigators.
For the first few months of the project, we didn't have access to the data we were going to use to fill our the database. There was a lot of coordinating among local government agencies to actually get access to the data. We were starting with the open source Code for America Ohana project and had to upgrade the design of that project (it was outdates) based on discovery with our users' paint points and opportunities.
It became increasingly difficult to design the tool without the data, but finally we got access to it. And it was a mess. The data didn't match up with our expectations of the database and it didn't really match up with the open source repo we started with. I had to work closely with the engineers to dig into the database relationships to understand how to clearly display the data for users.
The filtering system was one of the most complex aspects to design. We had to do extensive user research to understand the many categories they would need to filter while searching. The list included over 80 unique filter options with 3 levels of hierarchy. This many filters were overwhelming on desktop, but on mobile were nearly impossible to navigate.
I worked closely with the engineers to design extra features that made it easier for users to uncheck all boxes, collapse filters, and hide them when they didn't want to see the long list on mobile. You can check out a gif of the interaction below.
Thankfully, we were successful. We did usability testing on this design and users were really thrilled with all of the options we provided them. The tool launched in March 2019 and has since been expanded upon by another project team to support COVID-19 emergency efforts.
