Free Range Studios

Download the PDF |

Behind every effective website is a plan. Though the plan is invisible, it is far more critical to the success of the site than the visual elements that more readily grab our attention. The plan identifies the key audiences of the site, figures out what content these audiences need and sets the strategy for delivering the right content to the right people.

This short paper outlines the Free Range process for crafting such a plan. Each design group has its own way of doing it, but the Free Range process has four steps: research and discovery, sitemap development, wireframe development and design. For the purposes of discussion, we illustrate each step with examples from our own website, www.freerangestudios.com, which we re-launched in the Fall of 2007.

Step 1: Research & Discovery

Setting Goals

At the start of each project, ask your team, “What will this website need to do to meet our organizational goals?” While the long-term answer might be to solve a major social or environmental problem, the short-term answers vary, but often include one or a combination of these goals:

• Raise money.
• Increase membership.
• Provide educational resources to the public.
• Introduce services to clients.
• Collect petition signatures.
• Enable people to express their feelings about or support for an issue.
• Link people to the resources they need to change a particular behavior.
• Provide data to researchers and/or reporters.
• Networking supporters with one another.

In the case of our website redesign, we first separated our organizational goals from our website goals. Organizationally, our aim is to move the needle on a variety of social issues. To do that, we have the goal of being a full partner in the collective of progressive NGOs and socially responsible businesses working for change. Our concrete site goals, however, are much more specific. They include:

• Clearly presenting all of our services.
• Displaying samples of our work.
• Staying current with announcements about our work, our events and our clients’ accomplishments.
• Telling people about Free Range and the people behind the company.
• Making it easy to contact us or start a job with us.

Once your goals have been clearly articulated, they form the first pillar of your plan. It’s now time to figure out what audiences you need to reach in order to accomplish those goals and, as importantly, what you will offer those audiences in return for their help.

Defining Audiences

Audiences should be grouped by a simple characteristic. Ask yourself, what reasons do people have for coming to my site? What motivates their visit? This will tell you everything you need to know about how to design your site to effectively make first contact with them. Typical audience breakdowns look something like this:

• People who came looking for a way to make a difference = Activists
• People who came looking for data for their research = Scientists
• People who came looking for information for an article = Press

Note that when we think about audiences, we are not thinking about our goals, we are thinking about theirs. A successful engagement begins with meeting your audiences’ needs quickly and then asking them to help you meet yours. This is the basis of user-centric design.

Now you can create your Audiences and Their Needs chart. This is a critical piece of your site plan and will guide all future decisions. Here’s an abbreviated version of the chart that informed the Free Range site:

The key concept to remember as you move forward is that your site must instantly meet the initial needs of audience members before you can expect them to take the types of actions you hope. Think of it as “give then take.”

Conducting Research

Whenever possible, we try to check our assumptions about what audiences want when they come to the site (the middle column of the chart above) by conducting audience research. There are four broad types of audience research that we recommend:

• Analyzing Your Web Stats: » If you have a decent stats package on your current website, you can figure out quite a bit about why people are coming to your site and what they do once they arrive. A basic package will tell you the most popular links through which people find your site. This obviously tells you a lot about where they’re coming from and what they’re expecting to get from their experience. More advanced packages like Google Analytics (a free resource) can show you the specific paths through the site that individual users take. Observing these paths will give you an idea of how people go from a homepage visit to a deeper engagement, again revealing what they’re mostly after.
• Direct Engagement with Audiences: » Through focus groups, phone interviews and online surveys (a free tool can be found at surveymonkey.com ), you can talk to representatives of key audience groups to find out what needs they have from your site and how they would most like to see those needs fulfilled.
• Competitor/Partner/Peer Evaluation: » How do peer sites message on a similar issue, reach out to a similar audience group or go about engaging with their audiences? A review of other sites often reveals trends and methods that you can consider incorporating into your own site. Alexa.com provides interesting stats (for free) on the traffic success of any site on the web. See who’s doing well reaching your audiences. This will give you a good picture of these audi- ences’ preferences and expectations.
• Internal Surveys and Role-Plays: » If, for reasons of time or money, you can’t afford to step outside of the walls of your organization, ask colleagues to role-play various audience types. Ask them to jot down what they need from the site. Remind them to think realistically from the audience mem- ber’s perspective and to forget your organization’s needs for a moment. You can then re-engage them throughout the design process to ensure proposed solutions meet the needs they represent.

Step 2: Sitemap phase

Once you have nailed down your audiences and their needs, it is time to figure out what elements will need to appear on your site to meet their needs and how to direct users toward the actions you want them to take. This user-centric approach may literally change the pages you thought you needed on your site when you were coming from an organization-cen- tric approach.

To understand how a sitemap grows from the Audiences and Their Needs chart, let’s look at one audience type from the Free Range site:

Note how each site element grows out of a user need, not out of our internal perceptions of what we’d like to say about ourselves. Through this process, we have identified several pages we’ll need on the site as well as specific elements for those pages. Next we consider what we want from each audience, like so:

In the first part of this exercise, we listed pages and elements that are likely to address what our potential clients perceive as their needs. In the second part, we listed visible elements that move these folks from the content they want to engage with to the elements we want them to consider. For example, when they look for our services page, we must make sure that once they find it, it clearly links them to an exciting new project that will inspire them to work with us.

Defining these elements and their relationships to each other allows us to produce a sitemap that shows all pages on the site and how they are interconnected.

A good site map makes sure that:

• No important content is left out.
• All content is easily accessible and never more than 2-3 clicks away.
• All key content, which is the content key audience members come looking for, is never more than one click away.
• Content references or “cross-links” are integrated throughout your site’s pages.
• Thought is given to the technical underpinnings of each page within the site.

We find it is helpful to produce two sitemap documents: a “tree,” which illustrates the structure of the pages on the site, and a spreadsheet, which provides much greater detail, including an outline of content on the homepage, technical notes and information about the goals of particular pages.

Site Map Tree

Site Map Spreadsheet

Step 3: Wireframe phase

While a sitemap helps plan out the entire body of content across a site, the wireframe is a planning tool used to deter- mine how content will be organized on the homepage and interior pages. In the web world, wireframes are comparable to architectural plans. They allow for “modules” of content to be repositioned, resized, added or removed far more easily than if a design were established. Specifically, a wireframe details where navigation is located on the page, what content takes up most of the page “real estate” and where text and images will be positioned.

Just as the audience needs exercise produced a list of pages, it also produced a list of elements for these pages. The wireframes help prioritize these elements and visually begin to place them on yet-to-be-designed pages.

Compare the homepage elements of the Free Range Excel sitemap to the homepage wireframe. By reading the sitemap, it’s not clear how much real estate a module will occupy on the homepage. This is the job of the wireframe.

If you are doing audience research and have focus groups or role-players on board, the wireframes are great things to review with them. Ask If they can easily find the tools and pages they are looking for in the wireframe designs. Ask where they would likely click on the wireframes and show them where that would take them. See if the paths they take meet their needs and yours.

Step 4: final Design

After clarifying goals and audiences, conducting research and planning all the content for a website, it’s time for the front-end design to finally emerge. If you follow the pro- cess outlined here, you’ll be able to fully focus on color, font and image choice without simultaneously trying to nail down homepage elements or overall architecture. Also, your choices for all of these will be made with purpose and intel- lectual backing, rather than feelings or hunches alone.

For each website we design, we use one homepage wireframe as a jumping off point for two or three unique designs. We find that rather than limiting our creative ability, our initial work of setting goals, segmenting audiences and developing a sitemap and wireframe gives our designers a “smart canvas” on which they can experiment artistically.

Just as audience needs should inform the sitemap and wire- frames, they should also inform the visual design. The design should draw attention to items that are of high interest to key audience members. Remember color, image and font choices help determine where eyes will gravitate. Your site will work if these choices are soundly based on audiences and their needs.

Before settling on the look you see on www.freerangestudios. com, we developed several versions of our homepage based on our wireframe to speed the process along. See two of the options we designed side-by-side.

Homepage Option #1

Homepage Option #2 (selected version)