Just My (Proto)type

Question: What tool do you use to prototype?
Answer: Yes.
As the answer to all great UX questions goes: it depends.

About a year ago, I wrote about design tools and what it is I’m looking for in a good tool: a balance of flexibility and efficiency while I’m iterating on an idea. While I was writing that article, I realized that our industry uses the word prototype to mean a variety of different things, and I typically use a variety of different tools to accomplish those different aims.

Types of Prototypes

Prototypes are chiefly a communication tool. They are a simulation of an aspect of a product for the purpose of

• working out the feasibility of a design for yourself,
• demonstrating and selling the design to others, or
• communicating the design for production.

When I create a prototype, I must first define which aspect of a product I'm most interested in learning about and what type of feedback I'm looking for.

Any good prototyping tool will have limitations (and that’s actually helpful). We must ensure that those limitations are compatible with what we are hoping to learn. Like wireframing, these constraints help designers focus their attention on what’s most important to learn at a particular point in a design process. (It’s also much cheaper and faster to make many small prototypes that are purpose-built to learn one or two things than to create one big perfect simulation or a functional piece of software to learn all the things.) Here’s a quick guide to help you understand how to choose the right prototyping tool for various points in the design process.

Proof of Concept

Let’s say you have a dream or vision for a product, and you are looking for market validation. A fully-featured prototype will make the idea in your head tangible to others, and it will allow you to get feedback about your idea from potential users and investors alike. By including many possible features, you can see which features users gravitate to, which features don’t interest them, and which features confuse them. Because you haven’t yet invested in development, you can test out wild and risky ideas to see whether they warrant further exploration. A proof of concept is a discovery tool to help you better understand the market and prioritize building the features that will be most relevant to your user base. You can then concentrate your efforts accordingly.

This example is a proof of concept we created during our work with Optify, a digital leadership coaching app. We included all the features that our client could imagine in the future, which helped us understand our client's vision and gave us a better sense of what we should build first when we built an MVP.

Prioritizes: Features, Low Fidelity UI

Ditches: Data, Animation, and Stateful Interactions

Possible Tools: Clickable Prototype (Invision, Sketch, Figma) or Principle

Functional Prototype

Let’s say you’ve encountered a very specific, tactical problem, and you think reorganizing a set of existing data or content will help you solve it. This product isn’t differentiated by its visual UI. It’s differentiated by its unique dataset, data structure, and ability to perform specific functions given that data. The best approach here is to focus on getting the underlying database, relationships, and logic trees just so. By accurately modeling a small set of sample data now, you can ensure that the application will reliably deliver good results later after you’ve built the product. This can help a designer wrap their head around the dataset, figure out what is and isn’t possible, and collaborate with devs. By modeling databases with light-weight tools like Airtable or writing boolean functions in spreadsheets, designers can work with the materials of data, while using tools that are flexible and accessible.

For AARP's Ace Your Retirement campaign, we built this prototype in a spreadsheet to model the logic of the retirement coach. This allowed us to test the results different users might get given different answers to the questions in the chat experience and adjust the logic if anything seemed wrong.

Prioritizes: Data and Logic

Ditches: Visual UI

Possible Tools: Airtable, Spreadsheets, Code

User Testing Prototype

You’ve already defined the problem and the features of your product. Now, you are looking to determine whether a user can understand the specifics around what you’ve designed. Can they use the tab navigation to get to different parts of the product? Do the menu labels make sense to them? Do they notice the button to complete a task? Does the product do what they expect when they click the button? A high-fidelity clickable prototype can help you test whether the design choices are working together to meet user expectations and identify where you need to make changes. If you are looking to test navigation labels and IA structure specifically, you can use a tree test that abstracts the IA away from the UI to see if your conceptual model matches the user’s. If you are looking to test interaction patterns, layout, and visual hierarchy, a clickable prototype or first click test will help you determine how easy it is for users to find the relevant information or buttons in your designs.

Throughout our work with iContact to redesign their email builder, we ran weekly user tests. With a key flow and numerous states, we wanted to simulate how a user might build an email with this new drag and drop tool. As users interacted with the prototype, our goal was to learn what users understood about the tool and whether our design decisions were helping or hindering them, especially as we made updates and revisions.

Prioritizes: Medium Fidelity UI, Key User Flows, and Navigation

Ditches: Data and Animations

Possible Tools: Clickable Prototype (Invision, Sketch, Figma), First Click Testing, Tree Testing

High Fidelity Demo

Let’s say you have a unique interaction design in mind. It may be triggered on scroll, use a swiping gesture, or simply involve a lot of elements moving simultaneously. To demonstrate and test it, you need not just high-fidelity UI but high-fidelity animation to be able to communicate the idea. With a tool like Principle or AfterEffects, you can design the specifics of those movements on a timeline and get a feel for the sequencing of events. This is great for getting client buy-in and alignment on a more complex concept that depends on motion for proper execution. It’s also great for communicating that concept with a larger production team of designers and developers to make adjustments where needed. Unless you are worried about this animation potentially confusing users or users being unable to discover a feature without it, I’d recommend against using this type of prototype for user testing.

Besides the functional prototype we made for AARP, we also made this animated prototype to show how the character, Avo, would come to life. Our front-end developer and designer collaborated to build this demo that illustrates all the reactions Avo could express towards a user response.

Prioritizes: High Fidelity UI, Stateful Interactions, and Animations

Ditches: Data

Possible Tools: Keynote, Hype, Principle, AfterEffects, Framer, Origami Studio, Code

Final Thoughts

There’s no one way to prototype or one reason to prototype. Prototypes are communication devices used to help us explain and make tangible an idea to ourselves, to our teams, to our users, or to our clients. Choosing the right tool helps to get the right answers you are looking for and reduce the amount of investment needed to get to those answers.