The Benefits of Our Blueprint Approach to Designing Websites

It’s common for social impact organizations to think of their website as a digital brochure. While it’s true that a website is a sophisticated digital tool for organizing and presenting information, savvy social impact leaders recognize that it does much, much, more than just educate people.

An effective, information-era website serves as a digital action center and community hub that supercharges your team culture, expands awareness of your organization and cause, and attracts and retains supporters, partners, and funders. But that’s not all. It can also drive a digital-first culture within your organization that publishes scroll-stopping content, act as a sustainable revenue engine, provide a platform for thought leadership, help you stand out in today’s attention economy, and inspire your advocates and supporters to take action and create real world change.

That’s a lot of work for what might seem like a simple digital communications platform. And getting as many benefits as possible out of your website is one of the reasons why yours should be customized to suit your organization’s specific needs.

The truth is, producing an effective website is a strategic process. Before our designers begin exploring aesthetics, our team works with each client to understand their goals and develop strategies to achieve them. The first major step in this process is figuring out what information needs to be on your site and determining the most effective flow of that information.

Take a walk with us for a behind the scenes peek at our process for determining the structure and information architecture of a website — aspects of website strategy that are critical to get right if your site is to provide the multiple benefits it is capable of delivering.

Creating a Blueprint

To build the foundational components of a website, we conduct research into your cause area to gain familiarity with the visual, data, and messaging elements in the space. This results in a landscape analysis that includes both design and messaging across the cause area.

Once we’re immersed in the cause area, we explore, distill, and determine how messaging and the visual design system will work together through our integrated branding process. We look beyond your basic content needs and identify your target audiences, establish your niche, clarify your brand voice, and develop your philosophy and/or impact story.

This is the beginning of what we call the “Blueprint” phase of creating your website. Overall the elements of the Blueprint phase consist of:

• Sitemap & Information Architecture

• Content Design/ Wireframes

• Establishing the Visual Design Direction for Two Pages

• Copywriting for Those Two Pages

• Tech Strategic Plan

Developing a Digital Strategy

Like an architect who needs to know your goals and desires for a building, we do a lot of inquiry at the beginning of the Blueprint phase. We’re aiming to understand who and where your organization is now, who you want to be in the future, where you want to go, and what strategies should be used to achieve your goals. Through target audience interviews and deep-dive listening sessions, we gain a deeper understanding of the information your site needs to contain. During this process we ask a lot of questions, such as:

• What has changed in your organization?

• Why is now the right time to update your digital presence?

• What products, programs, initiatives, services, or solutions, are you not currently sharing with the world?

• What information has been organically added to your site that you could drop?

• What information is difficult for your audience(s) to access that you want to highlight?

• What functionality do you need on your website that you either don’t have or doesn’t work very well?

• Who are your target audiences and what information do they need?

• What is your theory of change?

Knowing the answers to these questions helps us make strategic, rather than subjective, decisions during the Blueprint phase.

Drawing Up a Sitemap

With the foundational and strategy information determined, we dive into creating a sitemap. This is a 30,000 foot level view of the content needs and information flow for the site.

We use a sitemap approach to determine the information architecture of the site. Site mapping results in a visual representation of how information is organized and prioritized, what information goes on which pages, and clarifies the optimal paths site visitors can take to access information that’s relevant to them.

We use the sitemap to determine if every piece of information has a ‘home’ so we have a central source of truth. Developing it is a purely tactical process that ultimately tells us what pages will get built to create the website.

Site mapping is a collaborative process. We take the lead, guided by our experience in creating websites. But we know that our clients have knowledge and experience that’s invaluable in determining the most effective information flow. Together we plan out the site and account for everything that needs to be presented.

For organizations with legacy websites, we discuss what information needs to be carried forward and what can be dropped to streamline the site.

As you can already see, this part of the Blueprint process helps social impact leaders and their team(s) determine what information is on the site — even when you’re in transition. It demands that you take the time to gain a holistic view of your site and look at it as an instrument for executing your theory of change and achieving your desired future state. It’s a golden opportunity to rethink everything about your digital presence and present yourself in the best possible light.

Creating Content Design/ Wireframes

A sitemap may reveal the need for anywhere from dozens to hundreds of pages. Once we know what pages are needed for the site, we drill down another layer to create wireframes, devise a content design, and develop user stories for two key pages.

The Three Features of Content Design/ Wireframes

Content Design/ Wireframes are low fidelity diagrams of important pages of the website. Essentially, they are composed of a series of stacked content blocks/boxes that represent a container for different types of content. They take the form of simple vertical layouts without any aesthetic design considerations. To the right of each box are notes that describe the following:

1. Content Purpose - This is the reason why a content block is needed. Does it describe a program; contain your mission and vision statements; provide an overview of your organization with a link to your About page; or contain a photo grid of your team and board of directors?
   
   During the Blueprint phase we determine this for two core pages of your site. Eventually, we wireframe all of the page types that require unique designs.
   
   

2. Content Design - This is an estimate of how much content will go in this content block. Is it a Headline and 1-2 descriptive sentences; a lengthy description that requires space for six short paragraphs, a timeline of short blurbs; or a benefits section that needs 2-3 sentences for context and half a dozen short bullet points.
   
   The Blueprint phase requires a thoughtful approach to the quantity of content required in each section of every page of your site. Our goal is always to have copy be as succinct as possible while creating places for any long-form content that’s needed.
   
   

3. User Stories - This is a description of what a content administrator/creator can do within the content block and what functionality it provides. It also describes any interactivity provided to a site visitor (user). Some examples for a sideways-scrolling program highlights carousel are:
   
   

   • The carousel must be manually scrolled. It does not auto-scroll.

   • The carousel loops infinitely, repeating when a user continues to scroll.

   • The content is automatically loaded from an entry in the backend of the site.

   • The maximum number of items in the carousel is 5.

Determining the Content Flow

Based on knowledge gleaned from our research and discovery process, we determine the order that the information on each page is presented. Wireframing is a tool for exploring different page layouts. It’s a practical and tactical process, rather than a conceptual one.

We can easily move content blocks around and test out a variety of content flows. They’re kind of like digital sticky notes that we use to try out different information flows until we get to the one that works best. For each configuration we ask more questions:

• Is the proposed content on this page accomplishing the strategic goals of the page?

• Is this the right information for this page?

• Is there any information missing?

• Are the sections in an order that makes sense narratively?

• Where are the Calls to Action (CTAs)?

• Where do links send users?

Equally as collaborative as site mapping, content design/ wireframes align everyone on the project. This is a time to think deeply about what you want to communicate today and how you can be ready to expand your value, programs, solutions, or offerings in the future.

Accounting for Special Features & Functionality

Some projects require elements, functionality, and interactivity unique to the organization. For example, the BridgeCare site takes visitors on a journey that helps them understand a complex set of ideas and product offerings through a unique information flow.

Once we understand any site- or organization-specific functionality, we can account for conveying this information during the wireframing process. We call out these unique components separately because they require a little more thought than standard site interactions like moving from one page to another by clicking on a button.

In the Blueprint phase we often choose a page with special features and/or functionality to content design/ wireframe, design, and write. We like to tackle the hard stuff early on in the process. The benefit of completing these first two pages is that we establish a clear design and copywriting direction.

Creating a Design System

We don’t wireframe and design every page of a site. Because we use a component-driven design system, we quickly begin to see components (the sections mentioned above) that are used on multiple pages. For example, our content design process might lead us to decide that multiple sections across the site need two columns to allow for a significant amount of copy.

Once we see a section repeat a few times, we consider it a “component”. Ultimately, a website is composed of a series of components — some repeated and some unique — placed in a strategic order to deliver information. Once each component is designed, the result is a cohesive design system that knits your site together in a way that creates brand consistency.

During the Blueprint phase, we create content design/ wireframes for the pages that require the most attention to detail. We develop set styles for pages where content will be similar. For example, we created one wireframe for the Land Trust of Santa Cruz County that is used for all of the areas that they protect - even though there are nine areas featured on their site. Because the information is similar on each of these pages, there’s no need to content design/ wireframe them all.

Finalizing the Structure and Functionality

We wrap up the Blueprint phase of the website strategy by taking a final look at the sitemap and content design/ wireframes to make sure that anything we’ve learned or has changed along the way is captured in both the sitemap and wireframes. These two structural elements serve as guides when it comes to website design, functionality, and content production.

You can see how this approach draws social impact leaders and teams through a process that leads to a fully realized website — one that is reflective of your current positioning of the organization and sets you up for growth.

Take the Next Steps

Now that we know what information we’re presenting and the order in which we’re going to present it, the time has come to start designing the rest of the website. That’s the subject of another article. You’re also ready to start writing the copy on the site. How we bring the intertwined branding and messaging processes together is the subject of a different article as well.

At the conclusion of the Blueprint phase, our process has resulted in alignment on what information needs to be conveyed; where site visitors will find what they’re looking for; an information flow designed to present information in a logical order; and established design and copywriting directions. With your website strategy sketched out and fully in place, you’re primed to create a website that attracts and retains supporters and funders through strategically placed content in a structure designed to help you win in the attention economy.