TechSoup.org The place for nonprofits, charities, and libraries

5 Tips for Visually Enticing Nonprofit Websites

Turn your mediocre nonprofit website into an engaging, high-traffic destination

5 Tips for Visually Enticing Nonprofit Websites 
Al Lunt - October 25, 2011
Turn your mediocre nonprofit website into an engaging, high-traffic destination

While all websites share usability as a common denominator for their success, usability problems are not normally discovered until a user digs into the website. Holding a user's attention and interest, visually, when they first come to a site plays an important role in keeping them there.

Holding the interest of a new visitor and encouraging them to explore the website is particularly important for nonprofits because they are selling an idea, rather than a tangible product. Communicating your nonprofit's mission and goals requires careful consideration of the visual factors that will keep users on your website long enough to absorb your intent.

According to award-winning multimedia designer and producer Mike Schmidt at mohawkstreet.com, creating an "emotional connection is often the driving force behind these sites, but is also the driving force behind most marketing." With limited financial resources and regular reliance on volunteer help to build and maintain websites, nonprofits face a daunting challenge in creating sites that can make those emotional connections with their users.

This article focuses on five basic tips to help nonprofit web builders create visually enticing websites. These tips are not new, earth-shattering revelations and could apply to almost all websites. However, successful implementation of these tips could turn a mediocre but usable nonprofit website into an engaging, high-traffic site through enthusiastic word-of-mouth.

  • Create a clutter-free home page that encourages exploration. A cluttered home page that is overwhelmed with too much text or too many graphics may drive away prospective donors. The home page is often the first impression of a nonprofit that a user sees. It should never be thrown together haphazardly just to establish a web presence. Network for Good, a nonprofit that provides fundraising ideas for other nonprofits, recommends striving "…for simplicity and clarity in design. Your home page should be attractive and engaging, but uncluttered."

girleffect.org

girleffect.org

Girleffect.org targets younger people sympathetic to the plight of young girls in developing nations. The home page above the fold has only four navigation choices: Home, Learn, Give, and Mobilize. Scrolling below the fold reveals the call to action "3 Things You Can Do Right Now" — Donate, Spread the Word, and Learn. Fewer choices encourage exploration.

Operation Warm

Operation Warm

Operation Warm distributes new winter coats to needy children in the United States. Above the fold the home page offers three tabs that contain drop-downs with other selections. Scrolling below the fold "What We Do" appears and provides the mission statement in detail. The nonprofit's title and central picture communicate the mission without ambiguity.

  • Create brand recognition with a logo. Having a logo that reinforces the intent of the nonprofit or serves as a memory aid for the cause helps make a website memorable. Branding through a logo is part of the emotional experience you want users to have when they come in contact with your organization. Creating a logo is an investment and should be a high priority budget item. Ideally a nonprofit logo should be instantly recognizable, convey a sense of the nonprofit name or mission, and remain effective in a variety of colors or mediums.

Feed the Children

Feed the Children

The simple Feed The Children logo of a child with outstretched arms holding a food bowl instantly generates an emotional appeal for support. When linked with the tag line — "It's who we are. It's what we do." — it creates a powerful and memorable image.

The Michael J. Fox Foundation for Parkinson's Research

The Michael J. Fox Foundation for Parkinson's Research

The Michael J. Fox Foundation for Parkinson's Research uses clever graphic lines that give the illusion of a fox's body, streaming tail and pointed ears alongside the name of the nonprofit. The selection of the reddish-orange color of the logo and typography also reinforces the name of the charity and its mascot — the fox.

Wounded Warrior Project

Wounded Warrior Project

Some logos work powerfully in stark black and white. The Wounded Warrior Project logo of a soldier carrying a buddy off the battlefield is easily recognizable from its outline although you can't see the soldiers' faces. The grayscale banner graphic of rotating photographs of servicemen and women reinforces the intent represented by the logo — taking care of wounded warriors.

  • Create a consistent visual theme. Maintaining a consistent visual theme on a website helps unify the site and makes navigating it easier. Help establish consistency by selecting colors and fonts that complement the nonprofit brand and ensure they are maintained on all pages. Maintaining the same look on the website and mirroring it in promotional materials will reinforce your organization's brand identity. The visual theme should reflect the culture of the organization and at the same time be targeted to attract the donors, volunteers, and supporters you're organization is trying to reach.

History Pin

History Pin

History Pin, the 2011 Webby Awards winner in the charitable/nonprofit category, strives to "get generations talking more, sharing more, and coming together more often." It integrates Google maps, timelines, and uploaded personal photographs to create archives of places, events, and peoples' stories. With the look being part scrapbook and part school project, it is designed to appeal to both young and old and ultimately encourage intergenerational dialogue.

  • Create a video presence. Compelling video tells the story and helps hold the attention of website visitors. Although a nonprofit website can exist without video, it must compete with those that do. Creating a video that tells the nonprofit story can be an expensive undertaking if professionally done. But, it can also be done using simple point-and-record cameras with minimal editing for a less polished look that still tells your story. However, the payoff cannot be measured just in website hits. A well done video can extend its utility beyond the website itself as a centerpiece of a nonprofit's marketing effort.

Below are two examples of videos from larger organizations. You can also view samples of low-cost, short videos from TechSoup's annual Digital Storytelling Campaign.

Charity: Water

Charity: Water

One nonprofit that does a particularly good job with a video centerpiece is the environmental group charity: water. Focused on providing clean and safe drinking water to people in developing nations, charity: water's video "Water Changes Everything" uses powerful infographics to emotionally engage the viewer in the impact that clean water has around the world.

Witness

Witness

The nonprofit group Witness not only uses video to tell their story — video is the story. Their tagline "If a picture's worth a thousand words, what's a video worth?" powerfully communicates their goal: to use video to open the eyes of the world to human rights abuses. Its call to action not only seeks donations but also volunteers to translate and edit videos of human rights abuses from around the world.

  • Create an emotional connection using still photographs to tell the story. Use static or rotating photographs to "tell the story" of the nonprofit and put a face on the beneficiaries of donor involvement and contributions. Avoid stock photographs that might be used elsewhere because you want your photographs to be part of your branding. Unlike video, still photos allow the user to focus on a moment in time that is frozen, allowing contemplation and creation of a lasting connection.

Kiva

Kiva

Kiva has a mission to connect people through lending to alleviate poverty. Using micro-loans as low as $25 they help create opportunity around the world. The power of the website is that the donor can see the face and read the story of each loan recipient, creating an emotional connection.

Susan G. Komen for the Cure

Susan G. Komen for the Cure

The Susan G. Komen for the Cure website incorporates a Flash photo banner that can be scrolled to see pictures and read stories of volunteers, breast cancer survivors, and their family members. This connects the user to the cause, its beneficiaries, volunteers, and other donors.

Templates

Experienced web designers might recommend against using website templates because they can limit flexibility or have a cookie-cutter look. However, small nonprofits may want to consider them if their in-house design capability is lacking or they cannot afford to outsource their web design requirements. Many nonprofit templates are available online in various content management system (CMS) including the very popular WordPress.com. While not always ideal, starting with a template can provide a basic site that can often be customized later to incorporate more of your organization's signature branding and feel.

Conclusion

Creating a visually enticing nonprofit website does not require a significant budget. However, the goal of improving your website as your budget allows is a worthy one. Consider these few tips as a starting place to help you evaluate your existing website for areas where you can improve how you tell your nonprofit's story with enticing visuals.

Additional Resources

Image: Enticing images, Shutterstock