Illustration by Simona Toader
Prototyping is a process in which design teams ideate, experiment with, and bring concepts to life, ranging from paper ideas to digital designs. At its core, a prototype is an early sample of a design that allows users to visualize or interact with it before a final product is developed. It is the fourth step of the design thinking process, followed by usability testing.
A key characteristic of prototyping is that prototypes are created without a single line of code. There are plenty of prototyping tools to help designers link together artboards, creating an interactive, clickable experience without the need of a developer. This helps decrease costs, as designers can create clickable prototypes without the need for development efforts. In other words, it’s smart to test your prototype with users and stakeholders in order to iron out any mistakes before you invest the money, time, and human capital on actually engineering a design solution.
It is important to note that prototyping can be used at various stages of the design process. It is a necessary tool to validate ideas, whether it be at the beginning stages of the design or halfway through a design. Testing prototypes lets you benchmark progress and usability before moving forward with development.
Reasons for prototyping
Prototypes are an interactive experience created without code to help test out concepts before launch. With prototyping, designers can explore alternative design solutions with zero development effort. They can also test their prototypes on real users to discover usability issues before releasing a final product. This process helps designers save a lot of time, money, and effort throughout the entire design and development lifecycle.
Some reasons to prototype include:
- Exploring new ideas. Prototypes allow designers to experiment with various ideas and solutions. They give the designer freedom to test multiple potential scenarios, while adjusting along the way to optimize the usability of the end product.
- Discovering problems. Prototypes are a great way to further understand the problem the user is facing. They empower designers to better understand the product or system by literally engaging with them and observing what works and what doesn’t.
- Identifying usability issues. Creating prototypes for users to interact with is a great way to identify issues surrounding the usability of your product. This will allow the designer to make necessary changes prior to development.
- Engaging stakeholders and end users. Prototypes allow designers to engage with stakeholders and end users, which gives them the chance to become involved in the process and feel a sense of ownership. This will potentially aid in their “buy-in” and help push the concept forward faster.
Selling new concepts. Prototypes are a great way to inspire, motivate, and ultimately “sell” design decisions to internal and external stakeholders. They are also a great way to inspire markets towards radical new ideas and processes, as they require little effort to exemplify something potentially extremely costly to produce.
Team members sitting around a table creating a paper prototype together. Image credit Adobe.What are different types of prototyping?
Prototyping can range in method and technique, which is often referred to as low, medium, or high fidelity. Fidelity refers to the level of detail and the functionality of your prototype. Typically, the higher the fidelity, the more effort and cost it takes to create. Different scenarios call for different levels of fidelity, and there are pros and cons of each. Best practices include knowing what each includes, as well as how and when to use them.
A mobile wireframe in low, medium, and high fidelity. Image credit Justinmind.Low-fidelity prototypes
Low-fidelity prototypes—often referred to as paper prototypes—are the quickest, lowest-effort prototypes one can create. They represent a simple, incomplete version of your product, and are a great way to test high-level concepts prior to investing more time and energy in the design. Low-fidelity prototypes also allow you to gather feedback and test concepts during the early stage of the design process. Since they are created with pen and paper, designers are enabled to test different concepts easily, allowing them to adjust accordingly prior to jumping into digital wireframes.
Pros
- Quick. Paper prototypes are easy and fast to create, and they are great for brainstorming various ideas and concepts. Additionally, you can make changes and updates on the fly.
- Inexpensive. Low fidelity prototypes are cheap in both labor and materials. Pen and paper are common office supplies, and since they are quick to create, labor costs are significantly low.
- Empathy building. Paper prototypes are a great team-building exercise, resulting in increased involvement, ownership, and empathy towards the users and product.
- Honest user feedback. During usability testing, a user is more prone to giving their honest feedback if they think you did not spend a lot of time on it. Users tend to be more open with their feedback towards paper prototypes opposed to higher fidelity prototypes.
Cons
- Unrealistic. At the end of the day, paper prototypes are a poor substitute for a digital experience. There is a lack of realism that impacts the user feedback, which can lead to false positives.
- False positives. Inaccurate feedback from users due to lack of realism in the experience. Users may “fill in the gaps” in ways that are different than what the designer has in mind, therefore impacting results.
Two people working on a paper prototype together. Image credit Adobe.Medium-fidelity prototypes
Medium-fidelity prototypes are the next level of prototyping. Often referred to as wireframes, medium-fidelity prototypes are digital and created in greyscale. They limit the design to user flows and information architecture while omitting branding elements, photos, and logos.
Limiting the prototype to user flows and information architecture in greyscale allows the user to focus on the fundamental aspects of the design, without the potential of getting distracted by colors, photo placement, and logos. This enables the designer to test the core usability of the product prior to beautifying the product.
There are great wireframing resources—including wireframe examples and templates online. But first, let’s discuss wireframing pros and cons.
Pros
- Increased realism. Since medium prototypes are digital, they are more realistic experiences for user testing. This will impact feedback, since the prototype resembles the final product more than paper prototyping.
- Quick iteration. Medium-fidelity prototypes allow for faster iteration than adjusting a high-fidelity (or nearly complete) product.
- Lack of fine details. They are a great way to test an idea before getting too invested and bogged down in the fine details.
Cons
- Nothing will beat the final product. Although low- and medium-fidelity wireframes are cheaper and quicker, the final product will always be the best representation of your work to gather user feedback. Lacking visual elements (e.g., photos, text, and colors) could impact the overall experience and feedback you receive.
Medium-fidelity wireframe showcasing the digital interfaces in greyscale. Image credit O’Reilly.High-fidelity prototypes
After several rounds of testing with low- and medium-fidelity prototypes, it is time to invest time in rendering your design in high fidelity. This is when the designer brings in branding, photos, copy, colors, and animations to bring their experience to life. As your design nears its final stages, it is important to test high-fidelity prototypes with users prior to the development phase.
Pros
- Realistic experiences. Users engage in experiences that mimic the most accurate final product, yielding more accurate and applicable results. Testing a high-fidelity prototype is the best way to predict how users will react to it in the marketplace.
- A final test. High-fidelity prototypes are a great way to test your final product prior to entering the development phase. Testing your final concepts will allow your team to enter the development phase with confidence, as they know they are creating a usable, desirable product.
- Communication tool with development. High-fidelity, interactive prototypes are a great way to collaborate with developers, giving them a clearer idea on how the product should behave. This really helps in the development handoff process.
Cons
- Expensive to create. High-fidelity prototypes are the costliest, as they take the most resources to create. Therefore, as a designer, it is important to validate your concepts in lower fidelity prior to jumping into high fidelity.
- More time to create. Due to the inclusion of fine details, high-fidelity prototypes take longer to create. Therefore, when testing a new concept, it is important to begin in lower fidelity.
- Hesitation on user feedback. When a user thinks you have spent a long time on something, they may “settle” and not speak up as much as they would when interacting with a paper prototype.
High-fidelity wireframe showcasing a final design with colors, branding, and other visual elements. Image credit Bootcamp.What is the website prototyping process?
Prior to diving into website prototyping, you must have identified your users, defined their problems, and ideated a proper solution to solve their pain points. Once you have these steps complete in your design process, you can begin prototyping.
Here are the steps of an effective website prototyping process.
- Select features to test. Select the key features you want to test on users. It is impossible to effectively test all features of your product in one session. Therefore, pinpoint key features you wish to spotlight in this discovery session.
- Create your design prototype. Next, create your website prototype to exemplify those key features and flows identified in the previous step. Creating a prototype to exemplify all features could take a substantial amount of time and be unnecessary. Instead, create a prototype to highlight the key features you wish to test. You can note any incorrect clicks or taps on their journey to get there.
- Test your solution. The next step is to bring your design to users, partners, and stakeholders. Observe and record them interacting with your product, taking note of any usability issues in the current design. Usability testing and prototypes go hand in hand.
- Make updates to resign. After your testing session, synthesize your feedback into key takeaways and update your designs accordingly.
- Repeat the process. Finally, bring your updated website design back to users and repeat this process.
Now it’s your turn
Now that we have gone over prototyping, it is your turn to use these skills to create actionable plans that enhance your website design process. Whether it be to test a new concept, validate an existing idea, or influence a design for the future, website prototyping allows you to fine-tune your design and gain buy-in from important stakeholders. It is the most powerful tool in user experience (UX) design to get an idea across without the costs and resources from the development process.