In “Design Thinking”, all roads lead to prototyping and testing. The whole process is biased towards action. The ultimate goal is to prototype fast, prototype often, and test it on real users.
Rapid prototyping frees practitioners to embrace failure as a means of learning–learning about the shortcomings of the mock product and making changes. You don’t get things right the first time, innovative breakthroughs arise from failure.
Fail fast and often, then go back to the drawing board and make improvements where you failed. Prototypes go through multiple iterations where feedback from users is incorporated and changes are made to come up with an effective final solution.
In short, during prototyping you want to test the feasibility of your ideas and see if they can become the solution. You want to create an experience, get feedback, use the feedback to constantly make changes that improve on the prototype until you arrive at a better solution.
You are building for the end user. You want to create a scenario where the user will handle the prototype and experience it by themselves. In this stage, complete involvement of the end user is the most crucial to success.
What is a Prototype?
A prototype is something the user can experience. It’s a simple, scaled down, cheap early version of the product. It can be a storyboard, paper cutout, cardboard, digital mockup, miniature model, a short skit where you act out an experience.
Build a prototype and get it into the hands of users to ensure early and regular feedback. The team will observe, measure, record and judge how the users interact with the prototype.
The users will voice how they feel and think about it, their likes and dislikes of the design, functionality and usability, tell the team what is working and what is not, point out the hidden issues.
Prototyping helps the team to ask more questions, redefine the problem, make choices that improve the product and, as a result, improve the user experience.
It also allows the team to pursue different ideas without committing to a direction early. Fail quickly and cheaply by committing less time and money up front.
Guidelines for Prototyping
- Don’t procrastinate. Start building immediately.
- Build fast. Don’t spend too much time on a single prototype. Don’t get emotionally attached to a prototype by spending too much time building it.
- Build with the end user in mind.
- You want to engage the user. Build to create an experience. Build something they can see and touch and feel.
- While building imagine yourself as the user. Think about questions the user will ask. Identify what is being tested. You want to get meaning feedback.
- Break the whole prototype down into different components. These help you prepare questions you will ask the end users after they experience the prototype.
Once You’ve Built the Prototype
- Bring in the end users and have them experience it.
- Make them speak about their moment-by-moment experience so you can capture every small detail of how they are experiencing it.
- Actively observe and enthusiastically engage the user throughout their experience.
- When the experience is over, follow up with the user who had the experience with a set of questions. The questions should be prepared beforehand.
Types of Prototype:
Prototypes can be classified into the following representational categories.
Functional prototypes are designed to imitate the functions of the actual product as closely as possible. They don’t have to look like the actual product–they show the inner workings.
For example: creating a backend prototype which doesn’t necessarily work on the frontend of the website.
Display prototypes focus on the look and feel of the product instead of its functions. These prototypes represent the look of the actual product.
Miniatures are smaller versions of the product focused on both the functional aspect as well as the display aspect.
From a usability perspective, the prototypes can be categorized into:
Throwaway prototypes are models which are eventually discarded. They only show what an actual product can do. Throwaway prototypes are also called “close ended prototypes”.
Evolutionary prototyping involves building a basic prototype that can further be improved and built upon to form an actual saleable product. This avoids wastage of resources.
The fidelity of a prototype is the level of completeness, detail and realism. How it captures the “look and feel” of the product itself.
The level of completeness can be categorized as follows:
Low Fidelity Prototype:
This is quick and easy to make, a very rough representation, less costly, perfect for the earliest stages where you are exploring different variables to determine which are relevant to the problem you are trying to solve, and also the direction the solution should take.
Low fidelity prototypes include: flow charts, paper models, storyboards.
Medium Fidelity Prototype:
Medium fidelity suggests greater detail, and therefore slightly higher costs than low fidelity prototypes.
They focus on refining fine details established in the earlier low fidelity stage. Those that do not contribute to the solution are discarded.
Medium fidelity prototypes include: wireframes.
High Fidelity Prototype:
A high fidelity prototype has the appearance of, and functions like, the real product that will be sold to customers. It has all details and content of the real product. It’s expensive and requires more time.
Prototyping and testing go hand-in-hand. Prototypes are simple, scaled down versions of the main product. Before wasting resources by sinking money into production of a product, prototypes should built and tested. They should be built and tested fast. They should be built with the user in mind. Feedback from users is incorporated to improve upon the functionality and usability. And remember: they don’t have to be expensive.
More Useful Tutorials
How to Decide Between Static, Lo-Fidelity and Hi-Fidelity Prototypes
Storyboarding vs. Prototyping: When to Use Each
3 High-level Approaches to Prototyping by Example
13+ Prototyping Tools for Web Designers
A Beginner’s Guide to Wireframing
25+ Must-Have Website Wireframe Templates for Your Design Library