Home > News, Social Media, Strategy > Site ReLaunch: Coffee Kids

Site ReLaunch: Coffee Kids

by Roxanne Darling on December 10, 2007

Coffee Kids has been our client for almost a decade. As a nonprofit, they help coffee-growing families learn new skills and develop sustainable lifestyles, as the coffee industry suffers from a glut of over-production that keeps income low to the first line of coffee workers – those who cultivate and pick the beans. It’s not an easy story to tell when you and I are used to paying four bucks for a grandé latté. They depend on their web site as the key communication tool.

Their site has been due for an upgrade for years, but time and money constraints have meant the web site has been on the back burner. Years ago we set them up to collect online payments and also use Contribute software to edit their pages. It was a good tool at that time, but had out-grown its usefulness. It had many limitations and required a software license on each computer that was being used to make updates, not to mention training.

Their new site uses Expression Engine software, which is our favorite enterprise content management system. It is highly flexible from a programmers point of view, very easy to work in from an editor’s point of view (right in the browser – no extra software required), and very easy to control multi-user access from an administrator’s point of view. With just 1.5 hours of training, the staff was busy adding new Businesses to their searchable database, uploading photos, and blogging in both English and Spanish! Click on the thumbnail graphics to see full size screenshots, then follow the numbers for a detailed analysis below.

Home Page BeforeHome Page After
coffeekids-home-before.jpgcoffeekids-home-after.jpg

A Few Home Page Highlights
1 Toolbar Old site: no search. New site: full search plus CSS tools to easily let the user change font size. Donate and Contact are easily found on every single page.
2 High Impact Headline Old Site: lots going on, no real focal point, a lot of reading required to get your attention. New Site: Wow – color, font size, and brevity all work to stop the visitor and create an emotional connection via a powerful statement of fact.
3 Time-sensitive Call to Action Via a PHP script, we pull the date in (like a lot of sites do) but we integrate it into the message of the page. It is then immediately followed by three strong actions. Surely one of them will speak to you! This is an editable area, so the client can include as many as they want at any given time. A special link style was created to give this call to action even more prominence and draw users into the site. We are especially proud of the features added to their Business Members database, and pages that encourage people to visit their donors, tell a friend about the local businesses, and support special programs offered by donors. By helping Coffee Kids help their donors, the web site strengthens the donor partnerships.
4 Use Flickr to Manage Photos Why build a private cumbersome photo gallery when they can join the Flickr community? One of the original (and still one of the best) social applications, it allows for easy upload of pictures, tagging of pictures, creating and belonging to groups, and a little script here automatically feeds in new pictures to the home page. Not only does it help Coffee Kids easily manage their many compelling pictures, it helps them network with others over at Flickr, finding new supporters.
5 Embedded Video Message Coffee Kids wants to explore using video – which is very hot right now. Because video is much harder to create, we decided to try placing a short intro message on the home page as a way to start. However, this high impact placement can be converted later to a video blog post if desired. We like to build the bones first and then let the site’s function and content grow organically over time.
6 A Blog It’s my opinion that you just aren’t serious about communicating with your audience if you don’t have a blog. Like many companies (and non-profits especially) they had concerns. “We’ve never done this.” “What if people leave bad comments?” “It takes too much time.” But luckily and ideally, they now have a staff member, Kyle Freund, who is leading the challenge to provide support and coaching inside the organization. Coffee Kids is also rare in having a multilingual blog—perfect because so much of their work takes place in Central and South America. We’ve also coded simple buttons in the admin so editors can easily add accented Spanish characters without learning the code.
Donate Page BeforeDonate Page After
coffeekids-donate-before.jpgcoffeekids-donate-after.jpg
Making Donations Count
1 Easy to Sort Donor Groups Old site: one long cumbersome donation page. New site: separate pages for individuals and businesses, because Coffee Kids really has unique messages and requests for each group. The generic donation information is clearly displayed on a separate page, easily accessible to both groups.
2 Custom PayPal Programming Old Site – default PayPal button functionality. New Site – custom programming for a cleaner, more flexible user interface. We also added the option for gift donations, thereby removing yet one more barrier to give. By continuing to use PayPal, Coffee Kids can leverage the very low transaction fees and very wide user base without incurring custom shopping cart software expense.
3 Colorful clear graphics The entire look of the site is more modern, easy to navigate, and user-friendly. The submit buttons include help messaging to make the donation process even easier.
4 Multiple Donation Choices The new configuration allows for different amounts for individuals and business, and allows each group to make a one-time or recurring donation. The layout clearly sorts the two, instead of having them all lumped together as on the old site. This allows for a simple, deliberative process for their donors which means fewer clean ups by office staff for mistaken donations.
5 Interactive Donate button Every inside page of the site has this bold Donate button, that rolls over to red and answers the “Want to Donate?” question with, “Your gift really helps.” A smart strategy and simple programming makes for a high impact conversation with site visitors.

With all this lean CSS design, re-thinking of the content strategy to use social apps wherever possible, and the inclusion of a blog, search engines love this site! And the possibilities for expanding further into social media and community building are amazing.

  • Twitter
  • Facebook
  • FriendFeed
  • LinkedIn
  • StumbleUpon
  • Delicious
  • Google Bookmarks
  • Posterous
  • Tumblr
  • Evernote
  • Digg
  • NewsVine
  • Google Reader
  • Share/Bookmark
Thanks for reading! Now is a good time to sign up to receive new articles by email as soon as they are published or subscribe to our RSS feed.

{ 1 comment… read it below or add one }

Meredith December 12, 2007 at 8:33 am

I love what Coffee Kids did with their new site. As soon as I went to the home page, I could easily see what they offered and, more importantly, how I could help. The fact that they offer video makes the site that much more interesting and interactive.

The blog is also a great addition. I find that being able to read content from a company in this way makes me feel more personally involved, like I know the actual people behind the mission. That translates, for me at least, to higher brand loyalty.

The Expression Engine backend software is genius. I know from working on our site with it that it gives fantastic flexibility and the ability to make minute-by-minute changes to your website. It’s so easy to use, too.

Thanks, Bare Feet, for another fantastic example of Web 2.0 design and function.

Leave a Comment

Additional comments powered by BackType

Previous post:

Next post: