Why I Prototype to FailWhy I Prototype to Fail

Great designers don’t imagine, they iterate. A veteran shares his prototyping journey.

avatar

Steve Ruiz

February 13, 2020

Why do designers wear black? It’s more than just fashion—at least, it used to be. The answer has to do with light and color. The lighter a surface is, the more color it reflects, and the colored surfaces will reflect colored light. Wear a bright pink shirt, stand next to a white wall, and the wall will look a little pink too. This phenomenon is called a ‘color cast’.

Before digital screens, designers relied on even, white light in order to see colors accurately. Wearing black was a way of preventing color casts from their clothing which could taint their perception. And so, design fashion: white lights, white walls, black clothing, Mies van der Rohe chairs, Kraftwerk, and all the rest.

But why did it matter? To design is to make decisions. Lots of decisions. A designer will test, try and tweak, and then tweak again based on the result. The final product is the product of thousands of micro-iterations and critical judgements each a small step toward what feels right.

The quality of those decisions comes from the quality of the feedback. It’s why sound engineers invest in studio headphones, why industrial designers refer to material libraries, and why designers used to wear black… but now spend on digital color calibration instead.

I prototype to learn

When I first started designing interactive products, I relied on prototypes as a way to hack around my inexperience. Sure, I could make something look good. I just couldn’t be sure that it would actually work.

As I understood it then, an experienced designer was able to imagine how their designs would work and feel. They could model the experience in their mind as they designed it. I couldn’t do that yet, so I did the next best thing: I built those models myself.

Traditional design tools could only take me so far. When it came to designing flows, placing controls, or transitioning between states, I could only guess at what would work. The output might look polished and realistic, but I knew that those parts of my design were effectively undesigned.

With a prototype, however, those guesses could become design decisions. I could test and tweak my design’s user experience until I was confident that the interactions worked, all possible states were covered, and the transitions made sense. Despite my inexperience, I could hand off something with confidence.

I prototype to take risks

There’s a trick to guessing: if something has worked before, then it will probably work again.

Before I found prototyping, my designs were bound by what I’d seen in other successful apps. I could create, but I couldn’t be creative. I couldn’t take risks because I had no way of knowing how they would resolve.

However, once I began to prototype, my boundaries were only limited by what I could prototype. If I could build it in my prototyping tool then I could be confident in handing it off. I began experimenting. The more I learned about prototyping, the further I could push my designs. My ideas didn’t always work, but when they did work, I could hand off designs that were better for our product and our users, and that I could trust would work.

I prototype to fail

Part of becoming a better designer was learning that what felt right to me might feel right only to me.

Once, while designing a landing page, a second designer and I came up with several beautiful interactions involving scroll effects. Labels would slide in and out as images transitioned. At one point, as a user scrolled, an image of the app’s interface would zoom out to reveal the same scene inside of a mobile device.

This idea moved from sketches to mocks to a prototype. The prototype was a technical challenge, but I bravely engineered a solution somewhere between a page interaction and a scroll. We polished and perfected it. And when we tested the idea with users, it flopped.

One user got motion sickness, another tried interacting with our image of the app’s interface, and, to our horror, more than one user never scrolled.

Lesson learned: we’d built a prototype, sure, but we had built it for ourselves. It wasn’t a waste of time though. Our user test had saved the company from the folly of implementing our design and spared our users from having to use it.

I’d seen a design go wrong before, but never one with so much investment. I promised myself that next time I would save the ‘high fidelity’ work until after the first test. Since then, my prototypes have looked clunkier, arrived earlier, and have led to much less creative heartbreak.

Enjoying this blog post?

Sign up to our email list to get the best of the Framer blog sent directly to your inbox.

Designing with prototypes

That idea I had when I started to design, about how great designers can just imagine how their design will work? I don’t believe that any more. If you ask me, user interaction doesn’t fit in the mind.

So here’s the industry pitch: just like in any other kind of design, as digital designers, we need to experience what we’re designing as we’re designing it.

If we’re designing interactive experiences, this means designing them in a way that allows us to experience those interactions. It means designing with prototypes.

While my designs might not have the same problems as they did when I was just getting started, they’re still my best guesses. I’ll always be crossing that river by feeling for stones, bumping and stumbling toward a final design. But with prototyping, at least I have a smarter a way to stumble.


High-fidelity prototyping doesn’t have to be hard. Learn more about Framer Web.

Like this article? Spread the word.

Sign up for our newsletter

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.