Walls of Wireframes

I offered up a subset of my Visio wireframe stencils over at YourTotalSite in the recent past, and there seemed to be some pretty good interest in seeing more. While I don’t have any wireframe examples to show the world just yet, I can do the next best thing and provide a little insight into how we work at Bright Corner. For the last 3 or 4 months of my life, I’ve been eating and sleeping Visio. We’re currently working on a project that has about 175 different pages of wireframes, and they are constantly evolving. While we tape wireframes to the wall for almost every project, this was the most impressive yet, and I thought it would be good to share.

What We Do

It’s slow and irritating to scroll back and forth through a PDF to look at wireframes, or anything for that matter. It’s even more irritating when you need to have 3 or more people gathered around a little monitor looking at wireframes. We prefer to tape good old-fashioned paper all over the wall. (Well, I like too anyways.)

This allows us to walk into the wireframe room at any given time and have a discussion about any given screen or set of screens at any time without having to have Visio or Acrobat open. Whether it’s engineering, usability, or business, we can all gather around and write on the wall like when we were kids. Since this doesn’t really give you an idea of the scale of things, I’m including a few pictures to help you visualize.

The Finer Points

While we’ve found this most effective when meeting with clients or working on site, it’s still pretty damn helpful around the office as well. We currently have a team of 10 working on this project, and the wireframe room serves as a great meeting and discussion room. Due to the lack of detail, I’ll explain a few of the finer points of our process.

Writing on the Walls

With clients, we encourage them to write and draw all over the wireframes and make suggestions. We do the same. Then we hop back into Visio, make some changes, print out a new copy, and tape it right on top of the old copy. This way we can easily see the history of the wireframes or understand why we made a certain decision.

Section Views

My personal favorite benefit is that I can quickly soak in a complete section of the site and understand it, as well as explain, how it’s supposed to work. I don’t have to scroll through Visio between pages to demonstrate the big picture. Since I’m not limited to seeing one page at a time, it’s easier to find inconsistencies in the interface as well.

Sticky Notes

While writing on the screens is certainly encouraged, colored sticky notes provide the final piece of helpful information. We can use the sticky notes to flag difficult screens, color code different groups of pages, or just make reminders about details.

Summary

It’s really nothing special or new, but as usual, I thought somebody out there might be able to get some use out of it. Additionally, I’d love for us to get real and go straight to HTML, but as Jason admits, the idea of getting real doesn’t translate quite so smoothly when you’re doing work for clients instead of yourself.

Our client is a dot com, and this application has to essentially support their whole business. They will also be moving from an older system and need to support all of the functionality already provided by that system. They couldn’t afford to start small and add features. As such, we had to plan it all out in wireframes.