Prototyping digital products: an overview

Judith
4 min readDec 20, 2019

--

Prototypes are at the core of human-centered design. They are a valuable tool to collect feedback from users which can help create a product that better suits them, and they can help uncover users’ needs and behavior.

A prototype is a tool meant to simulate what is like to use a product or service. This means that even the simplest prototypes must have a certain degree of interactivity.

The shape a prototype will take depends on who will be interacting with the prototype, what you already know about your users and what you’re hoping to find out, and finally how much time you‘re willing to invest. When creating the prototype, you should remember there’s no need to prototype the whole experience: the best approach is to prototype the workflow that will help test our hypothesis.

The most common types of prototypes are:

Paper prototypes

They only require paper, pens, and tape.

Although they’re quite simple, you’ve to find ways to make the elements on the paper be interactive so the user can manipulate them just like they would do with the elements on a screen. This requires a certain degree of creativity.

They have many advantages: they can be created very fast, can be easily modified, they’re cheap and the materials needed to create them are easy to find.

On the other hand, the simulation can feel very artificial and the feedback obtained can only be very superficial (information architecture, screen flow)

This video is a great example of a good interactive paper prototype: https://www.youtube.com/watch?time_continue=16&v=GrV2SZuRPv0&feature=emb_title

Paper prototype by Sharon Monisha Rajkumar. Source: https://sharonmonisharaj.com/power-paper-prototyping

On-screen prototypes

With on-screen prototypes, participants and team members use digital input mechanisms to interact with the prototype. This means you get more information about how users with your product.

On-screen prototypes have a ranging degree of fidelity: low, medium and high.

Low-fidelity prototypes are wireframe-based and very far from a finished product, but they can still provide a good sense of the workflow length and can be useful to evaluate the information architecture. There are many tools you can use to build your prototype based on a library of UI widgets, and since they’re not very detailed they’re easy and fast to create. They allow the team and stakeholders to get a feel of how the final product will work and the chances of designers getting attached to them are low, which makes it easy to discard or modify them.

Low fidelity on-screen prototype by DreamDesign Studios. Source: https://www.fiverr.com/jordan774/design-initiative-wireframe-for-your-mobile-app

Middle and high-fidelity prototypes are more detailed than low-fidelity prototypes. When users interact with them, they encounter a level of interaction, visual design, and content similar to the final product. These prototypes, in addition to being helpful in evaluating information architecture and the workflow, help evaluate visual design, brand elements, and user interface interactions.

Go Gram high fidelity on-screen prototype by Elliot Mayer. Source: https://www.elliotmayer.com/portfolio/go-gram/

Coded and live-data prototypes

These are so close to the final product that the user is usually not able to distinguish them from a final product.

Coded (or static data) prototypes look and function like the final product but can’t handle data input, processing, and output. In contrast, live-data prototypes accept input of real data and can process it to show the right output.

These are the most realistic simulation of the final product you can create, and although the code can potentially be used to produce the final product and existing code assets can be used to create the prototype, they can be very time-consuming and difficult to update.

Thank you for reading! Please let me know what kind of prototypes you use more frequently and their pros and cons.

Sources:

Lean UX by John Seiden & Jeff Gothelf

The Beginner’s guide to prototypes, Steven Douglas <https://www.justinmind.com/blog/the-beginners-guide-to-prototypes/>

--

--