Websites are the public face of nonprofit organizations. A well-designed nonprofit website invites the reader to spend time exploring the issues the nonprofit addresses, be touched by its passion, and join in its mission by donating to its cause. An attractive and easy to use website can convert casual readers into informed supporters. The alternative, a disorganized website with missing or broken functionality, may drive readers away or lead them to conclude the organization itself isn’t fully functional. This article explores how one organization took the journey to rework their nonprofit website design in accordance with best practices to maximize the impact of their online presence.
In September, we were contacted by the nonprofit PsychopathyIs. The newly launched organization was frustrated by the design of their current website. Rather than being a place to help those affected by Psychopathy find answers and support, it was littered with bugs, placeholder text, and other issues. It was nowhere near ready to launch. Although it was difficult for them to articulate what was wrong with the website from a design standpoint, beyond the obvious errors, the client knew that they needed a new approach and hired our team to provide a roadmap to getting them back on track for their planned 2021 launch. When we conducted our audit of the site, it was immediately apparent that it was failing to meet even basic web design best practices.
Pitfalls of the original design
The original site wasn’t planned out appropriately, so it was filled with placeholder text. In web design, it’s important to not waste time building the wrong site. At CH Web Agency, we recommend starting with research, sketches, wireframes, prototypes, and testing before writing any code. The site was not aesthetically attractive, this was a result of the designer not following basic design principles such as color theory, hierarchy, typography, accessibility, consistency, balance, proportions, and use of whitespace. It resulted in a cluttered appearance, poor readability, and confusing navigation. Broken links and inoperable buttons were a symptom of a build that failed to meet basic web design standards.
Best practices for designing a nonprofit website
So, how do you avoid ending up where our client did with the original team and their design? It’s important to research your web designers, like any service, reading reviews and looking at previous work are a good place to start. Take a look at their blog, are they active? Do they respond to comments posted by their online community?
Your web design team should understand that websites need to be easy to navigate and encourage visitors to explore and learn more about the nonprofit’s mission. In order to make your site easy to use for your visitors, it’s best to not stray away from current web design trends. Best practice for a nonprofit organization is similar to best practices for any other website. It comes down to understanding your users’ needs, making sure that the content they are looking for is findable, and that your site is easy to navigate.
Here are some standards that the original design for PsychopathyIs.org did not meet and why they were important for us to get right.
Be clear about your mission and goals
No matter where you are on the site, your content should support the mission of your organization and current campaigns. Highlight your mission statement, vision for the future, and the values of your organization. Under your about page, you should have information about your board of directors and board of advisors to help establish credibility with new users. Tell the story of how and why the organization was founded. Let your users know that there are real people behind this organization, that care about this domain, and they have the expertise to do something about it.
Make information findable
Having a defined strategy for organizing information on your site is known as information architecture. When visitors come to your webpage, you want to have a website that supports their unique user flows, the way in which they will browse content or interact with your site to accomplish specific tasks, such as donating to your organization.
Links in your menu should be obvious and well named. This will help your audience find content faster, rather than having to go through trial and error to find what they are looking for.
Use unique and useful headings to break up large chunks of content to make it easier for your readers to scan pages. Have clear calls to action to support specific goals of your organization, such as donating, volunteering, or signing up for the monthly newsletter.
When we redesigned PsychopathyIs.org, we structured content so users can find information about the organization, contact the PsychopathyIs team, start a donation, sign up for the newsletter, or learn how to get involved all within a single click.
Know your audience
Conduct user research to understand your users and to design more purposeful pages on your site, that will support their unique habits, needs, while still moving your mission forward.
Prioritize accessibility when designing your site, 1-in-4 US adults live with a disability. Having alt text for images and making sure links are described appropriately for screen readers will go a long way to make your site easier to use for everyone.
For PsychopathyIs, we knew that the two main types of users for the site would be those who were affected by Psychopathy and professionals such as clinicians. Understanding these two different types of users informed the way the content was written and how we organized menus and navigation.
Stay active and post new content frequently
Having a blog on your site is a great way to keep your audience engaged and to improve your site’s rankings in search results. When people look for information within the same domain as your nonprofit, you want your site to appear at the top of the results. PsychopathyIs, and their unique mission, led to the creation of a stories page, where new content shares the stories of professionals and others personally affected by Psychopathy.
Make it easy to donate
Donations can help support your cause, so don’t make it difficult for your users to donate or they may give up before completing their donation. We recommend a donation button within your menu as a clear call to action for your audience.
Have consistent branding
You may be a nonprofit, but don’t let that stop you from having a strong brand identity. Having a well thought out and consistent brand (which includes the tone of your content, the look and feel of your visuals, and a clear set of values) will improve your credibility with new patrons and will help users identify your work in the future.
Colors, use of white space, logo design, and typography choices all add to the visual aspect of PsychopathyIs’ brand identity. The tone of content within the site is also carefully crafted to support the overall brand.
Provide resources for future volunteers
Can you volunteer? And if so, how? Make it easy for your audience to contact you, submit requests, and volunteer with your nonprofit. Volunteers are a great way to help increase word of mouth knowledge about your organization and further your mission without incurring additional costs. We created specific pages to support future volunteers, such as how to get involved and ways to contribute to the cause beyond financially.
The redesigned site
Our redesign demonstrates the positive effects of understanding the fundamentals of web design and building a site to meet the unique needs of a nonprofit organization. Our use of a limited color palette with ample white space creates a clean aesthetic; information on the site is concise, well organized, and easily located. The uncluttered navigation makes it easy to explore the entire website and return to information that catches the reader’s interest. The donate button is prominently highlighted in its own unique color and is easy to locate to encourage visitors to contribute to the cause.
Links to explore the website are grouped according to category across the navigation bar at the top of the page. Each heading offers uncluttered navigation links to a small collection of related topics. The use of short but meaningful titles helps readers quickly scan content and navigate the site.
The client requested a slideshow-style display containing high-level takeaway information about their cause. This provides an introduction to the site’s main topic from the initial landing page without traversing traditional menus or links. While we typically recommend staying away from sliders, such as these, the client was determined to bring it to the new site. So, our team added additional features to make it more usable than traditional sliders. One such feature was a pause on hover, meaning that when users place a mouse cursor over the content, it pauses the automatic scroll. We also increased the duration of each slide so that users would have plenty of time to read the content before it changed on mobile and touch screens.
The external pay provider Square, was used to provide a familiar and safe way for donors to make contributions. It was completely integrated and shares the same branding as the rest of the website, providing a continuation of the visual look and feel and leading the reader to remain confident in the credibility of site.
Opportunities to get involved via donations, subscriptions, or contributing content are easy to find and use. Simplifying access to “calls to action” is critically important to the success of the website because it makes it easy for users to take action in response to the mission of the organization.
Unsatisfied with their original website, our client requested that we perform a complete overhaul. We approached the site as a new project, taking into consideration the recommendations above. We translated these design goals into a new design that will delight and inform visitors, facilitate donations, and encourage involvement. If you’re a nonprofit organization looking to build a new site or need help with a redesign, contact us today for a free consultation.
Meet the team
Joe is a skilled UX designer and web developer at CH Web Agency. He has consulted for organizations like Disability Rights NC (North Carolina’s federally mandated protection and advocacy organization) and CellMark Recycling (a Global Supply Chain and Services company), designing positive user experiences and actively addressing usability issues. Joe earned his Bachelor’s in Computer Science and Master’s in Human-Computer Interaction and Design at the University of California, Irvine.
Joe joined CH Web Agency in 2020 and uses his deep empathy for others and practical know-how to design and deliver impactful websites. Joe lives in Charlotte, NC but originally hails from the small coastal town of Morro Bay, CA.
Oxana launched CH Web Agency in 2019. After working in the web design industry for over eight years, she discovered a need for high-touch boutique-style web design services in communities like the Raleigh-Durham area. As an expert in front-end development, Oxana brought her industry knowledge to the new agency with the mission to provide small business owners the option of a more personal and hands-on approach to building their digital presence. She aspires to bring the same care and enthusiasm to each of her projects that you can find in the everyday interactions of North Carolinians and the local shops they love.
Natalia is an up-and-coming graphic designer with expertise in branding and visual design. Her background in fine arts, a Bachelor’s in Graphic Design, shapes the strong narratives she tells through her work. The overlap between her experience in print and web lends itself well to the responsive design work she does at CH Web Agency. When she’s not designing brand guides and mood boards, Natalia finds joy in art passion projects.