IDEO.org used service design to help develop prototypes of ATM machines and smartphone apps that aim to help low-income people in Mexico create and use savings accounts. Photo courtesy of IDEO.org.

Over the past decade, we have seen many important evolutions in the field of design. Fields like “interaction design” focus on making digital and physical products easier and more desirable for people to use.  As technology has progressed, it has allowed us to design devices that adapt to how humans naturally use things, rather than forcing people to adapt to technology.  Think about how much easier it is to surf the Internet on an iPhone than it was 10 years ago on a flip phone.

Taking this evolution even further is an exciting area of design called “service design,” which focuses on improving processes and services.  Service design goes beyond the design of end products and considers the environment and context around service delivery.  Anyone who has waited in line at the Department of Motor Vehicles has experienced a process in need of service design.

If you have seen apps like Uber, Lyft, or Sidecar, you know how they have transformed transportation services in big cities.  The makers of these apps have examined the process of getting a taxicab, carefully studied points of frustration in the process, and have created alternatives that allow users to quickly and easily get a ride in a crowded city with the touch of a button.  Service design is this process of examining how a system works and looking for ways to make it easier and more effective.

Service design can be applied within organizations as well, examining in detail how a group interacts with its employees or partners.  At my design studio, we conducted a detailed analysis of our business processes, filling three walls of our conference room with an array of colored Post-it notes.  Each of these notes represented a type of interaction–a meeting, a project being handed off from one employee to the next.  We investigated all the potential points of friction between employees in these interactions and came up with creative solutions for how we could redesign these processes, leading to greater efficiencies and improved morale.

In the United States, studios like IDEO.org, Frog Design, and Adaptive Path have started applying these principles to nonprofits.  IDEO.org recently worked with MyCollege Foundation on a service-design project with the goal of creating a new college experience that “resonates with the needs and motivations of both low-income students and employers.”  The result was the innovative nonprofit Portmont College, designed to “teach what employers are looking for” and adding credentials like teamwork and “learning to learn” to students’ transcripts.

These same principles can be applied across a wide array of nonprofit challenges: a family that recently lost its home and is looking for a shelter, a first-time volunteer looking to help out at a soup kitchen but uncertain where to go, or a scared parent without health insurance looking for a free clinic.  Think about those you serve, where they look for information, how they found out about your organization, and the steps they took to receive your services.  What are the points in these processes that are scary, confusing, frustrating, or degrading?  Service design can provide the framework to make these interactions much better.

Service design will almost certainly continue to grow in the years to come.  Because good causes tend to be service-oriented, nonprofits may be uniquely positioned to leapfrog the rest of the economy and use these techniques to build organizations that better serve their internal and external constituents.

To aid in that process, we organized a Google Hangout with service designer Katrine Rau Ofenstein.  To watch a recording of the event, which outlined the principles of this exciting discipline and shared some concrete examples of how nonprofits are using it, watch the video below.

Amnesty International has a simple and concise tag line: exposing and preventing human-rights abuses.

Some nonprofits are able to articulate what they are and what they do quickly and clearly.

Amnesty International, for example, has a simple and concise tag line that is front and center on all of its communications: exposing and preventing human-rights abuses.

It’s easy to understand what Amnesty International is and what it does. But all too often, nonprofits—and even big businesses—make the mistake of failing to have an effective tag line.

Attention spans are short, and you have only a few fleeting moments to grab the attention of someone who is visiting your Web site, reading your appeal letter, or meeting you in person.

Often the ability to explain what you do starts with something basic, like a mission statement. But the tag line needs to be much more concise.

Even major corporations sometimes fail to formulate a clear expression of their identity. Read the response given by Hewlett-Packard chief executive Meg Whitman to Kai Ryssdal, host of the American Public Media radio show Marketplace, when asked to describe her company in five words or fewer:

HP is the largest information technology company in the world that provides hardware, software, and services to organizations of all sizes and has a big consumer business as well. What we do is we try to provide enterprise needs better than anyone else and deliver the hardware and software and services that those enterprises need. And put together a series of devices that customers want as well for their printing and personal systems needs.

Whoa, what?  Did anyone follow that?

Mr. Ryssdal gave Ms. Whitman a second chance, but she still was not able to come anywhere close to five words, nor did she deliver anything memorable or concise. But Ms. Whitman wasn’t alone. Check out the response to the same question from AOL chief executive Tim Armstrong a few weeks later.

AOL will be the best connected, most shared, and most impactful brand and media company with a technology platform in the world.

Does that provide clarity or resonate emotionally with you?

Some people might suggest that since AOL and HP are both notorious for having identity crises, they make poor examples. Unfortunately, though, the challenge that companies as well as nonprofits face is all too common. It’s almost always difficult to distill an organization’s purpose, ideals, values, and services into something that’s both meaningful and concise.

One of the biggest obstacles comes from trying to say too much.  It isn’t necessary to spell out every detail to capture the soul of an organization.  In an attempt to communicate everything that is seemingly important, we often destroy the chance of communicating anything meaningful.

Look at the examples below, and see if you can construct a single idea or feeling for your organization that will resonate with people. Next, make sure it’s well understood by anyone speaking about your nonprofit group—CEOs included. Then use that statement on your group’s Web site, in its marketing materials, in appeal letters, and when talking to people in person.

Below are some examples of nonprofits that effectively articulate what they do in easy-to-find places on their Web sites.

Habitat for Humanity - A world where everyone has a decent place to live

Southern Poverty Law Center – Fighting hate, teaching tolerance, seeking justice

World Wildlife Fund – Protecting the future of nature

How do you talk about your organization? Show off your clear explanation or offer up your muddled paragraph for some needed revisions.

The right typeface can add the perfect look and feel to your Web site, appeal letter, or annual report. But until recently designers were constrained by a very limited choice of fonts that could be used online.  As a result, most designers relied on standard Web fonts like Arial and Verdana.

But with some exciting changes in technology, nonprofits now have more options than ever before when they’re choosing fonts for their Web sites and online communications.

New online resources such as Typekit, Google Web Fonts, and @Font-Face have changed Web design by offering hundreds of great fonts that render correctly on any Web browser. That change makes it easier for a nonprofit to find Web-compatible fonts that can help define its image.

Below are three examples of Web sites that are taking advantage of these options to make good use of typography. To show just how important typography is to each design, I have accompanied screen shots of the real size with an image of what the page would look like if the designer had chosen a different font.

The Noun Project. This site is creating a huge library of icons, most of which have Creative Commons licenses, so anybody can use them free. For a site that is focused almost exclusively on icons and typography, picking the right font was critical. Helvetica, one of the all-time classics, does a great job.

When this site is reworked with another standard Web font, Courier New, it changes dramatically as you can see below. With small point Arial in the search box —a common font in many Web forms—it’s just not as enticing to play around with. Within the classic Web-friendly fonts, the simple beauty of Helvetica seems to fit best.

826 Seattle. This site, which showcases a writing program for young people, has a classy look thanks to its use of the beautiful fonts Museo Slab and Futura.

When these two well-paired fonts are replaced with a universally available—and overused—Times New Roman shown below, the page instantly flattens from a severe lack of contrast. While all the other design elements remain the same, the site loses its elegance. This is a great example of how the availability of new Web fonts can open up a ton of new design possibilities.

Central Park Sydney. The Web site for this new mixed-use development in Australia combines the trendy Knockout font with the playful but elegant Archer to produce a modern, creative, and original look.

When the fonts are replaced by Georgia, an early Web font shown below, the site feels less unified and clean. Changing all capital headers for upper- and lower-case letters takes away from the elegance of the design.

Here are a few of the fonts I’m using a lot right now:
Futura, Gotham, Proxima Nova, Museo Sans.

What are some of your favorite fonts?

The home page offers a link to the mission statement (which is a bit vague) but doesn’t tell me right away what the group does, as I suggested in my overview of key points for a nonprofit home page.

The main call to action is to find your local Goodwill, which might be the step the organization wants most visitors to take.  If however, donations are just as important, the ability to donate could be featured more prominently.

Like other nonprofits, Goodwill could benefit from a better presentation of dynamic content. Not only is it important to educate first-time visitors but it’s just as important to persuade people to return again and again.

Goodwill does a good job of including some blog titles on the home page, but they are buried, use just plain text, and are a bit unattractive.  Using better fonts and adding images could generate a lot more repeat visits.

What do you think? What could Goodwill do better? What do you like about the home page?

More: The Secrets Behind Successful Nonprofit Home Pages

The home page of The Michael J. Fox Foundation finds a way to avoid some of the potential pitfalls of a popular design approach: the slideshow.

But the page doesn’t meet all the standards that a good page needs, as I noted in my overview post.

The fact that the main slide disappears before most people would probably have enough time to absorb it works against the group. The main text, “The answer is in all of us,” sounds a lot like marketing speak and doesn’t tell us anything of substance.

However these problems are mostly offset by a strong brand identity reinforced by a famous celebrity, the subtitle, “You can be part of our mission to speed a cure for Parkinson’s disease,” and the organization’s name, which includes “for Parkinson’s Research.”  If the organization didn’t have such a clear name and well-known celebrity, it might struggle to keep visitors engaged long enough to understand its purpose.

Below the slideshow, viewers see three clear calls to action and a fourth just below this row with sign-up forms located on the home page.

The fact that all four of these fall below what many people will see without scrolling down, and that the design of the top three calls to action gives them equal weight, decreases the likelihood that people will click to learn more.

All in all, though, this is a site that has a strong brand behind it and offers anyone with a bit of patience a good glimpse into the group’s activities and how to get involved.

More: The Secrets Behind Successful Nonprofit Home Pages

Designers have long praised this page for its simplicity, a key feature, as I noted in my post Monday.  The slideshow at the top focuses on the most important issue, while giving you a sneak peak at two other features.

Some Web sites rely on slideshows to showcase a nonprofit’s latest and greatest projects, but in doing so they forget that newcomers to the site may feel disoriented by seeing a current campaign without being told about the purpose and activities of the organization.

One.org overcomes that problem by including “Join the fight against extreme poverty” in big letters below the slideshow.  This statement is clear, concise, and action-oriented. It encourages you to get involved, while the forms below the statement make it easy to do so.

As soon as you see what the organization is about, you are only a few clicks away from getting involved.  Clear calls to action with few barriers will greatly increase the number of people who go from viewers to supporters.

But that’s the organization’s international home page. It has another home page designed to be seen by American visitors, which lacks many of the elements that make the other one great, including the clear explanation of the organizations purpose, a call to action, and sign-up forms.  That said, these missing elements are more than made up for by a funny video featuring Zack Galifianakis.

More: The Secrets Behind Successful Nonprofit Home Pages

Its old site had a diagram that explained the process very clearly, but its new home page relies on just one sentence “Empower people around the world with a $25 loan.”

As someone who is very familiar with Kiva, I think that’s a well-written sentence. However, those who are unfamiliar with the organization or the concept of micro-loans may struggle to understand what it’s all about. That’s a problem, as I noted in my overview of what makes a great home page.

Upon arriving to the site, a pop-up automatically appears, showcasing one person who you can help with a loan. The pop-up gives you a very specific action to take—”Lend Now”—and a secondary one—”Browse all loans.”

If you are inclined to do either of those things, it’s great, but it can be a bit confusing if you realize “lend now” only refers to the person in the pop-up. There’s no back button or a way to close the pop-up, which are small points, but could be frustrating for some less patient people who are accustomed to these standards.

What do you think of Kiva’s home page? What are its strengths and weaknesses?

More: The Secrets Behind Successful Nonprofit Home Pages

The first thing to remember is that people tend to scan Web pages. Long passages of text that explain an organization’s mission and values are rarely read and take up valuable real estate on the home page. Within a few seconds, visitors to your site should understand what you do and what actions you want them to take.

When creating a home page, it’s essential to write and rewrite the main text until a clear, intriguing, and very short explanation emerges. Many visitors spend only a few seconds trying to understand what they are looking at, and if they’re confused they will probably move on.

Once visitors know what you do, they need to know what you want them to do. Home pages should have at least one clear call to action, such as “donate now“ or “sign up for our newsletter.” More vague calls to action, such as “join the movement” or “take action” can work, as long as the site provides enough context to explain what they mean.

As with the central message of the site, the calls to action are competing with all the other content on the home page, so you want emphasize these key features and question the necessity of everything else.  If something isn’t essential to the home page, get rid of it.

Many of these design principles are common sense but not common practice. Over the next few days, I’ll analyze some nonprofit home pages to discuss what works and what does not. But in the meantime,  tell me what sites you think have great home pages, and why, in the comments section below.

More:

• Goodwill’s Home Page: Missing a Chance to Win Supporters

• Michael J. Fox Charity’s Home Page: Patience Required

• Simplicity in Home-Page Design: One.org

• Kiva’s Succinct Mission Statement: Does It Work on the Home Page?

Too often, nonprofits attempt to do too much with a logo, or they use generic, ubiquitous, and clichéd visual motifs that ignore what makes a group special.

How many times have we seen a nonprofit using a logo with people holding hands? Or maybe the ever-popular abstract human-like figure.  Perhaps they were joined in a circle, or included the planet:

It is, of course, easy to understand the thinking behind these logos. Many nonprofits serve people and the planet. It makes sense to show people lifting each other up, holding hands, working together, and making progress as a community.

However, if your logo looks like everyone else’s logo, you stop saying anything at all.  If all nonprofits see themselves as helping people and the planet, you don’t really communicate anything valuable by focusing on such a generic theme.

To communicate the right message, it’s important to find the right designer–someone who takes the time to understand your organization’s core values and what makes you different. Then you can focus on creating a logo that truly captures your story. Here’s what to keep in mind as you begin:

Overly complex logos can sometimes lead to funny misinterpretations.

This logo was designed in 1973 for the Catholic Church’s Archdiocesan Youth Commission.

Comprehensive Health Care … in the nude.

In contrast, below are some examples of logos that are simple and distinctive and that send a clear message.

Use shapes that have meaning.

If you are going to use multiple shapes, colors, etc., then know why you are doing what you’re doing. Every element counts, and you should be able to explain to anyone what each piece means.

Established in 1995 by Unicef, Voices of Youth is a global project that seeks to give young people a place not just to voice their opinions but also to learn about major social issues such as the environment, HIV and AIDS, and human rights. Its logo, shown below, is both inviting and youthful, giving the sense that such serious matters can be tackled and even remedied by young people.

Voices of Youth even created an icon series that plays off the speech bubble in a great use of design to tell a story and engage its audience. Here’s the series that it uses throughout its Web site:

Personality matters.

Nostrand Park, a group that promotes arts and culture in the Crown Heights neighborhood in Brooklyn, was able to get a logo designed pro bono by Wire Media, a company that works with socially responsible businesses and many nonprofits. The logo is based on the concept of “intersections” and strives to reflect the vibrancy of the neighborhood, which is  composed mostly of people of Caribbean descent or people of the Hasidic Jewish faith.  As you can see below, a simple yet eclectic color pallet combined with custom typography, gives the group a personality that draws people to it.

Simplicity is key.

Think about logos you really love. Why do you love them? And think about those you don’t like. Why do you remember them? Are they overly complex, too literal, too abstract, or do they strike your interest and leave you wanting more?

One, an advocacy group that seeks to curb poverty, struck the balance just right with its simple and bold logo. No complex color scheme or human figures. It’s serious but inviting. With the use of black and white that’s carried over to its Web site, I get the feeling that poverty can be tackled. All I have to do is take action.

You may think that a more literal logo (the ones with the globes, human figures, etc.) would better appeal to your constituencies. But remember that before you try to please your board of directors, lawyer, and staff members, you’re first catering to people who ultimately like beautiful things. When evaluating your logo or approaching the redesign process, here are a few key words that can help:

• Simple
• Has personality
• Tells a story (but not a long one)
• Every element carries meaning
• Void of any unnecessary elements

Working with designers to achieve those goals is another story, of course. We’ll tackle that in a later post. Meanwhile, let us know what nonprofit logos you like and why.

But great design isn’t just for for-profits. Nonprofits like Charity: Water, ONE International, Product RED, and the World Wildlife Fund have made design central to their work.

These innovative organizations have a profound awareness of the power of design to signal quality, communicate purpose, visualize their impact, and create experiences that inspire and engage audiences, old and new. As attention spans decline, donation options increase, and digital tools proliferate, harnessing design becomes one of the most powerful ways for an organization to amplify its influence.

As you look for ways to use design to advance your cause, I hope Redesigning Good provides an abundance of practical knowledge and gives charities working on good causes greater confidence about their ability to use the latest in cutting-edge design. Please visit often and share your thoughts, ideas, challenges, and successes. I’m looking forward to advancing the discussion about design and good causes with you.