Prototype Your Prototypes

Prototypes are abstractions of solutions. A prototype is any approximation of a design solution with the goal of gaining understanding of the design problem and whether the approximated solution is a good fit. They do not have all the qualities of the final form, but have enough to facilitate learning.

Prototypes are anything that helps you learn about the fit between a design solution and the design problem.

Software is a Prototype

With this definition, prototypes are a fairly generic and broadly-applicable concept. They run the spectrum from sketches on a white board to high fidelity, interactive models.

Software is the ultimate prototypical form because even finalized and shipped products are not finished but merely an approximation of the ideal design solution. When building software, it’s prototypes all the way down.

Prototyping as Process

Prototyping as Process

Prototyping is useful any time you want to learn about the fit (or misfit) between a proposed design solution and the design problem. But, most software products go through a similar flow of prototyping, so it can be helpful to think of prototyping as a process—maybe even the defining process of software building. With each type of prototype, the goal is to learn, so you will take the form created and test it. Test it with your coworkers. Test it with customers. Test it against your own design intuition.

Sketches

When approaching a software solution to a design problem, you will usually start with some sort of sketch of the UI. This is a a very rough approximation of what the UI could be. From pencil drawings on a napkin to high fidelity mockups, sketches are all about quickly iterating on UI layout, screen organization, data needed, color exploration, etc.

Sketches are most useful as a form for discussion within the product team. They help expose gaping holes in any assumption about layout, flow or language. The discussions within the product team around sketches also starts to create a shared language for talking about the problem and eventual solution—an important foundation for later prototyping.

Sketches in Motion

Once static sketches have been explored, it’s time to put these sketches in motion. Digital product design is increasingly about transitions, animations and movement. Gone are the days that static screen mockups suffice as a final approximation; modern software demands thoughtful motion, which necessitates incorporating it into your prototyping process.

The fidelity and effort expended on motion prototyping depends on the type of motion desired. If it is a well-understood or common transition, simply using words might suffice (like “slides up” or “swipes right”). More complex or novel forms of motion will require more iterating using tools like Flinto or Proto.io or even writing some code to test feasibility.

Real Data

Static sketches are now in motion, so you feel good about the UI foundation you are building. A useful thing to prototype next is real data flowing into (and out of, if applicable) the UI. Get rid of the placeholder copy and work to get your hands on real-world data. This is crucial for learning if the UI will stand up to your content assumptions about string lengths, presence or absence of data, and other anomalies you may not be aware of.

At this stage of the prototyping process, the design is starting to reach final form. Final visual assets or colors may not be settled yet, but you should feel confident taking this to customers and outside parties to do simple usability testing. Bonus points if you can get your UI to show data relevant to the person participating in your test because that will give much more useful feedback and insight into your progress.

Shippable Form

The last prototype in this process is assembling the work up to this point into a shippable form. Put the finishing touches on error handling. Make decisions about how to handle data exceptions or anomalies discovered when prototyping real data flow. Bring together the production-ready visual assets. Do some more usability testing or customer interviews with your assembled prototype and if you feel ready, ship it to your customers.

Rinse and Repeat

Prototype Hierarchy

You have now prototyped your prototypes by using each step in the prototyping process to build the next prototype—the blue blocks in the above diagram. Your final prototype is living in the real world gathering more feedback and learning. Use this prototype to continue the prototyping process.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Kevin Smith

Kevin is a product engineer focused on designing delightful products for everyday life. He lives in San Francisco with his wife and son. Follow him on Twitter.

Comments

One comment on “Prototype Your Prototypes