Solutions Architecture Blog

Story Board Design Process

by Mark Strawmyer 04.02.07

For the design process on MyColts.net we've been using a story board type design process that flows something like this:

  • Upfront discussion about the site area / page and what functionality and purpose it will serve 
  • Build a wireframe of the site area / page 
  • List of functionality that the wireframe will support 
  • Detailed graphic layout with example functionality 
  • Construction of the item 
  • Refactor based on feedback and use once it is plugged into the actual site 

The drawback to the process is the duration.  It can be tedious and time consuming to draw up the screen mockups for the site and adds time to the overall project.  It may have been a different experience if we had a dedicated designer, but unfortunately the on field success of the Colts has prevented that (a sacrifice we've all happily made).  Additionally, it has proven a challenge to be consistent with colors, styles, and behaviors across the screen designs.  There are new items that can often pop-in unannounced.

However, this has proven to be a pretty effective design process for us throughout the duration of the project.  We've had some good discussions around various pages and topics and found the upfront discussions help make sure concepts are better thought out up front.  It is a pretty visual process, which seems to especially benefit the programming team when it comes down to the actual construction and being able to implement the vision.  Folks that aren't naturally graphic inclined have a model to make the functionality jump from the start.  It's worked far better than detailed program specs and is a process I'd recommend considering.  As tools such as Microsoft Expression become more widely adopted perhaps adding more visual elements (right brained) to a classic programming (left brained) lifecycle will make story boarding even more practical and widely adopted.  I'd love to hear if this has worked for others.

Comments

No Comments

Leave a Comment

(required) 
(required) 
(optional)
(required) 
Security Check
Please answer the simple math problem below.

(required)