FoodPantries.org Website Redesign

Food Pantries is an online tool designed to help people in need find nearby food banks and subsidized groceries.

Design Timeline

Two-week design sprint to redesign foodpantries.org
Week 1: Research, Prototyping, Testing
Week 2: Front-end Development

The Problem

Current Website

Opportunities to improve usability, accessibility, and the overall flow of locating food resources for those in need.

How might we...

redesign the Food Pantries website to reduce mid-search bounce rate, drive more traffic to the website, and eventually increase the number of food pantries interested in being featured on the site?

(1) RESEARCH

Developing Our Persona

Proto Persona

User Persona

Executing Usability Testing

Key Factors

Users Tested: 5
Tests Given: 20
‍Tests Failed: 60%

What Are Users Saying?

"It's hard to find the city I'm looking for!"
-User 1

"The site looks different on my mobile device"
-User 2

"There are too many ads and the website feels spammy!"
-User 3

Observations

We observed that our users are struggling with the multi-step search process.

We noticed that users were encountering usability issues due to a lack of Responsive Web Design.

Our users could not access the search function through the navigation menu.

Redlining Important Elements

(2) DEFINE

Creating A User Journey Map

I created a realistic representation of the key user segment I wanted to design for. This was based on qualitative and some quantitative user research. It allowed me to begin empathizing with the user as I moved into the Define phase.

Competitor Analysis

Weaknesses

• Poor UX writing
• Blurry images
• Unorganized footer
• Confusing dual navigation

Strengths

• Simple homepage with clear CTAs
• Grid layout
• Color scheme
• Large, accessible buttons

(3) DESIGN

Low-Fidelity Wireframes

Creating a Style Guide

Mid to High Fidelity Prototypes

Iterate, Iterate, Iterate

Based on user testing data, we were able to quickly arrive at our final high fidelity prototype. We ran some usability tests using the same tasks from our testing plan.

(4) TEST

Initial User Testing

Tasks for users to complete:

• TASK 1: Find a Food Pantry
• TASK 2: Enter Search Criteria
• TASK 3: Click Search
• TASK 4: View Search Results
• TASK 5: Select a Food Pantry
• TASK 6: View Food Pantry Details

Results:

Users were able to complete all tasks successfully and thought the overall experience was simple, easy to use and helpful.

Final Coded Prototype

Github Repository:

https://github.com/vinneydawson/Final-Group-Project

Interactive Coded Website Prototype:

https://vinneydawson.github.io/Final-Group-Project/

Next Steps

• Where are we heading?
• What features are important to our users?
• How can we increase engagement for this resource?

Due to the time constraints of a 2-week design sprint, we were not able to touch every aspect of FoodPantries.org. We feel confident in the product we were able to produce in a short amount of time. We recognize the great work that FoodPantries.org is doing and hope to have the opportunity to offer our services.

‍