Prototyping: Where, When, How

Jeremy Duimstra

Why Prototype?

People working in the UX, Design, and Engineering fields are very familiar with the benefits of prototyping, but let’s look at it from the client’s perspective. What are the main reasons that a client should want to prototype digital products and experiences before committing to a full on build?

There are a couple of main reasons: First, when you prototype, you get a first glance into what features your audience will actually use. The “If you build it, they will come” mantra does not work in the digital product development world. For this reason, testing prototypes to ensure that what you’re building connects with and will be used by your audience is always recommended.

Second, it saves money. Plain and simple. If you prototype, test, and iterate on a product early on – you will save a ton of cash before hardcore (and expensive) engineering even begins.

When should you prototype?

Prototypes play a huge role in bringing ideas to life efficiently because they provide a vivid portrayal of our creative plans and allow for quicker internal user and client feedback. Prototyping is a journey that extends from initial project ideation to user experience and design, and through final engineering.

Prototyping is particularly useful when used alongside the Design Thinking model of product creation. Our entire process is propelled by Design Thinking. For us, it is the mechanism through which innovation and creativity can be unleashed. The three stages of Design Thinking include Inspiration, Ideation, and Implementation. Prototyping is useful in each stage.

During the inspiration phase, we conduct field research to gather insight from the world around us. This includes doing a comparative analysis of competitive products and observing elements within our environments that contribute to our vision for a product. Creating low fidelity prototypes at this stage often adds fire to our inspiration. Perhaps something we saw during field research resonated with us. Something as simple as a napkin sketch passed around for feedback can generate new ideas. That, my friends, is lo-fi prototyping.

In Ideation, we go to the next level. In this phase, we still do lots of sketching, but we also start enhancing our prototypes by building them in Adobe XD, Sketch and Photoshop. We begin testing these prototypes in InVision, which allows us to start clicking around from screen to screen while animating things. This is when initial user testing can begin. We like to get our ideas in front of our audience as soon as possible before a lot of budget gets spent.

Finally, we keep prototyping and testing through Implementation. In our experience, almost every significant project ‘pivots’ at least a little when you receive feedback on a prototype. Your first idea is rarely the best, and prototyping gives you that information. The prototypes used during Implementation get successively higher fidelity until you end up testing something that is nearly identical to the final product. That typically takes some iterations, but each iteration is well worth the time.

How do you prototype?

Prototypes aren’t a one-size-fits-all solution. Every project is different, and each stage during a project needs various levels of prototyping. We mentioned napkin sketches, Photoshop and InVision above, and those are great examples of both low-fidelity and medium-fidelity prototypes.

Before jumping into higher fidelity models, I think it’s important to reiterate how important the lowest fidelity prototypes are to product design. There is a concept in the UX world called Lean UX. The staples of that concept are that low-fidelity sketches, whiteboard sessions and lightly documented ideation are all more efficient than jumping into (or even doing) high-fidelity wireframes and information architectures. Those high-fidelity documents usually incur a lot of time to produce and become out of date almost immediately after creating them. This is the nugget of gold in this article: People can provide just as rich and insightful feedback on a crappy napkin sketch or a 30-minute whiteboard session as they can for an entirely functional, beautifully designed, finished product. Save yourself the money and show somebody a sketch.

But, I digress. There is also value in high-fidelity prototyping. Once we’ve begun testing with Invision, we can start establishing an understanding of what our audience likes about the product we’re building. We can confidently start engineering some features that have the potential of making it into the final product. In addition to initial engineering, we also use tools like Principle, Framer and After Effects to start adding sophistication, movement, and interactivity to our prototypes. These tools allow us to move things around on the screen, press buttons, hear sounds and watch video so that we can start playing with things. An extra bonus to using these tools is that they all spit out code that can be utilized once engineering starts. By continuing to test these hi-fidelity prototypes, we get closer and closer to eventually landing on things that we’re pretty darn sure we’re going to build. But it doesn’t stop there.

We continue to “prototype” products as we jump into final engineering. At this point, it’s not technically a prototype anymore. It is real, working software that will eventually ship. However, as the build progresses, we continue testing with users so that we can watch them break what we’re building, fix what’s broken, and do it all over again until the final product is ready. It’s important to note that ‘final’ does not mean ‘perfect’. If you wait for perfect, you run the risk of getting beat to market by a slightly less than perfect competitor, and you will lose your edge. Moral of the story? Prototype, prototype, prototype, then SHIP.