Prototype Workshop

What to Expect

When we’re building a new website, product, or service for our clients, our 729 Studios team uses all of the design tools, techniques, and philosophies that are at our disposal. For most projects, this includes creating wireframes and mockups to demonstrate what the finished product will look like. But sometimes our clients need to have something with a little more functionality that they can use to test or demonstrate their product. When that happens, our team moves beyond wireframes and mockups to create prototypes.
 
Let’s walk through the three parts of our Prototype workshop series. Although the number of meetings may change depending on the size and scope of your project, our process stays the same.

Part 1 – Educate: What are prototypes?

We’ll start off with a brief discussion of what prototypes are, and how they differ from other design tools such as wireframes and mockups. Then we’ll discuss the three different reasons a project may require prototypes, and make sure everyone is clear about what the prototypes need to demonstrate.

Part 2 – Explore: How do we create prototypes?

Next, we’ll walk through your project to determine which parts of it need a prototype, and which don’t. This section will focus heavily on your user journey and developing the script that will guide the prototype creation process.

Part 3 – Reveal: Play with your prototypes!

After our team has returned to the 729 Batcave they’ll begin creating your prototypes based on the information we gathered during the workshop. Next, we’ll return them to you for review and testing before making any final adjustments.

Educate

If you’ve already read our articles on wireframes and mockups, you know that laying out the visual design is a critical part of any project. We want to make sure we have the look and feel of your project correct before our development team begins writing any code. There are occasions, however, when the visual representation isn’t enough, and a functioning demonstration is needed: this is when our team turns to prototypes.

How do prototypes differ from wireframes and mockups?

Wireframes and mockups are static visual representations. They can be viewed, but not interacted with in any way. With a prototype, our team can add in limited functionality to create a dynamic representation. Prototypes typically include just a few pieces of functionality that can be used to show how simple things work, such as submitting a form, navigating to a new page, or entering information with drop-down menus.

What are prototypes used for?

Prototypes are the perfect tool for demonstrating just a little bit of functionality in a limited capacity. We need to determine what you intend to do with your prototypes; understanding your end-use situation helps our team create the right prototypes for your specific needs.
 
There are three reasons our clients typically need prototypes.

• They want to do user testing that allows for limited interaction to better understand and map the user journey. Having a prototype gives test users something tangible to interact with, resulting in more accurate results than simply following a flowchart or diagram.
• Sometimes clients need a prototype to demonstrate their product to internal stakeholders, often to demonstrate proof of concept on a new idea. Wireframes and mockups may not be sufficient for these internal stakeholders who need to have a strong understanding of how users will interact with their product. Using prototypes can help increase internal buy-in from these stakeholders.
• Finally, sometimes clients want a prototype to help with their sales process. They can be an especially powerful tool to build hype about a new product that will be released in the future. Prototypes can be more persuasive than wireframes or mockups because they demonstrate actual functionality. Even though the functionality of prototypes is limited to following a specific script, it’s considerably less expensive to create a prototype than to create a completed project.

Explore

Once we’ve identified what you’ll be using your prototypes for it’s time to begin laying out both the visual look and the functionality. If we’ve already created wireframes and mockups, the visual look of a prototype is often just an extension of those assets. The real fun starts when we begin to layout what functionality you need to demonstrate (based on the reason you need the prototype).

Creating the Script

One of the key components of prototypes is creating the script that will be followed for the user testing, demonstration, or sales presentation. It’s key that we have a crystal clear understanding of how you’ll use the prototype so that we can build the script that is tailored to your needs.
 
This script will lay out everything that you want to be functionally demonstrated, from hovering over a button for information to submitting a form and navigating to a confirmation page. The script will differ greatly from project to project depending on individual needs. No matter what the script demonstrates, it’s important to remember that the prototype can ONLY perform the functions agreed to ahead of time and captured in the script. If you want to demonstrate how a specific feature works, be sure it’s included in the script so that our team knows exactly what functionality to activate.

Sample Script Development Questions

For User Testing

• Which user personas do you want to use for testing?
• Which user journey do you want to follow?
• What do you want the user to do or interact with?
• What does a successfully completed user test look like?

For Internal Demonstrations

• Which stakeholders will see this demonstration?
• Which user personas and user journeys will they want to see?
• Are there any pain or fail points that need to be demonstrated?
• What will a successful demonstration look like?

For Sales Presentations

• Who will be in the audience for the presentation?
• Which user journeys will they want to see?
• What questions can we preemptively answer using the prototype?
• What does a successful sales presentation look like?
• Common Features Demonstrated Using the Script
• Hovering over a button or image
• Using drop-down menus
• Using radio buttons or checkboxes
• Submitting a form
• Clicking on a link
• Navigating to a new page
• Attaching a document
• Uploading an image

Reveal

After we understand the reason you need a prototype and what functionality you need to demonstrate, our team heads back to their caffeinated drink of choice to begin creating. They’ll use the information about what you need the prototype to demonstrate to fine-tune the script and add in the necessary functionality. Once they’re completed, the prototypes will head to your team for review and initial testing. We will want to hear any feedback you have so that we can make any adjustments before you dive into user testing, or give that career-changing presentation to your boss.

Practice, practice, practice

As with any new tool, you’ll want to practice using it to make sure you understand what it can do before the big day.
 
Here are some tips to make sure you’re ready to rock and roll:

• Run through the script on your own, before using it for testing or demonstrating.
• Practice using the prototype touchpoints, so you know exactly where to click to activate the limited functionality.
• Prepare for feedback that may include requests for additional wireframes, mockups, or even prototypes.
• Do a full dry run of your entire presentation before that big sales pitch so that you’re confident with your script.

Prepare for your Prototype Workshop

When you’re preparing for your prototype workshop with our team, there are a number of documents that we recommend you review internally before we meet. It can also be helpful to send copies of them to our team ahead of time, so we can hit the ground running during our time together during the workshop itself.
 
Here are some of the documents we suggest you gather ahead of time to help with your prototype workshop:

• User personas
• User journeys
• Process maps
• Site maps
• Existing mockups
• Existing wireframes
• Internal Workflows

Next Steps

When you’re ready to start the conversation about your next project, reach out to one of our 729 team members. We can walk through the parameters of your project and suggest a plan of attack. Depending on where you are with your project, we may suggest this prototype workshop or another one in our workshop series. If you want to see an example of one of our projects where we used prototypes, check out our portfolio on how we created a custom Zendesk guide for a client.