Mockups before Stories? How Does it Work?

<p>This morning, I was reading about how <a href="http://www.37signals.com/svn/posts/744-ask-37signals-how-do-you-feel-about-stories">one company</a> works with stories.  One of the posts (fourth one from the top) states, &#8220;We develop UI mocks first, and add short &#8216;stories&#8217; to clear up the confusing bits.&#8221;, and I started thinking that could work, but it doesn&#8217;t sound very ideal.</p>


<p>I think I&#8217;ve hopped on the Agile bandwagon.  I have had a taste &#8220;Stories Are Good&#8221; kool-aid (it is really cherry flavored), and it is delectable.  All in all, things are good in the sense that I know what <em>should</em> be doing, but things get fuzzy on how I to accomplish those tasks.</p>


<p>This brings me to my example about Bob the web developer.  Bob&#8217;s client wants him to create a website to show their fancy shoes.  Bob&#8217;s designer already has an idea in mind of what the website should look like, so she mocks it up in <span class="caps">HTML</span> and then Bob writes just enough code to make it work.  The client is satisfied with Bob&#8217;s work and life is good.</p>


<p>A few month&#8217;s later, Bob&#8217;s client wants some new features for their website.  They want to sell their fancy shoes now, so they want some sort of shopping cart.  Once again Bob&#8217;s designer cranks out some great <span class="caps">HTML</span> for how the cart should look and he delivers the cod to make it work.</p>


<p>What is wrong Bob&#8217;s process?  One could argue that there is nothing wrong at all, and truth be told as long as the client is happy there isn&#8217;t anything wrong.  But, something just doesn&#8217;t feel right to me.  UI driven development does work, but fails to capture things that aren&#8217;t UI related such as payment processing, and other back-end manipulations.</p>


<p>This is why I like stories.  I just don&#8217;t like any type of stories, so stories seem too <a href="http://www.agilemodeling.com/artifacts/userStory.htm">terse</a> and maybe that is they way they are supposed to be.  But a story that is too terse doesn&#8217;t really help out in the long term in my opinion.  I prefer stories that are in this format:</p>


<blockquote>
    <p> Given some condition.  When something happens.  Then this should be the result.</p>
</blockquote>


<p>As fate we would have it, this is exactly the format of RSpec Stories.  So, now when I&#8217;m writing something and using ruby, I&#8217;m creating a story first.</p>


<p>So, this brings me back to the topic:  How can Mockups come before stories?  If you are doing something that is 100% web, I&#8217;m sure it is possible to not even think about stories.  But, if you are processing even one piece of data, shouldn&#8217;t you have a story that describes that scenario first?  Your mockup can be an artifact of the story and help drive the creative development process, but it shouldn&#8217;t be the motivator.</p>