Usability Improvements to Agency Locator Map

Product Design, Responsive Web Application

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.

I have worked on this map on two different occasions. We followed an agile method, workin in brief sprints to quickly stage and launch changes to the map. The design changes were made within 18 months of each other. My responsibilities on this project:
  • 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
My Role: UX/UI Designer

Iteration 1, 2018

The map ui was confusing and required special instructions to tailor its results.  There were two search bars and search results did not display upon landing. Our goal was to improve the usability of the map. HFB’s clients could not find agencies that were opened on days they were available.

  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
Design Research

This map had been a point of contention for a few months. As the feature list grew,  the interface of this WP widget became more complicated.  First I reviewed the map's existing functionality with the developer, we discussed possible solutions to improve the UX in relation to development effort.

Over a brief call with the Director of IT and their internal project managers, I asked for user-insights to help guide the design recommendations. The developer and I floated the idea introducing a search filter that enabled users to sort locations by day-of-the-week, similar to GoogleMaps at the time, during this call. We knew it would require a change to the map feed and could add additional hours to the request.

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.
Design &  Outcomes

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. Our direct contact was hesitant to approve the design, Jimmy proposed implementations plans and we got sign off

We secured approval for the redesign and changes to the feed within a few short weeks. The developer kept me in close contact as the map went into staging then production to help with visual QA.

Iteration 2, 2020

Project Goals

Responding to the impacts of the pandemic, HFB asked us to work alongside another vendor to implement a new feed and update map UI to show more information about Partner locations to communicate how each site was responding to COVID-19 (e.g., car-side pickup, etc ).

Process

Over a virtual meeting with the client and the new vendor, we discussed the new feed structure  and working list of new attributes to consider.  I worked in two short sprints to create high-fidelity mockups and interactive, responsive prototypes.

  • While we waited for attributes to be finalized,  I explored different ways of selecting a time-frame
  • In the second series of iterations, i implemented the new search filters and partner information on the map
Outcomes

Because of Poetic's on-going partnership with HFB, the updated map ui  was approved and implemented swiftly.

The developer kept me in close contact to help Visually QA the site