Web Designing for Charity

A brief discussion on aspects to tackle on for designing Charity websites

I have been fortunate enough to work on a couple of Charity websites in the past 5 years. During my earlier years on working on these types of website, I have been focusing on the wrong things needed for it work. The Design, play of colours and pictures I used ruled my mind when I was doing Charity website templates. Yes, they are also important if you would like a website to visually appear attractive and make users want to stay for a long time. But after devoting much of my time to study psychology and user experience in web design, I realized my focus was more on the play of Visual and Emotions only. What are the points I missed?

A User’s Experience

We grew up thinking beautiful designs are only limited to the visual aspect of a product or website. Most people who just started out in the design business have this mentality to make a website look attractive with its colours and graphics. The more colours it has. The better. Yes, visual design is the first aspect we noticed when we are introduced to a beautifully design product. But that is not all.

Experience is not limited to visual design. Erik Flowers, Principal Service Experience Designer of Intuit, displayed how other people see User Experience in an article.

The stronger points of experience are left unseen, but it has a bigger impact we fail to notice. One example I would like to share is a DONATE button. What would you expect when you click on a DONATE button?

Charity Water has a button on its Home Page that says “GIVE TO NEPAL”. This is another way of saying DONATE. When a user clicks on that button they are transported to a page that has an input for how much you would like to donate.

Go Local Ventures has a DONATE NOW button that transport you to a form with the following information.

Both websites have the same goal for the button. To GIVE/DONATE something. But did you notice the difference of their Donate page aside from the visual aspect?

The number of inputs. On Charity Water, you are given one input. The goal for the input is to enter How much you would like to Donate. On Go Local Ventures, you are presented with tan input for how much you want to donate, along with more form inputs that requires your Credit Card information to complete the Donation process. Two goals.

How does this Donation Page affect you emotionally? When you clicked the Donate button, you are feeling 100% excited to be donating. Filling up on How much you would like to donate reduces 2% of what you feel. The more form you fill up, the more your happiness is reduced. How happy do you feel when you confirm your donation?

One way to avoid this reduction is by separating another goal to another page. This time, for the Credit Card information.

One button must only have one goal. If you would like to add a secondary goal, make it subtle. Or better yet, make a different page.

Happy or Sad Emotions

Emotions can either break or make us. You might have scrolled to your Facebook News Feed a couple of times and noticed how your emotion deliberately changed from Happy to sad, empty to happy, inspired to scared. At what portion of your time spent on scrolling the news feed did this happen? When you come across your best friend’s wedding photos and scrolled down to see a picture of an abandoned baby. The time you read an inspiring quote and scrolled down to find a scary face.

When you want your website visitors to visit your website, how do you want them to feel? Sad? Happy? Guilty for buying an expensive coffee instead of giving it to the crying boy on the Home Page picture? A lot of charity focus on making their visitors feel sorry for the boy. Some want to use a happy tone to make their visitors feel happy and inspired by how the crippled girl learned how to walk again.

To Young to Wed is a non-profit organisation that makes you feel sorry and wishing you want to do something for these poor girls.

The main photo on their homepage shows a happy girl full of youth and innocence in her eyes. It makes you say “She’s happy. I’m happy for her.” On her side is a subtle image of a girl opposite to how the main girl feels. This is a hint that tells you this is not always a happy ending. You scroll down the website and read sad stories about how young girls are forced to marry older people for the sake of saving their families. Stories that break your heart and make you want to do something to help these girls become innocent again. That’s the goal of To Young to Wed. Noticed how the shift of emotions was played here?

Did you remember seeing Unlike after clicking the Like button on Facebook? Why do you think they changed that? My guess would be, they wanted to do away with a negative action. Unlike is synonymous to hate, right?

Human Conversations

As I worked on charity websites, I noticed emotions have a high impact of users who visit them.

Do you remember CharityWater and their Give/Donate button?

Donate has been commonly used on charity websites. On Charity Waters, they changed it to “Give” to express an action to the user. Two striking actions are seen on their homepage. Help and Give. These are just verbs, but how they presented it suggests these are suggestion on what you can do. A website that talks to you like a person.

IHadCancer talks to cancer patient fighters and survivors in a way a person does. By adding the word “Connect” to a solution a cancer patient/survivor is looking for. The website tells you “I feel you”.

Another indication that the website talks to you like a person is by using “You’re”. The way I am talking to you right now. It makes our connection real. Not just reading a text book that never includes you to its discussion. Since emotions are important in Charity websites, the connection between the website and visitor should be “humane”.

The way we, as Designers (UI or UX), should handle charity websites should be different than handling eCommerce or Company websites. Charity websites have to be more personal to its visitors. We must remember our designs should talk to our visitors. Not just visually. Remember Eric Flower’s list of what user experience should be and apply it to what you are making. Know what the website is about, know its audience, their emotions and make sure you present it like a person welcome a visitor to the website.