Redesigning the information architecture of the Staten Island Hunger Task Force’s mobile site
The SI Hunger Task force is a non-profit organization providing food pantry sources and connecting volunteer organizations to vulnerable residents on Staten Island.
I conducted moderated user research to redesign the SI Hunger Task Force’s mobile site and improve the site’s navigation and information architecture, increasing volunteer outreach by 300%.
Design challenge
How might we restructure and redesign the SIHTF mobile site so that residents and volunteers can better find what they need?
Project overview
Client's problem
My approach
48,000 people, or 10% of Staten Island residents, suffer from food insecurity.
The Staten Island Hunger Task Force is an organization connecting volunteers to local food pantries and providing resources to help food insecurity on Staten Island.
The SI Hunger Task Force client reported mixed reviews on their mobile site, with emails and calls (especially during off-hours) asking for help with finding a specific resource.
I consulted with the client and reviewed their site data on Google Analytics. Then, I conducted moderated remote usability tests to assess how their live site usage matched the low performances from Google Analytics data. Using these insights, I created mockups of recommendations on Figma that targeted the present pain points.
.png)
Key recommendation
Rename and reorganize page and menu titles for accuracy and consistency
Based on card sorting and tree testing results, I prioritized menu sections based on target user needs, and named sections so that they exactly match page titles and content.
For progressive disclosure, I categorized subpages under common categories (i.e. Donate expands to show different donation types).
Informed by research
75% of participants struggled with knowing where to click if they wanted to donate food due to vague section titles.
Key recommendation
Declutter with progressive disclosure and increase visual hierarchy
The pantries list page has been redesigned by progressively hiding secondary details. Drop-downs draw attention to the main headers of the page and reduce scrolling, ensuring users will read more key information.
Informed by research
Due to long text, users extensively scroll through pages, which reduces navigation speed and success in finding what they need.
Key recommendation
Declutter with progressive disclosure and increase visual hierarchy
The homepage now contains upfront shortcuts to key information that visitors need quickly at first glance, such as the map of food pantries.
These pages can now be accessed both through the homepage and the navigation menu, rather than clicking through multiple sections to reach these pages.
Informed by research
63% of participants struggled to remember the paths they took to access information within deeper subpages. Most relied on the homepage and menu to access these pages.
Takeaways and opportunities
Volunteer and client outreach has increased 300% over the last six months.
Emails and calls for guidance have decreased since the mobile site was last updated.
My client was pleased with my recommendations, which involve minimal programming and expense as they only consist of visual, menu, and text body rearrangements.
As a future research opportunity, I’d love to conduct on-site moderated usability tests on at least a few food pantry clients as originally planned. Each usability problem is a valid problem regardless of sample size.