Usability Review of Charity Websites Taking the Lead

Advertisement

Over the years designers have pushed themselves to create unique and inspiring designs. Companies have yearned to have websites which are innovative and make them stand out against their competitors. Yet charity websites have not progressed along with trends and expectations — they seem to have been designed for launch and then only updated with minor tweaks to suit the content.

It has become a recent trend for charities to look at their online identities and branding; spending money on creating user experiences which suit their user base, and over time getting people involved with their campaigns and messages.

Below we look at charity websites which have successfully developed their online brand using modern and creative ideas. We will also discuss how each charity website can be improved because, as we all know, not every website is perfect. There are always improvements to the design or usability that may have been overlooked by management, designers, or developers.

1. Red Nose Day

Red Nose Day1 is a fundraising event dedicated to raising money for Comic Relief2.

Red Nose Day website home page3

As you can see above, the Red Nose Day website design combines many different techniques to achieve a highly-minimalist and playful design. Throughout the website you can find non-web-based font headings implemented using sIFR4, feature panels built in Flash and a striking navigation, built using CSS Sprites.

The design uses a simplistic colour scheme of white, black and red. Using red along with black and white has a high impact on the user, and of course reinforces the “Red” in “Red Nose Day”. The red is predominantly used on call-to-action areas since it is effective in drawing the user’s eye.

Red Nose Day donate button
Donate button featured in Red Nose Day’s header

Because the Red Nose Day campaign reaches such a wide audience, the website design achieves the perfect balance between comical elements and factual information. Satisfying the requirements of such different audiences — the younger generation and more mature users — is a tough job and Comic Relief have managed it effectively and impressively.

Improvements

Nowadays, making content accessible should be a routine part of any site’s development. Unfortunately, the Red Nose Day design makes heavy use of light grey text on a white background. This lack of contrast can prove difficult for users with poor eyesight. A way to improve this would be to use a much darker grey or black in order to increase the contrast between the text and background. Alternatively, they could offer this option through user-controlled accessibility website tools.

As mentioned above, the purpose of the Red Nose Day event is to raise money for Comic Relief. As a visitor to the site, I would be interested to know the progress of the fundraising efforts. While a counter is included on some of the content pages, it would be more beneficial to the user if it was also displayed on the home page. This demonstrates to the user that the charity is currently active. Of course, they may have their reasons for excluding it from the home page that we’re not aware of.

Fund raising total featured on Red Nose Day content pages5
Fund raising total featured on Red Nose Day content pages

2. Give Us A Lift

The Give us a lift6 campaign website, run by WRVS7 is aimed at raising awareness of how older people struggle to get to the places they need to on a daily basis without the support of community transport.

Give Us A Lift website home page8

The design makes use of a large background image and cardboard cutouts to portray the theme of hitchhiking. Along with a striking colour scheme of a dark background with contrasting pink, green and blue elements, the design makes a big first impression on the user. These contrasting colours are carried through onto the content pages and, in the sidebar, two main call-to-action links in purple and green ask the user to either donate or volunteer.

A speedometer Flash element is positioned to the base of the page counting the number of volunteers. Due to this unique idea and design, the user’s eye is drawn down to the bottom of the page where another two call-to-action links can be found.

This campaign website makes heavy use of Flash elements in order to display donation totals, volunteer totals (in the speedometer), and the winners to the campaign’s Twitter competition. It is unusual to see such creative elements within a charity design and it’s refreshing to see a website that understands the content that needs to be communicated — but doesn’t sacrifice engaging creativity.

Twitter winners from the Give us a lift campaign website9
Twitter winners from the Give us a lift campaign website

Though the high impact design would have a stronger response from a younger audience, the website also caters for the older generation with attention to accessibility. On all content pages, a button can be found to increase the content’s font size using jQuery. Also, a dark font colour is used to add high contrast between the text and background.

Improvements

As mentioned above, the Give Us A Lift campaign website makes heavy use of JavaScript and Flash to display its contents. These elements could become unusable for the older user base as they may not have Flash installed, or have disabled JavaScript — making the video section impossible to use. The heavy use of Flash elements also increases page-load times. When implementing these elements, it is important to optimise the Flash and cater for circumstances where Flash may not be installed or JavaScript is disabled.

While the designer of the website has obviously tried to pay much attention to all of the details, with many elements popping out to the user, the main navigation seems to be lost and this can cause a problem for the user if they cannot instantly recognise the main source of navigation. This may be because the navigation not being featured within the main layout container; also, the lack of background colour makes it blend into the dark background image and the user could find it difficult to read the grey text on black. Brightening these elements and making them stand out more would make this design more polished and create a much happier user experience.

The Twitter page on the campaign website features a stripped-down version of Twitter’s feed widget. Though it is great to see this integration of social media into the website, the lack of creativity and separation between tweets creates an element that resembles Google Ads. This would obviously cause problems since the majority would most likely ignore this part of the page.

Comparison of Twitter Feed with Google Ads10
Comparison of Twitter Feed with Google Ads

3. ChildLine

ChildLine11 is a charity set up to aid children with a variety of problems ranging from helping with sexual and physical abuse to answering questions about concerns for parents and other family members.

ChildLine website home page12

The target audience of the ChildLine website is of a younger age, therefore the design reflects a very animated theme with cartoon characters repeated in the background, large font sizes and a bright colour scheme. The cartoon characters are also a representation of what the child might be feeling when visiting the website — a subliminal message that ChildLine understands what they are feeling, and can offer help.

Throughout the website, a yellow tab is fixed to the left side of the page and acts as a panic button for the user to click if they wish to quickly hide the website by sending the user to the Google home page. This implementation is similar to the “Feedback” button that popular sites use as part of the Get Satisfaction13 service.

Hide page tab from ChildLine website
Hide page tab from ChildLine website

Children are always looking to customise anything they can: desktop backgrounds, icons, Myspace layouts, etc. So ChildLine have made use of the MooTools JavaScript framework14 in order to allow the user to change the background colour and image of the website. After clicking the ‘Change Wallpaper’ tab at the top of the page, a white panel slides down for the user to customise the wallpaper of the site. These slide-down panels are used on many websites to display hidden forms and content.

A question is raised as to whether it is appropriate to allow this level of customisation on this kind of website. From a child’s perspective, however, this can create a fun user experience and a safe environment that they enjoy visiting. This creates trust between the child and the charity, which is an invaluable benefit. This sense of fun and trust will also mean the child is more likely return to the site.

Change wallpaper panel from ChildLine website
Change wallpaper panel from ChildLine website

Improvements

An important part of the ChildLine website is to offer help and protection to children in need. The “Hide Page” tab discussed above is an invaluable part of this website, helping children navigate away quickly if the need arises. A similar offering is a footer link labeled “Cover Your Tracks”. This gives the child information on clearing traces of their website visit from their computer.

Though the pull-down panel is great for small amounts of content (for example, the wallpaper customisation), large amounts of content can disrupt the page flow. At the top of the ChildLine design, “Accessibility” and “Help” tabs are used to display large amounts of text on the relevant topic. This heavy amount of content pushes the main content of the page down below the fold and can cause confusion. A way to improve the usability of these sections would be to take the user to a new content page where headings, white space and imagery can help break up the lengthy content.

Earlier we spoke about the bold repeating background that’s heavily featured in the design. When scrolling down a long content page, this repeating background can disrupt the user’s flow and be quite harsh on the eyes. Making the background image fixed (by simply adding background-attachment: fixed; to the CSS), the user will find reading down the page a lot easier and not be distracted by the moving background when scrolling.

The yellow “Hide Page” tab can for some users be easily lost in the bright colour scheme and bold background. Due to the idea of emergency and panic behind this button, perhaps swapping the yellow for a red could provoke an automatic user response. The use of red would also mean that this tab would be harder to lose in the colors.

4. WWF

WWF15 is the world leading charity in the conservation of wildlife.

WWF website home page16

The design for the WWF website is very different from the other three charity websites we’ve considered. The layout is very clean, grid-based, and focuses heavily on high-quality imagery to add a polished finish. By using a clean, organised layout and relying on eye-catching photography, the user is drawn to focus on what is important to the charity: its content and purpose. The WWF’s user base would be a more sophisticated and older generation than that of, say, ChildLine, so the user may be less daunted or afraid to read the content.

The features panel on the home page uses jQuery to rotate through different stories, latest news, and call-to-action buttons. Though the jQuery was custom written, it is possible to replicate using jQuery plugins or following tutorials such as Creating a Slick Auto-Playing Featured Content Slider17 on CSS-Tricks.

A neutral colour scheme of white, black, and grey is used to make any important call-to-action buttons more visible. These buttons have a striking green or orange background. When the user moves into the donate section of the charity website, the design is cut down to the bare minimum, again allowing the user to focus on the core messages. All navigation and unnecessary buttons are removed.

WWF donate now section
WWF donate now section

Improvements

In contrast to the other charity websites, it would seem that the primary objective of the WWF website is to teach users their purpose and goals. A lot of the content and call-to-action links are aimed at making the user read about the charity and what they can achieve. The “What We Do”, “How You can Help” and “Donate Now” buttons in the header vary in size, the former two being larger than the latter. This difference in size reaffirms that the charity feels that an understanding of their goals is important prior to donating. Users rank the importance of elements by their difference in size. If the charity wished to push more donations in the future, it would be effective to swap the sizes between these call-to-action buttons in the header, giving the ‘Donate Now’ call-to-action a higher importance to the user.

Varying call-to-action sizes in WWF design header18
Varying call-to-action sizes in WWF design header

As part of the WWF design, a description of what a £10 donation could purchase, or how it could help the charity, is featured within a panel. However, when within the donation section of the website, a £10 radio button is not offered to the user, potentially causing confusion. The user is then left with the options of £5.00, £25.00 or entering their own value. There is quite a large leap between the two default amounts, and the user may be inclined to opt for the £5.00 option. Contradictory to the prior emphasis placed on the importance of £10.00 as a donation value, it would be interesting to know how many users opted for £5.00 but perhaps would’ve been willing to donate £10. Perhaps including this as a middle-ground default donation amount would be a nice addition.

5. Macmillan

The Macmillan Cancer Support19 charity offers help to those living with cancer and their families.

Macmillan website home page20

When the Macmillan Cancer Support website initially loads, the user may feel overwhelmed by the amount of information and links on the page. However, this portrays to the user that the website and charity have much advice and support to offer. A way in which the design tries to break down the information, is by compartmentalising everything into panels which can be closed and re-opened via jQuery as the user sees fit.

An improvement on this, and in effect making the initial page load less daunting for the user, would be to have some the panels already collapsed. Therefore the user can expand only those they wish to read more about.

Collapsable panels on Macmillan Cancer Support home page
Collapsible panels on Macmillan Cancer Support home page

These panels on the home page use block headings with strong background colours to make defining sections and sub-sections easier for the user. Dark green headings are used to define a new section, whereas a lighter green heading is used to define a new sub-section. By making these headings so definitive the user can break the content down into more readable chunks.

The bright colour scheme used in this design can create an emotional response from the user. The user may be made to feel more light-hearted and hopeful through the use of warm earth colours.

Improvements

The Macmillan design makes use of a lot of call-to-action buttons with distinct background colours. Unfortunately these links are left as inline elements, meaning that only the text is clickable. It would be more user friendly if these were block-level elements where the click area of the link would include these strong background colours. By increasing the clickable area, the chances of a successful click from the user is heavily increased.

The charity’s name and tag-line are displayed in the top left, as is customary. These elements, however, are not clickable, so this could cause brief confusion when the user is looking for a link to the home page.

Unclickable Macmillan title and strap-line in header
Unclickable Macmillan title and tag-line in header

A large usability error on the Macmillan sign-in form is the lack of labels within or next to the appropriate fields. The user is left confused and must guess what information to put in which field. Though users are used to entering two pieces of information (user name and password), it is not clear whether the site requires a username or email address. As internet users, we have a long list of websites which we hold accounts for, all with varying requirements for a successful login. On the “Online Community” page, the same form uses labels within the fields (JavaScript is used to remove these labels when the user focuses on the field). To improve the consistency of the website and allow for a more user-friendly form, these labels should be applied across the website.

Sign In Form without appropriate labels on Macmillan website21
Sign-In Form without appropriate labels on Macmillan website

6. DogsTrust

DogsTrust22 is a charity that aims at finding homes for stray and abandoned dogs.

DogsTrust website home page23

The DogsTrust design uses a high-impact colour scheme mainly consisting of yellow, black and white. The yellow immediately catches the user’s attention, and can be interpreted as a positive, happy colour.

The main site navigation features many commonly-used techniques such as rounded corners, gradients, and a subtle 1px white line across the top. These elements, combined with the black create a visually effective navigation. The navigation only consists of five links, therefore giving users fewer choice, and creating a more focused user journey.

DogsTrust website's main site navigation
DogsTrust website’s main site navigation

The home page design consists of minimal content and uses effective white space to allow everything to appear above the fold without looking cluttered. The users of the DogsTrust website are highly likely to be dog lovers and therefore the use of dog imagery on the four main call-to-action areas would certainly draw the user’s attention. These areas also feature four varying colours which contrast well with the yellow and black.

call-to-action buttons with dog imagery and contrasting colours
Call-to-action areas with dog imagery and contrasting colours

Improvements

Though we briefly discussed above that the home page uses whitespace effectively to reduce clutter, the header contains many links and words; the user could get easily confused. With login, register, contact, privacy and shopping links, a search form, and two taglines, the user is given too much choice, so this section could be improved.

While going through the process of donating, there are certain fields that cause the page to refresh and brings the user back to the top of the page again. The user is then required to scroll back down the page to continue filling out the form. During this process, this page refresh occurs 3 times, which can be rather annoying. It would be beneficial to develop the form using alternatives technologies, such as Ajax, which would remove the need for page refreshes.

The imagery on the DogsTrust website features happy, healthy dogs that need re-homing. It is assumed that this use of imagery is successful in receiving donations or re-homing dogs. However, similar charities make use of imagery where the dogs appear unhealthy and unhappy. It could prove useful for the organisers of DogsTrust to try out this type of imagery alongside the current images through A/B testing24, therefore seeing which type of image is more effective in converting website users into contributors.

7. Shelter

Shelter25 is a housing and homelessness charity providing advice, information, and advocacy to people in housing need.

Shelter website home page26

The logo featured in Shelter’s design is simple and effective. While being easy to read, the typography of the “h” is suggestive of the charity’s purpose. By using the colour red, the user is given a sense of urgency. The audience of the Shelter website varies a lot from a younger to an older generation, therefore the design is very refrained and simplistic. This allows the message to be portrayed through the content rather than through heavily-designed elements.

Throughout the design you will notice use of solid horizontal borders and lines which give a sense of structure and organisation. The lines allow the user to break the content up and be more easily read, but can also be interpreted as a symbol of shelter.

The footer features links to social media profiles such as Twitter, Facebook, and YouTube. This suggests to the user that the charity is up to date with the latest trends and advertising techniques. Users may be intrigued to click these icons and discover more content.

These social media icons also use jQuery to create a nice rollover effect which highlights and changes the text underneath to a descriptive caption of the icon.

Rollover effect on Social Media Icons
Rollover effect on Shelter’s social media icons

Improvements

When browsing the Shelter website, the user can find themselves clicking through a lot of links until they find the page they want. This can be due to the large amount of call-to-action buttons and lack of whitespace on certain pages. By increasing the whitespace between elements, an easier user experience can be created and also makes content easier to break down and consume.

Example page with large amounts of links where whitespace can be improved27
Example page with large amounts of links where whitespace can be improved

Again, while browsing the child pages of the Shelter charity website, links to the donate section are easily lost among all the call-to-action areas, pictures, and content. Perhaps by making the background of the “Donate” tab in the top navigation red, utilising the red from the existing colour scheme, this may draw the user’s eye. The user would spend less time trying to locate the donate section.

8. Sponsor Lee

Though not a charity website, Sponsor Lee28 is a microsite intended to raise money for Action for Kids29 charity.

Sponsor Lee website home page30

Using a cool colour scheme of blue, silver, and white, along with friendly vector illustrations, gives the user a professional impression. This is important because the user wants to believe they are giving money to a good cause and not being ripped off. Lee Munroe, the designer of the site has been clever with his use of the fold as all important information is displayed at the top. Though users are not afraid to scroll31, they do not have to look too hard to find the information they need.

Included in the header is a progress total and aim for the sponsorship. By including this in the design, the campaign is made to feel more realistic and the user can then identify with how much of a difference they, themselves, can make. Now the campaign has finished, users can see how well Lee has done against his target. By putting this total in yellow, the number stands out and the user can see immediately that Lee beat his target.

Improvements

The Sponsor Lee website displays a lot of creativity from the colour scheme to illustrations in the header. Unfortunately towards the bottom of the design, it comes across that parts are unfinished or broken, for example the social media links and footer. This can give an impression of lack of commitment or a rushed process.

Sponsor Lee website footer
Sponsor Lee website footer

9. ShelterBox

ShelterBox32 is a charity that helps communities recover from natural disasters. This includes providing “emergency shelter, warmth and dignity to people affected by disaster”.

ShelterBox website home page33

Like many of the charity websites we have already discussed, the ShelterBox design uses a very neutral base colour scheme of grey and white combined with a high contrast green. Main call-to-action buttons are then given a yellow background to effectively stand out to the user. On the right of the home page, the design depicts to the user exactly what ShelterBox as a charity provide along with a counter-style number showing the number of boxes distributed so far by the charity.

By showing the counter and including additional zeroes at the beginning of the total, the user understands that this is an ever-increasing number and therefore, an active campaign.

ShelterBox panel featuring box shot and box counter total
ShelterBox panel featuring box shot and box counter total

Adjacent to this panel, an auto-rotating image gallery is displayed using the jQuery Cycle Plugin34. This acts as a call-to-action for the user to find out more, but also shows the user the charity’s work first-hand. This makes the user feel directly involved and may want to do more to help. Overlaying the image, a caption with a slightly transparent background that describes the content of the image is displayed. This method is currently very popular in image galleries.

Auto-rotating image gallery on ShelterBox home page35
Auto-rotating image gallery on ShelterBox home page

Improvements

Important elements of the website are lost due to the lack of creative design such as the “Latest Deployments” and “International” sites lists on the home page. The charity should style important elements such as these so that they stand out more. This can be achieved perhaps by adding background colours and making them bigger. By increasing the size of elements, the user will recognize these as more important.

Latest Deployments section on home page
Latest Deployments section on home page

The design lacks a sense of containment — the content of the website seems to bleed into the white background of some pages, making reading content difficult. Perhaps by making the background of the body a light grey and keeping the main container background white, a barrier can be created between the content and the rest of the page.

10. Action for Children

Action for Children36 is a children’s charity that offers support to vulnerable children in the UK.

Action for Children website home page37

The Action for Children website design is similar to that of Red Nose Day, using a very neutral colour scheme consisting of cream, white, and a contrasting red. Elements of the design are constructed of sketch-like lines to resemble a children’s drawing.

Elements of high importance are given a light cream background to help them stand out against the other sections that have a white background. The user can therefore easily detect which sections to pay more attention to.

Embedded on the home page is a video of British actress Davina McCall38. By having a frozen shot of a celebrity on the home page, the user is reassured of the charity’s success and credibility. The effect being potential donations from a user who is feeling confident that the charity is well supported and perhaps inclined to become involved because of celebrity associations.

Once the user’s eye is drawn to the celebrity viral, they will notice four call-to-action areas displayed on the right. The wording of these are very snappy and simple to suggest to the user that these actions are easy, but meaningful. Alongside the wording, hand-drawn illustrations are used to add interest and creativity.

Improvements

When viewing the sitemap of the Action for Children website, there is a bug in the CSS of the columns. Columns are too wide to fit the intended number in a row, meaning columns are misplaced below others on the right and breaks the flow of the page. This can be fixed by either making the content area wider on this page (as there is no sidebar), or adding a clearing element after each row. Making the columns easier to read allows the user to find the page they’re looking for quicker.

Another bug is the functionality of the inline popup windows that appear after clicking the “Send Page”, “Feedback”, and “Share Page” links. The windows are cut off underneath the title, making the forms unusable.

Example of inline popup window bug on Action for Children website39
Example of inline popup window bug on Action for Children website

Support Needed: Stand With Haiti

As many are aware, Haiti recently suffered a major earthquake which devastated the country. Stand With Haiti40 is a campaign website set up by Partners In Health41 who, even prior to the earthquake, have been providing medical care in Haiti for over 20 years.

Stand With Haiti website home page42

The first thing you notice about the Stand With Haiti campaign website is the colour scheme. The blue is both soothing and in keeping with the Partners In Health branding. In contrast with the blue, orange and deep reds are used on call-to-action buttons and on important pieces of information that portray a sense of urgency and high importance.

Consistency with the deep red is used so the user can easily recognise buttons and links — meaning an action is required from the user. Through the use of page structure, size, and order, a user visiting the Stand With Haiti website is clearly provided with an order of priority for certain aspects of the website. The first being to Donate using the large red “Donate” button found at the top of the page within the main header. This element is one of the first things the user’s eye is attracted to when landing on the website.

Directly underneath this large “Donate” button are two smaller, slightly darker red buttons. The purpose of these is to help users share the site on popular social media websites, with the goal of increasing the number of visitors and donations.

Finally, the user is left to browse and read the site’s content at their own leisure. Being a current crisis, it was an obvious choice to give higher importance to donations and spreading the word. By prioritising areas of the website, a simpler and more effective user experience is created.

Prioritised buttons featured in Stand With Haiti header
Prioritised buttons featured in Stand With Haiti header

While acting as a medium for receiving donations, the home page of the Stand With Haiti website acts as a news hub for the latest pictures and information. This is crucial for users who wish to be kept up to date with the crisis and know how their donations are helping.

A jQuery-built image gallery, similar to ShelterBox, is used to display images of the crisis. Underneath there is a list of recent blog posts and instant updates from the charity’s Twitter feed.

Improvements

As we discussed above, the design features a lot of orange and red buttons. However, none of these buttons have hover or visited states. Adding these to the links and buttons would increase the usability of the website, showing the user clickable areas more prominently and helping them recognize where they’ve already been.

Donations being one of the main purposes of the Stand With Haiti website, it is important that the donate form is usable. Unfortunately, at first glance the donate form looks cluttered.

Stand With Haiti donate form43
Stand With Haiti donate form

The form would be much more usable and readable with better use of whitespace. It could also improve if the form labels were clickable to their appropriate input field. While this provides easy-to-select fields, it also ensures that people with screen readers and auto-fill functions can use the form.

After adding effective white space and increasing the usability of the form fields, a button similar to those used on the home page of the site can be used for the “Process Contribution” button. This should also be repositioned as users expect submit buttons of this kind to either be on the left or right. Few forms, especially this wide, place their submit buttons in the middle.

Useful Resources

Many of the methods mentioned above can easily be achieved yourself:

Footnotes

  1. 1 http://www.rednoseday.com/
  2. 2 http://www.comicrelief.com/
  3. 3 http://www.rednoseday.com/
  4. 4 http://novemberborn.net/sifr3
  5. 5 http://www.rednoseday.com/
  6. 6 http://www.giveusalift.org.uk/
  7. 7 https://www.wrvs.org.uk/
  8. 8 http://www.giveusalift.org.uk/
  9. 9 http://www.giveusalift.org.uk/twitter.aspx
  10. 10 http://www.giveusalift.org.uk/twitter.aspx
  11. 11 http://www.childline.org.uk/
  12. 12 http://www.childline.org.uk/
  13. 13 http://getsatisfaction.com/
  14. 14 http://mootools.net/
  15. 15 http://www.wwf.org.uk/
  16. 16 http://www.wwf.org.uk/
  17. 17 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
  18. 18 http://www.wwf.org.uk/
  19. 19 http://www.macmillan.org.uk/
  20. 20 http://www.macmillan.org.uk/
  21. 21 http://www.macmillan.org.uk/
  22. 22 http://www.dogstrust.org.uk/
  23. 23 http://www.dogstrust.org.uk/
  24. 24 http://20bits.com/articles/an-introduction-to-ab-testing/
  25. 25 http://england.shelter.org.uk/
  26. 26 http://england.shelter.org.uk/
  27. 27 http://england.shelter.org.uk/get_advice
  28. 28 http://sponsorlee.org/
  29. 29 http://actionforkids.org/
  30. 30 http://sponsorlee.org/
  31. 31 http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
  32. 32 http://www.shelterbox.org/
  33. 33 http://www.shelterbox.org/
  34. 34 http://jquery.malsup.com/cycle/
  35. 35 http://www.shelterbox.org/
  36. 36 http://www.actionforchildren.org.uk/
  37. 37 http://www.actionforchildren.org.uk/
  38. 38 http://en.wikipedia.org/wiki/Davina_McCall
  39. 39 http://www.actionforchildren.org.uk/content.aspx?CategoryID=75
  40. 40 http://www.standwithhaiti.org/haiti
  41. 41 http://photos.pih.org/home2.html
  42. 42 http://www.standwithhaiti.org/haiti
  43. 43 https://donate.pih.org/page/contribute/haiti_earthquake?source=earthquake&subsource=standwithhaiti
  44. 44 http://www.smashingmagazine.com/2009/10/22/rich-typography-on-the-web-techniques-and-tools/
  45. 45 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  46. 46 http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/
  47. 47 http://www.smashingmagazine.com/2009/07/28/mootools-tutorials-and-resources-round-up/
  48. 48 http://www.smashingmagazine.com/2009/01/15/45-new-jquery-techniques-for-a-good-user-experience/
  49. 49 http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/

↑ Back to topShare on Twitter

Ben MacGowan is the Lead UI Engineer for a digital agency based in Reading UK. With a keen eye for detail and passion for innovative designs and cutting edge technologies. Ben also carries this passion for the industry and sharing knowledge across to being one of the core organisers of a free bi-monthly event for web designers and developers, Breaking Borders.

Advertising
  1. 1

    AWESOME!

    I just picked up a new client that is a non-profit charity, and they need their website updated and moved to a CMS, so the timing of this article is great.

    0
  2. 2

    Great Article! Interesting read about the focus on helping and supporting others and the importance of usability. Like this article :)

    0
  3. 3

    Wish this was posted a few weeks back as I recently did my first charity website: Hope Help & Relief Haiti ( http://www.hopehelpandreliefhaiti.org/ ). It had to be completed within 1 day but I think it turned out well enough using some of the basic principles associated with web design and call to action. What do you think?

    Great job on analyzing each website Ben, a valuable insight. Thank you.

    0
    • 4

      Really nice work there Jacob.

      I designed and maintain http://www.dorsetandsomersetairambulance.co.uk and getting the call to action right is always a toughy, especially with lots of content to display.

      You site really leads me onto that train of thought. very nice. Gives me some inspiration of how to keep things simple.

      0
  4. 5

    este tema es muy demandado por muchos de mis clientes siempre quieren el liderazgo, y manchar su conpetencia con el diseño de su sitio web que algo tan único e innovador me guió mucho sobre las nuevas tendencias es algo que debe estar presente en los innovadores diseños.

    Now I’m designing a website for an organization called “Entrepreneurial Vision Group” which is nonprofit … are maintained with donations and support from other companies to provide events for students on leadership and success … not a challenge but if I apply my potecial to give maximum value to my company .. HOZTdesigns

    Siempre ser único en su estilo y mostrar a sus clientes el máximo de su potencial
    @ HOZTdesigns <¡Sígueme!

    0
  5. 6

    it would be the awesomest of things if smashing magazine can sponsor a wordpress theme for fun(d) raising :) plz plz plz it owuld help many non profit NGO – save the world . one theme at a time :D !

    0
  6. 7

    Great Article, I’m a big advocate for NPO’s getting exposure online as well as building better user-friendly websites. I’m going to be referring to this piece from now on. Thanks!

    0
  7. 8

    I really wish http://www.invisiblechildren.com could have gotten on this list.
    But either way good article!

    0
  8. 9

    Really enjoyed this piece, thank you. Amongst the fabulous articles produced by Smashing Magazine, this article really stands out as it focusses on charities (awareness!) and applauds good design whilst giving specific tips/areas for improvement, so it goes beyond just a simple showcase.

    It’s certainly made me take a closer look at some of the less well-known charities e.g. Give me a Lift, as in contrast you see a lot more about Red Nose Day, for instance, in the media.

    0
  9. 10

    Great work…so thorough and provides some good food for thought for those of us revising old sites or rebuilding a site for a client. Thanks!

    0
  10. 11

    wow, very clean and well done. Great use of content, I wonder what CMS they use if they do in fact use a non-commercial one.

    0
  11. 12

    Good to see you pushing the importance of usability, Smashing Magazine. Good job!

    0
  12. 13

    Looks good. Probably should have added this website into the mix. Overall, I think it’s the best example I’ve seen in communicating a message and getting people to take action.

    http://www.charitywater.org/

    0
  13. 14

    ahhhh perfect just what i needed couldn’t have come at a better time

    Great Post

    0
  14. 15

    Hey Guys,

    have look at this NGO from germany http://www.2aid.org. they have also very cool deisng. And good example in communicating a message and getting people to take action in Germany.

    0
  15. 16

    Hi
    Take a look at this website which should also be added to the list above: http://www.gotchicken.org – So far has been very successful in conveying the correct message of the charity and getting donations!

    0
  16. 17

    This is a fantastic article! It’s great to see so many UK based websites as well :)

    0
  17. 18

    Interesting that the Red Nose aesthetic seems to be inspired by David Firth’s flash animation: Shaky text a la Salad fingers, similar simplistic art style. Could all be a coincidence of course!

    0
  18. 19

    Great article. This year I helped launch a website for a non profit aimed at saving a Seal Pupping area in San Diego http://savesandiegoseals.com/ I can see how many of the design principles shown (especially in the WWF) would work well for my site. Thanks for this great collection/analysis.

    0
  19. 20

    Great & useful article. We did a charity site for last Christmas offering an easy and playful way of donating to Africa by clicking a sheep herd http://code-to-africa.de

    0
  20. 21

    Great insight into usability in this article! Can I just point out that Davina McCall is a TV presenter, not an actress!

    0
  21. 22

    Nice Article !

    0
  22. 23

    I’m the Head of Online at WWF, and I’m really happy with your review of our site. You’re on the money with the relative sizes of ‘What we do’ and ‘How you can help’ versus ‘Donate’. It’s a great point about the donation values not tallying – I think this might be an oversight, but we’re looking into it.

    Hat tip to @Torchbox for the homepage carousel and the donation bits of our site. We’re working with them on a bit of a design refresh for the site. Keep an eye out for it later on in the year.

    0
  23. 24

    Hello, I’m the lead designer at Bostock & Pollitt, Macmillan’s digital partner. Thanks for the review – both us and Macmillan completely agree with your comments, and are actually going through a review process now, improving on all you’ve mentioned and more.

    So watch this space :)

    0
  24. 25

    Michael Murdoch

    March 1, 2010 10:14 am

    I think you should also check out http://www.lovebox.org.uk ! This site help charities spread their message via the web. It’s big, bold and helps the world!

    Michael Murdoch

    0
  25. 26

    Northern Irish based charity, Praxis Care’s website has been newly re-designed also – see http://www.praxisprovides.com – it has got a great modular design and everything is really easy to find.

    0
  26. 27

    Great collection. It’s always inspiring to see “brick & mortar” organizations invest so much into their web presence. A site that I donate to was down for a bit, but when I last checked it was completely redesigned and running WordPress! http://comeandlive.com/

    Thanks again for the great gallery.

    0
  27. 28

    Pandora batteries

    March 1, 2010 9:27 pm

    It’s an excellent article. And you are doing a great job. God Bless you for that. I really liked your spirit of not only think about gaining profit and earning money. You also think for others. Specially who really need help from you and other people. Hats off to you guys. Very well done.

    0
  28. 29

    charity site idea is very impressive…

    0
  29. 30

    Great post thankx a lot =)

    0
  30. 31

    Would have been good to see http://www.raceforlife.org in this article as well

    0
  31. 32

    Great article. However, there are some very good charity websites out there, like the one built for Disabled Pride UK. org by Percorsi Group. Simple, easy to use and very accessible. It would have been nice to see some good examples like this one shown .

    0
  32. 33

    Come on guys, this is not an opportunity to get a free plug for your charity of choice. I think we all agree some of the charity websites out there are a credit to all involved. Anyways I just wanted to add to the point about the ‘hide page’ on the childline website. Bearing in mind the existence of a feature to change the background, it would not have been too difficult to make the switcher change the background colour of the ‘hide page’ tab as well to make it stand out better on each background (red on some, yellow on others). I think browser width and resolution also have a part to play. The more ‘white space’ between the browser chrome and therefore the tab and the edge of the content section the better. Finally for an optimal result and something that has sadly been overlooked…

    Picture this young Tommy is looking at the site and suddenly hears someone coming, or the door opening. In a panic he goes for the button, but overshoots, clicking too high or too low. How hard would it have been to make the tab bigger. After all it isn’t just a gimmick is it? It has a very very important purpose. (what happens to Tommy if he is caught!) I wonder if the tab was usability tested to determine the optimum size??

    It may also have been worth considering disabling the back button and clearing the browser history programmatically [thinking out loud : is that possible?] I mean the idea is to protect Tommy from being found out that he was looking at childline, right?, or was it just a feature thrown in to increase the price charged by the developers???

    0
  33. 34

    I’d love to know what you think of the new Greenpeace look and feel that’s showcased on the Greenpeace Africa site: http://www.greenpeace.org/africa/

    0
  34. 35

    Anyone else has their Smashing RSS-feed stuck on this article? Newer articles won’t show up for me in my RSS-reader.

    0
  35. 36

    Getting an agency like Clearleft was a very good move for WWF. (Their work in progress Flickr: http://www.flickr.com/photos/clearleft/sets/72157614259455813/)

    0
  36. 37

    Were all of these built using WordPress? And were all CMS sites? If not, which were WordPress (and of these, where were CMS sites?)

    0
  37. 38

    Most are from UK :-/

    0
  38. 39

    Lifesaving leukaemia charity The Anthony Nolan Trust will tomorrow unveil what it believes to be the UK’s first interactive Charity 3D website.

    The new Anthony Nolan site will deploy the latest computer technology for a vital cause – the charity finds matches for leukaemia patients who need a lifesaving transplant.

    http://www.anthonynolanin3d.org.uk

    What do you think?

    0
  39. 40

    the deep red is used so the user can easily recognise buttons and links — meaning an action is required from the user. Through the use of page structure, size, and order, a user visiting the Stand With Haiti website is clearly provided with an order of priority for certain aspects of the website.Thank you,.

    0
  40. 41

    the deep red is used so the user can easily recognise buttons and links — meaning an action is required from the user. Through the use of page structure, size, and order, a user visiting the Stand With Haiti website ,.Thank you,

    0
  41. 42

    I think this is also one of the fastest way to get the charity help. I also saw the similar kind of post from BoxGroove.com blog post long time back.

    -1
  42. 43

    Great Article, this one is the best way to describe internal element integration of the designs or objects.

    0

↑ Back to top