---

On most design and development projects, the project sponsors and team want to see some manifestation of the concept well before the final launch, and a prototype may fit the bill. Prototypes can take on drastically different forms, from a paper sketch to a fully functional beta version. For this reason, it is not always simple to plan and set expectations for how a prototype will integrate in your project lifecycle.

This article will explore types of prototypes, common uses for them, and tips for effectively integrating them into your project plan.

---

What is a Prototype?

A prototype is a model of a product (in our case, usually a website or an application) that may or may not be finalized or functional, created for purposes of visualizing, explaining, testing, or collaborating. A prototype does not have to represent a complete product; in fact, prototypes often focus on elements of a product that require clarification or feedback.

There are many reasons to create a prototype, and it is important that your team agrees on its purpose. Common goals may be:

Gather input from the end users

We frequently build prototypes in order to test our designs via usability testing. A typical session lasts an hour, so we need to have something tangible for users to react to without trying to test every possible feature or screen.

Convey a complex idea to project team or sponsors

Prototypes are useful for presenting concepts that could be difficult to explain, especially when nothing really exists at the moment that is similar. They can clarify how something works for people who are not familiar with the technology or terminology. For example, for the non-web savvy, words such as: Ajax widget, fly-out menu, accordion, or faceted search will only bring a look of bewilderment. In these cases, it’s much easier to show how things work than to try to explain in words.

Iterate on an idea with the project team

A prototype can be treated as an extension of white-boarding. The project team can meet, brainstorm, build a prototype, discuss it, tweak it, and repeat. With each iteration, a few issues may be resolved and new requirements may be revealed. Designers, developers, project managers, and user researchers can collaborate and anticipate the issues they will need to address. Throughout the design process, everyone on the team will be more effective because they are all visualizing the same concept.

Solidify buy-in from the organization

Project sponsors usually want to know that they are allocating their resources wisely and be reassured that the end product will meet their expectations. When a proof of concept is needed to sell the project, a prototype can be useful.

---

When should I create a prototype?

In an ideal world, all teams would be prototyping early and often. Prototyping early can aid collaboration, gather requirements, and mitigate risks by facilitating communication and building consensus. However, this may not be a viable option for you based on your team structure and available resources. A common approach is to design a prototype after gathering requirements from sponsors but before development begins. This may be before or after a visual design direction has been established.

---

How do I create a prototype?

Prototypes can take several forms. To decide what type of prototype to build, it is important to know what you are trying to accomplish. As long as the prototype can effectively gather user feedback, serve as a collaboration tool for the team, or convey your idea to executives, it does not have to be all things to all people.

The prototype format should be dictated by your audience

• End users/customers- Find out what they think about the product before it is fully baked.
• Project team- Gather requirements, assess the level of effort required, and get everyone on the same page.
• Project sponsors- Solidify resources and support planning.

Paper Prototypes

Hand-drawn sketches can quickly convey a few screens or states of your product. Paper prototypes are especially effective for team collaboration and rapid iteration because they take little time and can be easily modified. They can be effectively used in user research; however, the moderator may need experience with this approach to ensure that the concept is truly understood by the participant without having to provide too much direction.

Digital Designs

Several software packages exist that incorporate or focus on features for prototyping, but anyone can fake a few screens with tools you already have.

• Wireframing tools like Visio, Axure, and Omnigraffle allow multiple screen mock-ups to be linked and exported into different formats for easy viewing.
• Design comps from a tool like Photoshop can be saved as flat images and linked together as image maps. Image maps are single images that contain several hyperlinks based on coordinates. They can be created with Web development tools like Dreamweaver and some available freeware tools.
• Creating a low-fidelity, clickable prototype is achievable through a PDF or PowerPoint. PDFs are great for demonstrating interactive elements and PowerPoint is extremely useful when storyboarding content heavy websites. Simply add a shape to the screen then choose Insert > Hyperlink > Place in This Document to link to any other page of your PowerPoint presentation.

Interactive Demos

Some situations require higher-fidelity visuals that really sell a concept. Flash can be a great way to deliver elegant prototypes, especially for an executive audience. This level of prototype is useful in large product-centric organizations where several departments need to be aligned with the vision for planning purposes (e.g. marketing, legal).

Real Fake Code

HTML can be used to create a very realistic click-through while still being “fake.” Mark-up does not have to be perfect or valid at this stage. Back-end databases do not have to be integrated. Many Web professionals are more proficient with mark-up than with design tools and more effective working through the actions and events at a page and object level.

---

Other influencing factors

Planning for a prototype may also depend on the resources and budget available. Who on your team is available to work on the prototype? What types of skills do they have? An information architect or interface designer is probably already proficient in a tool and can string together a few wireframes or design comps to create a prototype from their existing work. If you have a Flash or front-end Web developer available, consider their abilities and preferences for approaching prototypes.

Don’t let a small budget stop you from creating a quick and dirty prototype to get answers to your questions - just be sure to set expectations that what you create may not be pretty or functional. However, if you have the time and resources to build out something that will wow your Board of Directors, a prototype can also serve as an elegant presentation tool.

---

Resources and References

PDF Prototypes: Mistakenly Disregarded and Underutilized
http://www.boxesandarrows.com/view/pdf-prototypes

Creating prototypes with OmniGraffle
http://www.urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle

Sketching in Code: the Magic of Prototyping
http://www.alistapart.com/articles/sketchingincode

Quick and Easy Flash Prototypes
http://www.boxesandarrows.com/view/quick-and-easy-flash

View all Insight articles
NavigationArts home