Constructive Group Created with Sketch.

Designing for Online Engagement: How to Build a Better Site with Brand Strategy

Does your organization’s website paint an accurate picture of who you are, what you do, and the values you stand for? Available to nearly anyone at anytime, websites play a pivotal role in how effectively nonprofits are engaging audiences and turning that engagement into action. Could yours be doing a better job helping advance your mission?

We teamed up with ComNet for a webinar to teach you how your organization can deliver a more engaging, mission-driven brand experience online. Led by Constructive’s Founder & Executive Director Matt Schwartz, we explore strategies and practical techniques to integrate your organizational strategy into the digital design process—aligning your website’s structure, content, design, and features.

In this webinar, you’ll learn:

  • The foundation of an effective brand strategy framework.
  • How social impact brands create and deliver brand value.
  • How design translates brand value into tangible experiences.
  • How to frame website discussions and decisions within a brand strategy.
  • Workshop activities for designing brand experience.

 

Write Your Way to a Better Website

We talk to a lot of folks at nonprofits who aren’t happy with their organization’s website. Usually, the site is failing to connect with audiences and accurately reflect who they are. Oh, and in almost all cases, it looks dated and stale. As a result, organizations sometimes ask us to “refresh” or “reskin” their website. In other words, they want the design of their site updated so it looks more modern, but want the existing structure, navigation, and technology to remain in place. While there’s nothing wrong with wanting your site to look better, asking for a design refresh like this can be a band-aid fix for much deeper problems.

At Constructive, we believe that an effective website is composed of four things: brand, design, technology, and content. If your site isn’t performing, you need to invest in a redesign that takes all four of these elements into account—assessing how each serves your users’ needs and impacts their experience of your website. Why? Because on average, users only spend 10-20 seconds on a web page before they leave, and according to a 2006 study, they can develop an opinion of your organization after as little as 50 milliseconds of being on your site. That means it needs to make a good impression on all fronts quickly, or else you risk losing potential advocates. If your website has been “refreshed” to look modern, but users still can’t find the information they’re looking for, they’re not likely to stay interested for long.

“Okay,” you’re thinking, “that’s all well and good, but what if I don’t have the budget for such a big overhaul right now?”

Start with something you know. Content is one of the most important elements of a good website, and if you work for a nonprofit, chances are you and the people around you are adept communicators. So why not rewrite the content on your website? We like to call it content design, because the way you write, format, and structure the words on your is site should have as much intention behind it as visual design. This quote by designer Jeffrey Zeldman says it all: “Content precedes design. Design in the absence of content is not design, it’s decoration.”

In fact, if you know your organization wants to more fully redesign its website in the future, getting your hands dirty with content now will give you a good understanding of what’s currently on your site, and in what ways it might be falling short.

So if your site’s visual design isn’t compelling enough to make a quick impression, and you don’t currently have the budget for a full redesign, try putting your communications skills to work by redesigning your website’s content. Here’s how:

Before you start…

First off, you’ll need access to and familiarity with your website’s content management system (CMS). If you’re unfamiliar, most CMS’s offer tutorials for making changes and open source platforms like WordPress and Drupal have plenty of educational resources.

Assuming you’re good to go there, you’ll want to start prioritizing your content. Rewriting the content of your website is no small feat, especially if you’re dealing with a large, information-heavy website. Start with the pages that users visit the most: your homepage, your about page, etc. If your organization tracks analytics, even better! You can check which of your pages are visited most and add those to the high-priority list.

You’ll also want to gather a team to help rewrite the content. Try to choose staff who work in different areas of your organization, with varying areas of expertise so the content is as accurate as possible. Just make sure that one person is tasked with being the final eyes on content, and is responsible for entering content into the CMS. That way, you can better ensure that the content voice and style across pages stays consistent. We typically recommend using a spreadsheet like this one to keep track of the process.

Know Your Audiences

A clear understanding of audiences is the key to determining how you should write and present the content on your site. Who are you writing it for? Keep in mind that this will likely vary page by page.

When your team is prioritizing the pages to rewrite, it can be helpful to note which of your audiences will be frequenting each page. If you’re an organization that provides emergency health services, for example, a ‘Get Help Now’ page would likely be most commonly visited by clients. Think about their content needs when they visit this page of your site. What do they need to know? What content is most important to them?

When we work with clients, we conduct surveys and interviews to learn about an organization’s core audiences. From there, we extensively research those audiences in order to build out in-depth user personas to guide the information architecture, content strategy and visual design of a site. Here’s an example persona:

 

Scannable Content vs. Long-Form Content

Have you ever stumbled upon a webpage with large blocks of dense text and thought “Wow, this looks SO interesting! I can’t wait to read it all!” If you’re like us, probably not—you’ve likely found it daunting!

One of the simplest ways you can make your website more effective is by breaking up large, dense blocks of text whenever possible. In other words, stop writing so much! This holds especially true for more general landing pages, like your homepage and about page. These pages should be easy to scan, so users can quickly understand who you are, and then learn more by digging deeper into your site.

One of our favorite books on this topic一appropriately named Content Design一details the ways in which the human brain reads and processes text. Spoiler alert: we’re not really reading every word. In reality, people only read about 20-28% of a page’s content online. We look for patterns and words we understand in order to comprehend content as quickly as possible. You can nerd out more about how people read online here, but suffice to say that the less words you can use to inform a reader, the better they’ll retain information and the more interested they’ll remain in exploring your site further.

When users take the time to explore your site deeper than overview pages, you can and should display long-form content, like published research or program descriptions. Such content doesn’t lend itself well to being shortened, so don’t stress yourself out thinking all the content on your site needs to be scannable. While design is a key asset in making long-form content like this more digestible, there are also some content design techniquesyou can adopt to maximize engagement with this more complex content.

The main takeaway here is that by making the more general pages of your site quicker and easier to read, you increase the likelihood that users will be more interested in reading your longer-form content, learning more about your organization in the process.

Formatting For The Win

Rewriting and trimming down your content will only get you so far. Without proper formatting, the text on your site might still be difficult to parse through. By establishing typographic hierarchies, you can establish an order of importance for your content with different text sizes, colors, and/or emphasis. This makes it easier for readers to quickly skim and digest your content. Plus, when text is properly formatted, it encourages users to read more, and engage more deeply with the rest of your site.

Don’t believe us? Here’s an example that makes the power of formatting pretty clear. Which content block is easier to digest?

 

For more tips on writing and formatting for the web, you can check out part one and two of our complete guide.

Incorporate Hyperlinks

Once you’ve revised and reformatted your content, you’ll want to make sure users can find all that great information you worked so hard to redesign. By incorporating hyperlinks into the content of various pages of your site, you can encourage users to explore more of your work in different areas of your site. For example, if someone is reading your programs page, they might also be interested in reading some client stories, annual reports, or learning about ways they can volunteer. Have you noticed us using hyperlinks throughout this article?

To Conclude

By now, you should have all the tools you need to start redesigning the content of your website. Of course, content alone won’t fix all your website woes. Brand, design, and technology are equally important elements of a great website. But addressing content concerns will help make the information on your site more digestible, and increase engagement with your audiences as a result. Plus, the more you work on your content now, the better off you’ll be when you secure the budget to begin a full website redesign project.

Happy writing…or should I say, content designing!

Conquering the Content Entry Process

So, your organization decided to redesign its website to ensure  your digital presence more accurately represents the impactful work you do. Great! You’ve officially made it through the discovery phase, where new ideas were brought to the table and a cohesive strategy was developed to guide the website redesign. During the information architecture phase, you narrowed in on your site’s overall structure and gained a firm grasp on how users will navigate through your new site.

Everyone is excited to finally enter the design phase of the project, but to keep things on track, you can’t forget the importance of your new website’s content! It’s really easy (and very common) for our clients to overlook this step in the redesign process and assume that the content on their old site will fit seamlessly into the new one. In reality, developing the content and sourcing images for your new site can be quite the undertaking.

Don’t worry—there are some key steps you can take to make this process run more smoothly. We’ve developed a brief guide based on our experience that’ll help you manage a successful content development and image selection process:

Step #1: Establish a Plan

Developing an organized and thoughtful plan for tackling your site’s content needs is critical to ensuring a smooth experience overall. So start this step early! It’s best to begin organizing and writing website content as soon as your site’s information architecture (a website’s content blueprint) is finalized. That way, you can start drafting content for the different pages of your site in advance, using the wireframes as a guide, and finalizing content once the design has been fully fleshed out.

Organize your content:

  • Decide what content, if any, you will be carrying over from your old site. This might be less content than you initially expected一when the design of a site changes drastically, so too do the content needs. Once you’ve identified what will be carried over, determine what new content you’ll need to fill in the gaps. We recommend using a content matrix to identify and keep track of all the content you’ll need to enter into your content management system (CMS)一from headers to introduction text, body copy and even button text. A content matrix is basically just a fancy word for a spreadsheet that tracks and organizes the new content your site needs. And don’t worry, we put together a content matrix template that you can download here!

Organize your images:

  • Don’t forget about images一they’re content too! The image selection process can take time, and some images might need to be cropped and treated. You can use the wireframes to identify where on the site you’ll need images, and come up with a plan to source them. Does your organization have a big library of photos? Will you need to source new images? There are many resources for free photos online (for example, Unsplash) and purchasing stock images is also an option. Again, we recommend using an image matrix to stay organized. You can download our image matrix template here.

Pick your people.

  • You’ll need to determine who will be writing your content, who will be editing and reviewing your content, and who will be responsible for entering it into the CMS. Don’t underestimate the time it takes to develop engaging content and enter it into the CMS. Make sure you have plenty of people on the job!

Step #2: Start Executing

Once you have a solid plan laid out, it’s time to start actuallydeveloping, editing, and reviewing your content. Which, we know, can be a lot easier said than done. We recommend determining when your project is scheduled to begin Quality Assurance (QA)一the phase of the project when you’ll begin testing the site to get it ready for a successful launch一and then working backwards to create a content development schedule that hits this deadline.

Begin Writing

  • One of the most common reasons for delayed launches for our clients is that final content is not ready. Consider scheduling a weekly or bi-weekly meeting to assess how your content is developing and to stay on track.

Get Your Content Reviewed

  • Don’t let stakeholder review creep up on you! Make sure whoever at your organization needs to approve your website content has ample time to review and make changes. This is why we suggest picking your people in Step #1一if everyone’s up to speed on who’s doing what and why, the review process can run a lot smoother.

Step #3: Enter Your Content & Images

Congratulations! You finally have your content drafted, approved, and ready to be entered into your new site’s CMS. At Constructive, we provide our clients with a full CMS training to help orient their team to the backend of their new site, and instruct them on how to add their new copy and images. If you don’t have access to training, or still need some support, here are a few tips to keep in mind:

  • Use a text editor to strip content of formatting if you are copy/pasting from another source, such as your content matrix or a word document.
  • While most content management systems like WordPress allow you to crop images within them, we generally find it’s more effective to crop images using tools like Sketch or Photoshop first, and then uploading the images into the CMS.

Conclusion

The website redesign process can be an exciting, yet somewhat intimidating time for organizations一especially if they’ve forgotten to prioritize their new site’s content! But by starting early and coming up with an organized plan to tackle your site’s content needs, the big task of developing content and entering it into the CMS can be much less daunting!

Deepening Audience Engagement With Long-Form Content

Digital communications and social media have had a tremendous impact on our ability to maintain focus and attention — not just online, but in the real world. Online and offline, we are awash in content that’s fragmented and comes at us fast. Distractions are everywhere and, for social change organizations, creating awareness and engagement around complex issues can feel like an uphill battle.

But even as short-form platforms like Twitter increasingly shape how issues are framed by the media, recent studies show that when it comes to audience engagement, long-form content performs better than shorter content. So, while we may live in a world dominated by short bursts of commentary, opinion, and insights, long-form content remains a critical (and effective!) format.

While every organization with a message to communicate has to learn how to navigate this dynamic, social change organizations face a bigger challenge. Because when your mission revolves around a complicated issue, is connected to a problem in a far-away place or the distant future, or is just removed from the concerns of everyday life, maintaining audience engagement is inherently more difficult.

Still, it usually boils down to the same question: How can we elevate our issue or cause and engage our target audiences? The time-tested principles used by storytellers since, well, forever are an excellent place to start.

Leveraging Narrative Structure

Whether presented as narrative or as academic research, all long-form content can benefit from the three-act structure of exposition, confrontation, and resolution familiar to professional storytellers. In general, it works like this:

Invite your audience in.

Whenever you are asking an audience to engage with a longer narrative, it’s important to invite them in to the narrative by stating up front the things you have in common. Establishing a shared understanding and creating common ground with your audience — and appealing to their “better angels” when appropriate — makes it that much easier to pivot to the more complex ideas you need them to engage with and to share new perspectives they are likely to value.

Establish your “characters.”

Establishing common ground with audience members also earns you their interest and attention — equity you can use to deepen their engagement with your issue or cause. In storytelling, effective writers use this equity to establish their “characters” and the underlying relationships that animate them. Keep in mind, characters don’t need to be actual people — they can be a commonly held belief, a way of doing things, or an entire system that impacts your mission. Whether you’re sharing a traditional narrative or specialized academic content, it’s important to establish this framework sooner rather than later, and to supply important details that will deepen your audience’s commitment to, and understanding of, the issue at hand.

Introduce a catalyst.

By this point, your audience should both be familiar with your issue and inclined to commit themselves to learning more about it. It’s time to elevate their interest by revealing the catalyst! For social change organizations, a catalyst could be a new way of addressing systemic inequity or research that offers insights into how to think about social change in a new way. Whatever the case, your goal is to provide a compelling reason for your readers to step up their investment in your work. And the more complex the issue, the more important it is to clearly lay out the related activities and/or outcomes that are part of the catalyst. Done well, you’ll create a connection with your audience that boosts their willingness to engage with and support your mission.

Create a resolution.

For many social change organizations, impact is something that happens in the future (sometimes the distant future). The delay in being able to demonstrate results is a major challenge for social change organizations working to address deep-rooted problems such as poverty, structural racism, or climate change. So if your audience is still engaged with your long-form content at this point (and you certainly hope they are), it’s critical to offer them some kind of resolution. Depending on the nature of your organization, that resolution can take a number of forms — a satisfying conclusion to a story about impact, a roundup of resources they can use to further their own change-related efforts, and/or a list of things they can do to strengthen their engagement with your organization.

Again, whether your content falls into the emotional narrative category or is fact-based research, the key to deepening audience engagement is maintaining an equal focus on both its structure and substance. And the same best practices that work online can be applied to any medium or format.

Tips for Content Creators

Now that you have a better understanding of the principles of effective narrative, here are some recommendations for crafting compelling long-form content that will deepen audience engagement and spur potential supporters to action:

Be consistently thoughtful.

The bar for high-quality long-form content is, well, high. And with so much content so readily available, ensuring that your content is respected, remembered, and returned to means making sure it always speaks to and reinforces your organization’s credibility, delivers meaningful value, and provides a great reading experience.

Editorial creativity is paramount.

To spark and sustain engagement, long-form content needs to be focused and well structured. To keep your audience’s attention, try alternating between simplicity and complexity. Punctuate deeper dives into an issue with simple summaries and key insights. Doing so will not only underscore and amplify what’s at stake, it will make it easier to move on to the next idea you need to communicate.

Empathy is important, but…

Successful communications is about more than just making sure your ideas are clear, concise, and well-stated. It’s about meeting your audience wherever they are (i.e., creating common ground). That said, conveying empathy isn’t about purple prose or being gratuitously emotional. Instead, it requires establishing a genuine, meaningful connection to the people you are hoping to engage on terms that resonate with them, and building trust.

Make sure your audience doesn’t get lost.

Consistency and clear expectations are critical to building trust — especially in long-form content that requires a greater commitment from your audience (and even more so online). Both in the language you use and the actual vehicles you create for your content, cues designed to orient audience members within the reading experience can reduce cognitive load, improve content accessibility, and create a sense of anticipation that keeps audience members reading.

Provide a place to rest.

Giving your audience members conceptual places to take a break is a great way to reduce the fatigue often associated with reading long-form content. Analogy, metaphor, and digression are tried-true techniques that, when executed well, can reinforce context, add needed perspective, and reinforce reader understanding. From a design perspective, creating visually (and conceptually) separate material such as sidebars is also an excellent way to introduce a change of pace into complex material.

Don’t be afraid to pick a fight!

As our name suggests, Constructive is all about positive dialogue. But that doesn’t mean we don’t appreciate the importance of taking clear positions and standing up for what we believe is right. If the issue your organization is working to address requires you to take a stand, you can strengthen your case by contrasting your position with the position of those who see the issue differently and explaining in clear terms what’s at stake.

Leave your audiences wanting more.

Every piece of content you share with your target audiences should leave them better informed and feeling energized. But the next steps are crucial. You need to give them a rationale for wanting to help you advance your cause, including a range of actions and an explanation of why their actions will create more impact when combined with the actions of like-minded people (as always, the whole is greater than the sum of the parts!).

In Conclusion

We create content in hopes that people will engage with our ideas. Storytelling has long been one of humanity’s most powerful ways of translating ideas into action. While sharing our ideas through digital communications may be different than telling stories around a campfire, the fundamental principles are the same.

To truly engage an audience, digital content must be meaningful and deliver value — wherever and however an audience chooses to consume it. In a world of too many choices, sustaining online engagement requires that we design and deliver experiences that highlight the alignment of our ideas and activities to the interests of our audience. When ideas are presented in a way that our audience finds to be both accessible and useful, those ideas will be shared with others. At Constructive, we call that a win-win!

What Do Web Developers Actually Do?

Web Developers: You’ve heard of them. You’ve seen them in movies and tv shows.  You’ve probably even observed one while checking out at the grocery store. Perhaps you think of us as elusive, sunshine-starved individuals who keep the internet alive and overflowing with cat videos. While you’re not wrong, in reality, we’re actually pretty normal.  We’re not magicians or mad keyboard scientists; we just know how to tweak code.

A Quick History Lesson

A little more than 40 years ago, computer coding wasn’t an actual job; it was a skill you picked up as part of your career. In the early days of the modern computing revolution, a scientist might be required to learn how to code a program to complete their research tasks. It wasn’t the computer part that was important, but the task at hand that defined the job. I look at web development today in the same way. I’m in the business of creating solutions for an organization and their audience on the web. Coding is merely the means I use to accomplish the task.

Open Source Coding

Obviously, a lot has changed, and much of the “development revolution” has come from collective efforts of thousands of developers, working on open source projects through bug reports, suggestions, code pull requests and evangelism. Thanks to endless hours of hard work by developers across the globe, on softwares such as JavascriptNode.jsnpmwebpackgitWordPressDrupal (and countless other softwares), I am able to deploy code to a live website, through a controlled process, within seconds. From there, I’m working on top of what others have already figured out.

Community efforts almost always lead to exponential leaps in coding performance and reliability. Take the PHP language for instance—today it’s used to power a significant portion of the web, but it wasn’t always well-suited for enterprise solutions.  Then Facebook came along. It ran on PHP and worked around much of PHP’s flaws. Part of that focus brought about great change for PHP and further legitimized its reputation on the web. Much of the work was open source and available to the community.

We Come in All Shapes and Sizes

The term “web developer” is an umbrella term that describes professionals with very different backgrounds, who work on very different kinds of projects. Some web developers have experience in design, support, and other technical coding work, while others come from different professions completely. I have experience in IT support, sysadmin, and a bit of design.  Before that, I took a shot at a music career and wanted to be a comic book penciler in high school.

The polymath is the exactly the type of person that gets into web development and makes a living from it. And for that reason, I don’t think you’ll be surprised to discover there are many ways to be a web developer.

Frontend Some developers are experts in frontend development and style what you see on a website and how it works. Honing in on the right visual feel and experience is their bread and butter. This work takes a creative eye, and consequently, many frontend developers tend to have some sort of arts background.

Backend Developers that work on the backend like to handle data, connect the dots, and automate testing for bug free code, the latter of which clients and other developers depend upon. This skillset is easy for developers from other computing languages and sectors to pick up. These folks are the backbone of the web.

Site Builders Some developers are equal parts designer, dabbling in web technology and able to take a WordPress site from start to finish with out-of-the-box tools (and a little know-how when needed). Many freelancers fit this bill. They typically have varying levels of coding and scripting experience.

Sysadmins A “sysadmin” is a technologist experienced in different systems needed to host and serve web technologies.This skillset isn’t necessarily a standard focus for most web developers,  but it’s incredibly important in the web and internet as a whole when it comes to complex deployments.

Et al The above skills are the most commonly applied in web, and certainly not an exhaustive list. There are also those that cover testing, spoken language, compliance, data science and many others.

We Work Well With Others

Many people imagine web developers sit in rooms or cubicles by themselves, coding away in a vacuum. But in reality, most websites require considerable collaboration and a multi-disciplinary approach. As a website developer who works at a creative agency, I work closely with designers, project managers, and other developers. When I’m solving problems, I’m usually doing it with the help of these fine people.

Designers Here’s an oversimplified explanation of how we work together: The designers make designs and then hand them off to the developers. That’s how some teams do it, via a linear production line. While it may work for some, this method doesn’t make sense for a tight production team.  Instead, we share ideas. We think about the possibilities. We equally divvy up success and failure. Without Visual and UX Design, developers are missing key points of focus.

Project Managers I couldn’t do my job without talented project managers (PM). They keep me sane and schedule time for the many mishaps that come with web development. I’ve worked with the good and the bad, always making sure to let PMs know I appreciate what they do. I like to think of my PM as a good football coach that keeps all the teams within the team working together to win the day.

Other Developers Sharing code, helping another developer solve a tough problem, or simply offering kind words when it feels like there’s no end in sight — Developers helping other developers is what makes the fight worth fighting.

The Cat is Out of the Bag

Web development isn’t a mysterious or complicated profession.  The coding can be, but our ultimate goal is simple:  We work with the rest of our team to build a product that [hopefully] satisfies the client’s vision. Often times, it takes different types of developers to successfully see a project through, but we’re all working towards the same objective, just doing so from behind the computer screen.

Newsletter Signup Form Best Practices to Increase Subscription Count

Despite the growing reliance on newer digital marketing channels, we believe the newsletter is still a no-brainer for social change organizations. Yes, social media allows you to grow your brand’s reach, but newsletters distribute important information in a professional manner to your key audience and potential funders. And with the advent of services like MailChimp, email marketing is easier than ever and continually offers more sophisticated tracking methods. So, given newsletters’ continued importance, how can you use your website to drive engagement and grow your subscription list? The first step is incorporating approachable, easy-to-use signup forms that entice interest and increase registration numbers.

 All you need is an email address

One of the easiest techniques for growing your newsletter subscription is to limit the amount of required fields a user must fill out. Obviously, the most important information you need is their email. Depending on your goals for data gathering, details like ‘name’ and ‘organization’ often aren’t as important to gather because they’re usually nested within their email. If details like their name are important to gather, consider making this an optional field. Although this may seem counterintuitive, it provides an opportunity for those who want to give all of their information to do so, while also accommodating the user who just wants to sign up quickly with an email address. By accounting for varying users’ preferences, you are increasing your opportunity to garner more subscribers!

Use simple language to create transparency

Another thing to consider is your messaging around the signup form. It needs to be obvious that someone will receive an email newsletter when signing up, not promotions, offers, etc. Establishing clear communication of expectations gives the user peace of mind (which could in turn convince them to sign up). Here are some considerations to think about when crafting the language around the signup.

Mandatory:

  • The word ‘Newsletter’ or ‘Get Email Updates’ should be one of the first things a user recognizes. Refrain from using vague jargon like ‘Stay up-to-date’ because it could have multiple meanings to different types of users.
  • Clear labels for text fields and buttons

Optional:

  • Frequency details (daily emails or every 2-3 months?)
  • Links to current newsletter samples on an external page
  • Check boxes if there are multiple newsletter options

There shouldn’t be any confusing language prohibiting someone from connecting with your brand. The easier you make the experience, the more likely your potential subscribers will be receptive and sign up.

Don’t put all of your eggs in one basket

The most common mistake with growing newsletter subscriptions is including only one signup form in one location on your website. People face numerous distractions and/or are multitasking when surfing the web, so it is never enough to only provide one way to perform an important task (i.e. sign up). All forms should function similarly, but exist in unique spaces across your site. Let’s examine the three common forms of signup forms: Pop-ups, Footers, and In-lines.

Pop-up

Email Newsletter Signup Website Popup Example

Pop-ups are well-known for being the most effective (and the most annoying) techniques for signups. To avoid pop-up pitfalls, the key is timing. Time your pop-ups to appear 10-15 seconds after your user has engaged with the site. That way, the user has had a chance to look around the site and develop some level of interest. (For a more comprehensive understanding on pop-ups in action, check out ‘Web Animation: Delightful or Distracting’ by our web developer, Leah Suter). Once you have disrupted a user from their engagement, it’s best to make a memorable impression. In other words, make it pretty.

Pop-ups should include:

  • A clear way to navigate out of the pop-up
  • High-impact visuals that engage the user to stay on the pop-up
  • Background overlay that differentiates the pop-up from the normal page
  • Clear white space that makes signing up feel effortless

Don’t be afraid to use pop-ups. They have a bad reputation, but pop-ups have been proven effective because they’re the easiest way to remind a user to get more involved with the content they already love.

 

Footer

Email Newsletter Signup Website Footer Example

Footers are the default choice for signups. You have two options. The first is a simple form that blends into the footer with small pops of color. (Nothing too flashy — it needs to look good on every page). The other option is to editorialize the footer to your brand’s messaging. Think of it as a place to tell people why they should care about what you are up to as an organization. Pair the unit with marketing and impact stats that will resonate with your target demographic.

A Footer Signup should:

  • Clearly be differentiated from the other content in the footer
  • Use one bright color for buttons/type to stand out

In-line

Email Newsletter Signup Website In-line Example

In-line signup forms haven’t been explored much in social impact websites but are becoming increasingly commonplace on media outlets like Vox and New York Times. These forms are strategically placed within the body copy of websites and provide visual breaks while also reminding engaged readers they can receive updates. Yes, it’s mildly distracting to be interrupted by an in-line block of information while reading, but it’s easy for the user to skip over if they’re not interested.

An in-line signup should:

  • Use minimal styling so it’s not too distracting from important text on the page
  • Only include an email field box so the form doesn’t take up excessive space and break up the content above and below
  • Exist on pages that talk about organization’s success or knowledge

The key for in-line signups is finding the right content to pair it with. The Constructive newsletter features news and insight posts, so it makes sense to pair signups with insight pages. Organizations like Charity:Water pair their newsletter signup with their impact stories. From an advertising POV, this makes sense because the user might feel more inclined to get involved when reading about the organization’s success. The content in the newsletter is quintessential to knowing where to place a strategic in-line signup.

Conclusion

To summarize, the easier you make it for someone to engage, the more likely they are to subscribe. Audiences possess differing preferences when entering personal information: an email address is necessary and all other forms are optional. Likewise, transparent content is key. Instill confidence in your audience with an honest account of what your brand’s subscription entails. And as you place subscription signup forms throughout your website, via pop-ups, footers, and in-lines, be thoughtful of timing and surrounding page content. By following these simple UX steps, creating an engaging newsletter registration portal is just as easy as writing the newsletter!

Engage, Persuade, Motivate! Maximizing Impact With Digital Content

Today’s digital landscape is crippling our ability to focus, with people’s average attention span now shorter than a goldfish’s. We also spend over 10 hours a day consuming content from digital screens. Add it up, and our understanding of the world and our connections to it are significantly shaped online while our ability to process and put information to good use are increasingly diminished. In this environment, organizations who publish content online to help make change happen in the real world face significant challenges. How do they build meaningful relationships with audiences, broaden people’s perspective and deepen understanding to increase the impact of their work? And how must they think differently about the ways they produce and publish content?

Matthew Schwartz (Founder & Director of Strategy) and Senongo Akpem (Design Director) of social change design agency, Constructive, you’ll gain insights into strategies and techniques that will transform how your organization produces and delivers content online—and turn your website visitors into readers and website visits into journeys.

Specifically, you’ll learn:

  • The principles of content-centric design
  • Design’s role in increasing credibility and persuasion
  • How to organize & present content for greater clarity
  • How to create greater context & deeper meaning for audiences
  • How to deliver memorable takeaways and encourage longer reads
  • How to produce flexible content that can be reused across channels

Watch the replay below:

Nonprofit Branding in the Digital Age

You work at a foundation or a nonprofit. At many orgs, this belief persists: we don’t have a brand, we have a mission! Yeah, ok. That’s true. Now, let’s be real, your organization has a brand.

And that’s a good thing. Here’s why—unlike most for-profit companies, your org’s brand is about bold ideas aimed at doing good. And for virtually every foundation and nonprofit, your website connects audiences to what you stand for, what you do, the impact you have, and most importantly, why it all matters.

But too often, organizations with incredibly inspiring missions have sites that leave audiences more confused than committed, and more exhausted than energized. For social change organizations, it’s time to think beyond transactional websites.

This Communications Network webinar is led by Matthew Schwartz, Founder and Director of Strategy at social change brand strategy and experience design firm Constructive. We’re going to explore how to cultivate and build an enduring strategy to advance your brand online, which will help you advance your mission and achieve the magic word: Impact.

You’ll learn:

  • How to translate organizational strategy into impactful online brand experiences
  • How to increase engagement and shared learning across long-term digital projects
  • What the four core strategies are to every website, and the roles they play
  • How brand strategy improves the website design and development process

Watch the replay below.

Total Cost of Building A Website: Looking Beyond the Price Tag

My last article on this subject focused generally on website cost and technology, but from conversations with colleagues and clients, it’s become clear that there’s a need to shift the thinking around the total cost of technology. This article is the first of four where I’ll discuss which specific drivers impact cost.  In future articles, I will provide framework, tools, and processes to accompany this expanded view.

Total Cost: An Overview

We need to alter the way we think about the total cost of technology and what drives it. As I said at my 17NTC session on the same subject, the total cost of technology is comprised of financial, time & human capital, opportunity, and brand impact.  Let’s pick this statement apart and examine these aspects of total cost.

Financial

Money and budgets are what people generally refer to when they think  about the cost of technology. What are my capital expenditures here? What up front (financial) costs do I need to take on to get my project done, or to support initiatives? What will it cost to host and maintain my website?

Time and Human Capital

It’s not enough to think exclusively about a flat project expenditure. Instead, how many people (and for how long) does it take to get something done? How hard are the tasks? What’s the impact on the schedule? Do we have the right people to do this? What are we paying them? What work is being diverted or ignored by involving our staff in this project? Do we need outside help? Is the technology we’re using the right technology to support or hinder our people?

Opportunity

It’s important to keep in mind opportunity cost when planning the execution of your website. Is it worth expending the time and resources to develop a new website? What will we be giving up in order to do this? Will the outcome be worth the reallocation of assets, resources, and results? Content is a great example. Often times flashy website features, while exciting and enticing, don’t outweigh the cost of construction. (For a comprehensive explanation, check out this article by one of our web developers!)

Brand Impact

Successful execution vs. poor execution, both technically and organizationally, can impact your brand and its goals. It can make a difference whether or not people trust or mistrust your brand. Additionally, this has cost implications not only financially, but also in your ability to accomplish your mission effectively.

Drivers to Total Cost

Broadening the way you think about the total cost of technology, along with understanding what drives cost, will help you to better plan and advocate for your needs in order to accomplish your goals.

Open Source vs. Paid

While open source software is free, you can opt to pay for software services in the form of managed services, subscriptions, support and training. That being said, commercial products don’t always equate to higher quality or usability. As your needs evolve, you need to make sure the tech you choose evolves with you.

Think about what kind of development will be needed for an open source vs. a commercial proprietary platform. Proprietary systems require specialized skills and development costs can be higher because of this. What about customizations to a platform to ensure it meets your functional goals? Are they easily accomplished or will they become an entity requiring hacking around limitations? (Generally, hacks are not sustainable over time and cost more in the long run.)

Even when choosing open source over something commercial, there may be a difference in development costs based on the system. For example, Drupal development tends to be higher cost (in time & money) than WordPress because of the nature of its underlying CMS architecture. But don’t let that discourage you from choosing Drupal if it’s the right fit for your organization’s goals, especially if you have complex enterprise integrations or functional needs.

Lastly, while not an immediate cost, what if in the future you need to migrate infrastructure from one commercial platform to another or to an open source platform? Getting your data out of a proprietary system and migrated might not be an easy lift or even possible.

And if you feel overwhelmed reading this and you have no idea how to choose a platform, rest assured—we’ll discuss how to get answers and make decisions  in series 2-4!

Integrations

Integrations can be one of the most significant drivers of cost. What systems does your website need to integrate with?

Externally, not all systems’ interfaces (APIs) are created equally. This rings particularly true with CRM (Customer Relationship Management) systems. Zoho integration is not the same as Salesforce. They require different levels of effort to ensure they play nice with your website. Leaving your website and clicking out to an external CRM (a ‘Click Here to Donate’ button that brings you to an entirely new website) is “cheaper” from a budget, time, and effort perspective, but is it what you want experientially for your users? Are you choosing the right CRM for your organization’s needs? Is it overkill operationally? Financially?

Internally, you can think of integrations as the relationship between content within your website. How are you relating internal content and how do you surface those relationships? Is your site search simple or complex? Are related items to a piece of content manually curated, dynamically surfaced, or both? The lift in implementing these relationships and features can drive cost, especially if you choose a CMS that isn’t specifically friendly to complex relationships.

Timing

Timing can be a big driver to cost. Website launches that are tied to event-driven initiatives are a good example. Website redesigns demand significant attention from internal staff, do you have the organizational capacity and schedule availability to meet the event deadline? If you’re not planning with enough lead time, costs can and often escalate: late nights, premium costs for rush development from agencies etc. What happens if you miss the deadline? What does that cost you?

Hosting

Hosting a website might be obvious (it has to live somewhere!), but you need to understand the impact to cost. How “managed” is the hosting—are updates to servers handled by the hosting company or are you on the hook to do them? If you’re using internal IT, what kind of timing and costs are associated?

You also need to think about the costs outside the web server. What about network management, i.e database servers, backups, and maintenance? Are you using a Content Delivery Network, and if so, what are the bandwidth costs? Similarly, what about your website availability and failover needs? If you’re asking for high uptime, availability, and full disaster recovery capabilities, be prepared for the price tag to go up.

Operations

It’s not often thought of or budgeted for when planning your website, but there are operational costs once it’s up and running. Content needs to be produced and managed. Have you planned for that? What resources and what amount of time is going to be needed? Is it easy to manage your content or is the back-end of your website causing additional overhead and stress for staff?

The website also needs to be maintained from a technical perspective. Who’s going to do that? And what about the administrative overhead in coordinating your website operations?

Going Forward

There’s a lot to think about once you’ve expanded your view on the total cost of technology and what drives it. Thinking about total cost in this manner might give you a headache initially, but it will also give you a clearer sense of what you’re realistically getting into, where your gaps in knowledge around costs are, and help you be better prepared to advocate for more budget, time, and resources to accomplish your organization’s mission.

In part 2/4 of this series, I will build upon this thinking, providing a framework and tools for evaluating and estimating total cost, as well as a practical process for implementation.

Web Animation: Delightful or Distracting?

If you do a quick survey of design-forward websites you’ll most likely find that motion and web animation has become a common feature—images and text appear to fade into the page, sign-up blocks slide in and out from offscreen, buttons morph in response to our clicks. Aside from being in vogue, animation offers designers and developers a powerful tool for increasing engagement with users. However, it also presents a challenge: despite being visually interesting, animations can actually distract and confuse our users. So how do we use animation to serve our content and create a greater connection between our audience and our websites?

What exactly is web animation?

Let’s first establish a common vocabulary; web animation is not to be confused with cinema animation—we’re not talking about Mickey Mouse here. The term web animation broadly covers many different methods of animation, such as user interface (UI) animation, CSS animation, and JavaScript animation. It can refer to anything from making a button shake when clicked to designing a complex digital game. At its most basic though, web animation is changing a property over a period of time. So while most people think of animation elements in motion, it also includes changing the opacity or color of an object.

A Gif of a homepage shows an example of web animation with images moving in and out of the page.

Finding the Sweet Spot

One of the first things to consider when designing animations is the duration of a given action—i.e. how long does it take for an object to move or morph? Though it sounds simple, getting the timing right can be tricky; too fast and the animation will be abrupt and shocking, too slow and you risk boring or frustrating your users.

Fortunately, we have studies and best practices to guide our decision-making. Jakob Nielson’s seminal usability study on the interaction between humans and computers revealed three response time limits that are now as used as goalposts for animation timing. The study found that in 0.1 second (100 milliseconds) a computer response will appear instantaneous to a user—so an animation lasting 100ms would be imperceptible to most people. As the computer response time increased, the study showed that at 1 second, users’ attention was maintained but after 10 seconds, most users become disconnected or bored.

A graphich showing Jakob Nielson's response time study for web animations

Studies also show that humans’ ability to perceive and process visual stimuli, known as a temporal beat, varies from person to person. Some people are naturally capable of perceiving very quick visual movement or changes. But as we age our temporal beat slows, making it more difficult to process quick visual stimuli. In other words, someone with a quick temporal beat might be able to see change as quickly as 70ms, whereas an older person might be able to see that same change in 700ms. To account for this significant gap in processing time, animations should be timed around the 100ms to 1 second “sweet spot” to ensure users are able to perceive the animation without being confused, but are not slowed down or pulled out of their flow of engagement with the content.

An example of the same website with and without animations. The gif on the right shows how animations help reorient the user to the new page.

Loading Animations

As users transition from one website page to another, we can use the sweet spot to help optimize their experience and the perceived performance of the site. Perceived performance is a measure of how long a user feels like they have been waiting for a website to load. Though one might assume the faster the better, we know from Nielson’s study that anything less than 100ms will appear to be an instantaneous jump cut from one page to another. Jump cuts can be confusing for users and overwhelm their cognitive load. We want a speedy website but not at the expense of our users’ ability to process the information on the page. So to signal transitions without boring users with a blank loading page, designers are increasingly using loading animations.


Google’s branded loading page animation

As well as helping to reorient the user to the new page, loading animations offer a chance to do something creative that further engages audiences. Viget ran an experiment to see how long users were willing to wait for a page to load with branded versus generic animations. They found that users were willing to wait longer and the abandon rate was lower with branded animations. The colorful and creative branded animations were intriguing to users, offering something they weren’t accustomed to seeing on other sites.

Eases

In addition to optimizing the duration of animations and page transitions, it’s important for animations to mimic the laws of physics so that they feel natural and intuitive to users. This becomes particularly important when setting up an animation’s rate of acceleration or deceleration, known as easing. Linear easing, i.e. animations that moves at a steady pace, are rarely used because in the natural world, objects either speed up, slow down, or remain stationary.

Easing example for a web animation
An example of changing a linear ease to a decelerating ease

In addition to mimicking the acceleration and deceleration of the natural world, easing choices should be based on whether or not the user is expecting an action. Humans perceive changes and movement differently based on whether they believe they have initiated the change or the change is unexpected. Easing should make the user feel like the website or interface is reacting to their actions. So if the response is user-initiated, for example a click or a hover, the animation should begin quickly and decelerate–the user will not be confused by the initial speed because they will be expecting an action.

A user-initiated decelerating ease example
An example of a user-initiated decelerating ease

On the other hand, if the animation is not something a user asked for, like a sign-up modal, we must be mindful of not surprising the user. The element should come onto the page slowly, giving the user time to process its appearance, and then accelerate as disappears from the page.

A decelerating sign-up modal

An example of a decelerating ease for a sign-up modal

Design for Your Users

Your primary objective for using web animations should be to make websites feel more responsive and intuitive to your users. Designed thoughtfully, animations can be a powerful tool for helping your audience achieve their goals and feel engaged with your content. Using our understanding of human perception, we can avoid the pitfalls of designing animations that despite their creative application, ultimately distract, confuse, or frustrate our user. Remember, the more comfortable our audience is on our site, the longer they will stay, the more opportunity to reach them and make an impact.

Check
Copied to clipboard http://...