Prototypes are early models of a product used to inform future iterations. These early models may or may not be produced using the same methods an eventual product would be. They typically focus on specific characteristics or features of the product they’ll inform, though, in some instances, the prototype may eventually become the final product.
In writing, you might consider an outline a prototype for an essay. In art, you might consider an initial sketch a prototype for a sculpture. However, in the world of digital products, ‘prototype’ typically carries a specific meaning. In most cases, prototypes for digital products are interactive representations of a product or portion of a product that may or may not eventually be built.
Where prototyping fits in the design process
Many UX resources heavily emphasize testing prototypes, which makes sense — that is something prototypes are uniquely well-suited for. However, prototypes can be useful outside of evaluating designs with potential users.
Converting knowledge
One way of thinking about how an organization (or group) develops and integrates knowledge is through the SECI model, originally developed by Ikujiro Nonaka in 1990 and later refined by Hirotaka Takeuchi.
The SECI model includes four dimensions of knoweldge conversion:
- In the socialization phase, the group shares and collects information (e.g., stakeholder or customer interviews, ideation exercises, etc.)
- In the externalization phase, the group produces models and other documentation for sharing (written documents, images, sketches, etc.)
- In the combination phase, the group sorts and combines and processes information to form new knowledge (e.g., journey maps, wireframes, etc.)
- In the internalization phase, individuals within the group have access to the shared collection of codified knowledge (e.g., wikis, specs, etc.) and integrate it into their work
Like any other models created during the design process (journey maps, wireframes, etc.), prototypes are valuable because they enable us to externalize and combine information. In each case, externalizing information is helpful because it can make concepts easier to think through, easier to communicate, and easier to evaluate and refine as a result.
Externalizing information
Compare this to writing. I wrote more than one draft for this post because writing clarified the ideas for myself. Writing made the concepts I wanted to share easier to interrogate. Writing also made it possible to communicate these ideas with you, the reader. Finally, sharing these ideas makes it easier to improve them — through my revisions and your feedback if you’re so generous as to comment.
In these ways, prototyping (and any other design artifact) is no different.
What makes prototyping unique
Given prototypes are models for future iterations of an artifact, it’s no surprise the characteristics of prototypes for digital products closely reflect digital products themselves. So what makes up digital products?
Here are 4 components of digital products(adapted from NN/g’s area’s of prototype fidelity):
- Information — content, and data
- Structure — how that information is organized
- Presentation — how that information and its structure are displayed
- Navigation and interaction — how someone moves through and controls each of the above
Other design artifacts might imply something about each of these dimensions but are typically focused on a subset. Prototyping uniquely describes the interplay between humans and systems — including information, structure, presentation, and interaction — in a concrete way that more closely reflects how a person would experience that end product.
Users won’t experience your product through sketches on a wall, your content model in a spreadsheet, or behavior described in flow charts. Of course, these are all valuable tools for abstraction, but an advantage of prototyping is that it makes concepts concrete.
Facilitating thinking
Inside of your head, ideas can be perfect. You may be unaware of foundational issues. Even those issues you’re aware of can be downplayed and smoothed out. Your attention is free to wander from idea to idea without scrutiny. Big problems don’t seem so big.
Grappling with complexity
Thinking of products as a collection of single pages, or even designing products using a series of single-page mockups, can result in essential connections between pages being lost. Setting aside the relationships between pages, consider all of the interactions within a single page in tools like Slack, Gmail, etc.
Prototyping can help you break down complex interactions — perhaps interactions that require specific sequencing of events or have many possible states given some conditions. That complexity would be reflected in the code necessary to produce highly interactive products. That difficulty to design and complexity to implement equals greater risk and higher potential cost if the behavior isn’t correct or the design isn’t successful.
Some concepts are less ambiguous or interdependent. In those instances, it may not be necessary or advantageous to prototype out a concept. It might be straightforward enough that static mockups and other artifacts are effective for thinking through any implications. For anything more complex, prototyping can be an invaluable tool for thinking through how a system will need to behave.
Visualizing potential futures
Another way prototyping benefits thinking is that it helps to envision how people will interact with the product in concrete terms. A core challenge to designing digital products is bridging the gap between humans and computers through an interface. Ideally, the people using your product don’t need to know or understand, technically, what is happening under the hood to benefit from the work the system does. That interface often abstracts much of the underlying complexity. Prototyping can serve as an early check — does this abstraction make sense in context?
Facilitating communication
Clarifying designs through stories
It’s often unrealistic to prototype an entire product and all of its potential states, which requires a designer to focus on prototyping the most critical interactions — typically through a specific scenario or collection of scenarios. These scenarios serve as natural breaking lines, focusing on what’s most important to capture.
When viewed through the lens of a scenario, the prototype can help clarify what users are trying to do and how the proposed solution helps them accomplish that end. Sharing ideas in this format makes it easier for others to engage with the problem and evaluate whether the prototype solution is successful.
Making the implicit explicit
A sketch for a screen might include a menu at the top of the page, which tells you something about how someone might navigate a product, but we rely on our understanding of how that menu works based on what we know about all of the menus we’ve seen before. It may behave the same way, but only the person who sketched that out knows for sure. Prototyping can prove or disprove assumptions — even those we don’t realize we’re making.
This level of clarity can be critical when talking about how feasible an approach to a problem is. Prototyping can help you and the people you work with identify potential risks sooner.
Facilitating learning
Reflecting the context of use
Beyond learning through conversations with colleagues, prototyping makes it possible to evaluate ideas with potential users more effectively than you could with other types of design artifacts. Interacting with a prototype in accomplishing a task, in-context is far closer to how someone might interact with your product in the real world. That level of interactivity makes it easier to evaluate.
Having a clearer idea of how the design concept works for yourself also makes it easier to evaluate. If you don’t have a clear picture of the concept, it’s exceedingly difficult to say whether it succeeded or not (and why). Did the idea fail because it didn’t account for a specific need, or was that capability implied but not discoverable? It might not matter much to a potential user, but it does to you. The solutions to either of those problems may look very different.
Iterating quickly
Because it isn’t necessary to make a prototype using the same methods you might eventually use to build the product, you have a tremendous amount of flexibility in the ways you choose to balance realism and speed. As a result, you can quickly create a reasonably convincing prototype using any combination of tools available to you.
You could use Sketch, Invision, and Principle to get a reasonably realistic prototype if complex state, non-linearity, or real-time data aren’t priorities. If it is essential for the prototype to handle some of these complexities, you could use Axure or Framer. Even if you choose to build a prototype using code, not needing to prototype within a given environment can still cut time. I’ve gotten a lot of mileage out of spreadsheets and either Figma or a combination of Axure, iframes, and Codepen (if Figma wasn’t enough).
Reducing risk
Evaluating your ideas more effectively while still quickly iterating makes prototyping an excellent tool for learning. Learning fast is critical to reducing and responding to risk making your ideas more likely to ship.
Wrapping up
- Prototypes are early models for an artifact used to inform future iterations.
- Like other design artifacts, prototypes are valuable because they enable us to externalize information.
- More so than other design artifacts, prototypes uniquely describe the interplay between humans and systems, including information, structure, presentation, and interaction.
- Beyond learning, prototyping can be a valuable tool for thinking and communicating.
