Stop Wire Framing and Start Prototyping

Phillip Lockwood / Wednesday, June 08, 2011

Seven years ago, I used my agency's proprietary CMS to establish an efficient process for prototyping all of our projects instead of creating PDF wire frames. Since then, I've fine-tuned this concept to save thousands of dollars on each project, while simultaneously benefiting the delivery of sites in numerous ways. This walk-through demonstrates the basics of the proven methodology.

Stop Wire Framing and Start Prototyping from Phillip Lockwood on Vimeo.

The Prerequisites of Prototyping

To take full advantage of this methodology, your projects should conform to a few prerequisites:

  • The information architect / interaction designer needs to be capable of using your chosen CMS platform.
  • The project needs to ultimately be deployed on that platform (this process works regardless, but to realize the full benefits of time savings and increased profits, you should build the site on that platform)
  • Your site should be HTML/CSS/JS-based for the most part. Full-Flash sites won't see the same benefits of the process.

Your Process When Prototyping

By replacing traditional wire framing with prototyping, your new process should look something like this:

  1. Discovery (research and strategy)
  2. Site Mapping
  3. Prototyping
  4. Creative Design
  5. Integrate the Creative Design into the CMS
  6. Final Testing and Configuration
  7. Launch

Notice that there is no longer a "Development" phase. It has become one and the same with wire framing.

The Benefits of Prototyping

As you'll see in the video, there are some major benefits to replacing traditional wire framing with prototyping on the production platform:

  • Clients comprehend prototypes more easily than they do static wire frames.
  • The prototype can be used for efficient usability testing.
  • The prototype IS your final codebase, so you are essentially eliminating an entire phase (the development phase) from your project timeline.
  • Because the site is developed before creative design even begins, bugs are discovered and resolved earlier.
  • Because the site -- including the CMS -- is developed before creative design begins, you (or your clients) can be busy inputting content during the creative design phase, further shortening the project lifecycle.
  • By combining the "wire framing" and development phases, you have dramatically increased your profit margin and/or reduced the price you  have to charge the client.

*****

This isn't a theory; I've been using this process for 7 years with great success. It has literally saved me tens of thousands of dollars and impresses the hell out of my clients. That said, I'd love to hear your thoughts... do you see potential shortcomings with using this process in your projects? If so, chime in through the comments below. Chances are, I've encountered the same challenges and found solutions!

blog comments powered by Disqus