Xperience This!

The definition of functional requirements for a website or a business application is a critical phase in the development process. Aligning those requirements with the needs of your target audience is a prerequisite to launching a tool that will be quickly adopted and meet business expectations for ROI.

Prototyping is an excellent technique that enables your development team to get valuable audience feedback and address issues pertaining to functional priorities and usability before they become costly downstream problems. Prototyping provides the additional benefit of allowing the team to share its vision and begin building a fan base among your audience members. These fans can become powerful allies in driving adoption of the completed tool.

Despite its benefits, prototyping and early stage audience testing can be perceived as slowing down the development process and creating unnecessary front-end costs. We believe that when done correctly, prototyping’s benefits far outweigh its costs. Here are a few things we’ve learned along the way to help ensure the process is efficient and effective.

1.     Determine the intent of your prototype before you build it

Determine who you are building the prototype for and what you hope to accomplish. Then make sure the prototype serves the intended audience and purpose. The last thing you want is for your audience to be confused because it is either too detailed or not detailed enough. Here are some basic guidelines for prototyping for your three primary audiences:

• Business (Project Sponsor) – Make sure the prototype can answer the big question: How does this experience map to the overall business objectives?
• Target Audience – Make sure it demonstrates how people will actually interact with the completed tool to perform specific, highly relevant tasks or functions.
• Technical (Developer) – make sure it can demonstrate how the tool will function with enough detail that the developer can use the prototype as a supplement to the functional specification documentation, e.g. when clicking on a link do we open a new window or an overlay?

2.     Build the prototype with functionality that is realistic and relevant

To paraphrase Dirty Harry, a design team has to know its limitations. Are you designing for a particular development platform that imposes specific constraints on your interaction design (e.g. SharePoint)? Is there an aggressive timeline for launch that will constrain how much custom development can be completed and adequately tested in the time allotted?  Designers need to work with the development team to ensure that the prototype is aligned with the overall project timeline and represents a feasible design.  

Also, if your prototype is being designed for the people who will be using the final product, it is important that you take the time to learn what is needed from their perspective. No matter where you are in the design process, anything you show to your target audience needs to demonstrate that you understand their needs and that the tool will be relevant and useful. (See tip #4 below.)

3.     Try to keep your prototype “black and white”

Remember that early prototypes are intended to demonstrate functionality and utility, not branding and other visual design elements. So don’t over design your prototype. Colors, imagery, and even real content often get in the way of the high-level intent of the prototype. For example, if you’re trying to validate that a particular interaction design is usable (end-users) and feasible (developers), you don’t want feedback that focuses on a particular color choice or that points out a block of copy is out of date.

If the intent of the prototype dictates the use visual design elements and/or actual content, here are a few things to keep in mind:

• If you need to visually distinguish areas of page or functional modules, try to get by with grayscale variations rather than actual colors. Click here for a sample grayscale prototype screen. 
• Only include content that is helpful in terms of understanding how the tool works (e.g. core navigational elements and terms, contextual help text, etc.)

4.     Have an audience advocate(s) contribute to the prototype design

Remember that prototyping is an excellent way to engage the people who will be using the tool in its development. Engaging them serves two goals: 1) It ensures that the end product is relevant to their needs and desires; 2) It begins the process of creating a fan base among your target audience; these fans can later be leveraged as evangelists for the end product because, as co-designers, they have a vested interest in its success. Having at least one advocate of your target audience participate in your prototype design contributes to both of these goals. One technique to consider is holding a collaborative design workshop with audience representatives.

5.     Keep it simple and think iterative

Unless you are creating the prototype as an end deliverable for the development team (functional specification), it should be seen as part of an iterative approach to design.  Whether you are creating the prototype for requirement review meetings or for audience testing, don’t attempt to get everything perfect on the first go-around. It’s easy to get carried away with your prototype and find yourself spending days, even weeks, making it look and function exactly as you envision (e.g. perfectly timed sliding effect for an expandable page component). But keep in mind that the purpose of the prototype is to test ideas and concepts. The feedback you receive will inevitably lead to changes in the design. Keeping your prototype as simple as possible while making sure it serves its purpose will help you keep your design process on schedule and on budget while providing opportunities to tweak it along the way as you receive feedback.