Skip to content
Alameda Food Bank Showcase
Alameda Food Bank Showcase

Fully Responsive Design

Alameda Food Bank Website Design After


Alameda Food Bank Web Design Before


Alameda Food Bank Web Pages

Donate and Get Food Pages


The Alameda Food Bank’s website needed a complete overhaul. The site was in a constant redesign without any direction.

The previous website needed to be modified quickly to keep website visitors with up-to-date information but a lot of the functionality to make that happen had been removed. The site, brand and message were suffering.

The Alameda Food Bank tried volunteer designers or pro bono offerings, but the site would never get completed. So, they decided to hire an experienced web design company that would be serious about designing a new website.

The new website would have to provide three (3) things: (1) Donations (2) How to Volunteer and (3) Where/How to Get Food for each target audience; those who want to donate, volunteer and need food. The website would also need the ability for staff to update the site quickly, provide immediate notifications, news and information.


Based on the requirements above, there were 3 main website objectives: (1) Ability to donate, (2) Volunteer and (3) get food.

We first approached the homepage design thinking we needed a slider. Bad idea. People would have to sit through each slide based on their objective and sliders can be a nuisance/deterrent rather than an asset. So, during the content design (wireframe) stage we incorporated a 3-box layout, emphasizing donations.

Ways to Donate

The beauty of this design is that: All target audience members are represented by importance, their objectives, CTA (call to action) AND above the fold

To further our website objectives…

  1. We placed a Donate Now button on every page, in the top right corner
  2. Add three (3) buttons in the footer to Volunteer, Donate and find Food
  3. The Donate page design was structured so, at a glance, you could view every way to donate. Clicking the left menu changed the content on the right without leaving the page or continuous scrolling.
  4. The Volunteer page includes signup access as well as preparational instructions when volunteering.
  5. The Get Food Page shows three (3) ways to shop for food with guidelines on what to bring and receiving food.
  6. The new Contact page includes an online form rather than an email address which was on the previous site. The online form gives visitors the option of subject (i.e. our website objectives) matter: Volunteer, Donate, etc.


Inquiries have increased 4-fold since launch. The new contact form makes it very easy for anyone to connect. The form, based on chosen Subject, will dynamically email the form data to the designated department.

Launch Date: November 2020
Features: WordPress CMS, 3rd Party Integrations
Project: Website Redesign

Visit Site

MJS were extremely responsive, met our aggressive timeline and had excellent design suggestions.

– Cindy Houts, Executive Director, Alameda Food Bank

Back To Top