Website ProjectExamples of Styles Used for Websites- Food Banks and Non-Profits
Qualities of Food Bank Websites• Reviewed 200 food bank sites to discover both the functional and visual qualities of the best Food Bank websites.• Considered website "theme" qualities, i.e., colors, fonts, layout, images, banner, navigation• First viewing ranked sites by High, Medium, Low – relative ranking based on visual quality• Second viewing of 36 high ranked sites confirmed key functions• Content Management System used by high-ranking sites • WordPress (5) • Drupal (5) • ExpressionEngine (4) • ASP.NET (3) • Convio (2) • Other
Visual Qualities of Food Bank Websites• Common discovery on visually-attractive sites o Slider dominates many designs o Fixed width o Two page templates o Home page o Section/internal page with section menu in left sidebar o Elegant menu, clear navigation o Some horizontal secondary menus o Quick Find on Actions – Donate, Volunteer, Give Food o Lightbox to grab attention (Chicago, Pittsburg, Eastern Wisc) o Search box; Social Media connections prominently set at top o Clean footer, possibly duplicates main menus/functions
Functional Qualities of Food Bank Websites• Discovered primary functions o Volunteer – Convio, Volgistics, VolunteerHub, other o Donation – Convio, Network for Good o Email List Signup – Constant Contact, Emma, Convio o Virtual Food Drive – Aidmatrix, Convio o Mobile or Responsive Design• Measured functions based on seamless integration within the website
Functional Qualities of Websites• Common Elements of High Functioning Sites o Agency Locator / Find a Food Pantry / Get Help / Meals on Wheels o Blog o Board login / Employee login o Community / Events / News / Photos / Videos o Connections to Sponsors, Partners o Food Drive Signup o Food Recalls o Join Our Mobile Community (FB/ South Jersey) o Metrics on food in warehouse (Hawaii, RFBO o Nutrition o Personal Fundraising (FB/Rockies o Programs Highlight (almost micro-site) o Resources o Sponsors / Partners o Take Action / Advocacy o Virtual Tour (FB/NW Indiana)
List of the Best Food Bank Websites Mobile/ Location City State Volunteer Donate VFD Email Mgmt CMS Resp Web PageAkron-Canton Regional Foodbank Akron OH Convio Convio n/a Convio ASP.NET http://www.akroncantonfoodbank.orgAmericas Second Harvest of Coastal Georgia, Inc. Savannah GA Sabretech Sabretech Aidmatrix WordPress http://www.helpendhunger.orgAtlanta Community Food Bank Atlanta GA Convio Convio Convio Drupal http://www.acfb.orgCapital Area Food Bank Washington DC VolunteerMatrix internal WordPress Resp http://www.capitalareafoodbank.orgCentral Pennsylvania Food Bank Harrisburg PA embed embed DotNetNuke No http://www.centralpafoodbank.orgCity Harvest New York NY None internal internal ExpressionEngine Mobile http://www.cityharvest.orgFeeding America Eastern Wisconsin Milwaukee WI Convio Convio Convio Drupal No http://www.feedingamericawi.org/Feeding America, Kentucky’s HeartlandElizabethtown KY internal NFG Joomla! http://www.feedingamericaky.orgFeeding South Florida Pembroke Park FL ColdFusion http://www.feedingsouthflorida.orgFeedMore Richmond VA ExpressionEngine No http://www.feedmore.orgFood Bank For New York City New York NY Salesforce /Convio Convio off internal ColdFusion No http://www.foodbanknyc.orgFood Bank of Central & Eastern North Carolina Raleigh NC Convio http://www.foodbankcenc.orgFood Bank of Contra Costa and Solano Concord CA internal NFG Aidmatrix ConstantContact WordPress Mobile http://www.foodbankccs.orgFood Bank of Northeast Georgia Athens GA internal internal Ruby on Rails http://www.foodbanknega.orgFood Gatherers Ann Arbor MI VolunteerHubConvio internal http://www.foodgatherers.orgForgotten Harvest Oak Park MI Cervis internal ConstantContact ASP.NET http://www.forgottenharvest.orgGleaners Community Food Bank of Southeastern Michigan Detroit MI internal Convio internal Convio http://www.gcfb.orgGood Shepherd Food Bank Auburn ME internal ConstantContact Django http://www.gsfb.orgGreater Chicago Food Depository Chicago IL internal Convio Aidmatrix internal http://www.chicagosfoodbank.orgHarvest Hope Food Bank Columbia SC internal Blackbaud Aidmatrix internal ExpressionEngine No http://www.harvesthope.orgHigh Plains Food Bank Amarillo TX internal internal CakePHP No http://www.hpfb.orgMANNA FoodBank Asheville NC Volgistics internal internal PHP No http://www.mannafoodbank.orgNorth Texas Food Bank Dallas TX internal internal ASP.NET No http://www.ntfb.orgOregon Food Bank Portland OR embed internal Aidmatrix ConstantContact SiteCore No http://www.oregonfoodbank.orgPhilabundance Philadelphia PA Convio Convio WordPress No http://www.philabundance.orgRhode Island Community Food Bank Providence RI internal ConstantContact DotNetNuke Mobile http://www.rifoodbank.orgSan Francisco and Marin Food Banks San Francisco CA Democracy-in-action Drupal No http://www.sffoodbank.orgSecond Harvest Heartland St. Paul MN CiviCore Convio Convio No http://www.2harvest.orgSecond Harvest North Florida Jacksonville FL VolunteerMatrix Blackbaud Emma Drupal No http://www.wenourishhope.orgThe Food Bank of Western MassachusettsHatfield MA internal internal Aidmatrix ConstantContact WordPress No http://www.foodbankwma.orgThree Square Food Bank Las Vegas NV Volgistics DonorPerfect Vertical Response No http://www.threesquare.orgUnited Food Bank Mesa AZ internal internal internal No http://www.unitedfoodbank.orgHunger Free Minnesota MN Drupal http://www.hungerfreemn.org/Association of Arizona Food Banks ExpressionEngine http://www.azfoodbanks.org/
Three Square – Las VegasStrong visual; clear actions; main functions (Donate, Volunteer, etc) tightly-integrated
Harvest Hope – Columbia, SC- Colorful display with clear actions; perhaps too busy
City Harvest (New York)- Light, clean home page; ExpressEngine CMS- Fresh, bright menus; clear footer- Section pages (Volunteer, Donate, Programs) lead with black & white photo
North Texas FB – Dallas, TXFresh look, strong visuals on action items
The FB of Western Massachusetts- More conventional, “professional” look with clear navigation
Oregon Food Bank- Prominent links to major food bank functions/actions
Qualities of Non-Profit Websites• Reviewed several large non-profit sites for qualities on newly designed sites• Review provided for discussion purposes, not intended to display the absolute best• These sites used a stylized look to match organizations cause• Many of these sites highlighted stories, photos of audience• Also, display key elements prominently… o Donate, Stories, Photos, Videos
Austin Pets Alive- Clear tagline to tell people what they do; distinctive home/internal page design change- 3 distinct things you can do; Content is fresh; WordPress- Zoho CRM for Volunteer/Adoption forms; NFG/Donations; Google Calendar; Custom Store
Acumen Fund- Innovative “one-page” design on home page; uses Infographic for accomplishment timeline- Design popular with site developers, though some visitors may get “lost” on home page- Distinct things you can do – “What We’ve Accomplished,” “What We’ve Learned,” etc.
Livestrong- Strong use of colors – Yellow/Black- Multi-column menus; bold design on forms- Distinct actions – Get Cancer Help / Take Action
Amnesty International- Image rotation at top; clear actions below- Clear tagline to tell people what they do; distinctive home/internal page design change- 3 distinct things you can do; Sign Up/Donate Now/Act Now; Drupal
Charity:Water- Simple design; plenty of white space- All actions – Fundraise, Sponsor, Info, Birthdays, Donate -- are available above the fold- Bold HOME design and secondary navigation menus (Water Projects, Get Involved, About)
Children in Crisis- Carousel image rotation, prominent DONATE links
Girls Action Foundation- Simple design; plenty of white space; Drupal- Good balance between images and text- Clear navigation & prominent calls to action
Family Promise- Good use of colors to brand site- Simple to read and taglines explain what’s going on; Drupal- Constant Contact for subscribers; NFG/Donations; Yahoo Store
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.