Brian Donnelly UX
Brian Donnelly UX
UX Designer | Researcher
 

 PROJECT OVERVIEW


The New Hope Community Food Pantry (NHCFP) is a volunteer-run nonprofit organization that provides emergency food and health services to those in need on the northwest side of Chicago. Our team was hired to complete a full redesign and implementation of the NHCFP website using a research-based user-centered design process. Since the sites launch in September, the new website has been able to raise over $4,000 in online donations and has increased monthly visits by over 100%.

Project Goals

The three primary goals of improving and redesigning the NHCFP website were:

  • Optimize the navigation and menu structure of the current website and eliminate unnecessary or redundant pages and combining pages where fit.

  • Improve and streamline the online donation feature by redesigning the donate process and donate pages.

  • Improve the overall layout and design of their Volunteer page to simplify the on-boarding process and the access to information for potential food pantry volunteers. 

My Role

My role included developing our user-centered research approach, creating protocols for any primary research and usability evaluations, conducting qualitative and quantitative synthesis and analysis, and moderating the information architecture and usability evaluations for each design iteration. Additionally, I contributed a large part to the design of the high-fidelity prototypes and final version of the NHCFP website.

 
 

Research Process & RESULTS


For this project our team used several user centered design methods including content inventory, interviews, surveys, competitive analysis, card sorting, treejack testing, low fidelity usability testing, high fidelity usability testing, and a system usability scale (SUS) questionnaire.

Staff and Stakeholder Interviews

Our first method included interviewing NHCFP directors, volunteers, and clients as well as a quick survey for clients. We systematically and inductively coded each interview to develop and categorize our initial insights and themes. Our main goals were to gain more insight from various food pantry stakeholders regarding how they currently use the website and what shortcomings they have experienced.

Pantry Client Survey

Our team conducted an impromptu survey with pantry clients during the check-in process. We produced descriptive statistics to illustrate the types of devices used by clients and their levels of access to the Internet. We wanted to gain insight into the clients’ knowledge of the current website, how they typically access the current website, and what types of devices they use to access the Internet.


Card Sorting

We created a hybrid card sort using Optimal Workshop which consisted of a total of 29 cards and 4 categories: Volunteers, Clients, Donate, and About Us.

The results showed that 93% of participants sorted the same cards under “Volunteer”, 86% sorted the same cards under “Donate”, 64% sorted the same cards under “About Us”, and 57% sorted the same categories under “Clients”.

A participant-centric analysis (PCA) demonstrated that eleven out of fourteen of our participants had extremely similar group patterns with a total of 5 categories. Furthermore, six of the fifteen participants created a fifth category titled “Resources”.


Treejack Testing

We created a treejack test using Optimal Workshop which consisted of 5 tasks: two donation-related tasks, two client-related tasks, and one volunteer-related task.

The results of our first round of testing were extremely successful. There was an overall successful task completion rate of 95%, and 90% of those successful task completions were chosen without any backtracking from participants. Below are the results of our tree-jack testing.


Low-Fidelity Usability Testing

Using an interactive Low-fidelity prototype created using a generic Squarespace template, our team conducted a total of five usability evaluations that focused on three specific tasks: getting information about obtaining food, volunteering, and donating through the website. A total of three tests were completed in-person and two were completed remotely to compare the results of the different testing scenarios. The results of the evaluations were extremely successful with every participant able to successfully complete all three tasks without any moderator intervention. Below are a few snapshots of the low fidelity prototype we created using on the Squarespace platform.


High-Fidelity Usability Testing

We conducted two rounds of in-person and remote usability evaluations for our high-fidelity iteration. We included the same three tasks from the low-fidelity usability evaluation with the addition of three new tasks concerned with finding accepted donations, locating specific pantry resources, and subscribing to a monthly newsletter. After each task participants to completed a modified Simple Ease Question on a five-point scale to rate how easy or difficult each task was. Participants then completed a SUS evaluation to further evaluate the overall usability of our redesign. View Full SUS Evaluation Questionnaire.

As the results demonstrated, the task related to subscribing to the NHCFP news letter accounted for half of all failures in our usability testing sessions and was rated as the most difficult task. Additionally, participants noted that they found the primary navigation link titled “Clients” as confusing and not an appropriate, or easily understood, label for a food pantry website. Therefore, we updated the NHCFP news letter form field to make it more noticeable for users and changed the “Clients” navigation label to “Get Help” as a better indicator for users. We plan to hopefully test these changes in the future usability evaluations to determine if they improve task completion success rates and ease of use scores.

Ultimately, the results of our redesign demonstrated that we successfully met the initial KPI’s for each task and were able to accomplish the initial organizational goals of improving online donation features, streamlining the volunteer on-board process and simplifying the overall information architecture of the NHCFP website.

 
 

 Project Conclusion


Our team successfully met the goals set in conjunction with the NHCFP to achieve their product requirements and ultimately accomplish our combined vision. The new website has been able to raise over $4,000 in online pantry donations and has increased monthly visits by over 100% since the site’s launch. The user-centered design approach taken by our team lead to several iterations of a revised information architecture and simplification of the website to ultimately improve the overall experience for their end users.

The streamlined donation process opens a new, easy-to-use channel for donors to contribute to the continuation of the services the NHCFP provides. The ‘Donate’ page now presents clear and concise information to potential donors seeking to give in non-monetary ways, such as hosting fundraisers or donating food. The ‘Volunteer’ page was redesigned in a similar way by presenting the most important information and including a streamlined on-boarding process for potential pantry volunteers. The ‘Get Help’ page benefitted from our redesign through improved presentation of crucial information, enhanced visual aesthetics and organization, so that pantry clientele can quickly and easily find any and all information they need.

All board members were very pleased with the progress we made redesigning their website and successfully meeting their needs to improve donation and volunteering features while updating the overall information architecture, online donation features, and volunteering on-boarding of their website. Lastly, our team will be continuing to manage their website and add any additions, especially to the ‘About Us’, ‘Get Help’, and ‘Events’ pages to showcase any of NHCFP’s seasonal events, programs, and promotions.

 
 
Case Study: Uptown United

Case Study: Uptown United

Case Study: Cal’s Angels Inc.

Case Study: Cal’s Angels Inc.

Case Study: Carbon Calculator Research

Case Study: Carbon Calculator Research

RESTORIC AR iOS Prototype

RESTORIC AR iOS Prototype

LunchBreak Mobile Prototype

LunchBreak Mobile Prototype

Ticketmaster.com Redesign

Ticketmaster.com Redesign