Getting Started with Prototyping

Some steps to get started with developing your own prototypes

At a NY iOS Developers Meetup in November 2014 I gave a presentation on prototyping, touching upon how we use it at Wildcard. The importance of integrating prototyping into the development of a product is something that is no longer a nice-to-have, it’s simply integral to designing great products. However an eight-minute rapid fire discussion only allows me to just scrape the surface.

This post walks through my presentation, giving more detail where needed. In a post yet to come, I will highlight some of my favorite prototyping tools along their shortcomings and accolades alike.

Why prototype?

Before I mention the applications and tools themselves I find it important to cover why we should prototype in the first place. And for myself this boils down to three key reasons:

1. Fail Faster

Failure is good. We all know that through failure we learn from our experiences and are better set for success in the future. Quite simply, prototyping tools enable us to fail and discover problems with much more efficiency than ever before. As a designer, when you create a prototype you allow your engineering team to focus on tasks such as squashing bugs or improving the speed and performance of your app. Where as, if you built out a new animation to spec with an engineer, chances are that you would be working far less efficently.

Say you were to build a new interaction without testing and release it into the wild where active users may come across it. Should a user discover a bug or flaw in the build you’d be at a complete loss. Now you’ll need to parse metrics and/or app reviews to find out exactly what went wrong. We put ourselves in costly positions whenever we fail to test. Find these failures faster, prototype your designs.

2. Iterate Rapidly

As you unearth these failures you’ll be iterating. Prototyping is a digital sketchbook, problems are highlighted and solutions discovered in mere clicks and keystrokes. For any given problem I may end up with ~15 or more files, each sparking a new idea as to how to close a gap in an experience.

Iterations on a single prototype

Iteration fuels the creative process and prototyping is catalyst in allowing us to design unique animations.

3. Create Dialogue

Design is communication, and great design communicates clearly. Explaining how an interaction or animation works without visual aid will almost undoubtedly result in unnecessary dialogue, frustration or an end-result flawed from miscommunication. As designers interactive prototypes help us facilitate and direct these conversations. At Wildcard we rarely build a feature without having a chat huddled around a prototype.

And it’s not only dialogue within our team. Prototypes and beta builds of your app allow you to run user testing sessions of your own — but much more on that later.

For this reason alone I think prototypes are essential to the product design process. Being able to control a conversation and make more intelligent design decisions is paramount to the product development.

Choosing a Tool

There are countless design tools out there, many of which are designed with prototyping in mind, and many more that designers have adopted under their wings. I certainly have my favorites, however there are some key questions I ask before I develop any prototype.

1. What is my problem?

This is the first question I ask myself. More specifically am I working on an animation, transition or user flow? By asking myself this question I can trim the fat, helping me to choose the appropriate tool. Believe me, I know this sounds like a juvenile question, however when prototyping it’s very important to move swiftly, and that can really only be done by understanding what tools you have in your toolbox and how they are best suited for different tasks.

2. Try different tools.

This may seem contradictory, but keep in mind that there really is no proper tool, and likely there never will be. By disconnecting ourselves from our toolset we are able to experiment and find what works best for our capabilities. Just because Quartz Composer may work for me doesn’t mean it will suit your talents and requirements. So try different tools, and have fun in doing so.

3. Use Time Efficiently

Building models of our designs is all about using time efficiently. Once you understand the problem at hand, and have found a tool that works for the job, use that time efficiently. As a designer myself I know very well that all too often you may find yourself lost deep inside the nuances of an application, tinkering with settings and details. Or nudging pixels, colors and typography until it’s just right. When this happens remember that you’re wasting time. Prototyping is about mocking up ideas and discovering solutions (or proving points). There is no need to be pixel perfect. No need to tweak the colors or spacing.

I can sympathize here, however no design is ever complete and there will be plenty of time to perfect a transition later down the road — after you’ve had some conversations.

In my next post I highlight the tools themselves. As a precursor, throughout the development of Wildcard we've used: Keynote, Quartz Composer (with Origami/Avocado), Adobe Edge Animate, Adobe After Effects, Pixate, Form and Marvel.

Have a comment or want to connect? You can email me at contact.meszaros@gmail.com