<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>From the Dogbox &#187; prototype</title>
	<atom:link href="http://blog.werner-puchert.com/tag/prototype/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.werner-puchert.com</link>
	<description>Random thoughts and ramblings...</description>
	<lastBuildDate>Sat, 16 Aug 2008 14:30:39 +0000</lastBuildDate>
	<generator>http://wordpress.com/</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<cloud domain='blog.werner-puchert.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://www.gravatar.com/blavatar/608bb1ded843559ef2e4e43c3dc47b98?s=96&#038;d=http://s2.wp.com/i/buttonw-com.png</url>
		<title>From the Dogbox &#187; prototype</title>
		<link>http://blog.werner-puchert.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://blog.werner-puchert.com/osd.xml" title="From the Dogbox" />
	<atom:link rel='hub' href='http://blog.werner-puchert.com/?pushpress=hub'/>
		<item>
		<title>Conveying a new concept with low-fi prototyping</title>
		<link>http://blog.werner-puchert.com/2008/05/03/conveying-a-new-concept-with-low-fi-prototyping/</link>
		<comments>http://blog.werner-puchert.com/2008/05/03/conveying-a-new-concept-with-low-fi-prototyping/#comments</comments>
		<pubDate>Sat, 03 May 2008 08:36:53 +0000</pubDate>
		<dc:creator>Werner Puchert</dc:creator>
				<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[wireframes]]></category>

		<guid isPermaLink="false">http://fromthedogbox.wordpress.com/?p=19</guid>
		<description><![CDATA[Taking our low-fi prototype to the next level. We’re still waiting to hear what client’s final decision is as it reaches for beyond the web with several components coming together. Judging by the spontaneous applause we receive after we conclude out part of the presentation I think it went relatively well.<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=blog.werner-puchert.com&blog=3233519&post=19&subd=fromthedogbox&ref=&feed=1" />]]></description>
			<content:encoded><![CDATA[<p><a href="http://fromthedogbox.files.wordpress.com/2008/05/landing_image.jpg"></a><img class="alignleft size-full wp-image-21" src="http://fromthedogbox.files.wordpress.com/2008/05/butler.jpg?w=100&#038;h=145" alt="" width="100" height="145" align="left" />Here’s a follow-up on my previous, “Talking about Wireframes”, post. I presented the initial prototype to my boss as a pro-active project – unfortunately she never had the time to look at it and it’s now gathering dust somewhere, sigh. I just left it. I achieved what I wanted in my research on the subject though.</p>
<p><strong>Later that week</strong></p>
<p>A client-service manager at the agency had a problem conveying a new concept to one of our top clients and I thought that we could use something similar to help them out.<span id="more-19"></span>I must be honest, the initial concept of an 2nd Life type of Sims interface combined with large amounts of in-depth content did not enthuse me much. The IA in me wanted to challenge the concept but the project went beyond that point. We had to work with what we had.</p>
<p>I disappeared for three days with the lead designer, Nick Mugford, to plot out the project scope and build a presentation to “sell” client on the idea for a new online campaign.</p>
<p><strong>Putting it together</strong></p>
<p>We scoped out the project for just over two days – the result was this wall full of scope notes and drawings.</p>
<p style="text-align:center;"><a href="http://fromthedogbox.files.wordpress.com/2008/05/untitled_panorama_small.jpg"><img class="size-medium wp-image-18 aligncenter" src="http://fromthedogbox.files.wordpress.com/2008/05/untitled_panorama_small.jpg?w=300&#038;h=101" alt="The initial scope and functional plan for the project" width="300" height="101" /></a></p>
<p>I proposed to Nick that we build a paper prototype to show client what we intended for the web site and user interaction within the Sims-like interface. Nick was hesitant at first but was sold on the idea after the scoping exercise realizing that we had too many concepts to convey effectively through a mere verbal presentation.</p>
<p>In the past we would have gone into the meeting with a PowerPoint presentation with reference and static photo-shop mock-ups of the interface. The design team was no-where close to a creative execution and I did not want the team to spend valuable time on mock-ups before we have clients’ buy-in on the concept.</p>
<p style="text-align:center;"><em><a href="http://fromthedogbox.files.wordpress.com/2008/05/landing_image.jpg"><img class="alignnone size-medium wp-image-22" src="http://fromthedogbox.files.wordpress.com/2008/05/landing_image.jpg?w=300&#038;h=212" alt="Story Board" width="300" height="212" /></a><br />
<strong>The Storyboard</strong></em></p>
<p>I used a digital camera to shoot stills in the first prototype but Nick wanted to film the process with a digital camcorder this time around. We followed the same basic procedure as in the first prototype and ended up with a whole bunch of movie-clips.</p>
<p>We popped the video into flash and inserted stop actions at pre-determined points &#8211; unlike the video I’m attaching to the blog.</p>
<p>The Flash movie of the prototype allowed us to pause the sequence at pre-determined points. Before playing each sub-sequence we would explain to client what they were about to see.</p>
<p><strong><a href="http://fromthedogbox.files.wordpress.com/2008/05/2008-04-23_site-structure_small.jpg"><img class="alignright size-thumbnail wp-image-20" style="float:right;" src="http://fromthedogbox.files.wordpress.com/2008/05/2008-04-23_site-structure_small.jpg?w=128&#038;h=90" alt="Content Catergories / Hybrid Navigational Taxonomy" width="128" height="90" /></a>Our Presentation</strong></p>
<p>We presented client with a,</p>
<ul>
<li>Hybrid Navigational Taxonomy (IMAGE)</li>
<li>The prototype </li>
<li>Online reference of similar web-based 3D interfaces</li>
</ul>
<p>The original prototype video formed part of a two-hour presentation.</p>
<p style="text-align:center;"><span style="text-align:center; display: block;"><a href="http://blog.werner-puchert.com/2008/05/03/conveying-a-new-concept-with-low-fi-prototyping/"><img src="http://img.youtube.com/vi/y4Wwnt9KIjg/2.jpg" alt="" /></a></span></p>
<p>We had some trouble with the camcorder. The Sony we used has a built-in auto focus function and our tripod wasn’t as sturdy as we thought. We also shot the video in natural light and it had a direct effect on the overall consistency of the shots. Nick had to play around with the levels to get an overall consistent look – I suggest using a fixed light source for the next one.</p>
<p>We’re still waiting to hear what client’s final decision is as it reaches for beyond the web with several components coming together. Judging by the spontaneous applause we receive after we conclude out part of the presentation I think it went relatively well.   <img src='http://s.wordpress.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/fromthedogbox.wordpress.com/19/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/fromthedogbox.wordpress.com/19/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/fromthedogbox.wordpress.com/19/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/fromthedogbox.wordpress.com/19/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/fromthedogbox.wordpress.com/19/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/fromthedogbox.wordpress.com/19/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/fromthedogbox.wordpress.com/19/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/fromthedogbox.wordpress.com/19/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/fromthedogbox.wordpress.com/19/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/fromthedogbox.wordpress.com/19/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/fromthedogbox.wordpress.com/19/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/fromthedogbox.wordpress.com/19/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=blog.werner-puchert.com&blog=3233519&post=19&subd=fromthedogbox&ref=&feed=1" />]]></content:encoded>
			<wfw:commentRss>http://blog.werner-puchert.com/2008/05/03/conveying-a-new-concept-with-low-fi-prototyping/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/46df8ccf0c5774a0eae4dfb4727f3972?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">weenerdawg</media:title>
		</media:content>

		<media:content url="http://fromthedogbox.files.wordpress.com/2008/05/butler.jpg" medium="image" />

		<media:content url="http://fromthedogbox.files.wordpress.com/2008/05/untitled_panorama_small.jpg?w=300" medium="image">
			<media:title type="html">The initial scope and functional plan for the project</media:title>
		</media:content>

		<media:content url="http://fromthedogbox.files.wordpress.com/2008/05/landing_image.jpg?w=300" medium="image">
			<media:title type="html">Story Board</media:title>
		</media:content>

		<media:content url="http://fromthedogbox.files.wordpress.com/2008/05/2008-04-23_site-structure_small.jpg?w=128" medium="image">
			<media:title type="html">Content Catergories / Hybrid Navigational Taxonomy</media:title>
		</media:content>

		<media:content url="http://img.youtube.com/vi/y4Wwnt9KIjg/2.jpg" medium="image" />
	</item>
		<item>
		<title>Talking about wireframes…</title>
		<link>http://blog.werner-puchert.com/2008/04/12/talking-about-wireframes%e2%80%a6/</link>
		<comments>http://blog.werner-puchert.com/2008/04/12/talking-about-wireframes%e2%80%a6/#comments</comments>
		<pubDate>Sat, 12 Apr 2008 08:11:57 +0000</pubDate>
		<dc:creator>Werner Puchert</dc:creator>
				<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[ia]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[wireframes]]></category>

		<guid isPermaLink="false">http://fromthedogbox.wordpress.com/?p=16</guid>
		<description><![CDATA[I recently sent an e-mail to the Information Architecture Institute (Mailing List). I’ve been working on a pro-active project exploring alternative ways to prototype web projects. To quote Tom Wales (Yahoo) – half the documentation we do is “Bullshit”. Bill Buxton (Microsoft) mentioned that we tend to do project documentation just to convince client that the money they are spending on projects are justified by serving up a document that they can’t understand or relate to i.e. “I don’t understand a word!!! These guys must know what they’re talking about”.<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=blog.werner-puchert.com&blog=3233519&post=16&subd=fromthedogbox&ref=&feed=1" />]]></description>
			<content:encoded><![CDATA[<p><a href="http://fromthedogbox.files.wordpress.com/2008/04/storyboard.jpg"><img class="alignnone size-thumbnail wp-image-17 alignright" style="float:right;" src="http://fromthedogbox.files.wordpress.com/2008/04/storyboard.jpg?w=128&#038;h=89" alt="It started with this simple \'storyboard\'" width="128" height="89" /></a></p>
<p>I recently sent an e-mail to the <a title="IA Institute" href="http://www.iainstitute.org/" target="_blank">Information Architecture Institute</a> (Mailing List). I’ve been working on a pro-active project exploring alternative ways to prototype web projects. To quote Tom Wales (Yahoo) – half the documentation we do is “Bullshit”. Bill Buxton (Microsoft) mentioned that we tend to do project documentation just to convince client that the money they are spending on projects are justified by serving up a document that they can’t understand or relate to i.e. “I don’t understand a word!!! These guys must know what they’re talking about”.</p>
<p>I interested in using alternative ways to explain projects to client and internal teams. I want to relay “concept” rather than dictate design or confuse with complicated specifications.</p>
<p>BTW – I took me some time to muster up the courage to send my prototype to the IAI group. Sometimes you just have to take the plunge. I’m happy to report that I received some really helpful feedback from the list and I feel even more motivated to explore this further.</p>
<p>Check out my communication to IAI and my prototype video – I think it explains all.<br />
<span id="more-16"></span>Designers in the agency I work for tend to get nervous when I attempt to scamp up wireframe models. They perceive what I’m doing as inhibiting their creative license – BUT creativity and pushing the boundaries is something we encourage in our agency all the time.</p>
<p><strong>I’ve been racking my brain about this…</strong></p>
<p>I listened to a podcast with Bill Buxton recently. Just to “disclaim” myself &#8211; I have not had a chance to get my hands on his book and might have totally misinterpreted his message. After that I ran across two more podcasts, one with Tom Wales and the later Kevin Cheng, both from Yahoo. I interpreted the shows in my own way based on their inspiring words. Kevin and Tom focus more on the concept side while Bill had a more practical and functional solution BUT the core message from both sides were…. Start DRAWING!</p>
<p><strong>Just a little background…</strong></p>
<p>In my team concept and the BIG idea drive a project. I work closely with the design team and we tend to find and build solutions without the need for wireframes. I will build the relevant taxonomies and work on the strategic elements after that a designer will mock up a look-and-feel based on my verbal brief and the documentation – this is then presented to client.</p>
<p>Designers will mock up all the pages as soon a client sign off on the project specification (and go through several reverts if needed). The mock-ups and a functional specification will then end up on the developers’ desk.</p>
<p>The problem with the initial mock-up stage (1) is that client end up looking at the pretty pictures ignoring all the IA and strategic solutions, and (2) client can’t understand why we take so long to develop our projects especially after we showed them a real-life mock-up of the site in the strategic phase.</p>
<p><strong>So I started drawing…</strong></p>
<p>I’m trying to convince my team manger that we must use Google Maps to serve content for a large development group and thought I’ll explain how I see the mini-project rolling out using my new found drawing skillz.</p>
<p>I put pen-to-paper, snapped the drawings with my little digital camera and popped them into Flash. I’m still working on a mini-document to support the flash component but you’re welcome to check out the result of my experimentation…</p>
<p style="text-align:center;"><span style="text-align:center; display: block;"><a href="http://blog.werner-puchert.com/2008/04/12/talking-about-wireframes%e2%80%a6/"><img src="http://img.youtube.com/vi/OT3yYXkafy8/2.jpg" alt="" /></a></span></p>
<p><strong>Just a few additional observations. </strong></p>
<p>The exercise highlighted some unexpected things like:</p>
<ul>
<li>I picked up some logical errors in the process – which I would have completely missed before.</li>
<li>I had to think about the simple things like when do the user see the “pointer” or the “hand”.</li>
</ul>
<p>The only negative about using flash was that I had to plan the sequence carefully (maybe that’s actually a positive?). If I had to update the sequence or add elements in the middle of the sequence that might be a headache. I don’t think it’s the platforms’ fault though. I built the sequence directly on the timeline &#8211; maybe I could find a more intelligent way to build it.</p>
<p>I love the idea of making the system more interactive, triggering the different elements through user intervention. That’s easy enough, depending on how you implement it.</p>
<p>I don’t want to spend too much time on this process i.e. if it takes longer than the traditional wireframe and documentation process then this concept has lost its appeal.</p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/fromthedogbox.wordpress.com/16/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/fromthedogbox.wordpress.com/16/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/fromthedogbox.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/fromthedogbox.wordpress.com/16/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/fromthedogbox.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/fromthedogbox.wordpress.com/16/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/fromthedogbox.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/fromthedogbox.wordpress.com/16/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/fromthedogbox.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/fromthedogbox.wordpress.com/16/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/fromthedogbox.wordpress.com/16/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/fromthedogbox.wordpress.com/16/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=blog.werner-puchert.com&blog=3233519&post=16&subd=fromthedogbox&ref=&feed=1" />]]></content:encoded>
			<wfw:commentRss>http://blog.werner-puchert.com/2008/04/12/talking-about-wireframes%e2%80%a6/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/46df8ccf0c5774a0eae4dfb4727f3972?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">weenerdawg</media:title>
		</media:content>

		<media:content url="http://fromthedogbox.files.wordpress.com/2008/04/storyboard.jpg?w=128" medium="image">
			<media:title type="html">It started with this simple \'storyboard\'</media:title>
		</media:content>

		<media:content url="http://img.youtube.com/vi/OT3yYXkafy8/2.jpg" medium="image" />
	</item>
	</channel>
</rss>