A lot of industries and professions make use of storyboards. Sometimes a storyboard is used to show off an idea. Other times a storyboard might be used to help organize a project. Dictionary.com defines “storyboard” as such:

a panel or panels on which a sequence of sketches depict the significant changes of action and scene in a planned film, as for a movie, television show, or advertisement

The definition implies that the storyboard’s primary use is that of a tool for video production. But did you know that you can use storyboarding to help plan the design and navigation of your site?

One of the first things you should do when designing a site (or redesigning one) is to define your target audience. Audience can affect a lot: the style of writing you use, the way your site looks, and - believe it or not - the navigation of your site. Ask yourself the following questions while keeping that all-important target in your mind:

1. Who is coming to my site?
2. Where are they coming from?
3. What are they doing once they get here?

When you connect the dots between those questions, a work-flow begins to emerge. Person A comes here from referrer B and (hopefully) performs action C:

This is the simplest form of storyboard. But how often is anything in real life that simple? Most visitors to your site probably don’t enter at the exact page that they need to end up on to perform action C. Landing pages, referring links, search engine results, and any number of other ways into your site can put person A just about anywhere on your site.

So how do make sure person A still ends up performing action C?

Map Your Site

For the sake of argument let’s say your page is simple and has only four pages: Home, About, Content, and Action Page. Obviously you want your visitors to end up on Action Page. But what if they enter the site through Home? Or Content? How are you going to direct them Action Page?

The basic navigation of your site plays a part here. Obviously you want your primary pages to be accessible through the main navigational system of the site:

But you can’t rely on the fact that people are going to find and use those primary links. A lot of them will. A lot of them won’t. And that’s when storyboarding can help you layout a way to drive visitors to your Action Page regardless of where they land on your site.

This is also where a good understanding of your audience and referring sources comes into play. Are your visitors primarily people coming from search engines looking for a product your sell? Are they coming from social networks in search of a download? Or are they coming to read your blog… and hopefully interact with ad or two?

For this example, let’s assume people are coming from search engines looking to buy a product you sell. Most of them will probably come in through your content page because that’s where the bulk of your indexable content is found. We’re also go to assume they didn’t click an ad that leads to a landing page (because that’s somewhat of a different story).

Break the work-flow into pieces

Your storyboard pieces might look something like this:

This is obviously an extremely over-simplified version. Your storyboarding pieces should be as specific and targeted to your site as possible. Instead of “Call to Action” you should have specific ways in which you can propel a visitor to your action page. Instead of “Audience-targeted content” you’ll want to have specific examples of content targeted at your audience.

But we’re keeping things simple and generic here… so bare with me.

Play with your puzzle pieces

Now it’s time to organize your storyboard to mimic the simple work-flow we created earlier. Remember: Person A comes from referrer B and performs action C. One way to make laying out the storyboard easier is to tag each of your pieces with the part of the work-flow they belong to. “Search engine”, for example, would be part of “referrer B” and “audience-targeted content” would part of “Person A” (because it deals with content that will help draw in Person A).

Maybe your first storyboard looks like this:

The first storyboard you make will probably not be the best choice. But that’s why storyboards are so helpful. They can be rearranged, moved around, added-to, and shuffled in a million different ways until you find exactly the layout that you’re looking for.

In this example, I’m thinking of merging “Content related to search engines” and “Audience-targeted content” because your content should ALL be targeted toward your audience. Again… this illustrates the beauty of the storyboard. Sometimes these things come to you while you’re in the middle of rearranging the pieces. I’m also going shift “Call to Action” up so that visitors are more quickly introduced to it. Why? Because folks don’t spend much time at any one website these days. And I want my powerful call to action to get read.

I’ve also realized that a few more pieces go into this puzzle than I originally thought. Driving customers to my action page doesn’t start when people reach me through the search engines. It starts before they ever get here! I have to have something on my site that 1) indexes and ranks well and 2) compels a click from a SERP.

So the revised storyboard might look something like this:

You’ll notice that, other than using some of the same pieces from the original storyboard, this one looks quite a bit different than the first attempt. I’ve skipped over several revisions here to save space. But imagine moving the pieces around… changing connections… adding new elements… dropping others… until a final picture emerges.

A couple of things to note about my final version here (other than the fact that it’s extremely basic):

1. It’s a linear path from start to finish - no branches or distractions
2. It follows my original work-flow: A - B - C
3. It takes elements from outside the site into account (like getting content index in search engines)

Conclusions and final thoughts

Like I said before, this is a very rudimentary example. The best way for you to do this with a real site is to cut your site and your content up into movable pieces - literally. Make boards with different sections, pages, and elements of your site on them. Be specific. Don’t use general terms like I did here for the purpose of example. Use real content and design elements from your site.

Once you start playing around I think you’ll discover that storyboards can be used for a lot of different things. Heck… you can use simple storyboards to lay out a blog post, article, or press release. They can help you save a lot of time, money, and resources by give you the chance to play and tweak before you start putting things down into code.