Ozarks Food Harvest

Project Overview

Ozarks Food Harvest is a food bank serving Southwest Missouri and reaching almost 30,000 people every week. This project resonated with me because of the tangible impact my work would have on people living in my area. I was primarily responsible for designing the donation page, their primary source of income, in addition to the events page. The visual design was done in collaboration with another designer. Two challenges were that the client wasn’t familiar with the design process, and they had a small, nonprofit budget.

Process

Before any design happened, research was done to understand the users of the website. These were broken down into seven groups.

  1. Time donors
  2. Food donors
  3. Money donors
  4. Food pantries
  5. People needing food
  6. Corporate sponsors
  7. Media

These users and information about their needs served to guide the design process moving forward.

On this project I primarily used a mobile-first design methodology. This means that I designed for a mobile browser before a desktop browser, forcing me to focus on the most important information and actions.

For the donation page I identified six essential components of the donation form as noted by the client.

Donation form components

These components informed my sketches in addition to inspiration from other sources including the Obama 2012 campaign donation form.

Obama 2012 donation form

I then sketched out the entire donation form in one long block as a mobile web page.

An interactive prototype of the donation form

For the events page I gathered requirements from the client which included many different kinds of events that needed to be seen from a top-level view as well as an individual event view with details. One of my sources of inspiration for this page was the Fantastical iPhone app.

Fantastical screenshot

Another thing I did on this project was to lead a design meeting with the client to determine the direction they wanted to take the visual design of the site. Inspired by the book Gamestorming, I gave the two stakeholders each a set of index cards with letters written on them.

Exercise cards

I then showed slides exemplifying different styles of visual design, all with letters corresponding to the index cards.

Exercise slides

I cycled quickly through the deck of slides and asked the stakeholders to rate each one with a number 1-10 to get a “gut check” of what they liked. The results of this exercise gave the visual designer direction on the project.

Solution

The solution we built significantly upgraded the visual design and usability of the Ozarks Food Harvest website. A large part of this solution was a custom donation form so that they could retain more control over the donation experience and keep more of the donation money. This was done with a mobile-first design philosophy so that the entire site was responsive and optimized for mobile devices as well as desktop screens.

Takeaways

Two things I took away from this project:

  1. How to work with a very limited budget. As a nonprofit, the client had a small, set budget. I learned how compromises had to be made through dialogue with the client to achieve their goals.
  2. The power of empathy for a designer. Because I steeped myself in the challenges of the client, their users, and the hungry people this work was benefitting, I was able to connect with them and design for them in a deep way that I had not experienced before.