My favorite exercise when we start a new nonprofit web design project is reviewing websites presented by our clients. We check out competitor websites or just look at websites that have interesting features. The findings help us identify our clients’ personal preferences we well as trends in their industry.
You never know where inspiration might come from!
But what makes a nonprofit website excellent?
Signs of a Great Nonprofit Website
There are a number of factors that make a nonprofit web design great. Here are a few things that we look for when reviewing sites:
- Quality Performance. If the most beautiful website in the world takes forever to load, then I will leave. This is often the first thing I check on a site. If a site seems even a little bit slow, we run it through GTMetrix for a performance report.
- Modern and Fresh Design. We don’t want to build a site that looks like it could have been popular 10 years ago! We look for websites that use modern design tactics like breaking the grid to display images. Other modern design styles include larger images, modern typography, personalization, and subtle but effective animation.
- Helpful Imagery and Iconography. They say an image speaks a thousand words and that is very true online. Even before a visitor reads a single word, they already understand volumes about your organization with the images you place on your website. If your images don’t speak to your mission, your visitors won’t understand your mission.
- Clear Presentation of Mission or Purpose. If I can’t tell what an organization does within the first few seconds of being on their homepage, I will often leave immediately. Having a clear mission statement on any website is key to be effective.
- Straightforward Donation Options. Donations are key to any nonprofit organization. When looking at a nonprofit website, we check to make sure that you can easily get to a donation form, that the donation form is well branded and designed, and the donation form is easy to complete.
- Easy to Use Navigation. Once you get past the homepage, the most important part of a site is the navigation. If it’s difficult to understand, your site visitors won’t be able to find your content. We usually test this by trying to complete a few tasks: i.e. how would i get to the blog? Who is on the staff? Do I understand what all the navigation labels mean? What services do they offer? Or how can I get help from their services? If we can’t complete a task, then the site needs navigation improvements.
- Mobile Responsive Design. These days, nearly everyone has a smartphone. For many people, it has become their primary way of accessing the website. The mobile version of the website shouldn’t feel like an afterthought, but rather a unique experience for your mobile users.
- Accessible. Often overlooked, accessibility is key to ensure that all visitors can access your website, regardless of disabilities and circumstances. Every site in 2020 should be accessible and provide visitors with the best possible experience.
Nonprofit Websites with Amazing Uses of Color
Color is one of the most important aspects of nonprofit web design. Sites that don’t have an effective color palette often appear boring or too simple. We have seen through usability testing that visitors will navigate away from the site if color isn’t used effectively to draw attention to specific areas.
Access Now advocates globally for universal access to open internet and other key technology as a basic human right, despite government oppression, military action, and political upheaval.
We performed a complex migration from Expression Engine to WordPress, where we built a beautiful but deceptively complicated site. Interesting taxonomies relate content and create rich landing pages, and there’s some cool filtering happening on issue and blog pages.
Engaging Networks offered a healthy platform which allowed us to build a robust and engaging Action Center that feeds people towards actions.
And because Access Now is obviously very security-oriented, we locked down and fortified the site, working with specialty host VirtualRoad to ensure that the site passed a security audit before it went live.
This site won a Gold Award from the Communicators Awards in 2016.
Interfaith Alliance seeks to protect faith and freedom by respecting individual rights, protecting boundaries between religion and government, and uniting diverse voices to challenge extremism and build common ground.
The organization had two mobile-un-friendly websites — one in Joomla and one in WordPress — that it wanted to redesign to better reflect the vibrancy and modern relevance of its work. We designed two beautiful, mobile-responsive WordPress sites that share content to reinforce the organization’s brand, better feature social media, and facilitate social media sharing.
We worked to improve their overall content organization to highlight and prioritize the many important campaigns they create, from providing election year resources to working against hate groups. Using our Gravity Forms plugin, we made it possible for the organization to create custom forms on their site that feed directly into their Salsa CRM, and we implemented an RSS feed that sends updates from one site to the other automatically.
Later, the Interfaith Alliance team returned and asked us to update and improve their editing functionality so that they could take advantage of WordPress’ new Gutenberg block editor features. They now have access to more flexible, up-to-date layout options.
Lab/Shul offers fun, fresh, “everybody-friendly” sacred Jewish community gatherings.
They had a beautiful vision for a vibrant and modern new website that showcases their projects and events. We helped make their vision a reality by creating a style tile and architecting a website based on the Avada WordPress theme. Once built, Lab/Shul took over the site and customized it with their own creative styling and content.
The grayscale images, along with the bright orange contrast color, makes this an amazing site that you can’t walk away from.
The Student PIRGs have been around for 40 years, organizing students at the forefront of social change.
With a website that hadn’t been updated in many years, they needed a modern site with powerful functionality and flexibility to grow with the organization for years to come. We delivered a new logo and branding and created custom WordPress templates to sustain not only the national site, but also all of their state and university sites.
Thanks to WordPress multisite, the Student PIRGs team can now spin up a well-branded chapter site in mere moments, more quickly connecting with student activists and volunteers at the local level.
Action Network forms are embedded for fundraising, and content is syndicated from the national level through to states, where organizers can then manipulate some of the content as needed. The new Student PIRGs sites are not only beautiful, but they’re also much easier to use!
Avodah organizes Jewish service that inspires and encourages young adults to give back.
The new Divi Builder-driven site we created for them makes maintenance easy, and the design fits the organization so much better than their old site — it’s beautiful, exciting, and easy to use, even on a mobile phone (crucial for their audience).
For engagement and supporter interaction, we used a Gravity Forms add-on to pass data from the email sign-up forms into MailChimp, and then the organization uses their simple, branded email template to connect with its supporters.
Nonprofit Websites with Great Imagery
Images are integral to just about any nonprofit web design, a trend that has only increased in recent years. The old adage that a picture tells a thousand words is wrong. In reality, the human brain processes visuals 60,000 times faster than text.
Using effective images will help your supporters get your message in the brief time it takes to visit a site. This is proven by statistics from Facebook, which show that on that platform, photos get 120% more engagement than text (and photo albums get 180%), and videos get 100% more engagement than text.
The END Fund does amazing work to end neglected diseases around the world.
We worked with them to build a custom WordPress website that reflects the importance and impact of their work. The organization was using an old CMS that gave them very little control over page layouts and how information was created. Switching to WordPress with a fresh, bold, engaging design allows them to spend less time managing their website and more time doing their actual work to end neglected tropical diseases.
Their website showcases that work and helps them convey information with their supporters and increase engagement from donors. This site won a Silver Award from the Communicator’s Awards in 2018.
Bay Nature liked a lot of things about their website. They had useful online tools and an abundance of content. However, they needed their site design to better match the branding of their print magazine, and they wanted to explore other ways they could refresh and highlight their online content. They needed a WordPress team that could not only build them a brand new site, but also retain and integrate a lot of the elements that they liked from their old site.
Understanding that Bay Nature wanted to keep much of the existing tools and functionality from their old site, Cornershop worked with their team to carefully plan a content migration process.
We then developed custom WordPress post types and page layouts, building an information architecture that better highlights articles, integrates their WooCommerce subscriptions, provides a robust events calendar, and that also integrates their photo and video galleries and social media activity.
After reviewing their original site, we identified and developed several custom features for ads, products, and multiple blog authors that needed to be replicated for their new site. As an added future-focused feature, we used WordPress’ upcoming Gutenberg editor to structure drag-and-drop layouts that not only look great but are also easy to use.
We worked very closely with the Bay Nature team throughout the site build, ensuring that we could launch the new site without any disruptions to their live site nor subscription sales.
Designed for a coalition project headed by the Pennsylvania Environment Council (PEC), the Towns and Trails Toolkit website provides resources to a regional audience of municipal officials or employees with planning backgrounds.
This site differs from many nonprofit sites in that it isn’t built on “calls to action” for donations or list signups — rather, it’s designed to guide users through all the steps of creating an Outdoor Town, a town that supports outdoor activities.
After a quick discovery call with the PEC team, we designed a site with a clear flow of content and beautiful illustrations. We built the WordPress site using a pre-built WordPress template, customizing design with the illustrations and branding from our mockups and adding menu options to accommodate new content needs.
The Towns and Trails team can now easily manage and adapt their content as they identify new ways for their project (and towns!) to grow and evolve.
We worked with Environment America to build the 100% Renewable microsite that helps them connect with student advocates as the organization guides campuses towards using 100% renewable energy. We used the Jupiter theme for WordPress to build and style a campaign site specifically geared to college students, where they can find more information on why renewable energy is valuable, steps to start their own campaigns and embedded Action Network forms. As Environment America works towards their goal of 50 college campuses going 100% renewable, this site will grow with them, providing their supporters the tools and information needed to make 100% renewable campuses a reality.
Nonprofit Websites That Tell A Story
If you don’t tell your story, organizations won’t know what you do.
There are a number of ways to tell your story effectively, from the right images, the right flow of content on the site, your navigation, infographics, or even interactive timelines. The following are some of our favorite sites that convey their mission in different ways.
We couldn’t be more honored to work with Our Bodies Ourselves, a global nonprofit with a long history of providing accurate information on reproductive health and sexuality.
OBOS hired us to identify measurable online communication goals, redesign their logo, and redesign and rebuild their website. The new WordPress site we built is a powerful engine for OBOS, showcasing its important work; providing clear pathways to health information, advocacy, and fundraising; and enticing visitors to take action. And because it’s integrated with Blue State Digital, OBOS now has a huge advocacy and fundraising platform running behind its site, ready to help the organization make the most of its new subscriptions and donations.
This site won a Best in Class Award from the Interactive Media Awards in 2015. We were honored to work with them again in 2018 to consolidate the site and ensure longevity, even as the organization reduced their activities.
Orion Magazine focuses on journalism, literature, and art at the intersection of social, environmental, and cultural issues. This longstanding and deeply respected publication is known for its beautiful print magazines, rich with poetry, prose, and photography.
The magazine’s website, however, didn’t live up to its beautiful paper counterpart: the antiquated ExpressionEngine site didn’t encourage leisurely reading, failed to promote subscriptions and donations, and it wasn’t even a little bit mobile friendly.
We designed a beautiful new, mobile-responsive WordPress site rich in visual enhancements. Underneath the beautiful frontend is a workhorse of a backend that eases site maintenance and makes it easy for Orion staff to showcase the latest content in a modern, attractive manner.
Six custom content types maximize editability and create a memorable reading experience for the magazine’s many followers. We had to programmatically migrate approximately 5,000 items of content from their old system to WordPress to preserve their long history of amazing content. This site won a Silver Communicator Award in 2015.
After years of hard work securing early education and preventing childhood deaths, the Save the Children Action Network had outgrown its old Kintera CMS website and was ready to grow into a mobile-friendly website in an open-source CMS.
We designed and built a beautiful new site that’s clean, engaging, and full of this organization’s wonderful stories.
To ensure we had a clear plan for the design refresh, we first conducted a first impression usability test of our design mockups to confirm that the site worked well for a test audience before we built it out.
We integrated the organization’s Salsa account so that they can easily collect email sign-ups, create petitions, and gather event RSVPs directly on their WordPress site. The new site is modern, engaging, dynamic, and so much easier to maintain than their old site!
The backend makes it easy to edit even the most complex pages, and content feeds throughout the site mean that articles, issues, and content are shared automatically without extra work on the part of the staff.
The Partners in Contraceptive Choice and Knowledge (PICCK) is a program of the Boston Medical group, designed to educate caregivers about available contraceptive options, plusses, and minuses.
We outfitted them with a brand new WordPress site using TheGem WordPress template as a starting place. We’re happy to provide ongoing technical support for this site as the PICCK team continues to add valuable resources to their site.
Peace is Loud inspires action through film and live events that spotlight women leaders on the frontline of peacebuilding worldwide. They needed a new website that would better feature their stories and the impact of their work.
We started with the Uncode WordPress template to build a site that connects their speaker and film content, and showcases their speakers bureau more effectively. We added faceted search features for easier navigation through speakers bureau content. Supporters can now connect with Peace is Loud’s work online and bring changemakers to their own communities
This site literally has storytelling in the title!
After working with Greenpeace on a campaign microsite, they came to us with a new challenge: they wanted to make an internal branding site public. We worked within their preferred WordPress theme, consulting their design files and a technical contact in Greece to build out the site functionality, animating their charming headers, and migrating their content. If you’re looking for inspiration and ideas for your own advocacy campaigns, this site is a beautiful resource.
Awesome Interactive Nonprofit Websites
When it comes to showcasing complex data or a large volume of content in nonprofit web design, you need to be creative. Most people aren’t going to sit around through long narratives without some interactions or ways to break up the content.
Each of the following sites do a great job of providing simple, easy-to-follow, interactive content.
This award-winning website from Universities Allied for Essential Medicines presents an interactive report card evaluating the top U.S. research universities on their contributions to urgent global health research and access to treatment worldwide.
Although the site is built in WordPress, you’d probably never guess it from the way it looks and works. We’ve leveraged custom post types to implement a robust data structure and snazzy comparison tool. We used clearly defined fields and batch import/export capabilities to make the data maintenance easy for our customer.
This site won a Best in Class Award from the Interactive Media Awards in 2014.
The National Network of Abortion Funds (NNAF) launched the We Testify campaign as a storytelling platform that shares abortion stories as diverse as the women who seek them.
The We Testify team works to build the power and leadership of abortion storytellers. People of color, people from rural communities, people who are queer identified, and people who need resource support when navigating barriers to abortion care are all storytellers for We Testify.
We worked with the We Testify team to build a beautiful, unique, interactive WordPress site. Story posts are front-and-center, and site visitors are encouraged to share their own stories through a customized Gravity Form. The form collects submissions and automatically creates draft WordPress posts for further vetting and publishing by NNAF staff.
The energetic, strong aesthetic was a team effort by Cornershop and NNAF: thanks to the creative, tattoo-inspired icons provided by NNAF, we were inspired and encouraged to incorporate a number of creative elements with background textures, faded images, and hover animation.
Grace Communications Foundation focuses on environmental projects, like their cool water calculator tool which teaches people about their current water usage and what they can do to conserve water.
They wanted to simplify the maintenance of their Water Calculator tools while also increasing site visits for new resources.
We connected the water calculator tool with their main content, then worked carefully with their existing technical structure to improve the organization and user experience of their content and calculator functionality.
We also modernized the site by adding WordPress’ new Gutenberg block editor for easier editing and Google AMP for excellent SEO. After three months, the updated website supported an increase of 79% more site entries through their Spanish content and thousands of visitors accessing their new resource pages.
Being in debt is no fun.
But the team at Smart Growth America came up with a new campaign to promote education and awareness of how we all can stay ahead of problematic debt.
We built a simple WordPress site with a debt quiz, using zip code search functionality to connect people to their respective debt management agencies. The Gravity Forms plugin helps collect information for the multi-step quiz, and adorable monster illustrations help to make this uncomfortable topic a little more approachable.
Site visitors can now easily “shine a light on” and learn more about their debt monsters.
Tech Impact provides technological resources to nonprofits, including extensive PDF reports on a wide range of services.
After years of publishing their reports as simple PDFs on their website, they were eager to reinvent the content in a more interactive, mobile-friendly format.
We built a WordPress Multisite to support the numerous reports, and streamlined user registration to include automatic creation of user accounts based on vetted form submissions. We added a plugin that automatically turns uploaded files into charts, and a cool comparison tool that calculates input in real time to show site visitors their results and how they change over time.
Nonprofit Websites with Excellent Content Organization
Many nonprofits amass thousands of pages, articles, resources, and content that needs to be showcased in their website. Presenting a lot of content in your nonprofit web design can be a challenge.
For these nonprofit websites, we spent hours determining the best organization strategies, testing them, and refining our work, until we had clear and simple content organization.
Sharsheret serves Jewish women and men, many of whom are genetically predisposed to breast cancer. The site helps visitors learn about their cancer risk, fight cancer, and enjoy life after cancer treatment.
Their original website was dated and overly formal. It featured lots of useful content, but the content was too difficult to navigate. We built a custom-designed WordPress site that uses photos and interactivity to provide resources and support to women, their families, and their communities.
We worked hard with Sharsheret to add visuals throughout the site, simplify the navigation, and edit content to make it easier for people to find the information they need.
On the backend, we armed Sharsheret’s team with easy-to-use editing tools making it super easy to build complex pages without knowing code. Sharsheret’s hallmark is its personalized support of its members, who sometimes need help processing a recent diagnosis, understanding a test result, or helping friends and family cope with their treatment, so we implemented multiple ways for site visitors to contact the Sharsheret team, including live chat.
We also learned that Sharsheret was paying way too much for hosting and were able to find a solution that saves them about $1000 per year!
The Fight Colorectal Cancer team provides balanced and objective information on colon and rectal cancer research, treatment, and policy. They had a website that was only a few years old, but it was difficult to maintain and update, and their cluttered content was becoming a big problem.
After migrating their existing content and performing a tree test usability test, we simplified and cleaned up the structure of the site, including a simpler and clean design that makes great use of their excellent photo assets. Their site search includes faceted search features that help with filtering search results by categories.
We also built several customized Gutenberg blocks for easier creation of unique layouts with featured content.
Earthworks had years of great content on their site, but it was difficult to navigate and search.
We worked with them to create a new, modern clean design with thorough content review for improved site organization. Next, we migrated their content from their original ExpressionEngine site to WordPress.
The new site includes custom Call-to-Action and supporter engagement features, such as branded Salsa advocacy templates, a donation popup for fundraising, and advocacy post lists. We also incorporated faceted search features to help folks find content by location and issues.