Analyzing Design: The Impact of Design on 5 Nonprofit Websites
Despite design’s inherent subjectivity (what counts as “good design” inevitably varies from person to person), it’s no secret that the use of certain tools and techniques impacts a design’s — and therefore an organization’s — overall effectiveness. Typically, we measure effectiveness by analyzing a website’s ability to meet user needs and drive business goals, usually with some connection to a company’s bottom-line. However, the same design analysis can and should be leveraged when looking at the effectiveness of a nonprofit’s website. In fact, because not-for-profit organizations typically have significantly lower budgets than their for-profit counterparts, it is arguably more important for these organizations to be using effective design techniques, as their website is commonly the easiest, least expensive way to inform potential donors and community members about their mission, their projects, and ways to support or get involved.
Below I have taken a look at five different nonprofit websites and given a quick analysis of effective design techniques used, and in some cases offer suggestions or opportunities to strengthen the design to drive more impact.
Heifer International’s big goal is “to work with communities to end world hunger and poverty and to care for the Earth,” and they work towards this goal by providing animals and sustainable agricultural resources to impoverished families in some of the worlds poorest communities.
- At the top of their page, Heifer International uses two navigation link bars, one smaller and more subdued, and one that is centered with larger text and brighter eye-catching colors. This allows there to be all of the expected links at the head of the page, but some of the most important links (those directly related to the organizations goals such as raising money) are easier to find and access.
- Heifer International’s color scheme of creams, browns,and teal are calming and pleasing on the eye, not shocking or jarring. These colors may cause user’s to feel more welcome or spend more time exploring the page in comfort.
- What appears to be the most important link, the Gift Catalog, has the highest contrast with a bright yellow color and obvious rounded corners to show user’s that it is a button or link that can be clicked on. In fact, when looking at the page above the fold, the only elements with rounded, button-like corners are those links directly related to donating to the organization.
The Heifer International website is effective because it is pleasant and welcoming, and provides clear pathways for visitors to support the organization.
Acumen is “changing the way the world tackles poverty” by raising charitable donations to invest in companies, leaders, and ideas that have the capability of bringing sustainable solutions to the world’s biggest poverty problems.
- The site has a clear hierarchy: the organization’s mission is top right, written in few words with a clear, bold white text.
- Where we might normally find the top navigation bar, there is only one possible, bright pink link: donate. This is an important, intentional design choice, as it makes a clear and easy pathway for user’s to give money to the organization. Navigation is still clear and easy to find at the bottom of the landing image.
- Acumen uses extremely large background images that are uncluttered by other competing text. The images are mostly close-ups on the faces of people in the community that the organization supports, which builds personal connections with visitors and provides context regarding the org’s work.
Acumen’s site is effective due to their use of large, powerful, imagery, and careful design of written content that is easy to navigate and read.
Smaller non-profits can leverage intentional web design just as much as large ones. La Choza Chula helps children, young people, and women benefit from the growing tourism industry in the small coastal town of El Paredon, Guatemala, by focusing on creative education opportunities and entrepreneurship programs.
- The organization’s logo is top and center, in a light blue and red color. Typically, these colors are associated with chromostereopsis, when two contrasting, overly-saturated colors are paired together. However, the use of a light blue, and thin red outline instead creates a pleasing, but noticeable contrast, that doesn’t overpower any of the other content on the page.
- The organization’s full mission and “how we do it” statement are also high in the page hierarchy, saving visitor’s the time of searching through the website for information.
- The site uses simplicity to their advantage — the white background makes information clear and straightforward versus overwhelming or busy.
La Choza Chula leverages their smaller size by creating a more simple, but easily understandable content hierarchy.
The Case of Foundation “invests in people and ideas that can change the world” by funding projects and collaborative solutions for urgent social challenges.
- The Case Foundation’s mission is large, bold, and centered on the landing page, making this the most prominent content and likely the first thing a user reads
- The website uses bright white text against background pictures. While the contrast is eye-catching, it is at times difficult to read, and so loses it’s effectiveness.
- Use of a full screen image is a also an eye-catching technique, as people usually connect more with images than text. However images are less impactful when they don’t show clear, relatable content, such as pictures of people. While the “Be Fearless” image is bold, it does not create any personal connection with the user, or better explain the organization’s mission.
- The hierarchy of the “What We Do” and “Why We Do It” links doesn’t match typical hierarchy standards, and therefore could be confusing for users. The button to learn more about “What we do” sits to the right, while the button to learn more about “Why We Do It” sits to the left, and underneath the What We Do header.
The Case Foundation’s website is bold and uses contrast to catch the user’s attention; however, content may get lost in overuse of bold images, text, and confusing hierarchy. A user’s attention may be pulled in multiple directions, making a call-to-action less effective.
Oxfam is “a global movement of people working together to end the injustice of poverty.” They approach this movement by tackling the conditions that initially cause poverty, from inequality, to discrimination, to unequal access to resources such as food, water, and land.
- Oxfam’s color palette is bright and bold, including hot pink, highlighter yellow, and shades of bold greens. These colors are noticeable and eye-catching, while also being friendly and inviting.
- Oxfam’s “donate” button is a contrasting shade of orange and has the affordance of an arrow shape, helping it stand out among the other navigation options. However, due to the array of bright colors in the entire page, this button may not be as noticeable if other colors on the page were more muted.
- Oxfam’s use of icons provides context and imagery to make links clearer and more pleasant to look at.
- The images that Oxfam chooses to use are impactful because they are relevant — for example clearly showing how a user might interact with the nonprofit, and showing images of the people the organization supports.
Oxfam’s use of color, images, and icons, creates a website that invites user’s to become more involved in the organization.