Site ReLaunch: Coffee Kids

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 Before Home Page After
coffeekids-home-before.jpg coffeekids-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 Before Donate Page After
coffeekids-donate-before.jpg coffeekids-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.