Post on 03-Sep-2014
description
Website Project
Examples 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 siteso Slider dominates many designso Fixed widtho Two page templates
o Home page o Section/internal page with section menu in left sidebar
o Elegant menu, clear navigationo Some horizontal secondary menus
o Quick Find on Actions – Donate, Volunteer, Give Foodo Lightbox to grab attention (Chicago, Pittsburg, Eastern Wisc)o Search box; Social Media connections prominently set at topo Clean footer, possibly duplicates main menus/functions
Functional Qualities of Food Bank Websites
• Discovered primary functions o Volunteer – Convio, Volgistics, VolunteerHub, othero Donation – Convio, Network for Goodo Email List Signup – Constant Contact, Emma, Convioo Virtual Food Drive – Aidmatrix, Convioo 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 Wheelso Blogo Board login / Employee logino Community / Events / News / Photos / Videoso Connections to Sponsors, Partnerso Food Drive Signupo Food Recallso Join Our Mobile Community (FB/ South Jersey)o Metrics on food in warehouse (Hawaii, RFBOo Nutritiono Personal Fundraising (FB/Rockieso Programs Highlight (almost micro-site)o Resourceso Sponsors / Partnerso Take Action / Advocacyo Virtual Tour (FB/NW Indiana)
List of the Best Food Bank WebsitesLocation City State Volunteer Donate VFD Email Mgmt CMS
Mobile/ Resp Web Page
Akron-Canton Regional Foodbank Akron OH Convio Convio n/a Convio ASP.NET http://www.akroncantonfoodbank.orgAmerica's 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 VolunteerMatrixinternal 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 / offConvio Convio internal ColdFusion No http://www.foodbanknyc.orgFood Bank of Central & Eastern North CarolinaRaleigh 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 MichiganDetroit 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 VolunteerMatrixBlackbaud 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 organization's 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