Modern website design can be daunting for many nonprofit organizations. If you’ve decided to create a site yourself or you are working closely with a freelance web developer, here is a framework that you can use to get up to speed in designing a modern website.
Rather than build out something completely new, we’ll be taking a basic framework from the folks at volunteermatch.org and their article, The 5 Elements of Great Nonprofit Web Design.
Element 1: Site Structure
Key Question: What are we going to put on this website?
A new website is akin to a blank book or blank canvas. It holds a million possibilities. The first questions to ask concerning your website have a lot more to do with your organization than with HTML5 and CSS3. These are basic questions but they must be answered first:
- Who are we?
- Why do we want to build a website?
- What do we want the world (literally) to know about our organization?
- Where do we stand on the issues important to our organization and those we wish to work with?
- Who is going to build and maintain the website?
Questions like these don’t typically come to mind when thinking about a new website, but they should be at the center of all that you do. They are are the Web equivalent of a business plan. Without a clear understanding of who you are and what you want your website to support (yes, it’s a supportive piece within the organization) the site will fall short (at best) or be completely useless and a waste of time and resources (at worst). Take the time to sit down within your organization and flesh out who you are before beginning the design process of the website.
This approach is a huge advantage for the organization and the designer(s). Finding the answers to the questions above, will create a clear path for the design and implementation of the website. The person(s) designing the site will thank you.
Element 2: Usability
Key Question: What will we do to get users to interact and communicate with us?
With books, magazines, ads, and direct mailers, there was an understanding between the user and the organization that the initial communication was all one-way: organization to viewer/reader. On the Web it’s a completely different story. Not only is two-way communication possible from the very first moment the visitor loads the site in the browser, but it will be expected that there is a way for the visitor to participate in some way. Users are willing to give you (potentially) valuable pieces of information in exchange for the opportunities or products you can provide. They want the freedom to ask questions, chat, connect with an individual person, or click something that makes something else move. They expect to feel powerful. To meet the user here, the mindset of the organization must become one of pulling others alongside their organization rather than confronting them. It is not face-to-face that will attract new volunteers; side-by-side is the new motto of the Millennials. If you have to sell them, they’ll walk away to the next guy that will help them become a part of the organization rather than a cheerleader.
What does that have to do with usability? Everything.
From the beginning, the designer(s) must take every possibility of how the user will interact with each individual page and element on the website. A lot of questions need to be asked and different things need to be tried to ease the friction of using the website and make it as painless as possible to move down that two-way street. Here are some good questions to ask:
- What does this site/page/element look like on a desktop? on mobile?
- What do I have to do to interact with the elements on the screen?
- Is that element too far away for a one-finger interaction?
- How many clicks is too many to get to the conversion?
- Are interactions clearly presented?
- Is the content clearly presented?
- Is the site simple to use?
“But it’s my content,” you might be saying. True, but the visitor has more power than ever before and desires to come up eye-to-eye with the organization. They want to accept you based on their own evaluation, not because someone told them it’s a good place to put their time or money. Your organization must make it a point to equally consider your own interests and those of the visitor. Even if it’s not your intention, it’s easy to talk down to visitors. It’s hard to engage them and invite them to come alongside through two-way communication, discourse, and invitation. Considering how to engage the user and create a design that allows for interaction will help you as you consider the next element: content.
Element 3: Content
Key Question: What are the common threads in our content?
I deal in web development and spend most of my time in the content and design areas. There is a lot to say here, but I’ll make an attempt at brevity.
What is content? Content includes all of the substance of the site: text, video, images, etc. It is found in the elements that fill all the boxes created by the design team. Only that’s an outdated way of creating a website.
The optimal way to build a website is not to create content for the design but to design the site based upon the content. If your organization has taken Element 1 seriously, you should have a great idea as to who you are and what you want to show others around the world about your people, mission, and organization. If you’ve documented the process of answering the questions about who you are then you’ve got content enough to put together a website.
Communication is noise unless it’s focused and clear. From Element 1 your organization probably has a ton of great content. Some of it is gold, the rest is just noise. For instance, it would be a great idea to record your sessions as you talk through who your organization is. The problem is that a session like that might take several hours. There’s no way you’d want to put that online. It would be a testimony to your irrelevance. However, if you sift through those hours of video (or audio) you are sure to find the core parts of who you are. With a little editing you’ll be able to cut the noise and clarify who you are, what you’re doing, who you’re helping, and why you need others to join in.
The main types of content are text, video, and images. Here’s an overview of the strengths of each element:
The words on the page are the workhorse of the publication, whether print or digital. Text is great for clarification, instruction, and ease of use. It is the fastest and easiest element to load onto the page. Because it doesn’t look like advertising, it can easily be separated from the graphic elements and will often be the first thing the visitor focuses on.
Moving images catch the eye, even if they don’t hold the eye. There are times when the combination of visual and audio express the fullness of what you want to say. It’s also easier to listen to someone talk for 5 minutes than to read the same thing as text. A design advantage is that you can say a lot in a small amount of screen space.
Because an image doesn’t change it has the power to affect a visitor longer than a video that is cutting quickly between images. Images rarely instruct or clarify. Instead, they are great at getting to the heart of the issue or the organization. They freeze time and allow the user to dwell on the moment captured in the image. People remember images so make sure your images show the mood/feeling/attitude you want visitors to remember about your organization.
Many things go into the content of an organization: the way the people operate, their corporate behaviors and governance, their mission, the people they serve. All of these connect together to form a unique organizational fingerprint. If you take time to observe the organization through photos, video, and text, this unique fingerprint will become apparent. That is the starting point of the design. Designers need to know not only what types and pieces of content do we have, but what is the content of that content? Is there a thread of connection moving through all of the organization’s content elements? Use that thread to determine the aesthetic feel and design of your site.
Element 4: Connection
Key Question: What can we do to ensure we connect with visitors?
The generation of current internet users 18-35 want to connect with everything they do. They are powerful and are learning how to use their power to come alongside companies and organizations to be personally fulfilled. They want to participate. They want some human connection. The rise of social media is not because of boredom; it’s happened because there is a personal disconnect in the world created by the last two or three generations. The sense is that our humanity is getting lost and social media allows people to once again participate in the lives of their families, friend, and even strangers.
A connection like this is possible but it requires that your organization do more than just create a channel of one-way communication. Like Element 2 you must create a situation in which a real human connection is probable (not just possible). The most obvious places are social networking platforms (like Facebook and Twitter). This is an area where many organizations really mess up. If you are going to set up channels for people to connect to your organization, you must man that channel. It must be a place filled with people who care not only about the organization but also anyone who shows interest or care in the organization.
I once heard social networks described as outposts. No one in their right mind would send someone to a deserted outpost. Likewise, your social media accounts need to be active. If that means directing people to only one account, then do that. It is better to send people to one active account than create the possibility that they might go to an inactive platform. Build up one platform at a time if you don’t have the manpower or resources to commit to more than one.
Even though social media gets a lot of the attention, there are other ways that you can kill the connection with users. Your site should have the ability to contact you in most common forms of communication for your country or target user. The abundance of communication offerings is pretty astounding: email, telephone, fax, text, chat, IM, Skype. The list goes on and on. Here are the secrets of connection:
It’s easy to set up a website that has every available way to contact your organization. If a user tries to connect with you and you don’t get back to them quickly, they will move on. All of the examples of communication above move very quickly. Email is no longer much like mail. It’s actually a lot more like chat. It’s on your phone, computer, tablet, tv, etc. Users know this and they expect that you will not only get back to them but get back to them quickly. If you don’t answer with speed visitors (potential donors and volunteers) will move on.
One of the worst things to happen when visitors finally take the time to stop and communicate with your organization is for them to get an automated response in return. The expectation online is that there is a human on the other end of that email address. To get an email back that says someone will get back to them in the next week is disheartening, at best. Don’t be one of those organizations. Commit to having a human on the other end of every communication tool (e.g., email address) for your website.
The third thing that can kill the connection with visitors is if your organization insists on doing all the talking. Your organization will get a lot farther if you commit to listening to what users have to say than trying to speak all the time. If there is a problem, listen to users. If you don’t know how to fix the problem put a short-term plan in place to find out how to fix it and then get back to users quickly with a solution. Remember, your organization should come alongside visitors, not confront them.
Relationships are about connections. The stronger the initial connections, usually the deeper the friendships can go. The same is true of your organization. Not everyone connects with your cause. However, when someone does connect with your cause you must make sure that you don’t kill the relationship by dehumanizing your organization or failing to listen to your new friends.
Element 5: Design
Key Question: How does who we are affect the site design?
I’m putting design last here but it’s a huge part of your organization’s website. The design tells the visitor many things. For instance, what is this organization’s:
It has the ability to answer many of the questions a viewer comes to the site with initially.
- What space is this organization in?
- Are they cheap?
- Do they care about their online presence?
- How does this make me feel?
- What are they about?
- Do they care about people or money?
Every user comes to your site with these questions in their heads. The design elements can help to answer some of the users’ questions immediately. Does your design show what you do or just tell visitors? Does your design bring clarity to your mission or just muck it up? Does your design send the right or wrong signals, tone, and attitude? Studies have shown that users make up their mind about your organization after only a few seconds. There are a handful of gates that you must jump through for the user to open up to your message. The design is one of the first. (The first is: Does the site load on the user’s device or not?) Care equals trust. If you put care (time, money, energy, effort) into your site people will be more apt to trust your organization, even if they’ve never heard of you. After they see that you dress the part then users will move onto judge the content, or substance, of your organization.
Each element of the design speaks to the user. Here three key elements and what they convey to the visitor:
We have a tendency to associate fonts with specific time periods, people, feelings, events, etc. At some point the way the letters and words are formed takes on as much meaning as the ideas the words are conveying themselves. Choosing the right type for the organization and specific piece of content is a large part of winning users over in the first few seconds of viewing the site. One other consideration is legibility. If the visitor can’t read the message, who cares what it says?
Choosing colors is a tricky business, especially when dealing with a global organization that has users from around the globe. Colors tend to mean different things in each culture. Using website analytics, your organization can track where most visitors are from and try to plan for color palettes that are pleasing to everyone who comes to the site. In general, black and white are safe for every culture.
Is your website a website or a blog? Users can tell almost immediately which it is. Many discerning users can tell if you’re using WordPress or not solely based upon layout. Layout is where logic kicks in. Each part of the page–and even the whole page–should be laid out in such a way that the information is clear, concise, and logical to the user. Read and think through each of the elements on the page. Does it make sense? Is there a hierarchy of information that can be helped by the layout?
Many designers talk about what’s above the fold and its importance. It’s true. What’s above the fold is of huge importance. Honestly, though, most users come to a website ready to scroll. My advice is to use what is above the fold to get the user to take an immediate action and/or to scroll down the page to learn more. I also suggest using that space to immediately inform the user about who you are as an organization. This can be through text, images, video, design, etc. Content above the fold should impact the user immediately and move him or her down the page to more information and calls to action.
There are many things to think about when looking at designing or redesigning a modern website. I apologize for having to leave out so much of the rest. A new website begins with organizational self-discovery and an internal conversation. From there it moves over into a conversation with the user. If you are clear on who you are and what you’re doing as an organization it will help you to effectively engage users and visitors to your site or blog. Through that engagement a connection is made and your organization begins to move quickly in positive directions. This is the game plan, at least. The waters of reality,however, are much more difficult to navigate.
I’d love to hear your feedback on these 5 key elements of nonprofit web design. Are there some I’m forgetting? What did you learn? Has your organization recently gone through this process? If so, what did you learn along the way? Leave a comment below.