Prototype Smaller, Prototype Often
Tate Chow
Tate Chow

Prototype Smaller, Prototype Often

Tate Chow, Product Designer

It’s taken me a few years since graduating from school to realize my greatest enemy was the oversized aspirations I had for each project.

As an industrial and interaction design student, I wanted things to be impeccably designed, well-built, and cool — but all of these goals would weigh down my productivity. They also usually resulted in some pretty half-baked ideas, and just didn’t quite meet the level of execution I had dreamed up.

I have found since then that instead of trying to articulate incredibly grand designs, it’s more effective to explore smaller, less complete thoughts through prototyping. Working smaller helps you build on top of your successes faster through iteration and repetition. In this article, I’ll talk about some of my experiences and throw out some tips you might find useful.

It Began in the Woodshop

One of the first times I realized the value of prototyping smaller was in a furniture and lighting design class. Through diligent and repetitive prototyping of joinery and components, I learned that there was more success in smaller victories, and those in turn informed a well thought out final deliverable — in this case, a chair.

Early prototypes of my chair. View full project.

Broad lessons I learned from this project:

  • Learning through repetition feels laborious, but it does takes weight off the first attempt being perfect.
  • You can confidently build your final attempt if you’ve built every piece several times already.
  • Being able to compare and contrast your various prototypes will help guide your decision-making so it pays off to prototype variants of one idea.

Prototyping in Digital

I’ve since found similar experiences in digital products as well. The largest difference besides the physicality is that digital products have the advantage of being relatively low risk and low cost in exploration and prototyping. This affords us an incredible opportunity to explore all ideas — good or bad — as time is one of the constraints which we have to work against. It also doesn’t hurt that we’re infinitely rich in pixels and have the miraculous ability to turn back time (with Ctrl+Z, at least).

Be Adaptable

When it comes to prototyping tools, there are just so many options out there today. Focusing your efforts on learning one really well is quite a gamble, as the landscape is changing quickly. On the flip side, it can be a challenge to learn every prototyping tool under the sun if you’re someone that strives for a reasonable work/life balance.

I believe a resourceful designer is one who is willing to accept change and adapt with the times. Some advice to consider:

  • Be proactive and curious about new tools when they are available.
  • Be aware that, in a fast-paced industry you have to constantly reinvigorate your skill set, usually at a pace that is uncomfortable.
  • Don’t invest too much time into one thing.
  • Do your homework and read documentation or watch tutorials before you think the answer doesn’t exist.

Choose a Tool That Fits Your Mental Model

Picking a prototyping tool is less about the feature set and more about finding a framework that you can make sense of. For example, someone familiar with code might find Framer a great place to start. Someone coming from an architecture background who has used Grasshopper might be able to make sense of Origami Studio. Someone who knows their way around After Effects could be really at home in Principle. Start with one that complements the way you work already.

From left to right: Quartz Composer + Origami, Principle, Flinto, Pixate

Not everyone has the time to prototype micro-interactions in four different programs, but I think it’s worth the time and energy to find a program that allows you to get things done.

The majority of prototyping tools today are easy enough to pick up. My favorite tools are Principle for Mac and Origami Studio, and Flinto is another favorite at Prolific. I’ll dive into a few thoughts about these.

Origami Studio

I cut my teeth on Quartz Composer + Origami a couple years ago. It now lives on as Origami Studio, which a team at Facebook manages. It’s a free resource, and it’s also one of the few prototyping tools that lets you prototype (and mirror) iOS and Android. Origami allows for some incredibly complex interactions and is backed by a phenomenal team at Facebook that listens and engages with its user base.

The hard selling point of Origami is its node-based interface, which may not be for everyone. But if you design for web, iOS or Android, it’s definitely a tool I would get on your radar!

Principle for Mac

My main squeeze is Principle for Mac, purely for its low learning curve and high value payout. You can design and prototype in the same space, so there’s a lot of room to explore here!

Transition designed and prototyped in Principle

Principle’s animation and driver editors are its keys to success for After Effects-level transitions and scroll-based animations. Do note that layer and folder naming conventions need to be consistent from artboard to artboard, so it’s best to stay organized in Sketch.

Flinto

Flinto for Mac has a great balance of features in comparison. It has a much lower learning curve than Origami Studio and has a slightly more robust feature set than Principle, especially with the addition of the Behavior Designer, path tools, and editable text layers. Among these three tools, it handles exporting from Sketch the best, and each update usually brings significant improvements. It’s proven itself to be a go-to for many of our designers at Prolific.

As far as downsides to Flinto, there’s no Android mirror (yet). As an Android user, I would love to see that addition. Another challenge is grasping the transition editor, but Flinto’s documentation page can walk you through, step by step. In Flinto, you construct transitions by setting a start position and end position, and then adjust how you get from one to the other.

Know What You Are Testing

Getting familiar with these programs is a great way to dive into prototyping, but tools are just the beginning. Knowing why you’re using them and figuring out how they fit into your workflow are most important. Here are some things to consider adding to your prototyping process.

Sketch and Iterate

I always start here because sketching is something I love to do, but aside from that, it can prevent you from fiddling with pixels while you’re also trying to plot out a flow or interaction in your head. Some of my favorite explorations have come from quick and dirty sketches.

Sketch showing the stages of an interaction I was curious to prototype. I typically think about each screen I am drawing as a frame in an animation.

Using Principle, I built the interactions on a single artboard and used the drivers tool to animate each piece based on a scroll position. When you start with sketches, it’s much easier to iterate faster, which brings me to my next point.

Iterate Again, and Again…

Expect to iterate through the same ideas. To perfect the feel, you’ll have to try several more attempts to compare and contrast. Whether it’s a micro-interaction or a sign-up flow, don’t be afraid to start fresh to see if you can build a prototype faster. It helps to have more options to weigh against each other, and it’ll only help you make a more informed decision.

Prototype with Intent

Know when to invest more time and when to invest less. In many cases, it helps to lower your fidelity. If you’re trying to understand if your idea makes sense from a tactile and interaction standpoint, you don’t need to make it pixel-perfect. If you plan to share it or hallway test it, include the necessary bits of information, but don’t go overboard. For example, to quickly A/B test a flow, focus on the pieces that are critical to the user versus spending your energy on fancy animations.

For simpler, click-through prototypes, a fourth tool to explore is InVision. Their Craft plugin for Sketch allows you to duplicate prototypes with ease, swap out screens, put them on a device, and get real reactions from 5-10 people in under an hour. Use a tool like InVision when it’s about getting in front of people fast.

I whipped up this interaction in Principle to hallway test if potential users understood an opt-in for an event.

Closing Thoughts

Prototype often to explore different avenues and validate if an idea is worth pursuing. When collaborating with a developer, prototypes also provide a powerful visual aid to anchor a conversation. You’ll be able to ask, “Can we do this with the floating action button?”

A prototype can often communicate your ideas better than you can explain it. As John Maeda said, “a prototype is worth a thousand meetings.”