Newfangled works with independent agencies to create lead development web platforms for their clients.

Newfangled works with independent agencies to create lead development web platforms for their clients.

Paper Prototyping

at 3:00 pm



Despite all the tremendous benefits using an HTML based, interactive prototype (which we will sing praises for til the end of time), I often find that if we begin with HTML alone, we're more likely to cling to a certain layout simply due to the time (and pride) put into crafting a complex HTML structure. This is why I begin nearly all template layouts with a number of hand drawn sketches or whiteboard layouts before we even begin with HTML.

In this post, I'll share an example of how paper prototyping played a critical role in how we approached a redesign for winwithoutpitching.com.

Example of Paper Prototyping in the Win Without Pitching Site Redesign

We recently went through this process for an existing client, Blair Enns, founder of Win Without Pitching, a business development and publication resource for ad agencies and design firms.

 

Here is an image of the previous Winwithoutpitching.com site:

old winwithoutpitching site
Screenshot of Win Without Pitching Site prior to redesign process.

There were a number of issues with the layout of this homepage that we agreed upon:

Goal 1: Place content centerstage. The old homepage hid the fact that Blair was producing tons of great content. It was hiding the best asset he had to engage visitors. We needed to bring the content out of the extranet and in to the forefront.

Goal 2: Create clearer Calls to Action. The calls to action were hidden inside way too much content. Visitors needed to see immediately what next steps they should take (sign up for a newsletter, subscribe to blog, become a member).

Goal 3:: Make Blair's social media presence much more visible. After a number of high profile mentions and interviews, Blair's presensce on the social media map has become more important than ever. We added a twitter feed, social media icons, and sharing features to the prototype.

Paper Prototype Example

We went through a number of both paper and whiteboard prototypes until we all felt we had a good starting point.

paper prototype example
Image Left: Whiteboard prototype example. Image Right: Paper prototype example after beginning design moodboards.

HTML Prototype Example

After a couple rounds of feedback on the paper prototypes from the group, we adjusted the layout yet again and moved to the next step of building the grayscreen version of this in HTML:
HTML Prototype Example
Screenshot of HTML built Grayscreen Prototype.

We've not taken this final grayscreen layout, made some further changes at the subpage level to carry these goals through sitewide, and have moved on to the design creation stage. The prototype is then passed off to our designer who uses the grayscreen as a starting point in developing design concepts.

Stay tuned for the final version of the redesign which we'll be unveiling early this fall.

Comments

Mark O'Brien | August 17, 2009 9:12 PM
Having that whiteboard prototype up in the meeting/lunch room was a real joy. There is something that is very visually pleasing and even relaxing about an architecture spec drawn out on something other than a screen. Thanks for the therapy!
Justin | August 10, 2009 10:52 AM
Yeah sketches! I wrote about the value of sketching in the design process last year (http://www.newfangled.com/content14282). It's great to see it applied in our prototyping process. Good post, Katie.
Nolan | August 6, 2009 11:32 AM
http://en.wikipedia.org/wiki/Rapid_application_development

A lot of semi-modern development processes follow this pattern. I think the quote that supports this is, "A complex system that works is invariably found to have evolved from a simple system that works." (John Gall)
Katie | August 5, 2009 10:47 PM
Nolan, this comment has me thinking . . . It would be interesting to approach an especially complex development project with the same tiered process you take with CMS development--build the simplest part first, then move slowly up the ladder in complexity. Since we do not typically build complex web applications we often take a completeist approach to how we prototype and develop. I imagine that for some projects, taking an incremented approach could ease clients into understanding what they need, thus ensuring that what we build is entirely necessary rather than the feature buffet effect that prototyping can occasionally lead to.
Nolan | July 30, 2009 3:48 PM
I think this is a good idea and could see how it helps get the rough idea shaped out before you turn into a less flexible form like HTML. Sometimes prototypes (just not at Newfangled, but everywhere) are more like concrete than play-doh.

I usually do something like this when I'm coding a new complex feature. I bBuild the simplest thing that works, and then replace or solidify elements as needed. If it takes a lot of effort to build something you get an emotional attachment to it, and often you don't want (or can't) throw it away. These early prototypes should exist just as a learning experience.

↑ top