Non-profit Ideas

Creating an Informed and Engaged Audience with Non-profit Web Design

There are two things that any non-profit manager wants their audience to be:

  • Informed about the issues that the non-profit is concerned with, as well as how the non-profit addresses them
  • Engaged with the issues mentally, emotionally, and ultimately through charitable giving of money and/or other resources, such as time

If you were to take this at face-value, it would seem simple. Unfortunately, many non-profit web designers do take it at face value. They create a simple website containing lots of textual information, and a link to donate, at best adding a bit of emotion or personality through photography and graphics. They believe that the non-profit website visitors will read the paragraphs of information and become an Informed viewer. That visitor will either immediately relate and have an emotional connection with the issue, and take action, thus becoming an Engaged visitor, or the visitor is simply not concerned with the issue and would never have donated anyway.

But the web is more than a word document. It’s more than a brochure. The web allows the possibility of true interaction and immersion. Furthermore, the jump from an Informed visitor to an Engaged visitor is much too large to simply be left to chance. The visitor must be guided, involved, and cajoled down the path.

Recently the brand and website for an NYC-based non-profit called Art Start was redesigned by Pollen Brands. The purpose of Art Start is to nurture the voices, hearts and minds of at-risk youth through creative arts workshops conducted daily inside homeless shelters and alternative to incarceration programs throughout New York City.

Pollen Brands creative director and Art Start volunteer, Joey Rosa, and Pollen Brands Digital Director, John Natoli, specifically targeted the objective of bridging the gap between an Informed and an Engaged visitor.  Below, we analyze the key aspects of the redesign that address this.

1. Set the Scene

Step 1 is to immediately create a branded, issue-related environment for the visitor. The non-profit website should blend the emotions and attributes of both the issues concerned and the organization’s approach to addressing them.

non-profit web design example

The Art start website opens with an animation featuring large, striking photography of actual kids from Art Start’s shelter and incarceration-alternative programs. The graphics are gritty and the typography is in-your-face. The high-contrast, black and white photography and bright red accents immediately create an emotional setting of realism and urgency. This is the life of an Art Start kid – the painful realities of life on the streets and in shelters, contrasted with the sessions of free, sometimes explosive creative expression. The animation is not only utilitarian, showing the visitor different photos, but it also lends its movement to the ebb and flow of real life.

2. Immersion

All too often, a non-profit web designer will create a basic template for the website (or use a canned layout) and then leave the inside pages to be plain vanilla. Whatever immersion you have achieved by setting the scene on the homepage should not be forgotten as the user moves through the inside pages, particularly on important “action” pages. In life, often something unexpected happens, or catches our eye, that makes us smile, gasp, or otherwise react emotionally. In the Art Start website, Pollen Brands injected small accents and unexpected details to ensure that the user stayed present and in the mindset initially created.

For example, on the “Word On the Street” page, where Art Start showcases accolades from famous supporters, not only does the entire page shift color dramatically, using a gritty, but hopeful hand-drawn illustration style, but the clouds and the train in the background actually animate slowly across the screen.

On the Donate page, the color and illustration environment shifts again, while staying on brand, further immersing the viewer.

In addition, each inside page includes a header image, with custom illustrations overlaid.

3. Involvement

We’ve already taken a big step by appropriately setting the scene for the visitor and keeping them immersed throughout the website. But in order to elicit action, it’s necessary to take it a step further. Involving the user in the functioning of the website in a fun and fluid way is a method of building a form of “investment” in the experience. This is not investment in the literal financial term, but rather, by actively involving the user, an emotional connection with each interaction is created, however subtly, until the viewer begins to develop an emotional stake in the issue – a sort of psychological bias.

Pollen Brands achieved this mainly through interactive animation. For example, there are four large calls-to-action in the footer of every page. When the user hovers over each, it animated and comes to life.

Before Rollover:

On Rollover:

Also, on the Donate page, Pollen Brands built an interactive section where the user can see an example of what different donation amounts could provide to Art Start. As the user hovers over each denomination, the graphic on the right undergoes a lively animation and displays the appropriate information.

 


Most of us are familiar with the basics aspects that a non-profit website design should include: information, calls-to-action, etc. However, the true work and beauty of non-profit web design comes in the designer’s effort to bridge the gap between an Informed and an Engaged visitor.

To view the live Art Start website, click here.