Prototyping Techniques

Posted

When we talk with potential clients we like to show them as much as possible about the software we’re designing before they take the risk to sign a contract. This is tough from a business perspective though as dedicating time to potential leads is expensive, but prototyping enables us to quickly explore software solutions without worrying about technical details.

We’ve started using a couple of prototyping techniques proposed by the Basecamp team in the book ShapeUp (available for free). Our favourite so far are ‘breadboards’ and ‘fat marker sketches’.

Breadboards

A breadboard diagram takes its name from the electronics tool for quickly prototyping boards. The breadboards we produce focus on two things: where the responsibility for features lie, and how they join together. In a web system, this could be what pages do and how they join together, or in more data-oriented systems it could represent the responsibilities of different algorithms within the system. 

Here’s an actual example for a small project with all customer details artfully blurred out:

Each yellow box here represents a page, with green notes inside them representing things that page is responsible for doing. Orange boxes here represent exports from the system (CSV, images). Some benefits of the breadboard include:

  • It’s an easily understood diagram for client and developer alike. Pick a workflow and play it out, or just view the system as a whole.
  • It’s also a great design tool; it’s easy to see where we’re investing too much behaviour in a system (pages with a lot of features are complicated), and to re-organise just by moving page links
  • It’s very cheap to produce and maintain. In an Agile workflow we expect this diagram to change in future as part of the natural workflow. It’s cheap, so can be discarded after the initial design decisions, but if it’s still required during development it can be maintained relatively easily. This allows you to expect and embrace design change during the project. The designs you create at the start only represent the best knowledge you have at that point—later on in the project you’ll know much more.

Fat Marker Sketches

The system above shows us how the system works, but doesn’t always give a great feel of the system. If we want a customer to be able to visualise something, we often produce what ShapeUp calls ‘fat marker sketches’. A fat marker sketch is just a normal low-cost UI sketch (done by pen/pencil, or low effort digital tools). We make use of these throughout the project, not just before the contract is signed.

A sketch with no add buttons. Instead little handles appear to the left of each to-do item. A popover menu appears to the left of one of the item and points to it. Inside the menu is a button to Add an Item and some squiggly lines suggesting other actions.

When producing a fat marker sketch, think using a wide marker on a small piece of paper:

  • It’s not supposed to capture detail! No wording choices, very few (if any) buttons—this is more about showing the high level organisation of pages.
  • It’s designed to be a discussion tool, it’s not supposed to be a guide for a designer or developer to work from. If the designer or developer feels constrained by a design, it’s likely got too much detail.
  • As with breadboards, expect and embrace design change during the project!