Downloaded 11 times
Uploaded byMatt Quinn
Website project examples of good site design
The document discusses the results of reviewing 200 food bank websites to identify best practices in design and functionality. Key findings include: 1) Popular content management systems used were WordPress, Drupal, and ExpressionEngine. 2) Common high-quality design elements were sliders, fixed widths, lightboxes, prominent social media/search boxes and clean footers. 3) Important functional elements were volunteer signup, donations, email lists, virtual food drives and mobile optimization. 4) High-ranking sites integrated these functions seamlessly and included additional features like agency locators, blogs, and community/event sections.
Website project examples of good site design
- 1. Website Project Examples ofStyles Used for Websites - Food Banks and Non-Profits
- 2. Qualities of FoodBank 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
- 3. Visual Qualities ofFood 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
- 4. Functional Qualities ofFood 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
- 5. Functional Qualities ofWebsites • 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)
- 6. List of theBest Food Bank Websites Mobile/ Location City State Volunteer Donate VFD Email Mgmt CMS Resp Web Page Akron-Canton Regional Foodbank Akron OH Convio Convio n/a Convio ASP.NET http://www.akroncantonfoodbank.org America's Second Harvest of Coastal Georgia, Inc. Savannah GA Sabretech Sabretech Aidmatrix WordPress http://www.helpendhunger.org Atlanta Community Food Bank Atlanta GA Convio Convio Convio Drupal http://www.acfb.org Capital Area Food Bank Washington DC VolunteerMatrix internal WordPress Resp http://www.capitalareafoodbank.org Central Pennsylvania Food Bank Harrisburg PA embed embed DotNetNuke No http://www.centralpafoodbank.org City Harvest New York NY None internal internal ExpressionEngine Mobile http://www.cityharvest.org Feeding 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.org Feeding South Florida Pembroke Park FL ColdFusion http://www.feedingsouthflorida.org FeedMore Richmond VA ExpressionEngine No http://www.feedmore.org Food Bank For New York City New York NY Salesforce /Convio Convio off internal ColdFusion No http://www.foodbanknyc.org Food Bank of Central & Eastern North Carolina Raleigh NC Convio http://www.foodbankcenc.org Food Bank of Contra Costa and Solano Concord CA internal NFG Aidmatrix ConstantContact WordPress Mobile http://www.foodbankccs.org Food Bank of Northeast Georgia Athens GA internal internal Ruby on Rails http://www.foodbanknega.org Food Gatherers Ann Arbor MI VolunteerHubConvio internal http://www.foodgatherers.org Forgotten Harvest Oak Park MI Cervis internal ConstantContact ASP.NET http://www.forgottenharvest.org Gleaners Community Food Bank of Southeastern Michigan Detroit MI internal Convio internal Convio http://www.gcfb.org Good Shepherd Food Bank Auburn ME internal ConstantContact Django http://www.gsfb.org Greater Chicago Food Depository Chicago IL internal Convio Aidmatrix internal http://www.chicagosfoodbank.org Harvest Hope Food Bank Columbia SC internal Blackbaud Aidmatrix internal ExpressionEngine No http://www.harvesthope.org High Plains Food Bank Amarillo TX internal internal CakePHP No http://www.hpfb.org MANNA FoodBank Asheville NC Volgistics internal internal PHP No http://www.mannafoodbank.org North Texas Food Bank Dallas TX internal internal ASP.NET No http://www.ntfb.org Oregon Food Bank Portland OR embed internal Aidmatrix ConstantContact SiteCore No http://www.oregonfoodbank.org Philabundance Philadelphia PA Convio Convio WordPress No http://www.philabundance.org Rhode Island Community Food Bank Providence RI internal ConstantContact DotNetNuke Mobile http://www.rifoodbank.org San Francisco and Marin Food Banks San Francisco CA Democracy-in-action Drupal No http://www.sffoodbank.org Second Harvest Heartland St. Paul MN CiviCore Convio Convio No http://www.2harvest.org Second Harvest North Florida Jacksonville FL VolunteerMatrix Blackbaud Emma Drupal No http://www.wenourishhope.org The Food Bank of Western MassachusettsHatfield MA internal internal Aidmatrix ConstantContact WordPress No http://www.foodbankwma.org Three Square Food Bank Las Vegas NV Volgistics DonorPerfect Vertical Response No http://www.threesquare.org United Food Bank Mesa AZ internal internal internal No http://www.unitedfoodbank.org Hunger Free Minnesota MN Drupal http://www.hungerfreemn.org/ Association of Arizona Food Banks ExpressionEngine http://www.azfoodbanks.org/
- 7. Three Square –Las Vegas Strong visual; clear actions; main functions (Donate, Volunteer, etc) tightly-integrated
- 8. Harvest Hope –Columbia, SC - Colorful display with clear actions; perhaps too busy
- 9. City Harvest (NewYork) - Light, clean home page; ExpressEngine CMS - Fresh, bright menus; clear footer - Section pages (Volunteer, Donate, Programs) lead with black & white photo
- 10. North Texas FB– Dallas, TX Fresh look, strong visuals on action items
- 11. The FB ofWestern Massachusetts - More conventional, “professional” look with clear navigation
- 12. Oregon Food Bank -Prominent links to major food bank functions/actions
- 13. Qualities of Non-ProfitWebsites • 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
- 14. 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
- 15. 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.
- 16. Livestrong - Strong useof colors – Yellow/Black - Multi-column menus; bold design on forms - Distinct actions – Get Cancer Help / Take Action
- 17. Amnesty International - Imagerotation 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
- 18. 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)
- 19. Children in Crisis -Carousel image rotation, prominent DONATE links
- 20. Girls Action Foundation -Simple design; plenty of white space; Drupal - Good balance between images and text - Clear navigation & prominent calls to action
- 21. Family Promise - Gooduse of colors to brand site - Simple to read and taglines explain what’s going on; Drupal - Constant Contact for subscribers; NFG/Donations; Yahoo Store