SlideShare a Scribd company logo
1 of 21
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 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 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/
Three Square – Las Vegas
Strong 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, TX
Fresh 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

More Related Content

More from Matt Quinn

Website Project - Review Sites for Mobile Qualities
Website Project - Review Sites for Mobile QualitiesWebsite Project - Review Sites for Mobile Qualities
Website Project - Review Sites for Mobile QualitiesMatt Quinn
 
SharePoint: A Case Study at Harvesters Food Bank
SharePoint: A Case Study at Harvesters Food BankSharePoint: A Case Study at Harvesters Food Bank
SharePoint: A Case Study at Harvesters Food BankMatt Quinn
 
How to Use Facebook Pages for Your Non-Profit Group
How to Use Facebook Pages for Your Non-Profit GroupHow to Use Facebook Pages for Your Non-Profit Group
How to Use Facebook Pages for Your Non-Profit GroupMatt Quinn
 
How to Create, Publish, and Market an Audio Podcast
How to Create, Publish, and Market an Audio PodcastHow to Create, Publish, and Market an Audio Podcast
How to Create, Publish, and Market an Audio PodcastMatt Quinn
 
Tech on a Budget
Tech on a BudgetTech on a Budget
Tech on a BudgetMatt Quinn
 
Using the Internet for Social Change
Using the Internet for Social ChangeUsing the Internet for Social Change
Using the Internet for Social ChangeMatt Quinn
 

More from Matt Quinn (6)

Website Project - Review Sites for Mobile Qualities
Website Project - Review Sites for Mobile QualitiesWebsite Project - Review Sites for Mobile Qualities
Website Project - Review Sites for Mobile Qualities
 
SharePoint: A Case Study at Harvesters Food Bank
SharePoint: A Case Study at Harvesters Food BankSharePoint: A Case Study at Harvesters Food Bank
SharePoint: A Case Study at Harvesters Food Bank
 
How to Use Facebook Pages for Your Non-Profit Group
How to Use Facebook Pages for Your Non-Profit GroupHow to Use Facebook Pages for Your Non-Profit Group
How to Use Facebook Pages for Your Non-Profit Group
 
How to Create, Publish, and Market an Audio Podcast
How to Create, Publish, and Market an Audio PodcastHow to Create, Publish, and Market an Audio Podcast
How to Create, Publish, and Market an Audio Podcast
 
Tech on a Budget
Tech on a BudgetTech on a Budget
Tech on a Budget
 
Using the Internet for Social Change
Using the Internet for Social ChangeUsing the Internet for Social Change
Using the Internet for Social Change
 

Website project examples of good site design

  • 1. Website Project Examples of Styles Used for Websites - Food Banks and Non-Profits
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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)
  • 6. List of the Best 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 (New York) - 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 of Western Massachusetts - More conventional, “professional” look with clear navigation
  • 12. Oregon Food Bank - Prominent links to major food bank functions/actions
  • 13. 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
  • 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 use of colors – Yellow/Black - Multi-column menus; bold design on forms - Distinct actions – Get Cancer Help / Take Action
  • 17. 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
  • 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 - 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