RSS

Pwireframing: Paper Wireframing

doug2013 Posted by Doug Gapinski on 5.28.2009

The Bethel Strategy Background
Every web redesign project we get comes with an essential strategy document. This strategy document is a tailored roadmap laying out specifics for a successful relaunch including wireframes to help visualize how new web templates will take shape, a review of competitor sites, key messages to be surfaced in the new creative stylings of a site, a streamlined information architecture, rollout schedules, and more.

Two clients of ours from Bethel University, Mark Erickson (Director of Web Communications) and Michael Vedders (Director of Web Technology), came to mStoner’s Chicago office for two days earlier in the month to work directly with us on the Bethel strategy document. The idea was that two days of intense collaboration and discussion would produce a more cohesive report, better suited to Bethel’s needs.

It Doesn’t Get Any More Old School than Paper and Scissors
Part of this two day process was an exercise that I like to call paper wireframing, or Pwireframing. It’s an idea that came to me based on a link that my colleague Laurel Hechanova sent me: The Design Police Visual Enforcement Kit. If you take a look at this page, it’s essentially a print-it-yourself sticker kit, laying out a bunch of funny “laws” you can stick to a piece of communication.

The idea behind Pwireframing (again, wireframing with paper) was to make the regular wireframing process more modular and collaborative. Instead of having a designer simply follow the instructions of a strategist, we started by discussing all possible contents of pages as a group, including syndicated feeds Bethel is currently maintaining. We also made some decisions about feeds or content Bethel would be likely to bring online in the near future. After this, I drew and printed modular drawings of all of the types of content we talked about, and cut them into sets.

We then taped some blank page templates to our upstairs whiteboard. These templates carried only consistent information: the Bethel logo, the topic-based navigation, the tactical navigation, and the footer. From here, we started by thinking about which pages would need their own specific templates (or which templates would be the most flexible for filling out the full Bethel site) and pasting these up with modular contents.

Let’s Talk it Out
The best thing about this process, in my opinion, was the dialogue it created between Bethel’s representatives and the mStoner strategy team.

The process made us ask each other critical questions. Which templates were the most essential, and which could be consolidated in favor of others? How should we address an admissions page for a University that has a fairly even split between traditional-age students and post-graduates, with completely different niche colleges such as Seminary? Which pages might rely on tabbed structures to present larger sets of data more efficiently? These are only a few of the questions we asked each other as we taped content to these rough drafts.

It was incredibly valuable to have this kind of discussion between Bethel team members who are closest to the needs of the institution, and mStoner team members who are more familiar with best practices.

Hey, It Worked!
Of course, as part of the full strategy, we redrew the paper wireframes digitally. It was tempting to show our hacked-up, taped-up paper to Bethel’s steering committee, but sometimes it’s important to put a bit more polish on official documents.

The end result was exactly what we had hoped for: a highly tailored set of wireframes, custom-cut to meet the needs of Bethel, and a template suite designed for maximum flexibility for filling out the specific needs of the Bethel relaunch.

We presented the full strategy document last week, and it was very well received by the steering committee. I know that part of the reason is that we had a chance to work closely on the document with Bethel team members, using exercises like this to guide us in our collaboration.

  • http://www.digitalevangelist.net Steven Grant

    Nice article you have here – would be interested in seeing the page components made available as a download :-)

  • http://mstonerblog.com Doug Gapinski

    Thanks Steven. We may make downloads available someday, but to be honest, it’s not on the short to-do list.

    One reason I can’t simply post the Bethel templates is that a lot of the content drawn was specific to web features we’re building for them. Even basic page elements – such as the task-based nav, came from an IA that was specific to them.

    I will say it’s faster than you think to draw this stuff in Illustrator, Omni, or even freeware vector programs. Or if you wanted to get really old school, you could still replicate this technique with pen, paper and a xerox machine!

  • John

    This is a great idea! I’m going to do this real soon!

    However, i do agree with Steven Grant on the download front!

  • http://mstonerblog.com Doug Gapinski

    Ok guys, I’m getting an influx of requests for downloads due to the Smashing Magazine reference.

    Give me a couple of days to remove the Bethel-specific references, and I’ll post a downloadable pwireframing pdf. It’ll make the templates usable for a broad audience.

    Check back in this thread on Thursday, or follow my tweets @thedougco because I’ll announce it there too.

  • http://www.lineofdesign.dk Sandie

    Hey, Dough.

    Nice initiative – and very well written and explained article, that I was very inspired by.
    Thank you very, very much for sharing this great idea – and now also the downloads, that I’ll come back for… :)

    Kindest regards,
    Sandie
    (Denmark)

  • Daniel Gianni

    ecologically incorrect!

  • http://mstonerblog.com Doug Gapinski

    @Daniel Gianni: thanks for your comment. I think if you try doing this exercise on the front end, you will find you or your client printing fewer revisions overall – because you’ll have done more planning at the beginning.

  • http://www.uua.org Tim GRiffin

    Thanks for sharing this process Doug.  We are in the midst of wireframing for the next iteration of our site.  Look forward to those downloads

  • RP

    Nice article for sure! Would be cool for you to check out http://blog.echoenduring.com/2011/07/19/wireframing-is-about-more-than-just-visual-layout/ Helps draw some awesome wireframes.

  • http://www.xpress-media.co.uk Web Design Yorkshire

    Wow, what a great post, we’ve looking to do a similar process for some years now and after reading this post it’s open my eyes so things within our business will now change thanks to your sharing.

  • http://www.webdesigndevelopers.co.nz Pen

    This article makes great sense. The importance of planning can’t be overstated.  I like the idea of hand drawn paper pieces which can be manually moved around, but I have only had the courage to try this kind of ‘wireframing’ once. I may go back to the drawing board again and get out a pad, paper and scissors.

    Thanks for your wireframe post.

    • KYir

      :-)

  • Pingback: Behind the scenes: The hidden costs of website design - The Website Design Blog

  • Pingback: Pwireframing: Paper Wireframing | mStoner, Inc. » Web Design

  • Pingback: Sin tiempo para escribir.142 y nuevo diseño web, Carrero | Carrero

  • Pingback: 35 Excellent Wireframing Resources | PSDSir

  • Benjamin LeMar

    Really insightful. When our studio does strategic design we uhave one methodology we use that has a resemblance to this approach. It’s very useful and keeps things human centered.

  • http://twitter.com/gemznunn Gemz Nunn

    This article has given me some great ideas of how to deliver a session on wire framing to my foundation degree web students. Thank you.

  • Pingback: Class #3 | Learn

  • Pingback: Wireframe Tools and Tutorials To Speed Up Your Web Design Process | good favorite

  • Pingback: Wireframe Tools and Tutorials To Speed Up Your Web Design Process | LearnersTutorials

  • Pingback: 35 Excellent Wireframing Resources | Smashing Magazine

  • Pingback: Pwireframing: Paper Wireframing | mStoner, Inc. | Simone Borsci