After 20 years of surfing websites, most Internet users can tell the difference between a site that “works” and a site that “doesn’t” without necessarily being able to articulate why they do or don’t succeed.

In our kickoff meetings, we typically ask our clients to point us to websites they think are amazing; websites they want to borrow ideas from.

And in the last couple of years, pretty much every single client has had the same favorite nonprofit website.

Why? It’s not just that it’s a great organization doing fantastic work (though that’s certainly the case.)

It’s also because it accomplishes the five building blocks of great web design — and these are building blocks that you can apply to your own websites, too.

The Five Building Blocks of Great Web Design

The five building blocks of any great website are the same:

A clear purpose

Easy navigation

Useful content

Compelling calls to action

No bad surprises

Unfortunately, these basics of a successful website can get overlooked in favor of trendy widgets, flashy graphics, unclear priorities, and death-by-committee. That’s why sites that do work, like CharityWater.org, tend to stand out compared to the majority that miss the mark.

The Elemental Success of CharityWater.org

[NOTE: Charity: Water recently updated their homepage to highlight a specific — and successful — fundraising campaign. In this post we’ll analyze the site’s look prior to its latest update, but we believe these fundamental observations will apply through CharityWater.org’s future updates, too.]

Aside from targeted landing pages, or from pages with high organic search traffic or social sharing, your homepage is many visitors’ first impression of your site — and, by extension, of your organization. Even if a visitor does first come to your site through a shared blog post, if she wants to know more about you, your homepage is likely to be her next destination.

What your visitors first see on your homepage will influence their opinions of your taste, your purpose, your capability, and how well you understand them.

CharityWater.org wins big here because they do many things right, all at once.

* Uncluttered. The design is clean and relaxed. (It also scrolls vertically, as do most modern sites built with mobile in mind.)

* Inspirational. It immediately inspires through high-end and positive photography. A picture is worth a thousand words. [Note: For the updated “Sahel” campaign, the homepage immediately focuses the visitor on two major points of inspiration — a million dollar donor match and a well-produced and emotional video that focuses on the specific stories of the people being helped.]

* Focused. It’s highly focused on just one thing at a time. 70% of the page is an image of a smiling girl in a faraway country happily drinking clean water. If every charity’s mission could be so succinctly summarized, they could all replace their mission statements with photos.

* Targeted. Notice who they’re helping? According to the headline text, it’s “girls around the world.” In 2014, women — and especially girls — are needle-movers in the marketing discussion. [Note: In the recent homepage update, a specific campaign for the Sahel region of Africa is the focus. But the lesson remains consistent.]

* Trustworthy. “100% of every dollar you donate will fund clean water projects.” There is no larger barrier to charity than a donor’s suspicion that his dollar will go toward office supplies or overhead rather than toward the cause he’s passionate about. (Whether or not that’s always a good thing is another question entirely.) But certainly, this statement dispels doubts and legitimizes Charity: Water in the minds of potential donors.

* Bold. The “DONATE NOW” button is unmissable, and the color scheme and direction of the text — even the direction of the girl’s gaze in the photo — all drive a visitor’s attention toward it. The button is also blue, a color long associated with trust and fiscal responsibility, which suits the org’s mission and brand.

Diving Deeper Only Reinforces What Already Works

If we scroll down the Charity: Water homepage, we see the statistics and calls to action that support what we’ve already intuited from our first impression, but only after an emotional connection has been made and we have been inspired. The facts support the emotional appeal and the trust created by a website’s consistency in messaging cannot be overstated.

* Their calls to action are perfectly balanced: donate, fundraise, or learn. And their support text is clear, simple, and effective. (1 in 9 of “us” doesn’t have clean water? This is a subconsciously effective way to remind people in the United States and other developed nations that “us” really does mean “all of humankind, together.”)

* We funded X projects in Y countries = “We’ve been successful, and we’re here to stay. You can trust us to put your dollar to good use.”

* Here are 3 things that make us different = “We know what your doubts are. Let us alleviate them quickly.”

Removing Objections to the Call to Action

When your organization relies on donations to achieve its goals, you want those transactions to be as frictionless as possible. Part of that happens by creating a clear call to action, and the rest comes from removing any doubt in the mind of a potential donor. They need to know that their donation matters, and the best way to prove it does is by showing them exactly how it’ll be used.

Charity: Water sets the default donation amount to $40 ($30 for the latest campaign), which forces a person who wants to give less to manually dial it down — to say, in effect, “No, I don’t want to help that much.” Most people will stay with the default setting, as long as the amount isn’t ridiculous. While we don’t work with Charity: Water ourselves, we suspect this subtle tactic actually helps the average donation to CharityWater.org go up, not down.

It’s one thing for a donor to optimistically send $35 a month into an unaccountable void; it’s another to “fund 122 feet of piping in Pakistan” every month. Specifying a project and showing its participants makes a donor more likely to give because s/he can visualize what s/he is creating and really feels like s/he is making a difference.

And not only does Charity: Water’s suggested automatic donation amounts come with specific examples of what your preferred gift can accomplish every month, but they also show the pictures of people we presume are literally involved with the maintenance of these long-term projects — in essence, your gift is helping them directly. More powerful that way, right?

Your Audience Shouldn’t Have to Work Too Hard

There’s a reason this is everyone’s favorite nonprofit website. CharityWater.org makes everything as simple, clear, and easy to process as possible — including their whole reason for existing.

The site’s explainer video lets you learn all about their mission “in three minutes.” Those three words are critical. As with everything this org does, expectation management is key. Charity: Water can filter the core of their mission down to three minutes, so you, the donor, aren’t inconvenienced.

If Charity: Water is this good at taking care of you, doesn’t that imply they’ll be equally efficient and effective at deploying your dollars for maximum value, and delivering clean water to as many people as possible?

Is your organization’s mission this clear?

Does your website reflect that clarity and efficiency? Does it inspire, engage, and activate an audience?

Besides CharityWater.org, do you have a favorite nonprofit website? Tell us what they’re getting right in the comments.