Functional Mockup Example

The functional mockup can be an important part of the overall blueprint for a project.  The mockup is essentially a model of the website that will show how we want the real thing to work – from what fields are contained in a form to site navigation to what reporting features will be available to what rules will be imposed on the user.

This is all done without writing any software, developing any graphical designs, or working with any real data.  We essentially create a simple mini-website that puts the essential pieces of information on a page in black and white.  Because there’s no real software or database involved yet, we can easily make changes to the mockup – from minor tweaks to major new feature additions – before such changes would have the significant impact on the cost of the project that they might have later.  Take a look at all the kinds of factors we consider when putting the mockup together!

Once completed, the functional mockup is a product in and of itself -- you could demonstrate it to potential users or those funding your project, use it as a tool for marketing the site, and so on.   We can put it on a CD-ROM for you, let you copy it to your own computer, or just post it on a public website for you to pull up in your next project meeting.  We’ve found that being able to quickly visualize the specifics of how a site will work can make talking about that site with others infinitely easier.

We’ve put together some examples of functional mockup components to help illustrate what the part of a blueprint might look like.  These examples come from the website 1-800-Save-A-Pet.com, a national pet adoption service that Summersault completed in the Fall of 2004 and continues to extend today.  If you would like to learn more about the process we went through to create it and other mockups, just let us know.

This is the original functional mockup of the site’s front page.  Look how bare and boring it is!  But it gets to the point, and shows you where you’ll be able to go in the site.  And on the right you can see the end result which has the same basic navigation options, but looks much nicer. Click to enlarge.

Now here’s a page from the functional mockup that shows how an Animal Shelter would be able to sign up to use the site. Note the use of asterisks to denote what fields are required, and note the “Developer Notes” at the bottom that clarify all the actions that are tied into this page.  Wow – that’s a lot of information you can’t get from a simple text only description!  On the right you can see how the actual page turned out. Click to enlarge.

We hope this is useful in showing the kind of detail that a functional mockup can provide.  As we said before, the small time and expense to create this part of a blueprint can save so much time and expense down the road, and is an indispensable part of developing complex sites. (And if you're working on your own blueprint, make sure it is complete!)