What do charities and empathic design have in common?

An unexpected source for use cases. Wait, is it?

When it comes to creating websites, whether tinkering something independently or hiring someone else to do it, I don’t think anyone ever set the bar as “mediocre”.

Everyone plans to build an engaging, even “selling”, great digital experience. And if we put the technicalities aside, what makes them great?

• Encouraging action
• Empathizing with the reader
• Presenting case studies
• Building trust
• Offering individual emotional experience

A website that checks all five must be a textbook case to learn from, right?

So I started looking for examples and made a surprising discovery: a type of business that matches all of the bullet points above is not business at all. It’s a good old (emphasis on “good”) non-profit. A.k.a. charity.

The question is, since these businesses are non-profit, are they eligible to be learning examples in “selling” web design?

Well, let’s find out.

Sharing the essence of life on Earth with charity: water

This non-profit is a sublime combination of numbers and stories. It is transparent and clean both in design and messaging.

charity:water works towards providing water and basic sanitation means to the crisis areas. The way they connect with the audience deserves special attention. People who can afford to donate don’t face water shortages themselves, dry deserts are just not an issue on the top of their minds. So how could they become engaged?

Well, this website clearly employs a storytelling content strategy to bridge that. charity:water helps the reader relate to the problem they’re fighting by telling stories of societies they helped in real need, families for whom they made a difference.

Once a visitor is inclined to become a supporter, the website makes it really easy to join with an interactive donation form, which instantly grants a tangible estimate of a good deed — “your $10.00 monthly donation can give 3 people clean water every year.”

Think about the measurable impact of your offering. If you know exactly how much better, easier, faster it can do something for your buyer based on proven stats, why not share it with the reader when they are just considering to commit?

Think about what story your company can tell. How it changed a life of your user, or a community that benefits from your products/services. This story has to be told with just a few words, starting with a grasping “hook”. And between the lines, it has to show that you, as a company, care and root for the end-user.

Going from worrying to taking action with the Union of Concerned Scientists

This organization’s witty name gets serious with the claim to use science for making change happen.

The website interface employs the rule “one topic = one page”. The pressing planet issues go in different directions, and it is fair to assume they have different relatability levels depending on the reader. So instead of dumping them all on one page, UCS split the content into main topics and put them as separate links right on the top of the landing. Every user can now go onto their own discovery route focused on the issue they are keen to learn about.

It is worth noticing that these topics are highlighted and placed right where you’d look first, while the organization tabs — “about”, “network”, and “reports” — are put in the left corner with a little bit less focus.

That’s a hint on how to organize your navigation structure. A first-time visitor to the website looks for an informative source, rather than details on the organization, so let products and services links grab more attention than company information.

Standing up for nature revival with WWF

The website of a World Wildlife Fund looks like a visually rich digital magazine with a carefully curated selection of high-quality photos.

As a non-profit organization WWF’s mission is to help nature thrive. As a website, their mission is to give information and spark the reader’s interest before asking for anything. With a colorful variety of article thumbnails they exhibit what WWF is all about. These images are all different: there are close-ups and scenery, they display animals and volunteers. That diversity creates trustworthiness — these images don’t seem to come from a general photo stock, so they must represent the real initiatives of the organization.

Actually employing this in a product or company website is tricky. You don’t want to flood the page with attention-grabbing pictures and loads of content, getting the reader rather tired than curious. But in a well-crafted design, deliberately picked photos will look lively and create a sense of trust.

Purchasing helpfully through (RED)

Being charitable is commonly associated with selfless generosity — rightfully so. But what about those of us who don’t have the extra resources to donate? Well, (RED) has developed involvement options. They have partnered with brands like Apple, Amazon, Beats, EOS, and Durex — not for one-time media charity, but a whole consumer-facing strategy to give back. Because everyone is a consumer, right?

When you pick a (RED)-branded product manufactured in, you guessed it, red color, the partner company gives back part of the product price to Global Fund fighting AIDS and now COVID-19.

Call to action? Make a shopping choice that’s both cool and charity-aware. Now you both got yourself that headset you needed and helped somebody fight a serious disease. Bonus — your device comes in a catchy, special edition red, sending a signal that you care.

(RED) attracts millennials and teenagers, capturing an audience which you wouldn’t normally expect in the ranks of charity supporters. This non-profit does it by taking the charity element to the everyday products, but also by employing sharp design and fetching, but not copywriting. They highlight the reader (“(RED) looks good on you”), empower by showing the impact (“Buy one (RED) product, fight two pandemics”), and celebrate the adopters, showing their #productred photos on the website. Encouragement drives engagement.

If we distill this example, we’ll see a combination of a consistent design system and tinkered, masterful copy. Try and beat that!

Growing both food and hope in Ron Finley Project gardens

Ron Finley is a rebel with a green thumb. That’s how the About section of this website starts. Are you already craving to read the rest of the story?

You’d think that US, a first-world country, certainly doesn’t suffer from food deprivation. Turns out that the desert climate and overpopulation make access to fresh vegetables and fruit a luxury in South-Central L.A. districts. The RFP activists combine sustainable urban gardening, community building, and business education with a very hands-on attitude, “one city-block at a time”©. They also don’t spend much time talking about it — their website is very brief. You can almost hear it saying “here’s the problem, here’s our self-made solution, see our spirit on these vivid images, and let’s get to work”.

How can that example be used for creating a better business website? It hints to check if your brand voice is distinctive and palpable as well. Think of the unusual contrasts presented by your company. Like “a credit card that actually helps you save money”, or “website chatbot can be both helpful and fun”, or “there’s a rebel spirit to urban gardening”. These contrasts, once polished into a one-liner sentence, make a great punchline to hook the reader’s attention.

The closing remarks

Let me share a disclaimer. These 5 examples were specially selected to illustrate the point, which isn’t claiming that every non-profit has a great website. The point is that in order to reach their audience effectively, charities use clarity, encouragement, emotional messaging, and case study evidence. And their audience is… people. Just like yours, I guess.

In other words, when charities ask to trust them and contribute, they address the humane part of us.
So when businesses state similar goal — build a relationship with people who will become customers — treating the audience with empathy is a logical takeaway.

That empathy can take shapes of:

• transparency in the description of your offering,
• interface focused on what the visitor needs instead, as opposed to brand bragging,
• showing real-life photos and numbers instead of huge blocks of text,
• writing a thoughtful copy,
• being direct and authentic.

These are just a few insights we can learn from the websites that reach out to people in order to make lives better. And if these hints do help your website, please consider helping any non-profit you trust as a way of recognition.

Originally published at https://dops.digital.