Usability Improvements to Agency Locator Map

Houston Food Bank (HFB) is the largest food bank in the country. The Agency Locator Map pinpoints all of HFB's partners so Houstonians, HFB Hotline Operators, and other users can discover partner locations that is near a point of interest.

The initial ask was to improve the UX and UI of the map, search capabilities were not apparent to the user. As HFB and its partners responded to COVID-19, my team was asked to incorporate additional search filters and enable partners to display more location details.

My responsibilities
  • Gauge the usability of new and existing features and make suggestions for change
  • Create production-ready design deliverables that use existing or new patterns as needed.
  • Collaborate with engineers to assure the visual quality of our output.
Client
Houston Food Bank
Date
2018, 2020
Team
Poetic Digital
Solutions Architect: John Goodman
Engineer: Jimmy Thigpin
Project Manager: Andrew Chien
UX/UI Designer: Moi
The Problem, 2018

HFB’s clients could not find agencies that were opened on days they were available. The map ui was confusing.

  1. to find a location near a point of interest, use the first input bar
  2. to find a location by name, type, or availability utilize the second bar
  3. To begin browsing, or sort Partners by site-type

First I reviewed the map's functionality with the developer, we discussed possible solutions prior to syncing with our client.

Over a call with the Director of IT and internal project managers, the user journey of each key stakeholder ( HFB's Clients, Hotline Operators, and Partners ) was communicated to me.

Feature Needs
User Considerations
Clients want to find a partner that operates on their days off from work
Partners want to communicate their operating hours
Clients want to locate a partner within a close radius to home or work
Many Clients rely on mobile phones for internet access
Hotline Operators utilize the map when assisting Callers
Operators download search results and share directly with callers.
The Solution, 2018

After testing a prototype internally, the team determined that users would have a better experience applying search filters when displayed as a button instead of utilizing drop-downs.  

In 2018, our primary goal was to enhance the usability of the agency locator map. By adding a clear Day of the week filter, the design eliminated the need for two search inputs. Initially our direct contact pushed back on replacing the dual-search bars as this design recommendation required a change to the back-end feed.

We secured approval for the redesign and changes to the feed within a few short weeks. I worked closely with developer to implement the new design.

Responding to COVID-19

In 2020, HFB and partners responded to COVID-19, the agency locator map needed to evolve again to display more detailed information about each location.

The feed was changing again. Over a virtual meeting with our team, another vendor, and HFB, we discussed how to implement additional filters, site-types, as well as each location's operating hours. The updated design

  • Enable users to sort locations by hours of operation
  • Incorporate 5+ additional filter types
  • Update map pop-up to display more relevant information
  • In mobile, enable users to expand or hide the map.