menu icon MENU

Combining Documentation with Prototypes

Written by Atom Groom

This article was originally published on the Bitovi blog. Archived permanently here.

Designers have long used documentation as a means of communicating functionality and interaction for digital products. It has been successful for a long time and thousands of digital goods have been delivered using this process. As our industry continues to evolve, so does our process and tools. In this post, we’ll look at how Bitovi combines documentation and prototypes into an interactive experience for both clients and internal teams.

Documentation Alone

User interface or user experience documentation (sometimes referred to as a specification) has always been extremely important to the engineering team. Typically, the documentation describes a visual overview of the screens, styles, and interactions. This documentation is provided to the engineering team as individual images along with overlaid text describing the graphics. Without this information, they would be left with many questions or possibly forced to make decisions on their own (oh my!).

alt text

For a long time, this was the way we did things. It communicated our designs well and there was no real need for a change. But over the past several years, we have seen a lot of change in the process of documenting user interface and user experience design. As an industry, we have discovered the power of interactive wireframes and prototypes. We are now starting to see that written documentation alone is becoming partially obsolete as the prototype itself can visually demonstrate much of what was previously written with words.

Prototypes Alone

Interactive prototypes are quickly becoming the standard in the design process for many digital products. Rapid prototyping allows the designer and project stakeholders to quickly and efficiently adapt to the discoveries they make along the way. Prototypes are loved by the engineering team and the client because they can now experience and interact with something versus only imagining how it might work. In fact, many designers are finding that prototypes are replacing traditional documentation completely.

But just like written documentation alone, a prototype isn’t enough by itself. A prototype can save you hours in meetings but it cannot fully describe all of the interactions and expectations that the designer has crafted. While software and frameworks have come far, they simply do not allow us to design all of the functionality and interaction that the finished project will have. Therefore, using both documentation and interactive prototypes is the best way of communicating our designs to all stakeholders.

A Perfect Combination

At Bitovi, we have put this combination into practice and see the fruit on a daily basis. Our current tool of choice is Axure and we really dig it. Here’s why:

Bringing It All Together:

Here is what our process looks like for combining documentation and specification into one glorious masterpiece of interactive awesome.

Wireframes

Creating wireframes is usually the step after the initial needfinding phase, where we complete tasks like research, user personas, and user stories to name a few. We start with basic wireframes that will eventually turn into an interactive prototype. Wireframing is meant to help us understand and then define what the basic structure of the app might look like without spending too much time on it. After several iterations and some testing we’ll agree upon a set of wireframes for various views within the app.

Interactions

Interactive wireframes can be simple line art or high definition graphics. For the sake of time and energy, it is best to start with simple wireframes until further approval and traction is gained. Interactive wireframing is one of the most important parts of our process. It helps us to learn quickly, fail, and repeat. During this process we achieve a lot with much less effort than having a team of engineers build what might be thrown away later.

Our interactive wireframes can be anything from simple click-to-click screens showing a user flow to complex interactions between components on a page. Complex interactions like loading data, repeating data or changing variables is one of the best highlights of Axure. Once we’ve agreed upon a solid set of wireframes and interactions we can begin documenting the pieces that haven’t been visually expressed yet.

Documentation

In most cases, the interactive prototype will answer many of the obvious questions like:

However, there are many questions that a prototype cannot fully answer like:

Questions like this are best answered in a documented format and then tweaked later in the browser. Answering questions in this way brings us to another great feature of Axure: contextual interaction notes. This is where combining documentation and prototypes really shines. As the user or engineer is interacting with your prototype, small sticky notes reveal the documentation or notes for that particular interaction.

Closing Remarks

At Bitovi, we combine all these practices to give our clients and development team written documentation, style guides, interactive prototypes and high-fidelity designs in one simple package. Today this process is efficient but we would like continue to improve it in a few ways, like:

It’s exciting to think how the design and development industry will continue to innovate in these areas and how this will impact our day-to-day jobs. Thank you for reading!