The following are some of the documentation methods we prefer to use when doing interaction design:


A wireframe is simply a sketch of how the layout of a webpage should look and behave. Key page elements and their location are decided on and drafted. Proposed behavior, structure, navigation, and content layout are all captured within the wireframe. We can tailor our wireframes to include specific details that are important to the intended audience. For instance, if the wireframes are going to be utilized by the development team we will be sure to include annotations specific to functionality. You can think of a wireframe as the blueprint for your website.

User Flows and Storyboarding

Creating a logical and straightforward flow of the different screens that are wireframed is the crux of producing a usable application. We conduct flowcharting and storyboarding to decide on what the exact sequence of screens should be that a user has to traverse to complete a desired task. Flowcharting is a very high-level conceptual model of the different possible design flows. You can think of a flowchart as a decision tree for the user experience (i.e. If the user does "x" show screen "y"). Storyboarding is simply a much more defined flowchart. A storyboard is like a wireframe, but instead of just one sketch, a series of detailed interfaces are wireframed in order to step through a sequence of screens.


Prototyping is typically done in preparation for a usability test. Following are a few different types of prototypes that can be created:

  • Paper prototypes - Paper prototypes are similar to wireframes in that they are hand-drawn interfaces on paper, but they are typically much more defined when it comes to content and interactive elements. Testing with paper prototypes is done very early in the development cycle, before any effort has been put into coding or graphic design. Performing a test with a paper prototype entails putting a user in front of the sketches and asking them to perform tasks utilizing their finger or pencil to simulate pointing and clicking. Typing is simulated by having the user actually write on the paper prototypes. Typically, one person is taking notes and facilitating while another person is switching the screens as the user is "clicking".

  • Clickable PDFs - A clickable PDF is a PDF (Portable Document Format) that has the added ability to support links and functional forms. Clickable PDFs bring our paper prototypes to life by adding functionality to paper without writing a single line of code. Instead of a user having to stretch their imagination by playing with paper, the user gets to interact with the prototype on a computer by utilizing an Internet browser; the same way they would with a website. Just as with paper prototyping, testing on PDFs is done very early in the development cycle.

  • HTML/CSS prototypes - Testing on fully functional websites is the most ideal medium, but the least cost effective when it comes to testing a redesign of a website. You don't want to invest in coding and creating a website only to find out after testing that the interface is inefficient. This information can and should be found out much earlier in the development cycle by testing on paper or PDF prototypes (see above). In order to understand what areas of an existing website are not servicing your users well, testing should be conducted on the current website before any redesign work on a new one starts.

Lets Discuss Your Project Today
Get In Touch