top of page
MacBook Pro 16_ - 9.png
Introduction

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%.

Skills

Web analytics / SEO

Usability testing

Information architecture

Journey mapping

Card sorting

Outcome

Final presentation with the client and mobile mockups of recommendations that improved the site’s information architecture and navigation.

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.

unnamed (3).png

Key recommendation

Rename and reorganize page and menu titles for accuracy and consistency

Screen Shot 2024-04-10 at 11.45.25 PM.png

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

Screen Shot 2024-04-10 at 11.48.13 PM.png

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

Screen Shot 2024-04-10 at 11.56.02 PM.png

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.

bottom of page