UNIT 5 PROTOTYPE

-Reecha Suryavanshi
INTRODUCTION
 Prototyping is the fourth stage in the Design Thinking
process.
 It's a crucial step that allows designers to test their ideas
and designs before investing significant time and resources
into development.
 We'll explore:
1. What prototyping is
2. Why it's important
3. Different types of prototypes
4. Best practices for prototyping
 A prototype is a scaled-down version of your product
or a simulation that enables you to test your ideas and
designs. It's essentially a sample version that allows
you to validate your concept before full development.

 Key points:
 Prototypes can range from simple paper models to
fully functional digital versions
 They allow you to test your product with real users
 Prototypes help you identify issues early in the design
process
WHY USE PROTOTYPES?
Prototyping offers several benefits in the design process:
1. Gain first-hand insights:
Observe how users interact with and react to your
product. Seeing an early version of the product in action
shows you if, and how, it’ll work in the real world

2. Identify issues early:

Discover usability problems or design flaws before it's too
late. If an idea or design is destined for failure, you’d rather
find out in the early stages. Prototypes enable you to fail
early and cheaply; they’ll expose a weak or unsuitable
approach before you’ve invested too much time or money.
3. Make informed design decisions.
Can’t decide where a certain button should go on your app
home screen? Torn between two different layouts for your
website? Test a few versions in the form of prototypes and
see which works best.

4. Iterate and refine:

No matter how thorough your UX research is, many people
find it difficult to truly conceptualize a product until they
have it in front of them. Prototypes allow you to iterate,
refine, rework, and make improvements until you have a
market-ready product.

5. Visualize the concept: Help stakeholders and team

members better understand the product
TYPES OF PROTOTYPES - OVERVIEW
1. Form: Is it a hand-drawn prototype, or a digital one? Is it for
mobile or desktop?
2. Fidelity: How detailed and polished is the prototype? You’ll
often hear the terms high-fidelity and low-fidelity in relation
to prototypes.
3. Interactivity: How functional is the prototype? Can the user
click on it or interact with it, or is it view-only?
4. Lifecycle: Is the prototype a quick, disposable version that
will be replaced with a new and improved version? Or is it a
more enduring creation that can be built and improved upon,
potentially ending up as the final product?

The choice of prototype depends on your goals, stage in the

design process, and available resources.
Generally, prototypes can be divided into
 low-fidelity and high-fidelity.
 Fidelity describes how similar to the final product the prototype
is;
whether it’s an accurate representation of the final product, or
more of a basic, early-stage model. Here’s an example of how a
prototype for one screen would look from low to high fideltity:
 Now let’s take a look at some of the different kinds of
prototypes you might use. Prototypes can vary in terms of
their form, fidelity, interactivity, and lifecycle:
LOW-FIDELITY PROTOTYPES
 Low-fidelity prototypes are ideal if you want to rapidly
test broad concepts. They’re quick, cheap, and highly
collaborative; they don’t require advanced design skills,
so different people from different teams can easily be
involved.
 low-fidelity prototypes keep content and visuals to a
minimum, presenting only the key elements as basic
shapes in order to convey visual hierarchy. Their
simplicity can lead to uncertainty during testing; it’s
not always easy for users to identify what and how the
prototype is supposed to work.
 Low-fi prototypes are also limited in terms of
interactivity, so it’s not possible to convey animations or
transitions.
EXAMPLES OF LOW-FIDELITY
PROTOTYPES

 Storyboarding.
 Sketching (although Bill Buxton, a pioneer of human-
computer interaction, argues sketching is not an example
of prototyping).
 Card sorting.
PROS OF LOW-FIDELITY PROTOTYPING
 Quick and inexpensive.
 Possible to make instant changes and test new iterations.
 Disposable/throw-away.
 Enables the designer to gain an overall view of the product
using minimal time and effort, as opposed to focusing on
the finer details over the course of slow, incremental
changes.
 Available to all; regardless of ability and experience, we are
able to produce rudimentary versions of products in order
to test users or canvas the opinions of stakeholders.
 Encourages and fosters design thinking.
CONS OF LOW-FIDELITY PROTOTYPING
 An inherent lack of realism. Due to the basic and
sometimes sketchy nature of low-fi prototypes, the
applicability of results generated by tests involving simple
early versions of a product may lack validity.
 For instance, if you are developing a product bound by a
number of contextual and/or dispositional constraints (i.e.,
physical characteristics of your user base, such as users
with disabilities), then basic versions that do not reflect the
nature, appearance, or feel of the finished product may be
of scant use; revealing very little of the eventual user
experience.
 Such prototypes often remove control from the user, as they
generally have to interact in basic ways or simply inform
an evaluator, demonstrate, or write a blow-by-blow account
of how they would use the finished product.
MID-FIDELITY PROTOTYPES
 Mid-fidelity prototypes can also be inexpensive to create
(depending on the tools you choose), and don’t require
much design knowledge or experience. These are great if
you want to test broad functional features, such as the user
flow for one particular use case (i.e., the user taps this
button, which leads them here, then here then here). This
is a great approach to take if you’re short on time and/or
just need to get an overview across screens to be sure that
the solutions you've designed actually work and don’t
overlook any key considerations.

 Some of the most common low- and mid-fidelity prototyping

techniques include paper prototyping and clickable
wireframes. These methods are particularly useful for
iterating on initial design ideas, and getting the designers
and stakeholders aligned on basic design elements.
PAPER PROTOTYPING
 You can create prototypes using nothing more than pen
and paper.
 Paper prototypes are usually low-fidelity.
 You simply draw different screens of a digital product
interface onto sheets of paper—no fancy software needed.
 You can even simulate interactivity during testing by
moving the screens (or sheets of paper) around based on
how the user navigates the paper prototype.
 Paper prototyping does have its advantages—it’s quick and
affordable
 you won’t be able to convey visually complex interfaces, nor
high levels of interactivity. They are best kept to the very
early stages of the design process
CLICKABLE WIREFRAMES
 low-fidelity prototypes
 You can simulate the journey a user might go through by
including hyperlinked buttons which lead to another
wireframe
 Unlike a paper prototype where you’ll need to redraw the
entire screen if you want to make changes, you can make
minor edits without starting from scratch.
 Clickable wireframes are still very much a bare-bones
representation of the finished product, including things like
image and text placeholders together with buttons and
navigational elements. They can be created using special
wireframing software, or even with a presentation tool like
PowerPoint or Keynote.
HIGH-FIDELITY PROTOTYPES
 There are high-fidelity prototypes: the more detailed,
realistic prototypes that look and operate much like the
final product.
 help you to fine-tune the design and get it ready for
market.
 include all the visual components, interactive elements,
and content that will be featured on the final product. In
fact, they look just like a real app or website—which is
hugely beneficial when it comes to user testing.
 user feels like they’re interacting with a live product
 Here’s a comparison of a mid- and high-fidelity prototype
 high-fidelity prototypes are more expensive and time-
consuming to produce
 With a high-fidelity prototype, you can test pretty much
every single element of your product before sending it off
for development.
 hi-fi prototypes enable you to show your colleagues and
stakeholders from other departments exactly how the final
product should look.
PROS OF HIGH-FIDELITY PROTOTYPING
 Engaging: the stakeholders can instantly see their vision
realized and will be able to judge how well it meets their
expectations, wants, and needs.
 User testing involving high-fi prototypes will allow the
evaluators to gather information with a high level of
validity and applicability. The closer the prototype is to the
finished product, the more confidence the design team will
have in how people will respond to, interact with,
and perceive the design.
CONS OF HIGH-FIDELITY PROTOTYPING
 Software prototypes may give test users a false impression
of how good the finished article may be.

 Making changes to prototypes can take a long time, thus

delaying the entire project in the process. However, low-fi
prototypes can usually be changed within hours, if not
minutes, for example, sketching or paper prototyping
methods are utilized.
TOOLS FOR PROTOTYPING

Some of the most popular prototyping software are as follows:

 Adobe xd
 Invision
 Sketch
 Figma
 Photoshop
WHAT IS RAPID PROTOTYPING?

 Rapid prototyping is a design workflow that includes

prototyping and testing a design solution with users and
stakeholders to help designers and product teams refine
and validate ideas quickly.
 rapid prototyping process includes three steps: prototyping,
testing, and refining.
 Rapid prototyping techniques such as Sketch, Wireframe,
and Mock-up.
 The rapid prototypes of the solution are reviewed by the
stakeholders. Through this process, some alternate
solutions are discarded and others move forward with
feedback for enhancements.
Rapid prototyping can help you:
 Refine and improve
 Designers and entrepreneurs can quickly and frequently
iterate on their ideas to refine and improve their product
designs.
 Get feedback
 You can get direct customer feedback on early stage ideas
to help test assumptions and refine the concept.
 Make the development process faster and cost efficient
 You can discard some alternate solutions and move forward
with others that have feedback for enhancements
THANK YOU!