top of page
ben-white-vJz7tkHncFk-unsplash.jpg

CHARITY WEBPAGE

Back to Top

INTRO

Background

In 2019, while donations to COVID-related causes increased, there was a decline in other causes, with some charities reporting a projected decrease in donations of up to 30% (Straits Times).

 

The task

Charities wanted to counter this drop by opening up more avenues and methods to donate, and one of the focus is to make their website a key platform to do so.

 

In this case study, I find areas for improvements for the website in order to create experiences compelling users to donate, highlighting some of the issues found and offering design recommendations.

CURRENT DESIGN + LIMITATIONS

Heuristics evaluation of current design

Starting off with a quick heuristics evaluation reveals a few areas on the webpage that needs improvements, which will be explored upon and discussed below.

​

A point to note is that we should also think about the purpose of the website and the target audience. Both of these will be important in influencing the design recommendations later.

Nav bar + Hero banner​

First impression is that the nav bar is taking too much real estate. Usability Heuristics of Consistency and Standards is not followed as nav bar elements are named ambiguously, with each having 5 or more subcategories, adding to cognitive overload.

​

The hero banner consists of multiple images being cycled too quickly and with illegible text.

Main content / Feature articles

Content pieces are too clustered and it doesn't seem like there is a consistent theme in terms of the content being put out, with both articles and campaigns being mashed on the same layout. 

​

There is considerable cognitive overload as users would not know where to focus first when looking at the page for the first time.

Donation options

Methods and alternate ways to donate (DONATE, FUNDRAISE, SPONSOR) were placed seemingly between 2 separate sections of the webpage, creating the illusion that the elements are there for aesthetics purposes rather than a functional one.

​

The lack of explanations for each of these methods is also confusing as users don't understand the difference.

PROPOSED DESIGN + RATIONALE

Overview

The purpose of the redesign is geared towards having easily accessible information about the charity, as well as creating an experience that can help convince users to want to donate to the cause. In order to do so, there are certain things that have to be done right. 

 

They are:

  1. Having ease of access to information about the campaigns and content hierarchy.

  2. Create compelling reasons for users to donate.

  3. A donation goals to achieve that users can get behind and work towards.

  4. Clear and consistent call-to-action button.

Nav bar

The real estate of nav bar was reduced to be more streamlined. “About Us”, “Contact Us” and "Social Media" were pushed to the newly created upper black bar to give way for content with higher priority, such as the charity's causes, campaign information and methods of donation etc.

 

Content in the nav bar was also rearranged in order of relevance to the webpage layout. "Our Causes" > "Ongoing Campaigns" > "Events" > "Your Impact" > "More Ways to Give". This arrangement also follows a typical user's thought process when they evaluate a charity organisation, before making the decision to donate. Hence, having "Donate Now" button on the right of the bar makes sense as it directs users into action after they go through the available information the website has to offer.

​

Hero banner

The changes made to the hero banner was to have a section on the right side where copy can be inputted along with a "Read More" and "Donate" button. The consistent placement meant that even when the hero banner cycles through, the user still knows where to look to get information from.

Screenshot 2021-01-18 at 10.22.36 PM.png

Content / Feature articles

For the main content, webpage was simplified to showcase one article at a time in a single horizontal plane. This allow users to focus one thing at a time, letting them afford their attention without being distracted. 

​

The content were also split between "Causes" for feature articles of the beneficiaries and "Event" for announcements and news. Users can toggle between them as they like.

​

The main rationale for having "Causes" is to let the users learn more and empathise with the beneficiaries. By creating an emotional investment by the users, they are more likely to be compelled to aid the cause.

Screenshot 2021-01-18 at 10.23.24 PM.png

Ongoing campaigns

A new feature added to the redesign. In the initial evaluation of the charity webpage, I realised that there is a lack of visibility about the ongoing campaigns happening. Users have no way to tell which ones are complete and the ones that are still live.

​

Having a section dedicated to the fundraising campaigns can let users choose which causes they identify with to donate. It also offers visibility as to the amount raised, letting the community as a whole come together to achieve the target. 

Screenshot 2021-01-18 at 10.27.33 PM.png

Donation options

The icons are now housed in their own section, setting it apart from the rest of the site. By Law of Common Region it is now easier to identify them as a segment on the page. The contrasting background breaks the monotony of the site and draws the user's attention to the more important information on the website - the ways and methods to contribute to the charity.

CONCLUSION

While designing a website with the objective of increasing donations in mind, the main goal is to create an experience for the users that will make them feel compelled to donate. One of the ways to achieve this is to increase exposure and awareness about the stories of the beneficiaries. A relevant example would be the increased number of donation for COVID-related causes, which at the time had a lot of coverage showcasing the plight of foreign workers and low income families. Hence, the redesign is geared towards trying to emulate that effect.

​

The other objective in mind is to increase the ease of access to information on the site. Usually before donating to a cause, people tend to do research on the charities and the beneficiaries that they help before committing. By being up front on the different causes, ongoing campaigns and ways to contribute, users can have access to all these information without even leaving the homepage, reducing friction and allowing them to make the decision quicker.

bottom of page