A sketchy approach to wireframes

Recently I tried a new, more collaborative approach to one of the critical processes involved with building a new CMS/website – wireframing. A colleague of mine pointed out a technique that was being used to help generate ideas for the redesign of drupal.org (Thanks to Leisa Reichelt’s great blog, Disambiguity !). The technique is simple and looked fun, so I gave it a try on one of my new projects.

h3.

Mike Morris, EVP, Business Development and Marketing
#Design | Posted

Recently I tried a new, more collaborative approach to one of the critical processes involved with building a new CMS/website – wireframing. A colleague of mine pointed out a technique that was being used to help generate ideas for the redesign of drupal.org (Thanks to Leisa Reichelt’s great blog, Disambiguity !). The technique is simple and looked fun, so I gave it a try on one of my new projects.

The Test

I asked 4 individuals to participate; myself, the project manager, an analyst familiar with the project, and an analyst not familiar with the project (I wanted to involve a user interface designer, but scheduling conflicts prevented that). I asked each person to sketch out a new homepage wireframe for our client. Each person had access to the client’s current website, as well as some basic information about things that should be highlighted and included in the new layout and design. I gave each person a time limit of 1 hour and required that each sketch be done by hand – no computers.

The Sketches

Here are the results from the 4 sketches.

From participant A:

wfexample1.png

 

 

From participant B:

wfexample2.png

 

From participant C:

wfexample3.png

From participant D:

 

wfexample4.png

 

 

The Findings

After the sketches were completed we all met in a room for about an hour and half and discussed each one of them. We learned some interesting things during the process:

  • 3 out of 4 had the same basic layout for the top part of the page, confirming that we all had a similar idea of what we thought was most important to present to readers of the site.
  • 2 of us had almost the exact same layout for the entire page!
  • All of us had some of the basic ideas about how searching should be presented, but one individual really nailed it.
  • One individual went for a pretty non-traditional main navigation strategy, but the other 3 thought that for this client, who is fairly conservative, a more classic approach would work better.
  • There weren’t any real disagreements, only differing flavors on how to approach something.

The Results

The process, overall, was very enlightening. What we ended up with was truly a best of breed approach to the wireframe. We took pieces from everyone’s ideas and molded them together into a cohesive work that we all agreed highlighted the right things and de-emphasized the stuff that wasn’t so important. We feel the end result is clear, usable, and effective at presenting a reader with the right personality and information about our client. The outcome of the process resulted in the final proposed wireframe:

wffinal.png

 

 

 

 

Feel free to share any of your wifeframe collaboration experiences. I’m always looking to try new techniques.

Mike Morris

EVP, Business Development and Marketing