Constructive Group Created with Sketch.

How Collaboration Makes us Better Designers

The concept of the solitary creative genius is a myth. When I first began as a designer, I felt like my designs had to be complete before I could show them to anyone. I think this vulnerability stems from a feeling that we as designers have to think through every element before we can call a design complete. As a result, it can be tempting to withdraw—to fully embrace the solitary designer stereotype—and assume the problems we’re facing are uniquely our own. But here’s the thing: usually another person on your team has dealt with similar challenges.

It can be nerve-wracking, vulnerable, and challenging at times, but getting out of our own heads and incorporating collaboration into our design processes can make us all better designers. Over the years, I’ve come to learn that designing collaboratively means putting your egos aside to make something that transcends the sum of its creators.

 

Here are six ways you can be more collaborative based on our process at Constructive:

 

1. Start a Conversation

I spend most of my days independently thinking through interaction concepts and visual executions with prototypes, wires, sketches (lots of sketches), and of course .jpgs, .pdfs and some .sketch files. When I get to a place where I feel comfortable that most chips have landed in approximately the right places, I usually first reach out to my fellow designers to get quick initial reactions, advice on how to elevate the work, and general tips on what’s working and what’s not. The computer can be the worst tool for problem-solving, so it’s critical to step away from your screen and talk through the work with another person to make sure your design intention is coming through and the system is intuitive enough for another person to use.


2. Embrace Internal Reviews

We always review internally before presenting designs to a client. This gives other designers on our team the chance to comment on the work. Talking through a design system with another person can be like a sieve for your own ideas. What’s working? What’s an outlier? What are ways we can extend the system? Usually after we talk through a problem, I get reassurance of how to go forward because I know how other people have interacted with the prototype. It’s easy to justify a system’s flaws in your head when you’re the only person who’s seen the design, so it’s critical to get a second or third or fifth opinion on design so we can make certain the system works and is helpful for everyone.

internal design collaboration review
Live shot from one of our internal reviews.

It’s also good practice to test your ideas in presentation mode before having a formal client presentation. What sort of language am I using to describe the design? Is it intuitive enough or do I have to explain my rational in order for someone to understand the intention? If the latter is true, it’s a good indication that I might need to work through the design to get it to a place where it can exist without me explaining how the user should interact with it.


3. Incorporate Prototype Testing

A prototype can be anything. It can be a piece of paper, an interactive InVision board, a card sorting sitemap, or a general experience that’s used to test how a typical user engages with a product. When I’m uncertain about an assumption I have about a design, it helps to do some informal user testing with the design team and other colleagues. Testing with members of your team is a good exercise for thinking through basic user experience patterns because everyone brings a unique understanding of web accessibility standards and how to improve usability. I did several rounds of user-testing on colleagues early on in the process of developing the UX for Air Quality Life Index before doing a round with target audience members to streamline controls and make sure there was a base understanding of how it functioned.


4. Schedule Weekly Design Huddles

We also have a weekly design huddles that allow us to get aligned on what everyone is working on and give us the chance to have a focused conversation on trends, processes, and inspiration. It’s important to come together as a group like this because it creates a forum for bringing up issues and opportunities that we’re experiencing as individual designers.

design team huddle
A Constructive design huddle in action!

 


5. Share Inspiration

Browsing the internet is primarily an individualized activity—unless of course you’re forcing everyone around you to watch videos of thirsty pets. We try to share and keep an organized record of all the things we see online that inspire us. We do this by using slack channels and Dropmark to categorize links to sites we like. This is an important practice because it makes browsing the internet a more collaborative activity. It allows us to understand each other’s reference points. And since we’re continuously learning from new experiences, it’s important to share what speaks to us in creative, professional or personal ways. It’s also a good way to gauge what your competitors are doing and what techniques or trends are shifting the industry to new and exciting places. By keeping an inspiration library, we can easily reference industry-specific sites in project strategic briefs. It also helps us align as a design practice through having a shared knowledge base about our creative inspiration and aspirations.

Screenshot of Dropmark - collaboration web service we use to organize sites we dig.
A screenshot of Dropmark – the web service we use to organize websites we dig.

6. Collaborate on Larger Projects

Larger projects demand even more collaboration between designers. Some of our recent team projects have been re-launching our own site and designing the Communication Network’s journal Change Agent. These projects have allowed us to put our egos aside and engage in meaningful conversations about what’s best for the overall project. It has been challenging to give constructive criticism on a colleague’s work, but when something is bothering one person, it’s usually bothering more too. Giving each other feedback forces us to have tough conversations about what we’re trying to convey with our designs and understand if something isn’t as inclusive or accessible as it could be.

Working toward one unified idea also allows us to learn collective processes and knowledge. I didn’t know that much about production work before redoing the Constructive site. So I racked my brains for several months figuring out how to optimize images for the web (see future insight). It was only when the other designers started helping with production that we learned from each other to create a process that worked based off all our shared knowledge. Methodology and process solidifies when they happen many times with different people over time.


Final Thoughts

Why am I telling you this? The obvious answer is that any team needs to collaborate to work successfully. That holds a nugget of truth, but the real answer goes much further. No matter your discipline—design, development, content, or strategy—I believe we get better each day as individuals by engaging in challenging conversations with each other. This in turn creates a much stronger, more powerful team.

So if you take anything from this, it’s that:

  • We all strive to create excellent work that conveys truth and value.
  • Our differences make us stronger together.
  • We’ll never recommend using Helvetica as your brand typeface. (Okay, we didn’t explicitly say that here but it’s still true!)

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.

 

Incorporating Concept Boards into Our Design Process: What We’ve Learned

Designers often talk about “design intent”, or the overall visual structure of what we want to design based on our intentions at the beginning of the project. But communicating design intent to clients can sometimes be tough—it’s often abstract and relies on a few creative leaps to understand. This is especially true when partnering with clients who have varying degrees of experience with design teams. We realized that to more clearly communicate with clients, we’d have to build better methods of showcasing our visual and interactive ideas before jumping right into design comps, full layouts, or refined brand elements. That’s where concept boards come in.

Why We Started Using Concept Boards

We started using concept boards about a year ago as a way to clarify our thinking to clients. Each board is organized around a specific theme. Those themes relate to the strategic goals of the organization. For example, an organization may be trying to tell a story about health care in the developing world. The two concept boards may then be called Clean Initiatives, and Bright Future. The visual ideas on each board would be based on that two or three-word theme or title.

climate change concept boards

Doing it this way helps us to make some strong differentiating choices early on, so the client has a real sense of which visual direction they can go. It might be something clean and minimal, or something warm and lively. Those choices are ones we explore with our clients, using the concept boards as the focus of those discussions. We found that having two of them provided enough of a differentiator that clients could make some clear choices about which one felt ‘right’ for their digital brand. For larger brand initiatives, we might use more concept boards as a way to focus our client’s attention on a wider set of choices.

What We Learned

After using concept boards for the better part of a year, we’ve come to a few key conclusions.

First, it is critically important to explain how the concept board process will benefit clients.

As part of our initial conversations with a new client, we go over how the boards work and why we find them useful. Where necessary, we include them in our scope of work as a separate deliverable. When speaking with a client about our design process and methodology, we can pair these concept boards with finished products in case studies, to show how our approach works. For organizations that may have a tighter budget or time constraints, we pitch concept boards as a very effective way to communicate design without a longer investigative process.

Second, you need to dedicate time to selecting and editing images that relate to your client’s brand and area of expertise.

We start with quick investigations into interface and typography and pair them with images and other visual artifacts. Those elements, combined with the organization’s brand colors, logo, or key photos, can help tell a much more effective story. Essentially, what we show and what we don’t show can really make or break the conversation.

Third, how you deliver the concept boards matters.

Many of our clients are not in New York or would struggle to schedule office visits, so we need to do a lot of things virtually. Our first attempt at concept boards used large jpegs or PDFs that were difficult to view over screen share or on laptops. Those weren’t really effective. The format wasn’t one that a lot of clients were comfortable navigating, and the files got really large. For our subsequent attempts, we started to look at digital tools which could help facilitate that delivery. Pinterest was one we looked at briefly, mostly because of their in-browser sharing tools. We also looked at InVision Boards and decided to keep using it. Their tools worked with a lot of our other design workflows,  and features like public link sharing and commenting made the client communication bit much easier.

concept boards example

When reviewing concept boards in client meetings we found it helpful to do a few things to set up the conversation. First, we need to explain what concept boards are (and what they aren’t). We tell clients that these visual design conversations are directional, and not completed designs. Creating a false sense of a solution before we had actually started design would hurt us later on as we explored ideas in more detail.

Clients often like to mix and match elements they find in each concept board. That might mean those clear choices we defined early on got slightly muted. Ultimately, however, it means our clients get more involved early in the design process, and we get feedback on what is (and isn’t) going to work for their brand and their project.

education concept boards

 

To Conclude…

Concept boards clarify our design intent in a number of ways. Starting with client conversations to explain our process, we clarify concept boards as a design and communications tool. While creating the boards, we focus attention on our client’s needs and their overall brand goals by selecting appropriate images, patterns, and sample user interface concepts. When presenting the concept boards, we clearly explain how they’re used and what feedback we are looking for from the client.

Since everyone needs time to digest and think about these more visual presentations, we use InVision or other digital platforms to share the concept boards with the client. This way, they can look at them independently and speak privately with their team. Overall, concept boards are a very effective way for us to communicate our design intent, and we are very happy with the results!

Why Brand Strategy is So Important To Website Design

Want to learn more about the connections between brand strategy and website design? Sign up for our upcoming webinar, Designing for Online Engagement: How to Build Your Website with Brand Strategy, hosted with the Foundation Center.


Imagine you hear about a really interesting social impact organization that sounds like it’s doing important work in an area you have a lot of interest in. You’re immediately curious and want to know more. What’s one of the first things you do? Head right to their website.

You might be on your phone at a conference, working at your desk, or at home surfing on your tablet. You might go directly to their homepage, or you might be clicking a link someone shared that goes to a page deep within their website. Wherever you are and whatever you’re doing, the second you arrive, you’re presented with a snapshot of the organization.

And in this instant, you start forming an opinion. Is this organization interesting? Do they reflect your values? Are they credible? Effective? Trustworthy? Relevant?

Decisions the organization made months or years ago to introduce you to its brand at this moment—from the budget they set for the website, to the partner they worked with, to their content, design, and technology choices—are now significantly influencing what you’ll do next. Will you explore further, perhaps sign up for a newsletter, and hopefully visit again? Or will you leave without viewing another page, likely never to return?

Of course, the difference between a website that helps build a meaningful relationship with someone and one that turns them off for good isn’t as cut-and-dried as our hypothetical scenario. But it’s not an overstatement to say that websites play a pivotal role in how effectively nonprofits are engaging audiences and turning that engagement into action.

Understanding Brand Value

So, why do people choose to engage with social impact brands? And what role does a website play in creating this engagement?

We engage with nonprofits because they give us an opportunity to put our values into action. Purpose-driven organizations provide us with ways to help realize a world more like the one we’d like to live in.The nature of this relationship—and why it matters to us—is based on the kind of engagement we’re looking for.

“Casual” supporters such as donors, volunteers, and brand advocates are typically attracted by a nonprofit’s intangible and aspirational value—subjective things like the kind of world we’d like to live in, our emotions, and how we’d like others to see us. For these audiences, imagery, storytelling, and campaigns bring them closer to issues they identify with  and are usually the most important part of their experience with the brand.

More engaged audiences, such as issue area experts, practitioners, and policymakers are also influenced by intangible qualities. Taking it a step further, though, they also want to know the tangible ways social impact organizations can help them be more effective in their own work. For these audiences, access to things like knowledge resources, tools, and networks is usually the most important part of the brand experience.

Of course, whatever a person’s specific needs and interests, it’s the job of a nonprofit’s website to create an experience that bridges the divide between interest and action. And if it is to be an authentic and effective expression of a nonprofit’s brand, a website must represent an organization and respond to the needs of its audience as well as we would if we were representing the organization in person.

Designing Digital Brand Experiences

When an organization creates (or redesigns) its website, there’s an understandable focus on things like making sure it’s “visually appealing,” “well-organized,” “mobile-friendly,” and other fundamentals of good design. These are all important things, but they only scratch the surface of reasons why people visit our websites. Design’s role in translating different types of brand value goes further than these basic principles of effective design.

If social change brands are to build the kinds of relationships they want with audiences—and if they are to have the kind of impact they envision—we must approach the design process with the goal to provide different people with the kinds of value they seek in a nonprofit and its mission. The website is simply a conduit for this exchange.

Using brand strategy as the lens through which we view the websites we create, website process is the best way to ensure we accomplish this goal. Because if successful design (and by this I mean design’s true definition) is all about context, then brand strategy is by far the best way to give everyone who contributes to the process the insight they need to create a website that helps social impact organizations achieve their goals online and in the real world.

To learn more about principles and practices you can use to weave brand strategy thinking into your next website project, join me on June 21st for our webinar with the Foundation Center, Designing for Online Engagement: How to Build Your Website with Brand Strategy.

Decoding the Website Design Process for Non-Designers

For many organizations working in the nonprofit or social change space, working with a design agency can be unfamiliar territory. To make matters worse, there’s a lot of jargon thrown around within design agencies that can be a barrier for clients who are unfamiliar with the design process.

As a project manager who made the switch from the nonprofit sector to Constructive, I sympathize with our clients who find the design world rather intimidating. That’s why I’m here, to break down the typical process for a website redesign and make it as approachable as possible!

There are two main phases of the website design process that non-designers should be aware of: information architecture and visual design.

Information Architecture

Once we’ve done our research and clearly defined a digital strategy for a client’s new website, we move into what is called the “information architecture” phase of a project. In layman’s terms, this simply means that we are working to organize a site’s content in a way that is user-friendly and aligns with the organization’s goals for engaging its audiences. During this phase, a designer or UX designer (user experience designer) will be working on two main deliverables: a sitemap and wireframes.

  • sitemap is a diagram that lays out a website’s structure and defines the relationships between content and various pages on the site. From a sitemap, you should be able to discern how a user would navigate through your site. For example, if you want to find where a news article “lives”, you’d follow the flow-chart like diagram from Home, to News & Events, and then arrive at your desired destination, a single news article. It provides you with a birds-eye view of your entire website and lays the foundation for what is to come next in the information architecture process. Here’s what they typically look like:

design process sitemap example

 

  • Building on the sitemap, wireframes dig a little deeper and flesh out how content and other elements will be organized on a page by page basis. At Constructive, we start with rough wireframes and incorporate more detail as we receive feedback from clients. You can think of wireframes as being like blueprints for a house一they show you how everything will be laid out, but leave out design details. For example, you’ll see black, white and grey boxes that suggest what content will display where, but you won’t see designed elements just yet (that will come in the next phase)! Before finalizing the wireframes, we’ll also make notes about functionality to remove any ambiguity about how certain features or elements will behave once translated from static comps to the dynamic site. Here’s an example:

design process wireframe example

Visual Design

During this phase, you’ll get to see all our ideas on how to improve content strategy and user experience come to life. A designer will be working on two main deliverables: a concept board and several iterations of a design comp.

  • Concept boards are a collection of visual elements that convey an overall look and feel to help define a clear direction before jumping into the design of individual pages. We’ll typically provide our clients with two design directions, and work with them to select a direction that feels most fitting for their audience. Here’s an idea of what you can expect:

design process concept board example

  • Once a direction has been confirmed, we’ll move into designing individual pages of the site, looking at things like color, type, and image treatment (these are called design comps). Designers might throw some unfamiliar words into the mix, so here’s a list of common elements that are found on most of the sites we work on:
    • Hero image: The image in the header of a page.
    • Hub page: A page that serves to organize related content. Hub pages are typically found in the navigation and contain unique content, but also group associated content. For instance, the “About Hub” might contain important information about an organization, and then link to a staff and careers page.
    • CTA: short for “call to action.” This could be a donate button, or newsletter sign-up.
    • Hamburger menu: a common menu style with three lines in a circle emulating a hamburger.
    • Kicker: small text above content that serves to reinforce what a user is looking at. For example, a site might display several kinds of research in a research archive, and a kicker would specify if it’s a report, article, book, etc.
    • Lorem ipsum: placeholder text used to fill design comps to emphasize design elements over content.
    • Hover state: the interaction when a user hovers over a button or linked text to indicate that clicking the element will take you off the current page.

To Conclude

Demystifying the web design process and defining some of the jargon can make the experience a lot more approachable and ultimately more collaborative. Once you cut through the unfamiliar territory and have an understanding of what to expect during a website redesign, you’re ready to confidently take on the exciting and important task of improving your organization’s digital presence.

Project Design 101: How to Avoid the Headaches

The Headache

You’re on a tight project deadline, when you receive feedback from your client. They like the design direction you’re going in, but believe if you “just change X,Y, and Z” the project will feel more complete. You’re already approaching design revision 2,999,999 and BAM—just like that you’re back at square one.

How to Design Strategies for Success

At Constructive, we’ve learned that the trick to avoid these design headaches is to set up strategies for success at the start of each project. While our clients are incredibly intelligent and capable in their given fields, design is often new and unfamiliar territory. In recognizing that the design process can feel daunting and subjective, we have developed a few strategies to help us lay a strong foundation for success.

1. Ask Questions

A great way to ensure a project fails is to come in with assumptions about what your client wants. Designers may be eager to dive into designing great work, but if you don’t understand the problem your client is trying to solve how can you design a solution? To avoid potential miscommunication and design errors, start by checking your assumptions at the door. Spend the first few meetings asking questions and conducting research on your client, the problem(s) they are trying to solve, and the questions that need to be answered. Designers who take more time to understand their clients’ needs will make more informed choices throughout the process. This will increase decision-making efficiency and build a strong sense of trust and mutual understanding with your client. During this stage of project design, here are some questions we try to answer:

Do we understand the big idea?

This helps us clarify the problem our client is trying to solve, as well as the goals they hope this project will accomplish.

  • Example Questions: What is the challenge that our client is trying to tackle? How does this problem relate to their overall mission? Why is this problem significant? What is the purpose of the project? Will this design project solve the problem? Who are our client’s audiences and what are their needs? How will the project help them?

How well do we know our client?

This helps develop a deeper understanding of who you are working with and what matters to them.

  • Example Questions: Who are they? What do they do? Why do they exist? What is their mission? What are their values? Is our client trying to retain their image, or reshape it? What are their short and long-term organizational goals? What are the backgrounds of the team members you will be working with? Has our client worked on design projects before? Does our client understand the design process?

What is our client’s competitor landscape?

Our goal here is to make our client stand out and be seen as a trusted and valuable source. By understanding our client’s competitor landscape, we are able to better differentiate and position them.

  • Example Questions: Who are our clients competitors? Who are our client’s partners? What platforms and modes of social communication does the competitor use to stand out? What does the competitor’s messaging and position look like? Who has the competitor collaborated with on their projects? What differentiates our client from the competitor?

2. Communicate Project Expectations

By documenting project goals, strategies for achieving them, and a plan of action, project teams and clients can create a shared understanding and point of reference for all subsequent choices. Establishing expectations provides the goalposts that everyone can work towards to determine if the project is successful, and it allows everyone to know their role in achieving that success.

Develop or Edit the Design Brief

Create a clear and concise project brief that outlines client problems, big ideas, objectives, goals, and competition. The questions asked in the research phase should allow designers, strategists, and other team members to develop a strategic brief that will guide all subsequent phases of the project and can be referenced by other team members to make decisions and justify choices. This brief should be communicated and discussed across all parties, agreed upon, and understood by your client and your design team.

Delegate Internal and External Team Roles

Within the design team or agency, make sure to establish roles, priorities, and goals for each member of the team. These roles should be communicated to your client, and your client should understand their role in the process as well. It sounds simple, but this step is often overlooked or assumed. By keeping your team’s tasks organized, you ensure that everyone knows who is responsible for what.

Create Realistic & Transparent Timelines

Set clear project deadlines and milestones from the start that allows room for flexibility and inevitable setbacks. Still, you should remain firm to the deadlines that require hard turnarounds or project development. Project managers should be responsible for reminding both clients and designers about approaching deadlines and deliverables.

3. Create a Roadmap for Collaborative Feedback

“Should we make this box red or blue?” is a conversation most designers try to avoid with their clients. Depending on what stage you are in the design process, designers often look to understand if a concept or design is resonating based on the strategic priorities of a project. When this type of feedback is needed, back and forth conversations on minute design details hinders the workflow and delays the process. To make the most of design feedback sessions, designers should help frame how their client reviews designs. In return, the client should trust their designer’s process to find the right solutions.

Educate Your Client on Your Designer Toolkit

Ask your client which design tools and programs they are currently familiar with, and any tools they are not. Educate your client (where appropriate) on the tools they will be expected to use and become more familiar with (e.g., Basecamp, InVision, Adobe InDesign, Google Docs).

Ensure that your clients are familiar with the design language that is relevant for critiquing design, but leave out any unnecessary design jargon from the conversation. Taking time to educate your client on the basics of design feedback and lingo will increase the fluency and ease of communication between designer and client.

Educate Your Client on Design Feedback

Take time to educate your client on your design process. We suggest presenting your client with a list of questions and expectations before meetings, as well as suggesting the types of feedback that will be helpful moving forward. While questions don’t have to be provided upfront, centering the conversation around how the design relates to strategy, communication, usability, etc. is essential to achieving actionable results.

Feedback sessions should feel more like a conversation than a lecture or show-and-tell. Designers should ask questions or prompt their client to give their opinion on layouts and design, and clients should feel free to ask questions of their own. The goal of a design feedback session is to identity what’s working, what’s not working, what can be improved upon or added, and what things remain unclear in relation to the project goals.

Concept Testing

In the beginning stages of the design process, establishing a solid visual direction is crucial. At this stage, the designer should start visual research and turn what they learned from earlier stages into visual assets and directions. In our design process, we often use mood boards to show our clients how these visual examples (e.g., color, type, concept) relate to their brand, messaging, problem, and solution. Creating a word bank or using your client’s language from their strategic brief in meetings is another great way to show your client that you are meeting and listening to their needs.

Your client should have an active voice in selecting a design direction for the project, but once your client picks a direction, the designer and project manager should hold their client accountable to their choice. Changing visual directions once the design assets are created delays the whole process—and increases the budget and scope of the project. To avoid this, budget enough time in your project to establish a solid visual direction that everyone is behind. If communication ever seems unclear, return back to the signed off agreements and briefs that prompted these decisions.

Summing Up

A successful project design starts at the beginning of the process. By knowing a few key strategies and tools upfront, both client and designer can focus on the greater task at hand – creating beautiful and effective work!

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!

Choosing & Using On-Brand Photography

Selecting images that capture the spirit of your content and brand has become an increasingly important aspect of maintaining a digital brand. We need to do this to keep our brand fresh, and to make sure that new communications are paired with striking, on-brand imagery. For brands whose communications rely heavily on the use of photography , as opposed to illustration or infographics, this requires constant photo research which can often be stressful and time-consuming. There are, however, some simple and effective techniques you can use to make the process easier. There are types of photos to avoid, and types of photos that will make your content stand out. Let’s take a look at a few of those techniques.

Photography to Avoid

Avoid people staring. 

Photography that features subjects staring directly at the camera usually feels more appropriate for advertising.  (The general exception to this is headshots of staff members.) While custom photography with “regular” people, not models, is a way to avoid this, the cost is beyond the reach of most organizations. Additionally, cheaply-shot stock photos will typically stand out as inauthentic.

granddaughter with her arms wrapped around her grandmother's shoulders

 

Avoid over-smiling people. 

Stock photography is often filled with people having far too good a time doing everyday things, resulting in images that feel staged and unrealistic. Think of how often your audience actually laughs or has “fun” in these types of situations and look for photographs with subjects who have facial expressions that appropriately match the tone of your content.

smiling female nurse practitioner taking blood pressure for smiling male geriatric patient

 

Avoid staged studio photos. 

While studio photos can sometimes be hard to identify, there are a few giveaways that you can look for, and then avoid. Look at the lighting—photos shot with staged lighting will often have too few shadows, brightness on the wrong sides of objects, or feel very washed out. Photos filled with props such as office equipment, construction workers in spotless hardhats, or perfectly staged backgrounds or on white backgrounds rarely feel authentic.

male doctor chatting with smiling heterosexual couple

 

Avoid overly stylized images. 

Avoid using images that incorporate unrealistic photo imaging, color adjustments that are likely to be off-brand, or photos that rely on clichés to communicate their concepts. Additionally, after a number of years with stock photo sites on the web, there is a type of image that is a “stock” stock photo. One is the cartoony, “3D business-man” doing different things. Avoid these at all cost. It is better to use no image than one of these.

 

Avoid cultural clichés. 

Another type of image that often is used for non-profits is the “savior” image. It’s of a wealthier donor or volunteer surrounded by smiling recipients, usually African children. These photos feel staged, and display an extreme power dynamic that is almost always at odds with the true nature of the communities being photographed. Speaking from personal experience growing up in Nigeria, scenes of children crowding around a visitor do of course happen in West Africa. But they also happen in schools in the U.S., at playgrounds in Japan, and on streets in India.

smiling white volunteer/visitor surrounded by group of african children

Other cultural cliches, like Africans in stark poverty, colorful Mardi Gras/Carnival celebrations in Louisiana, or clogged Indian cities should also be avoided. While these images often reflect realities, it’s important not to reinforce unintentionally negative stereotypes of countries or cultures. Instead, choose images that portray them with the same complexity and humanity we accord our other subjects.

Photography to Include

Make the image relatable to your audience. 

Choosing images that are relatable to your audience depends on, well, your audience. If possible, look at your brand handbook and positioning statements for a clue. Also examine  your site analytics to see where traffic is coming from, and what articles perform the highest. After this, compile a list of keywords and phrases that describe your content and search for photos with these attributes.

Make the image distinct. 

As a brand manager or marketing director, seeing your carefully chosen stock image used on another site or ad can be cringe-inducing. For your audience, it can dilute your brand and message significantly, especially if the image is used on a competitor or related site!  If you have an image that you’d like to use, start by doing a reverse image search. While this will never be exhaustive, it tells you generally how others are using the image, and how common it is online. Not happy with what you see? Widen your search parameters and go for something with more personality that is less common online.

Make sure the image is legally available. 

It’s easy to grab an image from Google or Bing Images. You can find great high resolution images just waiting to be downloaded and imported into your site or presentation. The catch is, you likely don’t have the rights to them! For nonprofits and social change organizations on small budgets, copyright infringement lawsuits should be avoided at all costs. Luckily, there are a few sites already working on making this rights process as painless as possible. They specialize in high-quality free or no copyright photography.

Make the image accessible. 

Beyond ensuring your images are visually appealing, you also must also ensure your images are accessible for the visually impaired. The National Federation for the Blind estimates that around 9% of all adults in the United States have some sort of visual impairment. These users often use screen reader software that translates the text and content displayed on the computer screen as a speech synthesizer or braille display. These programs rely on descriptive text attached to images that describes the actions taking place in them.  This is called alt text, since it’s inside an HTML “alt” tag.

Let’s look at an example.

two female colleagues chatting at a table with computer in front of them

Good example of alt text: Two female colleagues chatting at a table with computer in front of them

Bad example of alt text: Two people at work

Good alt text includes detailed information about the photo, allowing for a more specific search and find.  The bad alt text is less specific and therefore less informative about the nature of the photo.

Conclusion

Finding images that keep your brand up-to-date and memorable can be a huge challenge. There are types of images we absolutely must avoid, ones that your audience will immediately note as stock or cliched. Instead, the most effective imagery on your site will be relatable, accessible, distinct, and legally available. While this may feel daunting at first, if you follow a few simple steps, doing this is easier than you think!

Project Recap: Designing Transmedia Experiences for Change Agent

When The Communications Network contacted Constructive to design the most recent addition of its biannual print publication, Change Agent, we were flattered. We’re a proud member of ComNet and have always appreciated its ability to elevate important issues at the intersection of strategic communications and social change. The opportunity to help push thinking and connect readers to fresh ideas naturally appealed to us. That we’d be given creative license to redesign the issue from the ground up was icing on the cake.

All good design exercises begin with discovery, and our engagement with The Communications Network was no different. We discussed collaboration—the idea that even with both of our teams on the project being relatively small, a partnership built on trust would enable us to accomplish some truly ambitious goals. We discussed the concept behind Change Agent—that it’s not just a series of one-off publications, but something that’s continuously evolving. We discussed the content—deep, inspiring narratives from leaders across the field, stories that deserve telling and retelling so that audiences can apply vital insights to their own work. And of course, we discussed design—the notion that to be effective, design must be purposeful, and it must meet the audience where they are, in whatever medium they prefer.

We can’t emphasize the importance of this last point enough. According to a 2016 study by Nielsen, we now spend almost 11 hours consuming digital media each day. Tablets, smartphones, and PCs are leading this growth, with 63 percent, 60 percent, and 21 percent year over year increases, respectively. So, from the very start of this engagement, it was obvious to all that for Change Agent to be effective as a design solution, it had to honor its name and change significantly—from a printed artifact into a transmedia experience that reaches audiences wherever they are.

Putting printed matter online isn’t a particularly innovative idea. The problem thus far with conventional approaches is that they aren’t actually designed for the web. This may seem obvious, but we believe the implications are deeper than many may realize. Most attempts to bring print content online involve posting a low-resolution PDF on a website or embedding it in an online PDF viewer such as Issuu. While we may all get a kick out of those skeuomorphic page transitions, there are serious limitations to this approach—namely, that the content is still locked up in a PDF! That translates to a poor content consumption experience for smartphones and tablets, with none of the baseline benefits that web-native content offers, such as navigability, shareability, and analytics.

Figure 1: Average Time Spent per Adult per Day Based on the Total U.S. Population

Figure showing Average Time Spent per Adult per Day Based on the Total U.S. Population featured in the bi-annual Change Agent publication

Source: Nielsen Q1 2016 Audience Report, accessed 11.07.16 online at Adweek

 

Thus came our dilemma with designing Change Agent; authors contributed some amazing, engaging content, and it would have been a crime to lock it up in a PDF where no one would find it. The content deserved to be appealing, interactive, and accessible; it deserved to be print-native and web-native at the same time; it deserved to be transmedia.

The key to creating an effective transmedia experience is to start with a medium-agnostic, content-centric process. Rather than designing a print product and attempt to retrofit that to the web, or vice versa, we focused on developing a core design system, with type, colors, content structures, design patterns, and media that could be adapted to both print and web.

Of course, it’s impossible to create a universal design system that is 100 percent consistent across print and web; each medium offers different strengths and weaknesses. Print is suited to long-form narratives, with high-resolution media, sophisticated layouts, and a linear, horizontal reading experience. Digital products, on the other hand, lend themselves toward shorter, more digestible narratives; with interactive media, simpler layouts for smaller screens, and a non-linear, vertical reading experience. So creating a cohesive design across media required first drawing on our collective experience across each medium to establish the common core of a design system, and then leveraging each medium-specific design system to its fullest expression.

Figure 2 Transmedia Production Process

Figure showing the transmedia production process for Change Agent

 

In print, production is relatively straightforward; you design a document, print it, and distribute it. Online, production is far more challenging. To shorten our runway, we relied on Exposition™, a long-form publishing platform Constructive debuted in late 2016. Designed to support immersive, responsive experiences for long-form narratives, we felt this WordPress-based platform was ideally suited to meet the challenge of making Change Agent more accessible, engaging, and extensible.

To streamline the content development and population with our design systems, we devised a custom workflow integrating commonly available applications and processes. Google Apps served as our transmedia content management system: we used Spreadsheets to organize everything in a content matrix, Docs to collaborate and update various articles in real time, and Drive to share all of the media files. We then integrated these with the print application (Adobe InDesign) and web technology (Exposition / WordPress) in such a way that we could flow and reflow content dynamically—ensuring that print and web always matched. By integrating the content deployment in this way, our team could focus its attention where it added the greatest value: applying the core design to the print and digital systems and maximizing their native strengths.

We love working on projects that challenge us to innovate and not only design deliverables, but also design the processes that allow us to collaborate with multiple teams and work across mediums. Fortunately, ComNet trusted us enough to allow us to stretch our legs and run as far and as fast as we could. That, in turn, translated to a better outcome. We hope you agree that it shows.

Check out the digital version of Change Agent here to see the final result!

Designing Brand Experiences for Social Impact

It takes great focus and clarity for brands to rise above the din of the crowd and be heard in today’s information-saturated world. And for social change organizations, the challenge is even greater. Because when the message is about a better future, possibly somewhere far away, mission-driven brands must also create a sense of urgency to act on issues that may seem far removed from our lives. They may need to explain complexities that can be difficult to understand and embrace. And when the size of the lift seems so big, they often must help close the hope gap by demonstrating tangible progress and results if they are to sustain our engagement.

Said more simply, if they are to succeed, social change brands need to stand up, stand out, and stand for something. Fortunately, changes over the last few decades have provided us with both the environment and the insights necessary to take on these intertwined challenges. The rise of networked technologies and digital communications, the maturation of the design field, and a recent awakening within many nonprofits about the value of their brand have combined to provide new opportunities to increase the effectiveness of the social change sector. The challenge then is to understand the environment in which social change brands exist and apply this understanding to help us design solutions that offer the best chance to maximize impact.

The Rise of Brand in the Nonprofit Sector

It’s no secret that over the years, brand has had a bit of a tortured existence in the nonprofit sector. However, more nonprofits are getting past their brand skepticism (if not outright resistance), and have thankfully been re-examining their relationship with “The B-word.” By making smart adaptations to traditional business-centric brand principles, organizations such as The Harvard Kennedy School of Government, Stanford Social Innovation Review, and The Communications Network have contributed to help evolve the role of brand within nonprofits; developing a mission-driven, participatory framework more in keeping with the sector’s values.

This new way of thinking, articulated in Nathalie Laider-Kylander’s and Julia Shephard Stenzel’s landmark book, The Brand IDEA: Managing Nonprofit Brands with Integrity, Democracy, and Affinity, is perhaps summarized best in its introduction by Christopher Stone, President of Open Society Foundations: “A brand is a powerful expression of an organization’s mission and values, that can help engineer collaborations and partnerships that will better enable it to fulfill its mission and deepen impact, and it’s a strategic asset essential to the success of the organization itself.”

Chart on organizational strategy shows the theory of nonprofit brand value for building trust, cohesion, capacity and impact.

Understood this way, a nonprofit’s brand offers the potential for far more than just good messages and visuals. It’s the DNA of a social change organization’s ideas, expertise, relationships, resources, and experiences, and guides organizational culture by bringing people together around a shared vision to make it easier to create shared value.

If we accept this idea—and we should—then we must also consider how social change organizations can most effectively translate brand nuance and complexity into something more tangible. How can we create experiences that make it easier and more enticing for people to participate in creating this shared value. And more important, how can we make sure that our solutions continuously maintain the integrity of our brand and deliver meaningful experiences that sustain audience engagement?

Translating Organizational Strategy

It can be daunting to fully understand what some nonprofits do—not just for the outside world, but sometimes even for those who work inside them! Countless activities and moving parts all work together to advance a mission. But how do they relate to one another, and to what ends? Brand strategy has long been a useful tool for helping organizations increase clarity and focus to help an organization better understand itself and its audience. Done right, it provides an important foundation for expressing mission, vision, values, and key messages with greater consistency.

For social change organizations, many of whom take on complex, systemic challenges where progress may be more difficult to see, brand strategy has an even bigger role to play. It must also connect people more deeply to how change actually happens. It must help social change brands educate us on the nature of the challenges, detail the different roles they play in addressing them, and explain how we can work together and what to expect along the way. This calls for a brand narrative that creates a strong through-line from mission success all the way through to engagement.

The benefits of a process that creates a clear brand strategy to articulate a narrative this nuanced are profound when it comes to organizational strategy. The risk is that months of discovery and self-analysis produce useful strategy that sits on a shelf and is not properly integrated into an organization so that it is felt at every level of experience people have with the brand.

So how do brands make these abstract concepts and processes more tangible, meaningful and valuable? Well, as branding expert Marty Neuimeir says, this means “you gotta design.”

Design, Value, and Meaning

Think about how much of our existence is built on design. There’s a reason humans live in such a thoroughly designed world—we’re highly visual creatures and design is how we make sense of it! Countless designed experiences every day, many of which we are barely aware of, create context and connect with our emotions, greatly affecting our perception of value, and therefore meaning. And design—both its process and its outcomes—is all about relationships and context.

Brands themselves are one of these designed constructs. Dating as far back as our use of heraldry to self-identify with a tribe or clan, brands are powerful concepts that help give greater meaning to our lives. In many ways, they encapsulate what we value, and conversely, what we do not value. And as the design discipline is all about working in context, for modern brands to design experiences that connect with these deeper feelings of value and meaning, the people who contribute to designing them must first understand the many contexts in which the brand exists.

An effective design process accomplishes this by making makes sure that the outcomes of our collective efforts are aligned with what we believe will effectively engage people to help them realize the value they seek. But what kind of value exactly are we referring to? Modern brand theory organizes brand value in three categories, which every brand has its own mix of depending on the type of brand it is:

Tangible value is the easiest to understand: Things we can see, touch, or empirically quantify such as how a brand works and its measurable results,

Intangible value is of course, less tangible: How a brand makes us feel or what meaning it adds to our lives, and

Aspirational value is the most abstract: Projections of who we hope to become or what we’d like to make possible as a result of our relationship with a brand.

As the theory goes, the more tangible a brand’s value, the more easily it can be understood. Conversely, the more intangible the value, the less easy it is to define and the more outside of a brand’s control it is. For social change brands, who often deal in large amounts of intangible and aspirational value, the challenge then is to use the power of design to consistently deliver value on all fronts and create tangible experiences that deepen our engagement to their missions.

Designing Better Brand Experiences

Design has often been described as “strategy made visible.” It’s what helps makes the value in an organization’s brand able to be experienced—online, in print, and in person. As brands are not static things, these experiences occur across time, which means that to consistently deliver value across the lifetime of a person’s relationship with the brand requires, we must fully understand where, how, and why value is created—as well as the context in which experiences happen between the audience and the brand, physically and conceptually.

Which is exactly where a well-articulated brand strategy provides enormous benefits.

For social change organizations to consistently design experiences that bridge the gap between mission and motivation, a well-articulated strategy is not just an ideal starting point to think about brand, it is also an essential through-line of the design process. This is because since design is a highly collaborative, co-created process, brand strategy greatly improves the ability of designers and non-designers to more effectively frame challenges, opportunities, and projects. By translating organizational strategy into a clearly articulated positioning and messaging framework, brand strategy helps stakeholders make better decisions to advance the strategy throughout the design process and more objectively evaluate its outcomes.

Nowhere is this more apparent than in the world of digital communications, where the entirety of people’s interactions with a brand occurs through a screen. To create these experiences, cross-functional teams of content strategists, user experience designers, visual designers, content creators, and technologists must all work together to translate a brand’s value through things like content taxonomies, interfaces, and system architecture. By designing through a clearly-defined brand strategy that articulates the kinds of experiences we’re trying to create, people with different perspectives are more able to have productive conversations in a shared language about what such an experience might be like. We’re also likely to be more collaborative in applying our collective experience, expertise, and opinions to create it, resulting in a better working relationship and better outcomes.

Putting Theory into Practice

Ultimately, every organization engaged in helping to bring about social, economic, and environmental change has its own combination of beliefs, culture, methods, and more. And each of these unique brands stands for something bigger than itself; something which has different meaning and value depending on who’s receiving it.

When the brand strategy and design processes are united, they provide a powerful lens through which to understand the complexity and nuance of these dynamics and articulate them with greater clarity, meaning, and empathy. Together, they help a social change organization better understand itself so that its efforts are more focused and aligned; then more effectively apply design’s ability to translate ideas, concepts, and value into tangible experiences so that when audiences engage with their brand, it stands up, stands out, and stands for something.

Check
Copied to clipboard http://...