User Storyboards for Website Design

Website User Storyboard

In the web/app/software development world, a traditional “user story” is composed of several statements in which deliverables portray “As a <type of user>, I want <some goal> so that <some reason>.” In other words, what a user wishes to accomplish and why. Likewise, for design and layout purposes, I like to develop what I call a “user storyboard”, which shows several different user personas and their “journey” through a web site.

Implement a User Storyboard before designing a web site

User storyboards are created to show the typical route a given persona would take on his or her way to completing a personal goal while using the web site. They are very useful in creating a targeted focus for each user, and also aid when creating the site map/flow chart for the web site. These storyboards are great  for research or developing content, and tend to bring up user scenarios which might not have conceived until a site is finalized. It’s good idea to match a photo with each persona so we can visually identify with our users and have an image in mind when talking about personas. The storyboards are a good exploration of paths to specific goals of the user and/or any goals your business has for its user(s).

A template for creating User Storyboards for your web site

Here are some quick questions about the target persona types to get you started…

  1. What are his/her demographics? (age, male/female, business title, responsibilities, etc.)
  2. Why would he/she be visiting this web site? (Or, for what problem is he/she trying to find a solution?)
  3. How did this user learn about this web site? (New or existing customer? How knowledgeable is the user?)
  4. What is the ideal result from this user’s visit? (What action do we want him/her to take?)
  5. Where would this user typically enter the web site (home page vs. other landing page) and where do we want him/her to end up?
  6. Interview a few real people. Do you need to keep content short and sweet because they don’t have time read, or are they looking for detailed information? What other things about them or their personalities can direct your design? (This is really getting into the “research” side of things, but that’s what you need to be doing before you start your web site, right?)

Case Study: A real world example of User Storyboards

To give you a better idea, I have an example of a User Storyboard. (My client’s company name and logo have been removed, for privacy’s sake.) As you can see, each persona has a photo and description which best matches the intended user. The bottom half of each page shows a proposed journey in the website, from entry to exit. The blue boxes show pages a persona will likely use to get to their goal. The green boxes represent the final action page. In this example, we determined the following…

Key Take-aways:

  • Half of personas are looking to login. Need to make login easy to find.
  • Products and Services are key features, so more attention and/or emphasis needs to be on these sections.


  • Which user is most important to focus on? Which is secondary target?
  • Are there any other “green” boxes (goals) to consider for any of these personas?

The User Storyboards were a huge help in keeping us on course throughout the project. We went back to them several times throughout the design and development process.


Many small business and startup web sites have multiple users with multiple goals. A “one-size-fits-all” approach often does not apply when trying to direct a user to his or her destination. The nice thing about User Storyboards is that they evoke conversation between the client and the design/development team. An ongoing discussion of users and how they are directed to where they want to—or differently, where we want them to—end up is necessary with all web site projects.

Hopefully this article and example will help you to create some different avenues for your specific targets. If you are looking to design and develop a new web site, or perhaps redesign and existing one, by all means feel free to connect with me.

Have an additional idea about user stories? Leave a comment!

One Response

  1. Great article, Matt. Thanks for the advice on user stories and for your continued great work.

Leave a Reply

Your email address will not be published. Required fields are marked *