Prototyping
What is a prototype?
A prototype is a simple visualization of the product to test the concept.
There are thousands of new ideas that originate every day to solve a particular problem. Executing an
idea can be a long and expensive process. Alongside this, no one can, with absolute certainty, say that
their vision will work or that users will ultimately want and use their products. Sometimes even great
ideas fail because they are overly complicated to use or understand.
Agile development pivots around faster time to market, learning, integration, and adaptability. A
prototype is built on the principle of failing fast, freely experimenting, and learning while trying to reach
the desired result. Finding failures propels learning and optimizes solutions to reach your goal.
What is the primary purpose of prototyping?
Teams build prototypes with varying degrees of fidelity to capture design concepts and test them on
users. You can refine and validate your designs with prototypes to ensure that you are building the right
thing your user will use, without wasting time and resources. Because of this, prototyping is a
cost-effective way to learn from failure, promoting innovation and creativity.
In the product discovery phase, it’s plausible that the product team has numerous compelling ideas.
However, there are many initial uncertainties (e.g., technical feasibility, seamless process fit, etc.). The
best way to avoid letting uncertainties drive the decision is to test the concept and learn about the
possibilities. Prototyping provides an opportunity to test the wildest, craziest ideas, and decide whether
to drop them or push them forward.
What are the 4 methods of prototyping?
You can select different methods of prototyping based on the need and the goal of the insights gained.
1. Feasibility prototypes
To test the technical possibility of the concept. The feasibility prototype is built with a precise granularity
to the proposed feature. Next, the development team creates a high-level architecture description and
writes enough code to test the technical challenges and possibilities of the concept.
This prototype then serves as a ground for engineering the entire product. A feasibility prototype is
usually created while building new algorithms, new approaches, or new structures to test attainability
and push boundaries
2. Low-fidelity user prototypes
To test the usability of the flow. Low-fidelity user prototypes are most like wireframes created in tools
like Figma or Invision by the UX/product designers. This prototype aims to identify any user issues early
on and test how the feature works and fits in the entire process
3. High-fidelity user prototypes
A realistic-looking prototype that takes a bit more time and resources, but ensures stimulation per the
final product. These prototypes are to test concepts that are non-negotiable but can be adapted in a
better way.
For example, when companies wanted to try virtual reality before people knew about VR, they couldn’t
explain it to people with wireframes and sketches and get their feedback. Instead, they had to develop a
high-fidelity user prototype with the goal of testing whether the user would like the product.
4. Live data prototypes
A prototype embedded with analytical tools to collect live data and actions from real users. Live-data
prototypes help when you have a product and want to see if the customer will be interested in the new
feature.
For example, if you want to include a virtual tryout feature for your shopping app, you can release a
designed page explaining the new feature and ask the user to subscribe if they want to use it. You add
the tracking code to the design and release it to a few actual customers (beta testers) to test the
concept’s likeability. This way, you get insight into your idea, making it clear whether it’s worth the
investment
5 ways to create prototypes
Here are five of the most common ways to build out a prototype.
More great articles from LogRocket:
o
How to implement issue management to improve your product
o
8 ways to reduce cycle time and build a better product
o
What is a PERT chart and how to make one
o
Discover how to use behavioral analytics to create a great product experience
o
Explore six tried and true product management frameworks you should know
o
Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help
inform the type of content we create and get access to exclusive meetups, social accreditation,
and swag.
1. Wireframes
As agile ways of working progress, many tools are introduced to help with the process. Similarly,
numerous tools are available to create simple prototypes and tests. Some of these tools are so intuitive
that anyone, even on a beginner level, can use them to create a simple wireframe to test their ideas.
Figma and Invision are two user-friendly tools that can be used with many things pre-structured
2. Slides
A prototype created with slides with some shapes, colors, and texts. One can make a few design
concepts on slides and present them to stakeholders for a common understanding. As the famous saying
goes, a picture is worth a thousand words. In the early stages, when there is a need for internal buy-in,
the best way to present a concept is to create some basic designs in slides. It is easier to sell and bring
people on the same page while showing some pictures instead of plain text and charts
3. Sketch on paper
A fundamental handmade design with pen and paper. An illustration prototype can be used in a test
format called guerilla testing. It’s the simplest form of testing to validate high-level ideas and understand
potential problems. This test can be done anywhere on the street, in a mall, or wherever you find your
target group
4. Interactive frontend
A minimum coded frontend where the user can interact with the design, but the response is predefined
and not dynamic from any backend. This prototype helps the development process to identify the flow,
allowing the developers to identify the technical solution and needs early on. You can also use this
prototype with the end user to identify problems with the flow (e.g., if the user struggles to navigate
your app to fill out a form for a reclaim request.
5. Conceptual videos
Videos are usually created to generate interest and demonstrate how exceptional the new product will
be. The purpose of a video prototype can be to get buy-in, potential investment, or validation.
Conceptual videos focus on vision at a high level to create anticipation. This prototype can also be used
as a guide while creating detailed features during the development phase
How to choose the right prototype
As we have seen, there are several different types of prototyping and several options for creating
prototypes. Therefore, understanding which method will suit your product at a given time is essential.
1. Identify the lifecycle stage of your product
There are three main stages in a product lifecycle:
o
Early stage — When the idea originates and there is no existing product or user base
o
Growth stage — When the product expands and gains a substantial number of users
o
Maturity stage — When the product reaches its peak and provides the best possible service to
users
2. Identify the need to create a prototype (how, what, or why)
Your particular requirements will inform your choice of the most suitable prototyping method. The most
common needs while choosing to create prototypes are:
o
Gaining insight into how the existing product and features are utilized and perceived by the user.
The need here is to know the how
o
Validating ideas for a new feature and concept to identify the potential next development. The
need here is to identify what to build
o
Finding potential issues with an existing feature. The need is to identify the why
3. Define the outcome/results from the prototype
The most crucial step is choosing the method and the type of prototype that will help you achieve your
goals and objectives.
Let’s look at a product team’s top goals for the prototype stage:
Validate customer need
The goal is to find the market’s most demanded or accepted feature. This helps to avoid wasting
resources on building things that might not result in the company’s desired effect
Test technical feasibility and set your course
The idea might be fantastic, but the organization might need to upgrade their technical foundation to
achieve the goal. There might be a shift in the market (e.g., artificial intelligence integration), which
requires you to identify the course of action needed for your product to be ready to adapt changes in
technology
Improve your product’s aesthetics to meet customers’ standards
When you already have a product, your users might still need help understanding it or be unsatisfied
with the current iteration. Your goal here is to discover how to make it user-friendly to create the best
experience.
One example of a concrete goal here can be improving the Net Promoter Score (NPS)
Gain stakeholder buy-in
Showcasing for stakeholders allows you to align on the expectation and to receive budget sanctions. The
goal is to sell your idea internally through data backup and testing. It is specifically applicable when the
management is reluctant to change and assign a budget for the need
Guide the development team to build the right product
The goal is to set a vision and provide a guiding principle to everyone involved in development. When
working on details, it’s often easy to lose sight of why. You can build a prototype to keep everyone on the
same page. This can serve as a map for seeing where products deviate from the vision
Conclusion
Prototyping is an effective method to validate ideas, test feasibility, secure buy-in, and create
alignment. There are different prototyping methods that are suitable for different needs.
However, once identified correctly, prototyping can help save time and resources while creating
value early in product discovery.
Prototyping allows us to build the right thing while maintaining speed and avoiding
wastefulness. It also validates with actual data, allowing us to learn and iterate, which helps
bring the needed resources together to evolve new technology and push boundaries.
prototype
noun
pro·to·type ˈprō-tə-ˌtīp
Synonyms of prototype
1
: an original model on which something is patterned : ARCHETYPE
2
: an individual that exhibits the essential features of a later type
3
: a standard or typical example
4
: a first full-scale and usually functional form of a new type or design of a
construction (such as an airplane)
What is Prototyping?
Prototyping is an experimental process where design teams implement ideas into
tangible forms from paper to digital. Teams build prototypes of varying degrees of
fidelity to capture design concepts and test on users. With prototypes, you can refine
and validate your designs so your brand can release the right products.
Remarkable Reasons for Prototyping
Prototyping is the fourth phase of both design thinking and design sprints. It’s an essential part of user experience
(UX) design that usually comes after ideation, where you/your team have created and selected ideas that can solve
users’ needs. In prototyping, you craft a simple experimental model of your proposed product so you can check how
well it matches what users want through the feedback they give. You should consider prototyping from early
on—using paper prototyping, if appropriate—so the feedback you gather from users can help guide development.
The advantages of prototyping are that you:
1. Have a solid foundation from which to ideate towards improvements—giving all stakeholders a
clear picture of the potential benefits, risks and costs associated with where a prototype might
lead.
2. Can adapt changes early—thereby avoiding commitment to a single, falsely-ideal version, getting
stuck on local maxima of UX and later incurring heavy costs due to oversights.
3. Show the prototype to your users so they can give you their feedback to help pinpoint which
elements/variants work best and whether an overhaul is required.
4. Have a tool to experiment with associated parts of the users’ needs and problems—therefore,
you can get insights into less-obvious areas of the users’ world (e.g., you notice them using it for
additional purposes or spot unforeseen accessibility issues such as challenges to mobile use).
5. Provide a sense of ownership to all concerned stakeholders—therefore fostering emotional
investment in the product’s ultimate success.
6. Improve time-to-market by minimizing the number of errors to correct before product release.
Prototyping can help catch potentially costly errors well in advance.
Low-Fidelity vs. High-Fidelity Prototyping
Fidelity refers to the level of detail and functionality you include in your prototype. Usually, this will
depend on your product’s development stage. You can construct one that gives a wide view of the entire
system or subsystem (called a horizontal prototype – e.g., an entire website) or one that gives a detailed
view of just one feature (a vertical prototype – e.g., a checkout process). The level of fidelity you choose
should be appropriate for presenting to users in user testing so they can give focused feedback. Consider
the differences:


Low-fidelity

Example: Paper prototypes

Pros: Fast and cheap; disposable; easy to make changes and test new iterations; allow a
quick overall view of the product; anyone can produce them; encourage design thinking
since prototypes are visibly not finalized.

Cons: Lack of realism, so users might have a hard time giving feedback; hard to apply
results from crude early versions; may be too basic to reflect the user experience of the
finished product; can oversimplify complex issues; lack of interactivity deprives users of
direct control; users must imagine how they would use the product.
High-fidelity

Example: Digital prototypes created on software such as Sketch or Adobe XD

Pros: Engaging—all stakeholders have the vision realized in their hands and can judge
how well it matches users’ needs and solves their problems; testing will yield more
accurate, more applicable results; versions closest to the final product enable you to
predict how users will take to it in the marketplace.

Cons: Longer/costlier to create; users are more likely to comment on superficial details
than on content; after hours of work, you the designer are likely to dislike the idea of
making changes, which can take considerable time; users may mistake the prototype for
the finished product and form biases.
Some designers split high-fidelity prototyping into “mid-fidelity” (where prototypes can have basic digital
interactivity or be slick wireframes) and “high-fidelity” (where they’re far closer to the final version).
Interactive prototypes yield far more useful results in user tests. However, fidelity is relative—a static
mockup of a landing page, for example, is of higher fidelity than sketched cut-outs users can move.
Overall, you should always commit to prototyping with the users’ needs in mind, particularly with an eye
for user flow.