At Make, our designers build prototypes for every project feature as much as possible. Do-it-yourself usability tests are conducted whenever we can to know if our designs are easy enough to use. We do this early on in our process, so that we can correct any mistakes and save us the trouble down the line.

We don’t stick to one prototyping tool because different projects require us to build different kinds of prototypes. Before we start prototyping, we list down all the things that need to be tested in our design. Below is part of a test script for one of our projects.

In the example below, we were required to test two different versions of a design, where users can order meals for a group of airline passengers.

Test Script:

1. Identify the best sellers for the flight
2. Buy 2 Fried Chicken for Stephanie Martinez for dinner
3. Buy 1 Tuna Pesto for Stephanie Martinez for snacks
4. Buy 1 Pork Chop for Stacey Hall for dinner
5. Buy 5 Beef Pastrami in Focaccia for Stacey Hall for snacks
6. Buy 1 Steamed Fish for Robert Middleton and Antonio McGuire for dinner
7. Buy 1 Tuna Pesto for Robert Middleton for snacks
8. Buy 4 Grilled Chicken Herb Bun for Antonio McGuire for snacks
9. Remove 2 Beef Pastrami in Focaccia of Stacey Hall and replace with 1 Tuna Pesto
10. Remove all meals
11. Buy 2 Fried Chicken for all passengers for the 1st service
12. Buy 1 Tuna Pesto for all passengers for the 2nd service
13. Buy Meals
14. Move on to the next flight

Passengers:

Stephanie Martinez, Stacey Hall, Robert Middleton, Antonio McGuire

Menu Items:

Fried Chicken, Pork Chop, Steamed Fish, Tuna Pesto, Beef Pastrami, Grilled Chicken Herb Bun

Actions:

Switch passengers, Switch flights, Add meals, Remove meals, Add meals to all passengers, Remove meals from all passengers, Purchase meals

Once we know what needs to be tested in the design, we ask ourselves these questions before choosing what tool to use for a prototyping task:

1. Does it require figuring out the flow of an app?
2. Does it require getting feedback on the designs?
3. Does it require complex interactions?
4. Does it require high-fidelity animations?

Aside from the requirements of the project, we also consider these things when choosing which prototyping tool to use:

1. Integration with either Sketch or Figma
2. Previewing and sharing with stakeholders and developers who are using different platforms

InVision

InVision is a page-based prototyping tool that is perfect for presenting the initial designs and flow of an app for feedback. You can quickly build prototypes in Sketch using Craft (InVision’s Sketch Plugin) and upload it to InVision for sharing or to continue building with the rest of the team.

Aside from presenting flows and designs, we also use InVision for handing-off projects to developers. Using its Inspect feature, our frontend developers can easily generate working code and quickly gather key details of our designs like typefaces and colors.

Although a great tool for prototyping, InVision has its limits. That is why we added two more tools to our prototyping arsenal. Flinto and Framer.

Flinto

Flinto is a layer-based animation tool that is perfect for presenting designs with high-fidelity micro-interactions and animations. Flinto’s strength is its “behavior designers” that allow you to apply the same animation to different elements with the same layer structure. Flinto has a specialized viewer that makes it easy to view behavior states and pages connected by the same transition.

We use Flinto for tasks that require heavy animations like parallax effects, expanding buttons, large animated accordions and other fancy stuff that will take too much time to do using code-based prototyping tools.

Framer

Framer is a code-based/layer-based animation tool that we use for building interaction-heavy prototypes. It lets you create prototypes using CoffeeScript. It has a steeper learning curve compared to InVision and Flinto but once you’ve mastered it, you can basically do everything that’s possible in a web browser.

We use Framer for prototypes that are going to be used for user testing. These usually require complex interactions. In Cebu Pacific’s case, these interactions include booking flights, choosing seats, ordering meals — anything that requires multiple events to be triggered with a single action. Doing these in Flinto or InVision usually needs dozens of screen states to be prepared before building the prototype. The beauty in using Framer is that you don’t need to make a different page for every state of the screen.

Conclusion

Before choosing a tool, know what you’re prototyping. If it’s for presenting a user flow, use a page-based prototyping tool like InVision. If it’s for your portfolio or presentation, use a layer-based tool like Flinto. If it’s going to require a lot of complex interactions for user testing, use a code-based tool like Framer. Knowing the right prototyping tool is fairly easy as long as you have an end goal.

Remember that there is no best tool for building prototypes. Different teams and different projects require different tools. It’s just a matter of matching the right prototyping tool to the right design process.

Building Your Prototyping Arsenal was originally published in Made Different on Medium, where people are continuing the conversation by highlighting and responding to this story.