ServanTek Blog

Learn how to improve your nonprofit's online presence.

5 Ways Your Nonprofit Organization Can Build Trust on the Web

Building Trust on the Web

Whether you're a small, local nonprofit or a nationally recognized brand, it's critical to build trust among those who visit your website. Your online traffic may come from a Google search, a Facebook ad, a YouTube video or a partner link. Given that this may be the very first encounter they have with your organization, it's critical to instill trust in your online audience. Here are a few simple things you can do on your website to instill confidence in those who may be unfamiliar with your organization and/or your cause.

1. Use real photos.
We've mentioned this in previous posts, but it's worth repeating. Oftentimes, people want to see the real people who work for and with your organization. They want to see actual events you've participated in, actual staff members, and in cases where appropriate, they want to see the faces of the people you've helped. When site visitors can picture themselves among those pictured on your website, they may be more apt to get involved. While stock images may be a little easier to attain, they won't inspire the level of confidence that comes from seeing real people engaging in worthwhile causes.  

2. Put your online donors at ease. 
With the sheer number of security breeches we've heard about over the past few years, people may be more apprehensive than ever about entering their credit card data in an online form, especially if they're unfamiliar with your organization. Make sure your donation form is PCI compliant, and you're handling credit card info according to the highest security standards. Also, be sure to include any pertinent security badges that will show donors you're serious about protecting their identities.  

3. Be transparent about how funding is used. 
Offer real-time data about the work you've done, the people you've helped, and the projects you've been a part of. Consider using an infographic to display the breakdown of your funding so users can see how their donations are being used. Your transparency with funding will go a long way to ensure potential donors that their money will be used responsibly. 

4. Consider blogging. 
If you have the resources to keep up with a blog, invest your energy in sharing helpful information and organizational updates online. By publishing a blog, you'll develop an online voice, which will help people identify with who you are and what you're doing. By publishing regular updates about recent events or projects, you'll give your readers a feel for what you're doing on a day to day basis, and they'll get a better understanding of how their money or time would be spent if they chose to donate or volunteer.

5. Be clear about your mission. 
You may think that your mission statement belongs only on the "About Us" page of your site. In actuality, your mission should be woven throughout all pages of your site. Whether your viewers are reading an article on your blog, a notice about an upcoming service project, or a synopsis of a fundraising event, they should be able to clearly identify your mission. This doesn't mean every page of your site needs a word-for-word mission statement for your organization, but it does mean that your mission should be at the core of all of your online communications.

Continue reading
106 Hits

Building a Quality Nonprofit Website: Mockups and Templates

Mockups and Templates

Once you've created your sitemap and laid out your wireframes, you're ready to select a template or begin designing mockups. If you have some experience with design and you have access to a developer who can help you convert a mockup into a template or theme for your content management system, you may be able to begin designing a mockup on your own. This is the phase where you can let your creative energies flow, and you can introduce colors, fonts, and images to bring your wireframes to life. If you do not have access to a developer to help you convert a mockup into a template, or you're not comfortable working in Photoshop or similar program to create a page design, it may be a good idea to move directly to selecting a flexible template or theme that will allow you to layout your pages in a way that most closely resembles your wireframes.

Here are a few tips to keep in mind when converting your wireframes into beautiful page designs for your site.

1. Consider your color scheme.
Do you already have a logo? If so, you may already have a color pallet in mind. But if you need more options for accent colors or you're starting from scratch without a logo, there are several free online tools that can help you decide on an appropriate color scheme for your site. For example, Pictaculous will allow you to upload a photo to get an idea of the best color pallet to pair with that image. This tool could be particularly helpful if you have a featured image that you'd like your design to revolve around. As long as the photo's color scheme fits in with your overall identity and mission, this tool could help you select the right tones to use throughout your site. Alternatively, sites like Adobe Color CC and Paletton can help you select complimentary colors based on a single color of your choosing.

2. Repurpose design elements for a seamless user experience.
When introducing design elements like button styling, headings, and image styles, consistency is key. Be sure to implement similar styles for features with similar functionality. For instance, if your donate button has a certain color and effect, it's important to keep this consistent throughout all pages of your site. By making your donate button clearly recognizable on all pages, users will notice it with a glance, rather than having to search the page for the word "Donate." Likewise, make sure headings with similar importance share the same font and weight throughout the site. Your users will recognize their importance based on these styling elements and they'll be able to navigate your site with ease.

3. Use appropriate fonts.
Many themes and templates will offer a variety of web fonts for use throughout the site. Oftentimes you can choose a default font to use for your main headings across the board. If you're designing a mockup from scratch, be sure your font selections are from a web font library so they can easily be implemented on your site. Google has a popular web font library available here. If you're not quite sure which font family to use, take a look at this infographic from for some ideas. 

What stage are you at in your redesign? Let us know in the comments below. 

Continue reading
438 Hits

Building a Quality Nonprofit Website: Wireframing


In our last post, we explored the topic of site mapping, the first step in our three-part series on laying the foundation for an effective nonprofit website. Once you've finalized your site map, you're ready to begin the process of wireframing. This is where you'll make decisions about individual page elements and where they should appear on the screen. It's important to remember that even though you'll be working on page layouts, it's not yet time to begin the process of styling these elements. In fact, the most effective wireframes will be devoid of color, images and font selections, like the one pictured here. While your sitemap gives you a good bird's-eye view of the site, your wireframes will provide you with a page-by-page architecture or blueprint, allowing you to consider user interactions on each page.

Wireframe Example

While you might be tempted to skip this step altogether and move on to the look and feel of your website, wireframing is a crucial step in the process for two reasons. First, a wireframe allows you to focus on functionality. Before you make decisions about how anything should look, you'll need to consider the user story, or what users should be able to do once they arrive on your site. Do you want them to call you? Do you want them to subscribe to your newsletter? Do you want them to make a donation? Whatever actions you want them to take will need to be addressed in your wireframes. That said, you'll need to consider where and how to incorporate these functions into your site. You'll also want to use this opportunity to consider what type of priority to give to each of these functions. This can be determined by the placement and size of these features on the page.

Next, a wireframe forces you to consider usability. Without getting caught up in the more subjective discussions about the colors or shading for each element, you'll be able to determine the best placement and priority of specific content or calls to action to direct visitors where you want them to go. Even if you don't have all of your content completed yet, it's a good idea to define what messages will be used and where these will be placed. Once you've defined what you want users to do, you need to consider the most intuitive way to direct them to do it. Maybe that means your donate button should take up a little more real estate. Maybe that means you need to re-think how many fields appear on your newsletter subscription form. Or maybe, you'll want to move some of your content a little lower on the page so the action items are closer to the top of the screen. The key to creating a user-friendly wireframe is to consider the needs of your audience and how to meet these needs in the most intuitive way possible.

Whether you're using a pen and paper or a more sophisticated piece of software to create your wireframes, the goal remains the same. You need to first determine the functions of your website, and then organize and prioritize these elements in the most intuitive way possible. If you're looking for a tool that will allow you to build a wireframe with a web-based application, one great option is This tool has a minimal monthly fee for a limited number of projects, and it allows you to design and connect countless pages within your project. If you're looking for a tool you can download and use on your computer, Pencil offers the basic functionality you would need to design a wireframe for a simple site. A more comprehensive list of wireframing tools can also be found here.

Continue reading
736 Hits

Building a Quality Nonprofit Website: Site Mapping

Site Mapping

Are you considering a website redesign? Perhaps you're just getting your nonprofit organization off the ground and you're starting from scratch. In either case, if you're in the planning stages of building a new site, it's important to lay a foundation that will take into consideration your organizational goals, your engagement with site visitors, and your site's overall user experience. No matter what the size of your organization or the amount of content you intend to publish, this three-part series on structuring an effective nonprofit website will outline the basic steps you need to take to get started.

Sample Site MapThe first step in building an effective nonprofit website is the creation of a site map. A site map is a flow chart or basic mapping of the pages on your site and how they are connected. This map will show you a hierarchy of your content, while also allowing you to see paths of navigation from one page to the next. Typically, a site map will display your main menu items, and show you how sub-pages will be organized and connected to these main pages or categories. Be sure to consider the key elements and action areas of your site, and how you want to direct users to these areas.

By laying out your website architecture at the outset of your project, you will be able to get a bird's-eye view of the structure of your site, and you'll also be able to ask yourself some good questions about the "why" behind what you're doing.

For example, when reviewing your site map, you may want to consider the following questions:

    • Why are X, Y, and Z, the main level navigation items? Do these categories provide the best structure to organize my content?
    • Does the main page include direct access to the key areas of the site where I want users to navigate most frequently?
    • Are there any sub-navigation items that need to receive a higher priority? Have I allowed for easy access to these pages? Do any of these pages need to be more prominent or directly accessible from the top level navigation?
    • Is the hierarchy of content intuitive for site visitors?
    • Is any of the content redundant?
    • Did I leave anything out that should be included?

If this is your first time developing a site map, the process can be a little overwhelming. Be sure to invest some time to think through and identify your key objectives in building a site. It's easy to get caught up in the look and feel, but your primary goal should always be to drive your audience to action in a way that is user-centered. In order to do this, you'll need a solid site map. Once you've reviewed your site map to make any necessary adjustments, you'll be prepared to move on to your wireframes, which we'll discuss in our next post.

Continue reading
805 Hits

Free or Discounted Tech Tools for Nonprofits

Free and Discounted Tech Tools

In the spirit of giving, we'd like to share some free and discounted tech resources for nonprofits. Whether you're looking for an email marketing platform, software and licenses for your office, or tech training, there are a variety of resources available to nonprofits at discounted rates.

MailChimp is a great resource for organizations interested in getting their message out through email marketing campaigns. It allows you to send up to 12,000 emails a month to up to 2,000 subscribers for free. And if you need to reach more than 2,000 subscribers, you can purchase a plan and receive a 15% non-profit discount. Learn more about MailChimp's non-profit discount here.

Looking for software? Techsoup provides a wide range of donated and discounted software, hardware, and online trainings for nonprofits. Whether you need a server for your office, some training on Microsoft tools, or software for your team, Techsoup may have what you're looking for at significantly reduced prices. In fact, their website advertises that "The average nonprofit saves $12,000 on technology products over the course of its TechSoup membership."

Need some tech advice? provides a wealth of articles and presentations regarding tech decisions for your nonprofit. Their content includes how-to articles, pro and con reviews, tech trends, tips, and more.

If you want to get started with online advertising, Google for Nonprofits offers $10,000 per month in Adwords grants for eligible nonprofits! They also offer a variety of services including email, Google Drive, and YouTube for Nonprofits, among others. Learn more at Google for Nonprofits.

What nonprofit discounts does your organization enjoy? Share with others in the comments below. 

Continue reading
1107 Hits

Subscribe to the Blog