In-Depth Design Review of charitywater.org – BAD 2010

6:45 PM Webdesign 0 Comments

Blog Action Day 2010 is upon us! This year, Webdesigntuts+ is getting involved with a special design review of one of our favorite water-based charities: charitywater.org. We’ll explore the key elements that make the website such a success and how you can borrow the same design strategies for your own projects!

In honor of this year’s Blog Action Day, we’re offering an in depth design review of the website,charitywater.org. “charity: water is a non-profit bringing clean and safe drinking water to people in developing nations”.

Sites for charitable organizations are always interesting projects because they need to engage visitors to action. The website far exceeds what you would normally expect from a non-profit though; It boasts solid design fundamentals across the board and has a few great design tricks that give it a sense of character and refinement that few non-profit websites have. Let’s dig right in!

The first thing that you will likely notice on the charity:water website is the disciplined use of their brand color. What’s unique here is that they use color in the same way that a corporate brand might use color. Notice how the blue never varies from one page to another – everything from the typographic highlights to the background and infographic colors tie the “charity: water blue” back into the design. The color usage is ubiquitous across the site; So even if the layout changes from one page to another, color serves as the constant unifying element… which ultimately gives the designer a little more freedom to play around with.

What does this controlled color usage do to the aesthetics of the site? It creates a unified, cohesive user experience. More importantly, using consistent color will give the visitor a feeling that the site is credible and trustworthy; something that is vital to non-profits who constantly need to battle for the trust of potential donors.

Typography is one of those things that every designer knows deep down is at the heart of engaging visitors, but it’s so often neglected in favor of the status quo text formatting. The charity:water website excels at using typography to draw the user in and emphasize the key elements that make this specific crisis worth knowing about.

From a technical standpoint, the typography uses established principles to guide the eyes around: the navigation and brand are subdued but easy to locate; “calls to action” and other key pieces of information are bold and easy to scan. Within 10 seconds of visiting the site, you probably had a pretty good grasp of the message just by scanning the major headlines… that’s effective typography! Instead of burying major points of interest within blocks of paragraph text, the site brings them to the front of the visitor’s attention.

While the typography across the site feels wild and innovative on the face, it never breaks from a core set of rules: major headlines are set in a block typeface that draws instant attention, titles are set in a serif typeface that feels dignified, and the rest of the text on the page is set in a simple sans-serif that is easy to read. Using just a few simple rules like this can help unify your design even if you want to be all over the board with your layouts and type usage. Let’s take a quick peek at the type hierarchy on the site:

I should mention one thing that charity:water does that isn’t quite perfect from a technical point of view. If you browse the site enough, you’ll notice little places here and there that they break their own rules. For instance, in some places, paragraph text is serif, where on the bulk of the site it’s sans-serif. The result is a slight break in the cohesiveness of the site… these inconsistencies are minor on this site, but it’s important to keep in mind that if your own design is feeling “scatterbrained”, it’s worth taking the time to go through each and every type-style to reduce the variety of styles that you have in use.

I’ll keep this explanation short and sweet: if you have information that’s best represented as a graphic, show it as a graphic! People are visual-thinkers, don’t beat around the bush by trying to explain something with words that is easier described with a visual.

This is similar to the third strategy, but it’s warrants it’s own brief explanation. Often, you’ll be trying to design a page for content that’s so complex, so academic, so data-driven that using just text or an infographic alone won’t deliver the message effectively. In these cases, it’s worth considering how you might pair an image with text. The text is still where the raw information will be, but the image will act as a “softener”, making the information appear simpler than it really is – which encourages people to actually read it!

It’s the “One Trick Pony” of web design; The organizational paradigm that you see when you visit most sites is this: 1 custom designed homepage, 1 call-to-action page, and 1 template for everything else. The notion of using just one template to handle the majority of a site’s content is shortsighted though! Using just one template bores visitors once they leave the homepage… instead of continuing that motivational high, these “one size fits all” templates invite users to leave the site once they feel like they’ve gotten the main idea.

Where charity:water succeeds is that they use a wide variety of layouts across their entire site. The result: content feels fresh on every page. Visitors are encouraged to keep on clicking around the site just to see what lies around the next corner. Even better, the design of each page actually matches the content on that page (crazy idea huh?). While developing a wide variety of unique page templates might cost a bit extra, the net effect is that the site actually engages visitors and is more likely to succeed at getting visitors involved.

It’s important to note that using a variety of layouts isn’t always the right solution. In the case of charity:water, it works because the site has a large enough diversity of content that it actually makes sense to give each type of content it’s own layout. In other sites though, using radically different layouts from one page to the next can break the continuity in a design and actually work as a detriment to the site experience.

There’s no hard rule for deciding when a custom page template is warranted though, so you’ll just have to use your own instincts. When in doubt, use a generic page template – if the generic template hinders the content more than it helps it, consider creating a custom layout. If you do decide a custom page template is necessary, take care to keep the vital information (brand, navigation, account info, shopping cart, etc.) in the same place on each and every page.

Let’s face it: if you’re working on a non-profit website, there’s going to be a lot of dull informational pages that, while important, won’t ooze inspiration. What charity:water has done with these information pages is display them in unique grid layout. By using icons and images along with the informational blurbs, the visitor’s are encouraged to look around and find something of interest to them. More importantly, it makes these otherwise ordinary pages look “fun”, which delivers a subtle message to visitors that even the most dull parts of this organization’s operation are executed with creativity and passion.

The takeaway here is simple: don’t ignore the ordinary content pages! While these pages might feel unimportant, there is a unique opportunity to surprise visitors by creating intelligent approaches to displaying this kind of content.

I like the charity:water website… I really do. Each page feels fresh and it actually makes me want to get involved. Some might say that this is the sign of a genuine cause – a crisis so important that people are simply drawn to participate. I’m going to go out on a limb though and say that the effectiveness of the site has as much to do with the design as it does the content. Sure, if the cause were “donate $5 to Steve Jobs”, I wouldn’t really care about it regardless of how well designed the site was (some might disagree with this, haha!), but this is one of those wonderful times where design truly can make the world a better place.

Thanks for reading this year’s Blog Action Day post! Drop some comments off below.