A prototype is an early sample of a product, whether it’s a digital or physical product. Prototyping is a fast and inexpensive method that allows designers to test and validate design ideas early in the project lifecycle. In this post I’ll focus on digital products and highlight the different techniques and tools of prototyping, as well as how prototyping improves the user’s experience.
What is a prototype?
A prototype can be defined broadly; the most basic definition of a prototype is “A simulation or sample of the final product which is used for testing prior to launch.” (1)
A prototype can be anything, from a simple drawing using pen and paper to an interactive prototype.
In UX, prototypes are typically created through a mix of Sketches, Wireframes, or Mockups depending on the project timeline and where you are in the design process.
A sketch is a simple drawing often using a pen and paper, Sketch works best in the early stages of the design when designs are starting to take shape.
A sample of Home24 Cart Page Sketches
Wireframing is a way to design a website at the structural level. It is commonly used to layout content and functionality on a page. Visually, the wireframe can be basic using simple lines, boxes and grey colours, or it can be more concrete using colours and different font weights. (2)
A Sample of Home24 Cart Page Wireframe
Is a visual design including color, hierarchy, and iconography, a mockup looks like the final product but doesn’t represent the interaction design of the interface.
A Sample of Home24 Cart Page Mockup
This type of prototype includes interactive behaviors occurring on the user interface that change the state of the design or the flow.
A Sample of Home24 Cart Page Add to Wishlist Feature prototype
How does prototyping help user experience?
The integration of prototyping early in the project lifecycle helps improve the product quality and achieve business goals. With prototypes, you will:
- Limit the expenses of development.
- Test out design concepts.
- Collect feedback quickly and easily.
- Refine the usability of the product.
- Validating new product ideas.
“Prototyping limits the risk of delivering a product that doesn’t solve the right business problems or user needs.”
Diane Cronenwett – principal interaction designer at Intuit.
Testing and evaluating prototypes
The main goal of testing a prototype is to find out whether a design solves users’ problems and if it helps them to complete their task easily.
In general, the flow for testing and evaluating a prototype follows the same basic format. To make sure you get the right type of feedback that will be useful for you, you need to set up a test correctly. A few considerations from Diane Cronenwett:
- A facilitator or a UX researcher who is familiar with the prototype and the design goals is needed to ask the right questions when running the test.
- Creating a guide or scenario about the questions that will be asked about the design.
- Establish a clear goal of what needs to be tested. For example, showing the user simple sketches might be enough to get some feedback on the concept.
- It is necessary to have the project team and the designer to observe the session when interviewing the user to hear the feedback directly.
The prototype is all about testing the design, and the tool that you use will help you get the answers you need. There is no perfect tool for prototyping; it depends on the timeline and what needs to be tested, as well as what stage you are in product development.
As I mentioned earlier, creating a simple sketch using pen and paper is a widely used method to test ideas in an early stage of a project. Creating a paper prototype is a great way to collaborate in a team where anyone can participate.
There are a lot of tools and materials to use when creating a paper prototype. Dan Nessler created a list of materials that might help when creating a prototype:
- Sticky notes
- Print template
A Sample of Paper Prototyping & Testing (4)
Balsamiq is a rapid wireframing tool that helps designers create wireframes quickly to generate more ideas, or iterations. It reproduces the experience of sketching on a whiteboard, by instead using a computer. (5)
Balsamiq App Interface
The Balsamiq App comes with a predefined library containing the common UI elements to help the designer start off with creating a layout. All you have to do is drag and drop!
InVision is powerful prototyping tool used for linking design screens together using hotspots. Creating a design or a Mockup using InVision is not possible so the designer will need to use a different software to design the screens and then upload them to InVision to add animations, gestures and transitions to transform the static screens into a clickable prototype. (6)
InVision App Interface
Principle is a tool for designing animated and interactive user interfaces for web, mobile and desktop. Principle lets designers create designs that look and feel very similar to the final design by providing a toolbox of generic features that can be combined in creative ways to produce a variety of results. (7)
Principle Interactive Prototype (8)
The Integration of prototyping early in the design process is necessary to deliver a good user experience. What tool or method you choose for prototyping is completely up to you. But keep the project timeline in mind, as well as the desired feedback of the test.