Tag: website redesign

With the increasing use of Google Analytics, more nonprofits are measuring their websites’ performance and expecting their sites to deliver more.

Nonprofits expect more because we are no longer happy with websites that just look good. Measurement means that we expect our sites actually to perform. And each time we measure, we expect the data to tell us how we can improve our websites.

However, improvement goes way beyond just updating website content or navigation. It’s an organization-wide process that requires buy-in from leadership and a commitment to put users first. It means giving staff protected time and funds to test and experiment. It also means that your website must continuously adapt to users’ expectations.

Improvement cannot wait until your nonprofit redesigns its website. Instead, it must be regularly scheduled into your organization’s work plan, so that the website adapts and grows with your organization.

Here’s how to make website improvement a regular practice in your organization:

1. Use website measurements to help your organization meet its goals

Most nonprofits measure their impact each year by how successful their major projects or events have been. Your website should be the tool that helps you achieve that success.

When your goal is revenue

Start by defining the specific goal for your event, e.g., raising $100,000.

Direct all your incoming communications (such as email, ads, and social media) to a specific landing page on your website. The purpose of the landing page is to remove any distractions and focus your readers’ attention on just one issue: raising funds for your event.

Using Google Analytics, measure such activity as where users come from, how long they stayed on the landing page, and what they clicked (either to the donate page or ticket purchase page).

Measuring helps you determine what needs improvement. For instance, if traffic is low, test out different types of copy on your incoming communications pieces. If the click rates on the donate/purchase button are low, experiment by changing the placement of the button, words used for the call to action, or get opinions from some of your users on how you can make the landing page copy more persuasive.

When your goal is awareness

In this case, your website should be improved to increase engagement. While people can see your appeals, petitions, or website content, it’s not enough for them to know. Awareness must lead to action or a deeper willingness to understand more about the causes promoted by your nonprofit.

Here’s where your website can help: by measuring responses to surveys/polls, conversations in discussion forums, or the number of email signups, your nonprofit can gauge the level of interest in your cause.

Designing a persuasive homepage is the first step, as it should contain a broad statement announcing your vision. Once again, measurement is key. If people are landing on your homepage, but there’s a high bounce rate, or a low sign up rate, experiment by changing your feature image and impact statements. Your copy should include statistics, stories demonstrating personal benefits to those your nonprofit has helped, or provide practical tips on how your readers can help.

2. Schedule improvements

While item 1 deals mostly with monitoring and measuring your users’ engagement with the website, website improvement also requires that your internal processes be in sync. Shane Diffily calls this website governance, and it covers four areas:

  • Governance: Creation of a structure and internal systems to manage your website. Having governance also requires alignment with strategic goals and working directly with leadership.
  • Infrastructure: Maintenance of website technology, such as code, hosting, or content management systems.
  • Maintenance: Updates to content and navigation fit here, as does measuring impact, conversions, and conducting user research.
  • Development: This includes tasks to develop a new website section, such as planning, testing, launching, and training. It can also be applied to the development of a new website.

How to implement a governance plan

Create a schedule that allows you to plan improvements consistently. You can download the full spreadsheet for free on my website.

spreadsheet showing sample governance schedule with tasks down the side and months across the top

The schedule should be collaborated on throughout your organization (not just by the communications/marketing team). Include future planning, technology changes, and even how you will obtain buy-in. Align any improvements with the budget, operational, and strategic goals.

3. Use data to get buy-in

Data gives leadership the ROI they are looking for. It’s also key to obtaining their buy-in when trying to convince them that websites need constant testing and experimentation beyond the redesign period.

NTEN offers basic and advanced courses on how to read Google Analytics data.

However, data needs context and explanation. Here’s how to make the data meaningful for your leaders:

  • Group your information by goals. That way, data presentation helps to highlight your wins and becomes relevant to leaders’ needs.
  • Pull out metrics that demonstrate how your organization has met its specific goals. For instance, how much has been raised, how many registrants do you have to a conference or event? How have donations or memberships increased?
  • Get more specific. For instance, did your email messages lead to readers directly visiting the donate page on your website? Did readers click a unique link to download a resource? Have visits to a unique page on your website have increased in a certain period?
  • Ignore vanity metrics such as visits, users, or session times. While traffic may have increased to your website, such traffic loses value if very few of the visitors are taking any action.

 

With these tips, your website will become a powerhouse that will justify the cost spent on any redesigns. It will also become a living tool that contributes to your nonprofit’s success.

When a web design agency receives an ill-prepared RFP, they are far less likely to take the time to prepare a proposal for the project, or the proposal will be less accurate and useful. If you decide to create an RFP, then a strong website RFP is a beneficial first step toward a successful new website.

Why Create a Request for Proposal?

When prepared well, RFPs can serve a valuable purpose for nonprofit organizations. An RFP for a nonprofit’s new website can:

● Help all partners think through the scope of a new website.
● Build consensus within the nonprofit about project goals.
● Clearly and consistently explain the project to web design agencies.
● Demonstrate to agencies that you are serious about the project.
● Help to ensure consistent proposals for easier and more informative comparisons.

In any given week, I review 5-10 request for proposals. Inevitably, many of them fail to achieve some or all of the goals listed above. Here are some of the most common mistakes I see in RFPs.

Mistake #1: RFP spam

RFP spam is when an organization blindly sends an RFP to dozens or hundreds of agencies. Maybe these leads were discovered through a list of qualified agencies, or maybe they were collected randomly from browsing web design agency websites.

Bonus mistake: Forgetting to use blind copy (Bcc) in the email announcing the RFP, so everyone on the list can see all the other agencies contacted. Many qualified agencies will decline to respond to this type of mass solicitation.

A more effective approach is to send a thoughtful, directed communication.

Gather references from colleagues or friends, or research leads using an analysis agency l. Create several metrics to inform choices likely to be a good fit, such as experience in your industry, examples of work with similar types of organizations, size, location, or quality of work.

Then contact the 5-10 agencies that you’ve decided might be a good fit and conduct 15-minute introduction calls. You’ll quickly discover which agencies are likely to be a good fit. You might also discover new details to add to your RFP. Once you’ve narrowed your list, personally invite the 4-5 most promising agencies to respond to the RFP.

Mistake #2: micromanage the format

Unnecessarily complicated delivery processes and formatting requirements create additional challenges. Micromanagement can signal that an organization is more concerned about rules and bureaucracy than quality, likely discouraging quality agencies from responding.

Here’s an example from a recent RFP:

…Strict conformance to the specified proposal format and completeness of required content are essential. Lack of any listed item will disqualify a proposal … One (1) copy shall contain all original signatures and be marked “Original”. Proposer shall also submit one (1) digital (thumb drive) and nine (9) hard copies of their proposal marked “Copy”. Proposals shall be submitted in three ring binders. Cost Proposal sheets shall be separately placed into sealed envelopes separate from Proposals and labeled “Confidential”. Each section of the proposal shall be tabbed in accordance with the below number system…”

Bonus mistake: Requiring multiple print copies of proposals may send the wrong signal about your organization in today’s eco-conscious business environment.

Instead, allow requested proposals space and flexibility to showcase the strengths of the agencies bidding for the contract.

In most cases, the digital agency’s proposal format is a strong reflection of their future work. If the proposal is disorganized or filled with errors, their work will likely also be disorganized. If the proposal is organized, creative, and elegant, there’s a good chance their work will be too.

You should specify the requirements of the proposal (examples, references, budget, etc.), but also allow the agency to meet those requirements in the format that best represents their work.

Mistake #3: withholding the budget

Some nonprofit organizations decline to provide a budget or budget range, perhaps because the organization wants to get a great deal (who doesn’t!) and doesn’t want to only receive proposals in an overly prescriptive budget range.

However, similar to shopping for a car without deciding on a budget, there are great values at nearly every price point.

Sadly, most digital agencies invest great effort to prepare a proposal only to discover that the budget allocated for the project is a tiny fraction of the effort required. Many agencies today will decline to respond to an RFP if a budget range is not disclosed.

Disclose a budget or budget range, so agencies can help prioritize and accurately describe what is possible in that range. Most digital agencies are pleased to work with your budget, or will tell you if the budget it too low.

Mistake #4: unclear (or fake) process

Some organizations are not clear about the RFP process they will follow, or they are requesting proposals because a minimum number of “bids” are required.

Here’s an example of an ineffective invitation to submit a proposal:

Subject: Website Bid
Date: Tue 20 Mar 2018 09:38:04 – 0700
From: < Uncertain Company >

Dear Vendor,
We are considering redesigning our website. Please prepare a proposal from the attached specs. Once we receive a bunch of proposals, we’ll decide if we want to move forward with the project.
Sincerely,
< Uncertain CEO >

This email implies that the digital agency’s time may be wasted if the organization decides not to proceed with the project. Certainly, any organization can reject all proposals submitted, but leading with uncertainty about the project is likely to discourage responses from qualified agencies.

Instead, agree on a process with the entire organization before issuing the RFP, and then be clear about that process in the RFP.

Mistake #5: unrealistic timeline

Some organizations propose an unrealistic timeline that can impact cost or dissuade qualified agencies from responding.

For example, here’s a timeline from an RFP I recently received:

8.3 Schedule

November 1 RFP Released
November 7 Questions Due
November 8 All Questions Answered
November 9 Proposals Due
November 12 Interviews
November 14 Firm Selected
November 15 Board Approval
November 19 Project Kick-Off
December 21 Website Launches

This timeline is highly unlikely to succeed.

First, most agencies will decide to proceed and begin serious work on a proposal after questions have been answered. In this case, there is only one day between when questions are answered and the proposals are due.

Although it’s possible, most organizations cannot review proposals and schedule interviews within two days, and even fewer can get approval from their board in a day.

Asking an agency to start a project just a few days after you’ve notified them they’ve been selected is unrealistic. Finally, trying to launch a new website within 30 days in the midst of the holiday season would be challenging.

Instead, propose a realistic timeline and suggest that the agency can recommend a timeline as well. Leave time in the schedule to meet with agencies and answer their questions. If you have hard, event-driven deadlines, take time to explain them.

A model website RFP template

Requests For Proposals can be an effective tool when used well. Avoiding these common mistakes will help your next website RFP get the results you’re seeking.

If you’re embarking on a new website design project and want to use an RFP, Urban Insight provides a free Model Website RFP Template (disclosure: name and email address required to download), which I created in collaboration with several digital agency owners to provide a concise, easy-to-modify template with sample language. We created this template to help avoid these mistakes and help nonprofit organizations think through the website project and help find the best agency partners.

48in48 is a nonprofit with a unique mission to connect 48 nonprofits in a chosen area with skilled marketing and technology professionals to give them new, professional websites and a fresh marketing strategy—all in just 48 hours. We asked co-founder Adam Walker what motivates them and how they tackle the unique challenges of nonprofit websites.

What makes a great nonprofit website?

A great nonprofit website has to start with a story. If the nonprofit can’t tell their story within one or two sentences at the top of the website’s homepage, that’s a problem. The second thing every nonprofit website needs is a call to action. It’s great that people are on your website, but what do you want them to do once they get there? Every website user must be directed through the site to find what they are needing. A good call to action will help them to do that. And third, every nonprofit website must have the ability to donate. That is the first place many people go when seeking to donate. If the donation process is too long, or complex in any way, the nonprofit will lose out on that revenue, and that person will likely never return.

What are the key challenges nonprofits face in developing websites?


There are several challenges nonprofits need to overcome to build a website. The first is that they need to own and have control of their domain name. Often a nonprofit will have a domain name registered by a volunteer and have no idea that they don’t even own it and have no control over it.

The next challenge is content. Writing content is tough, and there is often a mental barrier to getting started. The secret to writing great content is first to block out the time to write (uninterrupted) and second to think about who you are writing for and what they want to know. Once a nonprofit can do that, they will be able to at least get a draft of their website content complete and then get other people to help refine and improve it.

The last challenge is technical expertise. Many nonprofits have a website, but have no idea how to keep it up to date.

How does your initiative solve these problems?

We have courses that help nonprofits through identifying where their domain name is registered, walking them through content writing with some coaching, and training them on how to use their new website. We want to enable nonprofits to have full control over their websites so that they can leverage them for faster growth.

What kind of nonprofits are you looking for?

We look for nonprofits with the following criteria:

  • Under a $3M dollar budget
  • Has 1 or more staff
  • Is generally nonreligious and nonpolitical
  • Is not on an extreme fringe of a societal issue

What motivates your organization to support nonprofits in this way?

Nonprofits spend all of their time doing good, not looking good. But, with some good marketing, we can help nonprofits look good, and that will help to grow and further their cause in many ways. A new website helps a nonprofit with donor and volunteer engagement. It often also helps them to better serve their community through a heightened awareness of what they are doing.

There are trees, and there is forest. There are anecdotes, and there is data. There are the pinprick pixels of our individual experiences, and there is the vast picture they paint together of the world we share.

The M+R Benchmarks Study is our annual attempt to bridge that divide. This year, we have collected an extensive array of data points from 154 nonprofit participants. Each of them marks a single digital interaction with a supporter: an email opened, a donation made, a petition signed, a website visited, an ad clicked, a Facebook post liked, or tweet retweeted. All told, these add up to 4,699,299,330 email messages, 527,754,635 web visits, and 11,958,385 donations.

NTEN is proud to partner with M+R once again for the latest Benchmarks report. Explore or download it here.

 

Rebranding: It’s no joke. For anyone working in communications, the idea of a rebrand is a dream. Ok, well, maybe for some. For me, it was huge. I was excited about my organization changing its name after 35 years, because I knew a better name and sharper logo would help me better explain our work. Our new name and logo does just that.

And more selfishly, I was thrilled for the opportunity to manage a website rebuild, design new collateral, and get into the weeds in places where I’d only scraped the surface before.

Before I could dig into the fun stuff, I had to get our house in order. We hadn’t had a major website refresh since late 2014, and while our site was technically up to snuff, we were up against a harsh reality: with consistent, year-over-year growth of about 25%, other measures of success were not also rising, most notably transactions.

Using data to drive decisions

I started by looking at Google Analytics, Optimizely, and Crazy Egg. How are users navigating our site? Where and why are they dropping off? And importantly, what is it that makes them sign our petitions, join our email lists, and ultimately open their wallets to power the work we do in 56 countries?

The great thing about sites like Optimizely and Crazy Egg is that the data is straightforward. Either people clicked on a headline or they didn’t. We found that users read more of a story when there was a big image at the top, not when we put an image a few paragraphs down into the story. And while we clocked great traffic to our disability rights and country pages, we couldn’t harness those streams of traffic for action.

It’s important for charities like ours to dig down and see where we’re doing a good job of encouraging our users to take an action. Analyzing where and when they donated was key, because if we can crack that nut, we can amp it up a notch.

Yet the more we dug, the more we realized that we had a disconnect. We could see donations coming in, we could count more petition signatures, but because our Google Analytics account had some major disconnects (for reasons unknown to our team), we were unable to see the big picture and answer those important questions about UX (user experience).

Finding consultants

Like any other organization going through a rebrand with a comms team of two, I searched high and low for a consultant and outside contractors. Funnily enough, it was at the 2017 Nonprofit Technology Conference that I met some Google Analytics gurus from an exhibitor there, Forum One. Since then, they’ve managed to clean up the account and installed E-Commerce, which accurately tracks document downloads, petition signatures, and donations, and populates a pretty dashboard on Google Studio that shows us the data above the weeds.

Then came the fun part: the website rebuild. We considered a few different options for our CMS, but ultimately stuck with NationBuilder, our current system (though some of our colleagues abroad ended up choosing another platform), since it has worked well for us as a user-friendly site that looks good, doesn’t break the bank, and helps us manage our growing database of online friends.

After an RFP process, we opted to continue working with our trusty developers from Liberal Art. We’ve been happy with their work over the years and knew that they would deliver a clean, modern site.

Building and testing

Three months before the launch, we started going back and forth on wireframe designs, what the footer should include, how we want users to consume our news, where we should put that big orange donate button, and so on.

I got into the weeds again on things like colors. WebAIM’s Color Contrast Checker was one of my best friends throughout the process. Humanity & Inclusion works alongside with people with disabilities and other vulnerable groups, so the site had to be built around accessibility. The Color Contrast Checker helps ensure that people with low vision can read our headlines based on Website Content Accessibility Guidelines (WCAG).

After weeks of testing and ensuring a mobile-friendly site, the site was ready to launch! Our brand launch date in January came and went. Our team shared the news of our new name and more-accessible logo (it even won an award!) over email, across social, and beyond. Our donors, supporters, friends on social, and other friends we met along the way all seem to approve of the change and some have even used the word “love” about our new name and website.

For the most part, everything we had planned in advance throughout the rebranding process went off without a hitch. Of course, there were a few minor glitches along the way and some limitations when building the site, but this wasn’t surprising and we were able to adjust.

Managing post-launch

For weeks, I planned on sharing the big news on social with a countdown GIF (“5, 4, 3, 2, 1…here it is” sort of thing) and it failed miserably. It barely had any likes or retweets and the shares compared to other posts were just sad. In fact, the simple post we shared on a Facebook event had way more likes and shares than that silly GIF that I spent time designing. Who knew? Overall, the post the prompted the most engagement was our Be a Lifeline campaign video.

So what happens after a rebrand? People start flocking to your site to click on that big orange donate button so they can make a tax-deductible gift. Ok, so that’s not quite how it works, but you will spend the first few days tightening loose ends and ironing out wrinkles—because there will always be a few wrinkles once everything goes live. And there will be things you decide to change just based on UX.

Since the launch, we’ve already made a few minor changes like making headlines clickable based on data from heat mapping. And over the following weeks and months, I’ll continue testing as much as I possibly can to see what’s working and what’s failing miserably. I’m sure there will be a few surprises but that’s what makes digital communications work so much fun.

One of the many updates we had to make was on our Google AdWords Grant account. That was easy. What wasn’t easy was Google changing their rules around the same time that we launched. I’m still on that learning curve.

Last thoughts

A bit of advice: don’t go it alone. We worked closely with our colleagues in other Humanity & Inclusion offices, especially those in Canada, the UK, and Belgium, to ensure that before, on, and after launch day, we were drumming a strong, unified beat. I also leaned on friends from NTEN. Fellow NTENners who’ve been in the weeds of a rebrand before helped me navigate updates on our social accounts (tip: contact Facebook about your name and URL change weeks in advance!), testing the website for accessibility, and more.

Like I said, rebranding is no joke. But with a plan in place and support from colleagues, friends, and contractors, it can be incredibly rewarding.

Mark Root-Wiley is a member of the faculty for NTEN’s online trainings and is leading Anatomy of a Website Redesign in January, 2018. A version of this article first appeared on The Nonprofit WordPress Guide and is reprinted here with permission.

When you’re in the planning stage of a website redesign project, it’s important to involve lots of people from your organization. Every nonprofit staff person is a wealth of institutional and experiential knowledge! Your coworkers may rely on your website for important back-office functions or they might interact daily with the people your organization serves online. Hearing these things early in the planning stage will improve the result of any website redesign project.

Collecting feedback from staff serves two key purposes:

  1. Compile information from different perspectives across the full spectrum of your organization.
  2. Generate buy-in for the project by making sure people feel heard and know their needs will be addressed.

These questions will help get that information and start moving your website redesign forward.

[Important caveat: It’s common for organizations to only collect feedback and ideas from staff and other internal stakeholders. That’s a mistake—it’s critical to learn from real users of your website since you’re building the website for them. As the classic saying goes: “You [and your colleagues] are not your user.” That’s all just a topic for another day…]

The questions

Once staff have answered these questions, you’ll have valuable information rooted in your organization’s back-office needs, anecdotal stories about the people who use your website, and useful examples successful and ineffective peer websites. Most of these questions work with board members, too, with only minimal modification.

Your goal is to focus on both the work your organization does and the big-picture needs for the website. Avoid getting too specific with discussions on how things look or exactly how a feature will work during this early planning stage.

  • Why do we need a website?
  • How would your job be harder if we didn’t have a website? What are the key ways it supports your day-to-day work?
  • What questions do you get asked by email, phone, or in person most often? Who are the people asking these questions? Can the website answer (or begin to answer) any of those questions?
  • What are three websites you wish our site were like? What are the specific ways our site should be similar and different?
  • What are three websites our site should not be like? What key problems with these sites do we need to avoid?
  • What are the good things about our website that we should be sure not to lose?
  • What are the worst parts of our website? How would fixing those things make your job easier?
  • What decisions made about the last website lead to the need to replace it now? How can we avoid making the same mistakes?

Collecting the feedback

Once you pick which questions you’ll be asking, you can collect this information in different ways. The right choice for your organization will depend on the number of staff and how you normally communicate with your colleagues. Gather ideas using:

Online or paper surveys

  • Emails
  • Interviews
  • Phone calls
  • Video chats
  • Lunch or coffee dates

Finding the right format can be tough, but it’s worth putting a bit of effort into. Find a way to help people feel comfortable and give them the space required to focus on thinking about these questions. If you’re an organization with lots of one-liner emails, that’s not the right format for this activity.

This isn’t the time for focus groups. Make sure you collect this information individually to avoid “groupthink” or arguments over “what the website should do.” It’s much too early to make decisions about the design, features, or content for the new website.

Next steps

Once you’ve collected everyone’s input, standardize and analyze your findings. Put it all in one place and share your big picture takeaways with everyone. Your goal is to make sure you accurately heard what people said. Sharing this information with everyone is a good transparent practice that helps people understand the wide range of needs and ideas for the future site.

The information you collect, synthesize, and report will be a valuable resource for whoever builds your site (even if that’s you). Immersing yourself in your organization’s needs—not just your ideas about websites—puts you in a perfect place to get started on your next website that will help you improve people’s lives!

In 2016-2017, a Washington, DC–based nonprofit with a staff of about 40 and a 3.5 million-dollar budget undertook a redesign process to convert a ColdFusion website into a content management system with a custom mobile-responsive theme.

To make sure the finished results worked, the website team made strong efforts in:

  1. understanding the overall needs of the website,
  2. involving staff in specifying their own needs,
  3. determining content types,
  4. thinking in terms of lists,
  5. testing against assumptions,
  6. creating reporting mechanisms, and
  7. wireframing/building/testing/refining,

Feedback loops were built in to the ongoing process in order to course correct and gain early constructive criticism from internal stakeholders.

Tip #1: Understand overall needs

The team tasked with pre-planning the redesign process undertook a review of existing web pages and reached consensus that content belonged under different lenses, programs, campaigns, and actions.

The team identified the organization’s theory of change, current audience, new website objectives, comparables, desired functions, specified revenue models, and desired budget and timeline, and circulated this information via an RFP.

Example A. Website RFP Top 10 List

Better storytelling -> Optimized content -> Engages more people -> More social change -> Greater financial support -> Fulfills our mission.

Top 10 must-have list (goals for the site):

  1. Increased email sign ups, social engagement, and activists
  2. New donors: the website needs to encourage people to sign up as donors with attractive donation pages
  3. Stay on budget. We are open to creative work share solutions
  4. Clarity and Simplicity: needs to give visitors a clear sense of Green America’s work
  5. Attractiveness: A clean look, beautiful storytelling, and responsive design
  6. Flexibility: we do lots of stuff. Our ability to adapt has always been our secret weapon. Our website needs to be flexible to handle our diverse content and programs
  7. Ease of Use on the backend: we will have many editors with various technical expertise (the ability to update the website frequently is essential)
  8. Integration of all our channels and platforms: Daughter Sites, Blogs, Social, Digital Publications, Apps, SALSA (action CRM), Raiser’s Edge (fundraising CRM), Charity Engine (donation pages)
  9. Authentic product/sponsorship placement
  10. Visual Story: Telling our stories in a visually compelling manner to better engage audiences and increase shares of our materials

Takeaway #1: What to do

During pre-planning, convene individuals across different teams to construct a shared model for content. Aim for transparency around budget, timeline, and requirements for the website.

Tip #2: Involve staff in identifying their own needs

By mapping out content across major areas, staff better clarified their understanding of how content fit into lenses, programs, and/or campaigns. A pilot content management system allowed staff to test their assumptions against real data.

Example B. Early model of content hierarchy and structure

Team members continuously articulated how content fit into the proposed data architecture. For example:

Lens Program Campaign Focus Area Action Issue Topic
Food GMO Inside

Good Food for people and planet

Starbucks

No GE Wheat

Organic

Say no to GMOs

Climate

Factory Farms

Pesticides

Tell congress to stop trading our food stystems.

Tell congress to reject TPP

Tell Kraft to Remove GMOs from Miracle Whip

Tell Starbucks to go organic

Let Mars know you say no to GMOs

Tell American What Growers Association no GE Wheat

Soil not Oil

GMOs a case for Precaution
Don’t have a Cow

21 foods to always buy organic

An external design firm worked with staff to sketch out user personas, delve into content relationships, formalize roles and permissions, and determine the initial menu.

Example C. Sample site map content

Food Climate Labor Finance
Fight GMOs Fight Dirty Energy Ending Child Labor Save for Yourself and a Better World (banking)
Beyond Organic Invest in Clean Energy Ending Smartphone Sweatshops Divest from Fossil Fuels, Invest in Clean Energy
Fair Labor Better Paper Ending Sweatshops in Supply Chains

Finding Fair Alternatives

Green your Money/ Finances (investing)
Take Action:____ Take Action:____ Take Action:____ Take Action:____

Takeaway #2: What to do

Allow multiple opportunities for individuals to voice concerns, update assumptions, and validate the model against live data.

Tip #3: Determine content types

Content types evolved whenever staff identified a long bulleted list of the same type of content. For example, blog posts, media mentions, events, staff listings, job descriptions, magazines, press releases, and business listings all converted to “content types.”

Required fields emerged from discussions about content types. For example:

  • Media Mention = Title, Website link, Image, Byline, Body text
  • Business listing = Organization Name, Categories, Website link, Image, Address, City, State, Zip, Body text

Example D. Sample content type for a blog post

This is an example of blog fields:

Field About the Field
Blog Post Type Multiple choice, multiple answer, choose from categories)
Body Long formatted text
Display Image Image upload allowing for pngs, jpgs, or gifs
Business Network Recommendations References a list of all available businesses in a related directory
Relevant Lens Multiple choice, multiple answer, choose from a list of available lenses
Relevant Program Multiple choice, multiple answer, choose from a list of available programs
Relevant Campaign Multiple choice, multiple answer, choose from a list of available campaigns
Tags Free tags in keyword style

Certain fields existed across content types. For example, the “Relevant Lens” field attached to campaigns, programs, actions, victories, and press releases.

Takeaway #3: What to do

Create fields for each type of content. Identify fields to repurpose across content types.

Tip #4: Think in terms of lists: referencing entities and normalizing data

Certain fields became standardized and used across multiple content types. For example, almost all content types require an image field, so content types used a “Display Image” field.

As another example, blog posts, media mentions, programs, campaigns, and actions all used the same “Relevant Lens” field to reference available lenses.

As a final example, blog posts, articles, and green living pieces used the same “Relevant Program” and “Relevant Campaign” fields as reference fields. The list of all available programs or campaigns continuously updates upon the addition of new programs or new campaigns.

The idea of “entity referencing” allows users to continually grow and easily make changes, because any list of referenced content is always “up-to-date.”

Normalizing means an edit to a specific piece of content perpetuates through all instances where that piece displays. By using normalization, categorization of items, and entity referencing, it became easier and easier for any privileged user to make changes sitewide.

Example E. Data normalization samples

5 Most Recent Blog Posts: On a blog post, a list of the 5 most recent blog posts displays on the bottom of every page, in descending chronological order (most recent first). Any new blog post auto-adds to the list. Any edit to the title updates in all instances.

Fruit List: A fruit list begins with apples, oranges, blueberries, and bananas. Additions like blackberries, peaches, plums, nectarines, mangoes, strawberries, and papayas automatically display on the “Fruit List.”

Fruit List Categories: Categorizations on fruit include “Citrus” or “Berries.” Additions such as “Stonefruit” automatically update, such that a categorized list might read:

  • Berries: blackberries, blueberries, strawberries
  • Citrus: lemons, limes, oranges
  • Stonefruit: nectarines, peaches, plums
  • Tropical: mangoes, papayas
  • Not Yet Categorized: apples, bananas, starfruit

Takeaway #4: What to Do

If an “edit” button makes sense next to every item in a list, convert that list to a content type: most useful for items such as blog posts, press releases, events, staff listings, directory listings, and similar content.

Tip #5: Test against assumptions

During the buildout, question if the articulated data structure matches staff needs. By taking time to find and correct incomplete/faulty assumptions about content relationships, all stakeholders better understand the final product.

As an example, a “Magazine Issue” offers the ability to choose from a list of available “magazine articles” in order to display “featured articles.” A “Lens” offers a display of “relevant pieces.” In one case, our team mistakenly focused on “parent” relationships for content, and based on feedback, turned that into focusing on “child” relationships.

Example F. Choosing relevant pieces on a lens

A “Climate” lens shows a green living piece “Cut Your Carbon at Home” and a blog post “Add Socially Responsible Investments to Your Workplace’s Retirement Plan.” On any lens, the “entity reference” field helps specify relevant pieces, in their desired display order.

Takeaway #5: What to Do

Course correction takes time. Identify, test, review, and go back to the drawing board based on feedback from editorial and program staff. Large projects require flexibility to address initial incorrect assumptions.

Tip #6: Create reporting mechanisms

Reports help staff understand the website content better. Report-building benefits when customized to the specific type of user requesting that report. Early beta versions help identify gaps and allow the user to continuously access, understand, and download available data in order to make suggestions.

In an iterative buildout, the technology team benefits from early feedback. Conversely, an administrator or executive reviewing a prototype report better understands what is available to them and makes more informed requests about new fields and filters.

Technology teams who engage with end users by requesting, correcting, and fine-tuning build more relevant and useful reports.

Example G. Sample administrative reports

  • Recently Updated: a list of all recently created or updated content
  • All Green Living Pieces: a list of tips on green living
  • All Press Releases: a list of all generated press releases
  • All Blog Posts: a list of all blog posts
  • All Lenses: a list of all major areas of work
  • All Programs: a list of all available programs, sorted by lens
  • All Campaigns: a list of all available campaigns, sorted by program and lens
  • All Victories: a list of success stories
  • All Staff: a list of all people who are staff members, consultants, and interns

Takeaway #6: What to Do

Reports help users understand the existing information. Create a new report for each content type and fine-tune as needed.

Tip #7: Wireframe, build, test, and refine

Prepare to be exhilarated, challenged, rewarded, and exhausted by the minimum viable product process. Technologists build digital tools twice: once in the mind, and second in reality. Prototypes help with the process of getting feedback across internal stakeholders. Drawings, mockups, and paper versions all assist teammates in understanding the proposed redesign architecture.

Build in a refinement period into the website redesign schedule so there is time to clarify and details that weren’t addressed the first time around.

Example H. Mindmap about Homepage

Mindmap about Homepage includes a Box called Enter, with arrows coming out that display Lenses: Food Lens, Finance Lens, Climate Lens, and Labor Lens. Other arrows go to five other sections. 1: Current Program Highlights, which leads to Relevant Programs and Relevant Campaigns. 2: Current Campaign Highlights, which leads to Relevant Campaigns and Relevant Actions. Relevant actions continues to Salsa Action (third party). 3: Current Action Highlights, which leads to Relevant Actions and All Pieces. 4: Piece Highlights, which leads to All Pieces and Focus Areas. 5: Sign up for E-news. 6: Donate (third party embed)

Image: Member Landing Mockup

This is a Balsamiq-generated mockup image to help the team understand different pieces for the member landing. It includes a main block with three tabs called My Biz Listing, My Coupons, and My Ads. There is a second block underneath called Members-Only Documents. On the left sidebar is a list of Announcements. Inside the My Biz Listing tab is four bolded field labels and text as follows: 1st line - Title: My Green Business Listing. 2nd line - Date Updated: 2017 January 7, Description. 3rd line - Description: lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ejusmod tempor incididunt ut labore et dolore magna aliqua. 4th line - Categories: Children, Pets, Clothing. 5th line: (edit this listing).

Takeaway #7: What to Do

Tools such as Balsamiq, LucidChart, and Invision assist stakeholders in gaining clarity around mental models: use them liberally. Your platform never really reaches completion, so build in time post-launch to continuously improve.

Conclusion

Technology professionals create effective tools to champion positive social, environmental, economic, and political change. By integrating feedback loops early and often, these tools spread the message, educate the populace, gain support for the cause, and make a positive difference.

This article was originally published on the Bayer Center for Nonprofit Management E-News. It is republished here with permission.

I’ve been developing websites for just over 17 years, mostly for nonprofit organizations. Frequently, nonprofits ask me, “What should we consider when planning a new website (or a re-designed website)?” Here’s is a list of the answers I give most often:

1) Site purpose. Like a mission statement, a website’s purpose gives the primary reason for the site’s existence in the world. Whether for education, advocacy, service provision, community organizing, etc., the main purpose of the site will ultimately inform design and content decisions.

2) Target audiences. Frequently I’ll ask nonprofits, “Who is your target audience?” and they’ll respond, “Everyone.” While I understand the logic behind that answer, it’s a simple fact that you cannot design with “everyone” in mind (that’s why there are so many different kinds of cars, clothes, computing devices, etc.). If you identify and design to your top two audiences, the site is more likely to accomplish your organization’s goals.

3) Site objectives. Like the objectives in your organization’s strategic plan (and if you don’t have one of those, you have bigger concerns than your website!), the objectives for your website outline the main goals of the site. I like to ask my nonprofit clients to answer these questions for each target audience: What actions will this audience want to perform when they visit your website? What actions does your organization want this audience to perform when they visit your website? Be sure to re-visit your objectives during the design and content creation processes to ensure they are being met.

4) Responsive, mobile-friendly design. Responsive design means that a website’s design automatically re-sizes to fit the screen size on which it’s being viewed. Unfortunately, it can be difficult to retrofit an existing site with responsiveness; and it’s mostly more cost effective to do a complete re-design. The days of two separate websites – one for viewing on a monitor and one for viewing on a mobile device – are over.

5) Fresh content. Imagine if museums never changed up their exhibits. Why would you ever return after your first visit? We go back to museums over and over because of new exhibits and programming – new stuff to see. We go back to websites if we know the content will change and there will be new stuff for us to view. Work on a content strategy for your site that will ensure people keep coming back.

6) Engaging content. It’s a documented fact that people only read about 20-28% of the text on a web page. Hence the shift to shorter blocks of text, lots of photos, and use of multimedia on websites. The great thing about non-text content these days is that all you really need is a decent smartphone and you can quickly create your own photo and video content.

7) Features. Features are the elements that make a site dynamic and interesting, like donation buttons, online forms, embedded video or podcasts, online quizzes, social media buttons/integration, and all other manner of gadgets and widgets.  It’s important to figure out as many of these in advance as you can for the sake of a more coherent design. (As opposed to figuring out later that you really wanted social media buttons and now don’t have a good place to put them without removing or squishing other elements.)

8) Search engine optimization (SEO). 48% of Internet users start their online experience with a search engine. This means you’ll want to make sure your site is optimized for search. While there are companies who do SEO and nothing but, their services tend to be beyond the budget of most nonprofits. Fortunately, there are quite a few SEO tasks you (or your web developer) can DIY.

9) Site maintenance. There are two main costs associated with a website design project: the cost for site design, and development and ongoing site maintenance costs. Site design tends to be a lump sum cost. Site maintenance can vary greatly, depending on the developer. I used to do websites using Dreamweaver, and clients either learned that complex software or paid me to do their updates.  I moved to the open source content management system WordPress about seven years ago so that I could change this model. Now, my nonprofit clients do their own updates and they rarely need me for anything after site launch. Another site maintenance concern to think about in advance: Which staff member(s) will be responsible for maintaining your site after launch? Will that person be responsible for uploading content that others create, or is that person doing it all?

10) Accessibility. By this I mean compliance of a nonprofit’s website with Section 508 of the Americans with Disabilities Act (ADA). While I think it’s important for all websites to be accessible, I feel like the nonprofit sector especially has a moral obligation to this. Inclusion and social justice are in our sector’s DNA, which should carry over in the design of our websites.

If you’ve made it this far reading it, I hope this list will come in handy on your next website project!

Let’s start with a simple question: Does your organization’s website advance your business goals and make you proud? If the answer is “yes,” congratulations— you’ve probably worked very hard to get to this point. For everyone else, particularly in the nonprofit community, the answer is frequently somewhere in between “I’m not sure” and “no.” Common constraints around time, capacity, and budget often lead to the misperception that a great site is too far out of reach.  I’d like to reject that premise. Even if barriers exist, there’s every reason to begin drawing the roadmap to a site that moves your organization forward in an ever-changing—and often competitive—digital landscape.

At African Wildlife Foundation, we embarked on an ambitious project that started humbly as a “simple website redesign” and evolved into a totally reimagined digital brand that included the new website. Let’s take a look at some lessons learned and key considerations as you begin to reimagine your own site.

It’s More than Just a Website

Your organization’s website isn’t just a repository of connected information that happens to reside somewhere on the Internet. It’s the primary vehicle by which new audiences will find you, learn about your mission, and engage with your brand.

Begin by defining some key objectives you hope to achieve through the redesign. Remember that while every site’s goals are different, they all share one common objective: to build trust between visitors and your organization. Long before you start thinking about visual identity, it’s critical to consider your goals for the site and how those goals relate to your key audiences.

After you’ve reached consensus, build audience personas to walk through the individual journeys you’d like to offer when someone visits the site. What does a casual visitor want? How can you deepen that relationship? Are these the same things an existing major donor needs?

You’ll find by clearly outlining these goals and identities, you’re often building the business case to justify investment to key stakeholders.

Consider Your Content

It can be tempting to think of a website “redesign” as just that—a new design. However, it’s also your chance to address those nagging concerns about the extent to which your site conveys the breadth and importance of your work. While planning the redesign of awf.org, we decided to start from scratch, beginning with the site map itself.

onate.img1a.preview.png

What really belongs in the site’s navigation? What are the top-level categories, and how deep does the structure need to go? As you move into individual sections, it’s helpful to conduct a gap analysis to identify opportunity areas to develop new content of interest to key audiences. Wireframing can help you to make decisions about individual page elements and keep unnecessary clutter out of the navigation, resulting in the best user-centered design approach.

wireframe

Mapping the site out ahead of time will help manage internal expectations and keep the content focused, hierarchical, and accessible. Ultimately, providing compelling information about your work and impact will help move prospects further down the conversion funnel toward a defined goal. Those could be anything from acquisition (e.g., a simple email capture) to the final decision to make a gift.

Remember: Google Is Watching

As you move through this process, there’s one often-overlooked, but critical consideration: SEO preservation. Your existing content has been indexed by Google (and Bing, etc.). This includes everything from the homepage to individual images. If the site’s been around for a while, it’s likely others are linking to your content and sometimes even including your image paths in their code. Each of these references constitutes a single inbound link. On aggregate, inbound links are one of the most important, and persistent, factors Google uses to determine your site ranking.

Either index your existing content manually (which is extremely time-consuming) or use SEO spider tools to automatically catalog the site. You can then map the current inventory to what you think would be most relevant on the new site and create comprehensive 301 redirects. This will effectively prevent the loss of inbound links and lead people to the new content you’ve worked so hard to create. Most importantly, it avoids the crushing blow of excitedly launching your site and watching site traffic plummet. Good thing you planned ahead.

A Responsive Approach to Design

The design of the site can range in scope from moving to an easy-breezy wide grid to a full rebrand of the organization. The latter can often be an unintended, but very positive, result of a successful design approach, that creates a visual language to express the goals you’ve already defined through effective research and planning.

Irrespective of the scale or budget you put behind the design itself, it’s important to understand rapidly changing technologies and how they affect user behavior. It was pretty common back in 2013 to hear the phrase, “mobile is maturing.” Since that time, mobile has matured, graduated college, and is now looking at competitive graduate programs.

responsive website

Mobile web usage now exceeds desktop at over 50%, which wasn’t expected to occur until 2016. You may have written the most compelling content in your vertical, but if someone on the subway pulls it up and has to pinch or zoom, you’ve likely already lost that prospect. In markets like Mainland China, many companies are skipping desktop design altogether and adopting a mobile-only approach.

What does this all mean? Desktops are no longer the primary vehicle potential donors will use to learn about your mission. It’s important to ensure a consistent branded experience across each device. We must adapt to an era of proliferating connected devices and complex consumer behavior. I try to keep one simple thing in mind: Your content should exist irrespective of the context.

So What Have We Learned?

There are a lot of important considerations when approaching the redesign of your site. It’s an incredible opportunity to reach new audiences and deepen engagement with existing constituents. A well-planned effort can go beyond incremental improvements to become transformative, serving as a catalyst for new discussions and organizational change. Hopefully you also had some fun along the way.

Last year, NTEN launched the first cohort for the Oregon Nonprofit Technology Readiness (ONTR) program. This six-month program builds on the eight weeks of curriculum for the Nonprofit Technology Academy (NTA) and extends with an additional four months of support for each organization’s chosen technology project.

You may find yourself asking questions like, “Who participates in this program with a mix of online and offline learning, and what did it mean for them?” We want to introduce you to Emily Squires, Community Engagement Director for Playwrite, Inc., to share her answers to these questions and a few more.

What was your biggest tech pet peeve going into the ONTR?

Using DropBox as our organizational server.

How is participating in the ONTR valuable to you?

We participated as a team, and my colleague Julian and I have found ONTR so helpful. We have gained knowledge and access to resources, as well as meeting other folks in Portland with whom we are building organizational relationships. I love having a group that I can email and say, “Does anyone have experience with ______?” -and get a response!

Have you connected with others through this process?

I have followed up with a handful of people from my ONTR cohort off of the group email and also in real life. The local networking has been really valuable for us.

Tell us about your project.

My project involves creating an internal guidebook for all things website and social media related. It’s slow to start (e.g., actually start writing things down, transferring them from my brain to the paper) beyond re-doing the website itself, but it is an organizational priority, and it will happen!

What cool stuff are you up to that you’re excited about?

I’m excited that we have a new website (launched Nov. 2014). I’m even more excited to stay engaged with it and make the 2.0 version even better through making changes based on feedback and data.

Have you had any “a-ha” moments with your project?

I’m ready for them when they happen.

New Year’s tech resolutions for 2015?

To keep tech integrated into our strategic and financial planning.