UNIT IV WIREFRAMING, PROTOTYPING AND TESTING

Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing -

Creating Wireflows - Building a Prototype - Building High-Fidelity Mockups -
Designing Efficiently with Tools - Interaction Patterns - Conducting Usability
Tests - Other Evaluative User Research Methods - Synthesizing Test Findings -
Prototype Iteration

SKETCHING PRINCIPLES
Sketching
 Sketching is a distinctive form of drawing which designers use to propose,
explore, refine and communicate ideas.
 Sketches are easy, fast, and cheap to create, iterate, and if needed, even discard
without much effort. Unlike written or verbal communication, sketches sidestep
rules of grammar and help clearly communicate ideas, all but eliminating
misunderstandings.

The Five Elements of Drawing

Sketches help you propose, explore, refine and communicate your design ideas.
Not all drawings are sketches.
Sketches are:
 Quick: Don’t invest a long period producing them.
 Timely: Produce them when and as the need arises.
 Disposable: Rely on their usefulness to explore a concept and not on their
production costs.
 Plentiful: Produce sketches as a collection that explores different aspects of
interaction over time.
 Minimalist: Use sketches to clarify one concept at a time.
Enhancing Sketches — Annotations, Arrows and Notes

Annotations, arrows and notes increase the communicative power of your

sketches.
1. Annotations – These are names, labels and explanations located next to
different parts of a sketch to expand and clarify the meaning of any element
depicted. Tie annotations to different elements in your sketch using arrows,
braces, numbering and spatial proximity. Write your annotations using a
different color that contrasts with the sketch proper.
2. Arrows – Apart from pointing to specific elements in a sketch, use arrows to
illustrate interaction flow, a sequence of events, movement and direction.
3. Notes – Any text, long or short, that provides additional insight into your sketch
is a note. Use notes to do the following:
 Provide detailed explanation of the action or sequence illustrated.
 Describe an idea derived from an illustration.
 List unresolved issues.
 Explore design elements not depicted in the sketch.
 Clarify the purpose of each element you present, especially non-static
 ones.
 Keep a record of your thought process when you first draw a sketch.

Types of Sketching
1.Scribble Sketching
The idea behind this technique is to capture, as fast as possible and with the
broadest of strokes, the essence of the object, design or action you are trying to
preserve. Leave out non-important details, decorations, text and other non-essential
elements.

2.Sampling with Cameras

The goal of this technique is to use still photos and video to capture some
features of the world. Capture objects, designs and actions that delight, inspire and
irritate you.
Pros and Cons of Sketches
Pros of sketches
 They are extremely cheap and fast to create. As such, you can sketch out a large
number of ideas in a short amount of time.
 You can do it anywhere: with pen and paper or digitally on your smartphone,
tablet or desktop computer.
 They are disposable, so you won’t get attached to sketches that turn out to be
bad ideas.

Cons of sketches
 Sketches lack detail and are ambiguous by design. As such, you cannot use
sketches to convey complex interactions of an app, for example.
 Sketches are almost never of high enough fidelity to be useful with people
outside of the team, since they rarely have the context to understand what the
sketch is meant to convey.
 Sketches are not very helpful in convergent processes where you want to select
a few best ideas—other forms of prototypes, such as paper prototypes or
wireframes, are more helpful.
When to Use Sketches
 Use sketches in early, divergent stages of your design process.
 Sketch out your rough ideas so you can discuss them with team-mates.

Sketching Principles
Best Practices and Tips for Sketching
 Always sketch out your ideas, rather than store them in your head! Design
thinking emphasizes a bias towards action. Whenever you have an idea, sketch it
out, no matter how silly it seems—you will be able to evaluate it much better
when it’s on paper rather than in your head.
 Use the right amount of detail: remember that a sketch should be rough and
quick. Don’t spend extra time adding details which are not required for your
quick sketch.
 Draw diagrams to map out complex ideas or use cases, where many factors and
players affect one another. Journey maps, behavior maps, system flow diagrams
and a range of other mapping methods are at your service to help you scope out
complex situations.
 Invite other team-mates to join in your sketching sessions, when appropriate.
Because sketches are so easy to create, they are great opportunities for you to
involve other stakeholders in the design process.
The best way to gain confidence in sketching is to practice.
Create a Record of Failed Design Efforts
 Keep a record of failed design efforts. Gather objects and situations that annoy
you. Write down the reasons behind this negative effect.
Create a Record of Successful Design
 Keep a record of successful design. This will help you draw inspiration from
multiple domains to ground your design work on features other than those of the
digital realm.
How to Perform a Sketch Test
The procedure is simple:

 Print a copy of the deliverable

 Recruit a sketch-test participant from your target audience. For example, if
you're preparing a wireframe for developers, recruit a front-end developer.
 Give the sketch-test participant the printed copy of the deliverable. Place a
blank pad of paper and a pen or pencil right next to the person.
 Invite the participant to write directly on the deliverable, but also make scratch
paper available. Explain that the printed version of the deliverable is just a
scratch copy, and that you welcome any comments.
 Ask the participant to explain the concepts in the deliverable.
 Explain that the current version of the deliverable is a work in
 progress, and that you are still developing the format of the
document. While content suggestions can be welcome, at this point
do not ask for them explicitly — keep the focus on making the
deliverable clear and direct.
 Note that you want to make this document easier to understand.
 Give the participant time to read the deliverable. Ask your
participant to use the think- aloud protocol during the initial
reading of the document.
 Ask the participant to pretend that she is presenting this
document, and have her explain the deliverable to you.
 Watch and listen as your participant explains the concepts in your deliverable.
 Ask your participant open-ended follow-up questions
 At the end of the session, explain the intended ―correct‖ meaning of the
document to your participant, to avoid having him leave with an erroneous
understanding of your work.

Feedback to Look for During a Sketch Test

The sketch test can help surface two types of problems with deliverables:

1. Content that is not easily perceptible in the document (e.g. using blue text
to annotate a screenshot made it difficult to notice against a similar
background),
2. Content that is not comprehensible
During a sketch test, notice if your participant exhibits any of the following
behaviors,

 Circling or underlining elements

 Drawing something to represent content that your deliverable presents in text,
or employing a different visual metaphor than you currently use for data
visualization or infographics
 Making notes or edits on your sketch, or suggesting terminology or wording for
concepts other than those shown in the deliverable
 Reading the same passages or studying the same images several times
 Struggling to explain something to you
 Explaining something incorrectly to you

Improving the Deliverable Based on the Sketch Test

If your participant struggles to explain your deliverable easily, you will likely
need to revise it before sharing it with your colleagues.
Feedback About the Content of the Deliverable
During a sketch test, you may receive feedback not only about the format of your
deliverable, but also about its content.

SKETCHING RED ROUTES

“Goal is to allow high traffic volumes to flow freely without obstruction “

Red Routes are majorly derived from “Important roads in London”. Transport for
London do everything in their power to make sure passenger journeys on these routes
are completed as smoothly and quickly as possible.

Dr. David Travis of User focus identified that the analogy of the red route. By
identifying the core paths users will take on a website should be identified as the red
routes. London’s Red Routes as a metaphor for frictionless user journeys.
How does Red route help in Designs?
“When applied to design, these red routes are the critical and frequent paths that users
take to complete their tasks”

Red Route principle

Define red routes for your product and you’ll be able to identify, prioritise and eliminate
any usability obstacles on key user journeys.

Identifying Red Routes

 Critical
 End-to-end tasks with multiple steps or actions
  Frequently utilised
 Objectively successful
 Tied to critical product metrics
 Built for scale
 Key value drivers
Red route usability
Focusing on your product’s red routes provides the key constraint you need to
ship a high value product from version
Red routes improve speed and effectiveness
We can ruthlessly eradicate any usability obstacles on the key user journeys.
Red routes describe frequent and critical activities
We need to map out the red routes for our site it’s important to consider both the
frequency and critical nature of the activity
Red routes should reflect key business objectives
These red routes are clearly important from the perspective of the organization:
you need to make sure these routes are trouble-free to make money
Red routes should reflect key customer objectives
Visitors to your site will have their own goals that your site needs to support.
there will be others that may not seem that important to your organisation but that are
critical if customers are going to do business with you
Red route Analysis
“Red routes are the key tasks that users want to carry out with the product “

We can decide if one of the product backlog items lies on a red route by asking
two simple questions:

 How many users need this function?

 How often do users need this function?
 By identifying what the top tasks of your users are it allows you to:

 Anticipate user needs

 Guide usability testing
 Target essential website pages
 Design website with user needs in mind
 Identify your website’s mission

Benefits of Identifying Red Routes

“Defining crisp red routes for your users is like allowing them to travel from
Point A to Point B without any obstacles”

 Identifying red routes helps your team prioritise user needs and facilitate
alignment amongst your stakeholders.
 It also helps avoid scope creep and the introduction of
extraneous/ancillary features.
 Most importantly, it helps your team build and optimise product features
that deliver the most value to your customers and drive your key metrics.
RESPONSIVE DESIGN
Responsive web design (RWD) is a web development approach that creates
dynamic changes to the appearance of a website, depending on the screen size and
orientation of the device being used to view it. RWD is one approach to the
problem of designing for the multitude of devices available to customers, ranging
from tiny phones to huge desktop monitors.
RWD uses so-called breakpoints to determine how the layout of a site will
appear: one design is used above a breakpoint and another design is applied
below that breakpoint. The breakpoints are commonly based on the width of the
browser.
Definition
Responsive design is an approach to web design in which the interface adapts
to the device's layout, facilitating usability, navigation and information seeking.
Benefits of Responsive design
 Reach a larger audience: nowadays, more users access the web through
mobile devices.
 Save time and development efforts since designers and developers only focus
on one design version.
 Improve SEO, as search engines reward mobile-friendly websites with better
search positions.
 Ensure brand and design consistency across devices, as there is no chance to
modify guidelines to fit different design boxes.
Why Responsive Design is so Popular?
More users were starting to access web material on handheld devices than on
desktops. There were two main design approaches to deal with designing across
devices:
 Designers could craft several versions of a design optimized for different
devices and make each have fixed dimensions (adaptive design approach).
 They could work on a single, flexible design that would stretch or shrink to fit
the screen (responsive design approach).
Understanding the Language of Responsive Design
Responsive design has three core principles:
1.Fluid Grid System
  Grid systems are aids designers use to build, design, arrange information and
make consistent user experiences. In interaction design, multi-column,
hierarchical and modular are the most widely-used types of grids.
 The principle of a grid is simple: every element occupies the same percentage
of space, however large or small the screen becomes, which means that the
components can be scaled up and down as the user switches devices.
 In the below image, you can see that the fixed version of the content has the
same width regardless of the device whereas in the fluid version the content
fills the available space depending on the device size

2.Fluid Image

 In responsive design, fluid images are images that scale to fit their container,
meaning that when the browser reaches a breakpoint, the image will scale up or
down to the current window size.
 For non-photographic images, such as icons, you can use SVG files—these file
 formats are lightweight, and you can scale them to any resolution without
losing quality.
Media Queries and Breakpoints
 Media queries are filters that detect the browsing device's dimensions and
make your design appear appropriate regardless of the screen size. To aid
media queries, you have breakpoints: these are the values where the content of
your website will be rearranged to provide the user with the best possible
experience.
 Media queries and breakpoints go hand in hand, and both can be defined in
your CSS style sheets. For designers, a breakpoint is a boundary where the
design will change to accommodate the features to the new size.
Best Practices & Considerations for Responsive Design
With responsive design, you design for flexibility in every aspect—images,
text and layouts. So, you should:

 Assume a "mobile-first" mentality: Whether you start designing from the

smallest screen or the desktop version, assuming a mobile-first mentality
helps you practice the mobile-first approach, a design principle with simplicity
at its core. A mobile-first mentality means prioritizing content, leaving
complex graphs and images for the desktop version
 Use Scalable Vector Graphics (SVGs). These are an XML-based file format for
2D graphics, which supports interactivity and animations.
 Include three or more breakpoints (i.e., design for 3+ devices).
 Prioritize and hide content to suit users' contexts. Check your visual hierarchy
and use progressive disclosure and navigation drawers to give users needed
items first. Keep nonessential items (nice-to-haves) secondary.
 Aim for minimalism.
 Apply design patterns to maximize ease of use for users in their contexts and
quicken their familiarity: e.g., the column drop pattern fits content to many
screen types.
 Aim for accessibility with font sizes/styles. Use contrast and background
effectively.

Demerits of Responsive design

 Responsive design can still run into difficulties if you use it without caution.
For example, it can restrict your control over the design's screen sizes.

WIREFRAMING
Definition
Wireframing is a visual representation of the workflow of a website or mobile
application. This preliminary design step illustrates the page's structure, layout,
and functionality. It helps in planning the user experience without distractions
from color, graphics, or content.
The Elements of a Wireframe

 The logo signifies brand identity. It usually sits at the top corner of a page and
anchors the brand's presence.

 Navigation helps users explore different parts of the site or app. Commonly
seen as a menu bar or sidebar, it directs users to primary sections or features.

 Search fields allow users to find specific content or features. It's especially
useful for content-heavy sites.

 Text blocks on a wireframe represent the content placement. It can be

headlines, paragraphs, or bullet points.

 Buttons prompt users to take actions like "Submit," "Read More," or "Buy
Now."

 Image placeholders show where you will place your visuals.

They help in understanding the content-to-visual balance on a page.

 Videos mark the areas on the wireframe where multimedia content, such as
 videos or animations, will appear.

Different Types of Wireframes

 Low-fidelity Wireframes: Low-fidelity wireframes are the first you create.
They provide the basic visuals of the design, but lack scale, grid, or pixel
accuracy. The main aim is to strip away distractions. These wireframes ease
discussions, help in setting navigation, and outline user paths.
 Mid-fidelity Wireframes: Mid-fidelity wireframes are the most prevalent.
They offer a clearer layout view, though they still omit visuals like images or
specific typography.
 High-fidelity Wireframes: High-fidelity wireframes are detailed. They
provide pixel-specific layout views. Unlike the low-fidelity version, which
might use placeholder text and symbols, these wireframes present actual
images and relevant content.

When to Use Wireframes?

Wireframes play a role throughout a project. They're essential for clarity,
feedback, planning, and testing. But they serve a specific purpose. Here are the
scenarios where creating wireframes can help.
 Explore the initial idea: At the start of a project, wireframes help visualize
rough ideas. They bring abstract concepts to life.
 Collect meaningful feedback: Before you get into the details of a design,
wireframes help you gather initial feedback. Stakeholders, members of the
design team, and potential users can provide valuable insights before you
move on to the next step.
 Plan functionality: Wireframes map out where you will place functional
elements like buttons or interactive features. It helps you understand how to
create an interaction design for usability.
 Structure content: Wireframes help plan where content will appear. For
instance, positioning text, images, or multimedia is easier.
 Customer journey mapping: Wireframes are tools to plot user journeys.
They enable designers to envision how users will navigate a site or app.
 Usability testing: Before final designs, wireframes can undergo usability
tests. It helps identify and rectify usability issues early
Benefits of Digital Wireframing
 Precision: Digital tools offer accurate measurements. This ensures elements
align and match the intended design.
 Efficiency: Speed up the wireframing process. Features like copy, paste, and
templates save time.
 Collaboration: Many digital tools have built-in collaboration features. Teams
can review, comment, and iterate together in real time.
 Version control: Digital wireframing can help you track changes. Most tools
offer version history and allow designers to revert or compare versions.
 Easy sharing: You can share digital wireframes with a link. It eases the
process of gathering feedback.
 Interactivity: Some tools enable clickable wireframes. This simulates user
interactions by offering a dynamic preview.
 Scalability: Adjusting wireframe sizes for various devices is straightforward.
It ensures designs are responsive.
 Integration: Many tools integrate with other design software. This
streamlines the transition from wireframing to high-fidelity designs.
 Asset management: It’s easy to organize and store assets. Icons, components,
and UI elements remain at your fingertips.
 Professional presentation: Digital wireframes look polished. Presenting
them to stakeholders or clients gives a professional impression.

Wireframing tools and software

Wireframing tools help you map out the user experience, layout, and overall
flow. It streamlines the design process and ensures everyone is on the same page.
1. Figma
2. Mockflow
3. Lucidchart
4. Miro

HOW TO CREATE WIREFRAMES: A STEP-BY-STEP

GUIDE
Step 1: Do Your UX Research
 Before sketching, you need to have a good understanding of your audience
 and business. Start your UX research from the perspective of your target
audience.
 What motivates them?
 What holds them back?

 Which products resonate with them?

 Utilizing tools like user personas or the jobs-to-be-done (JTBD) framework
can be invaluable here.
Step 2: Define Requirements and Prioritize Features
 After you complete your UX research, the next step is narrowing down what to
build. At this stage, involve stakeholders or the product owner. They will help
translate broad user needs into specific features.
 For example, if your e-commerce site aims to improve user engagement, it
may require a 'Recommended Products' section. Stakeholders can provide
insights on what features align with both user needs and business goals.

Step 3: Map the User Flow

 User flow is the blueprint of a user's journey on your platform. Taking an e-
commerce site as an example, a user's path might start from the homepage,
leading to a product search, then product selection, payment, and finally,
order confirmation.
 Recognizing these steps will highlight the necessary features and inform your
design decisions.
Step 4: Sketch the Layout and Features
With the user research and project requirements in hand, sketch your
wireframe. Select an appropriate canvas size and start positioning elements.
 Information architecture: Focus on how you organize the content and
prioritize information based on its significance.
 Interactive elements: Highlight buttons, links, and other clickable items.
 Static elements: Remember foundational parts like headers, footers, or
menus.
 Fidelity choice: Decide on the detail level. Early stages might use low-fidelity
sketches, while detailed projects lean towards high-fidelity designs. In
between, you find medium-fidelity designs.
Step 5: Review and Iterate
 Share your wireframes. Gather input from stakeholders, including business
professionals and developers. Consider guerrilla usability tests, which involve
testing the wireframe with users to gather insights.
 When you collect feedback, frame your questions to include broad insights
and specific details.
Step 6: Build on It
Upon reaching a mutual agreement on the wireframe design, progress to the
next stages. Create detailed mockups and interactive prototypes and transform
them into minimum viable products.
What is Wireframing in UX?
Wireframing in UX refers to creating a skeletal layout for a digital product. It's
the blueprint or foundation upon which you create the design. Different platforms
have specific wireframe sizes. These are:
 Smartphone screen: 1080 px x 1920 px
 8” Tablet screen: 800 px x 1280 px
 10” Tablet screen: 1200 px x 1920 px
 Desktop screen: 768 px x 1366 px

The Necessity of Wireframing

 Clarity: Wireframing interprets abstract ideas to convert them into a visual
format.
 Feedback: Early-stage wireframes gather valuable feedback from
 stakeholders and users.
 Cost-efficient: It's easier and cheaper to make changes to a wireframe than to
a fully designed product.
 Focus on Functionality: Without distractions like color or graphics, the core
user journey and functionality remain at the forefront.
Approaches to Wireframing
 Hand-drawn: Quick sketches on paper or a whiteboard. Ideal for
brainstorming.
 Low fidelity: Basic visual design that focuses on structure and layout.
 High fidelity: Detailed, closer to the final design. They showcase interactions
and more precise placements.
Wireframing Principles
 Simplicity: Keep it straightforward. Focus on structure and functionality.
 User-centered: Prioritize user needs and the intended user journeys.
 Clarity: Every element should have a clear purpose.
 Feedback loop: Constantly gather feedback and iterate.
 Consistency: Maintain a uniform structure and design language.

Wireframing for User Testing

Testing with wireframes is invaluable. Before getting deep into design or
development, wireframes provide a tangible product for users to interact with.
This early-stage testing identifies potential usability issues, layout problems, or
unclear navigation paths.

Wireframe Page Layout: Structuring Content

 Header: The topmost section, usually containing the logo, navigation links, or
contact details.
 Main content area: The primary section where the core content resides. It's
the focal point of the user's attention.
 Sidebars: Secondary content areas, often containing links,
ads, or additional information.
 Footer: The bottom section displays copyright information, additional links,
or contact details.
UX and UI Wireframe Examples
1.Website Wireframe Sketch

“A basic homepage wireframe sketch. It outlines sections and highlights essential

details”
Strengths
 Allows for quick ideation without tool constraints.
 Encourages collaboration; anyone with a pen can contribute.
 Sparks creativity and is less restrictive than digital tools.

Weaknesses
 Not as precise or scalable as digital versions.
 Difficult to share and edit in remote settings.
 Lacks interactivity features present in digital tools.

2.eCommerce Mobile Wireframe Sketch

 “The digital sketch shows the main parts of a mobile eCommerce
site”

Strengths
 Allows designers to quickly visualize product listings, calls to action, and user
journeys.
 Encourages a focus on essential eCommerce elements like product images,
pricing, and checkout flow.
 Great for brainstorming promotional placements or special features.
Weaknesses
 Doesn't capture the detailed intricacies of product variations or filters.
 Limited in representing interactive elements like dropdowns or sliders.
 Often lacks detailed space allocation for promotional content or ads.

3.Creating Wireflows
 Wireflows are a combination of wireframes and flowcharts. They can
document workflow and screen designs when there are few pages that change
dynamically.
 In the UX field, wireframes are a common deliverable to show page-level
layout ideas, whereas flowcharts are useful for documenting complex
workflows and user tasks.
 Wireflows are used when documenting mobile, desktop, or web apps that
don't have many unique pages, but instead feature a few core pages which
 change content (or layout) dynamically based on user interaction.

Wireflows as a Deliverable for Workflows

Definition: Wireflows are a design-specification format that combines

wireframe-style page layout designs with a simplified flowchart-like way of
representing interactions.
This low-fidelity wireflow shows a simple user task. The use of screen
designs, rather than abstract flowchart symbols, keeps focus on the product
with which users will be interacting.
While wireflows can be created in high fidelity for the purposes of
communicating detailed design specifications, they are just as useful as lower-
fidelity documents to discuss and communicate interaction design and user
workflows.
Wireflows Document Interactions
The classic use-case for wireflows is to document the process of a user
working through a common task on the product (e.g. ―send a direct message to
someone in your network on a social media app). At each step in the workflow a
simple wireframe or high fidelity screen mock-up shows the screen available to
users.
Wireflows for Collaborative Ideation
In addition to being a useful form of communication with project
stakeholders and developers, wireflows also work well as a tool for
 collaboration between team members. Especially in Agile environments, being
able to collaborate and communicate well among a cross functional team is
critical.

BUILDING A PROTOTYPE
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.

Prototype
A prototype is a simple experimental model of a proposed solution
used to test or validate ideas, design assumptions and other aspects of its
conceptualization quickly and cheaply, so that the designer/s involved can make
appropriate refinements or possible changes in direction.
Remarkable Reasons for Prototyping
The advantages of prototyping are that you:

 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.
 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.
 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.
 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).
 Provide a sense of ownership to all concerned stakeholders—therefore
fostering emotional investment in the product’s ultimate success.
  Improve time-to-market by minimizing the number of errors to correct before
product release.

The three primary types of prototypes based on fidelity

are:
 Low-Fidelity Prototypes: Simple and often hand-drawn representations,
such as sketches or paper interfaces. They're quick to produce and useful for
initial concept validations.
 Mid-Fidelity Prototypes: More detailed than low-fidelity, these often use
digital tools and give a clearer understanding of the product's aesthetics and
functionality.
 High-Fidelity Prototypes: Highly detailed and interactive, resembling the
final product closely. They're used for advanced user testing and to get a
realistic feel of the final design.

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.

Why We Need to Prototype

Early Research isn't Everything
Research conducted during the early stages of your Design Thinking
project does not tell you everything you need to know in order to create the
optimal solution.
Use prototyping as a form of research even before other phases in
Design Thinking, allowing you to explore problem areas in interfaces, products
or services, and spot areas for improvement or innovation.

Prototype to Empathise, Define, Ideate, and Test

Some of the purposes that prototypes fulfil are:
 Exploring and Experimentation
You can use prototypes to explore problems, ideas, and opportunities
within a specific area of focus and test out the impact of incremental or radical
changes.

 Learning and Understanding

Use prototypes in order to better understand the dynamics of a
problem, product, or system by physically engaging with them and picking apart
what makes them work or fail.

 Engaging, Testing, and Experiencing

Use prototyping to engage with end users or stakeholders, in ways
that reveal deeper insight and more valuable experiences, to inform design
decisions going forward.

 Inspiring and Motivating

Use prototypes to sell new ideas, motivate buy-in from internal or
external stakeholders, or inspire markets toward radical new ways of thinking
and doing.

How Prototyping Works

Bias Towards Action
One of the essential mindsets for Design Thinking is having a bias
towards action:
Learning by Doing
 One of the most important aspects of Design Thinking is exploring unknown
possibilities and uncovering unknown insights. This is the reason the discipline
places emphasis on learning and on activities that increase the learning potential of
the team.

Prototyping to Test
This will be the most common prototype you will create in a design project.
Create iteratively improved prototypes in order to test out solutions quickly, and
then use the test results to improve your ideas.

Prototyping to Decide
Sometimes in your design project, you may face conflicting ideas from
different team-mates or stakeholders. Prototyping can be an effective tool for
enabling your team to compare the ideas and prevent any disagreements from
developing.

When building a prototype to decide, you can see how each of the solutions
will work better. You will be able to see whether the prototypes lack in some areas;
for example, you may realise that the prototype would not work in the natural
environment of users. Your team will also be able to see the different ideas tangibly,
and hence discuss the ideas and build on them, or suggest ways to merge the best
aspects of each prototype.

BUILDING HIGH-FIDELITY MOCKUPS

Mock-ups are used by designers mainly to acquire feedback from

users about designs and design ideas early in the design process. Mock-ups are
'very early prototypes' made of cardboard or otherwise low-fidelity materials.
The user, aided by the designer, may test the mock-up (imagining that it works)
and thus provide valuable feedback about
functionality/usability/understanding of the basic design idea/etc.

Mockups look like screenshots from a completed, real app, they are
 little more than images Mockups are fully polished visual designs sometimes
rendered in realistic devices that include branding, colors, images and
typography.
Advantages:
 Mock-ups incite criticism from users because they are low-cost (can be made
of cardboard) and low-fidelity. If a user is presented with an early version of a
system that has required substantial work, he/she is likely to be more
reluctant (as well as able) to critise it.
 When using mock-ups of cardboard or similar materials, the user and
designer can collectively change the design using familiar tools such as pens,
scissors etc. As such, mock-ups are a discussion medium and a discussion
facilitator between designer and user.
 Not only can the mock-up function as a discussion medium between designer
and user but also between the members of the design team. Thus, mock-ups
may help facilitate work across disciplinary borders, bringing together a
disparate team.
 Mock-ups make it possible to do usability testing early in the development
process.
 Mock-ups incite and legalise experimentation as they are inexpensive to alter.
 Mockups focus on content and functionality and turn attention away from
details of graphic design

Examples of mockups

FIG 1. “Cardboard Mockup of a calendar application for school kids”

After a couple of tests with the mock-up, it was made into a prototype
programmed in Macromedia Flash (figure 2). The prototype was more 'polished' and
allowed for more interactivity. Using prototype, various scenarios of use (use cases)
were tested with the users, after which the Flash prototype was built into a real
application (programmed in Java).

FIG 2. The same calendar application, this time as a prototype made in

Macromedia Flash.
DESIGNING EFFICIENTLY WITH TOOLS
What are UX Tools?
User experience designers use UX tools—often purpose-built software—at
different stages of their work. For example, designers test their assumptions using
prototyping software (e.g., Balsamiq) and do usability testing with other software
(e.g., Loop11). To stay competitive, brands make UX tools extremely easy to learn.
Types of tools
 Questionnaire tools – To gather users’ information and feedback in
quantitative research: E.g., Google Forms, SurveyMonkey.
 Flowcharting tools – To help predict users’ needs, thoughts and actions and
align these with business needs through flowcharts: E.g., LucidChart,
OmniGraffle.
 Low-fidelity prototyping/Wireframing tools – To realize more-basic
visualizations of potential solutions to problem statements: E.g., Marvel,
Balsamiq.
  High-fidelity prototyping and user interface (UI) design tools – To realize
sophisticated visualizations of design solutions: E.g., Sketch, Figma.
 Usability testing tools – For qualitative research and to test the usability and
accessibility of solutions (e.g., as prototypes): E.g., Loop11, UserTesting.
 Handoff tools – To send completed design work to developers: E.g., Mockplus
iDoc, Zeplin. Microsoft Visio is a feature-rich flowcharting tool that has a
similar UI to the Microsoft Office suite of apps, which means you probably
don’t have to learn to use it.

How to Approach the Right UX Tools

Before reaching for any UX tools, you should consider:

 What you do matters more than the tool you choose – UX tools are
instrumental to—not guarantees of—your success. As a designer, you can
only make impressive and useful solutions if you know what goes where and
why. UX experts and recruiters agree that skills come first. So, you should
always start with important UX considerations and know what you want to
achieve. Then, you select the best tool for the job at hand, even if it’s only
pencil and paper. Otherwise, you’ll constrict your vision because the tool can
frame your ideas and blind you to users’ needs. Beautiful, trendy-looking
products won’t necessarily prove you empathize with users.
 UX tools are constantly evolving – New tools and third-party add-ons to
existing ones keep appearing on the market. So, it’s vital to stay grounded in
the timeless principles of human psychology and your craft, instead of chasing
the fleeting shadows of software’s freshest updates. Software will keep
changing; users’ brains won’t.
 Organizations use different tools –Company practices—including choice of
UX tools— vary. Moreover, with time, they’ll switch to the next best thing for
them.
 Adobe XD: This all-in-one UX/UI design software allows for wireframing,
prototyping, and collaboration in the same platform
 Figma: Known for its cloud-based interface, Figma enables real-time
collaboration, making it a favorite among design teams.
 Sketch: Although the Sketch app is only available for macOS, Sketch has a
robust set of features and an extensive plugin ecosystem, making it a powerful
tool for user experience design.
 InVision: InVision offers a suite of tools for prototyping, collaboration, and
workflow management, making it a comprehensive solution for design teams.
 Axure RP: This tool stands out for its advanced prototyping capabilities,
 allowing designers to create highly interactive and dynamic prototypes.

INTERACTION PATTERNS
In order to understand the role of patterns in interaction design, we look into
experiences with objects from the real world: repetitive patterns can be found in wild
nature, interior design, fashion, and even human behavior.
On a basic level, a pattern is a replication of an elementary composition in an
obvious way. When it comes to user interface design we can apply similar decisions
to solve typical problems. No need to reinvent the wheel, 99% of design issues
already have a well-known solution.
Once you gain an understanding which pattern solves what problem, you’ll
start saving time by working effectively. Lots of designers at the beginning of their
carriers make the same mistake – they spend a lot of time producing a unique
solution. It’s better to search for the right one instead. In this case unique doesn’t
mean the best. There is no shame in learning from someone else, so don’t forget to
check yourself — do the results you get overrun affords you applied?
It’s also common for a designer to choose a pattern without having a deep
understanding of the problem. As a result, a chosen pattern is inappropriate and
instead of solving a problem, it causes a chain reaction of issues that will be hard to
resolve.
Do not forget about those who will work with your design afterwards –
developers, support service and of course — users. They will appreciate it.

The main principles of UI design patterns

All interaction design patterns are divided into these levels:
 On top of the pyramid — Context level, — relies on the overall direction of
solution we are working on – it could be a healthcare product or corporate website,
the source of information or a marketplace. In order to choose the right style, we
analyze the target audience.
During the Flow stage, we consider the typical user scenarios and sequence of
actions needed to reach users goals.
On the Implementation level, we work on pointwise problems of the
product, such as: placing items on the screen, picking the right color (red –
dangerous, green – auspicious), etc.

Wide-used interaction patterns

1. Navigation patterns
Help users understand the product, easily find needed functionality (samples:
menu, tabs, bread cramps)
2. Getting input patterns

Help users interact with the system by filling the data and receiving results
(for instance: text fields, select boxes, drag and drop, pickers, etc).
3. Dealing with data patterns

Organize content for quick review, easy search and processing (samples:
galleries, tables, cards).
4. Social patterns
Optimise users’ communication between each other online (chats, boards,
testimonials, follow).

How to use patterns

Check if a particular pattern corresponds with your needs:
1. Problem: Which system problem are you solving?
2. Pain-point: Which action precedes the problem?
3. Principle: Is the pattern based on one or more ergonomic principles?
4. Solution: What is an essence of the problem, and what are the ways to solve it.
5. Reason: Why should we use this interaction pattern as a solution and how will
it affect the convenience or interaction?
6. Sample: Do we have a sample of successful implementation of the pattern?
7. Implementation: How can we apply this pattern to our problem?

Let’s make a sample check through all 7 items:

1. What is the problem?
Users are entering incorrect data, which causes mistakes and system inability
to process the information.
2. When does the problem appear?
You are creating an application that requires users to enter their data in order
to perform a mathematical calculation. The data should be provided in numerical
values only.
Yet users can enter the data in a wrong format, which will cause the system
mistake. As a result — users won’t be able to make a correct calculation.
3. Which principle to apply?
Preventing User Errors.
4. How to solve the problem?
You should minimize the number of conditions wherever there is a possibility for
the user to make a mistake. Restrict user from entering wrong data and implement
error message.
5. Why we need to solve it?
By removing a system mistakes we will increase system credence among the
users.
6. Was the pattern used before for a similar problem?
Google use hints to prevent users from making a mistake.

7. How to implement it?

By locking invalid keyboard characters, we keep the user from entering wrong
data (an input Mask).

CONDUCTING USABILITY TESTS

Usability testing is the practice of testing how easy a design is to use with a
group of representative users. It usually involves observing users as they attempt to
complete tasks and can be done for different types of designs. It is often conducted
repeatedly, from early development until a product’s release.
 “It’s about catching customers in the act, and providing highly relevant
and highly contextual information.”
Usability Testing Leads to the Right Products
 Determine whether testers can complete tasks successfully and
independently.
 Assess their performance and mental state as they try to complete tasks, to
see how well your design works.
 See how much users enjoy using it.
 Identify problems and their severity.
 Find solutions.
While usability tests can help you create the right products, they
shouldn’t be the only tool in your UX research toolbox. If you just focus on the
evaluation activity, you won’t improve the usability overall.

There are different methods for usability testing. Which one you choose
depends on your product and where you are in your design process.
Usability Testing is an Iterative Process/How to do
usability test
To make usability testing work best, you should:
1) Plan
a. Define what you want to test. Ask yourself questions about your
design/product. What aspect/s of it do you want to test? You can make a hypothesis
from each answer. With a clear hypothesis, you’ll have the exact aspect you want to
test.
 b. Decide how to conduct your test – e.g., remotely. Define the scope of what
to test (e.g., navigation) and stick to it throughout the test. When you test
aspects individually, you’ll eventually build a broader view of how well your
design works overall.
2) Set user tasks
a. Prioritize the most important tasks to meet objectives (e.g., complete
checkout), no more than 5 per participant. Allow a 60-minute timeframe.
b. Clearly define tasks with realistic goals.
c. Create scenarios where users can try to use the design naturally. That
means you let them get to grips with it on their own rather than direct them
with instructions.
3) Recruit testers
Know who your users are as a target group. Use screening
questionnaires (e.g., Google Forms) to find suitable candidates. You
can advertise and offer incentives. You can also find contacts
through community groups, etc. If you test with only 5 users, you can still
reveal 85% of core issues.
4) Facilitate/Moderate testing
Set up testing in a suitable environment. Observe and interview
users. Notice issues. See if users fail to see things, go in the wrong direction
or misinterpret rules. When you record usability sessions, you can more easily
count the number of times users become confused.
Ask users to think aloud and tell you how they feel as they go through the
test. From this, you can check whether your designer’s mental model is
accurate: Does what you think users can do with your design match what
these test users show?

Keep usability tests smooth by following these guidelines.

1) Assess user behavior –
Use these metrics:
Quantitative – time users take on a task, success and failure rates, effort (how
many clicks users take, instances of confusion, etc.)
Qualitative – users’ stress responses (facial reactions, body-language
 changes, squinting, etc.), subjective satisfaction (which they give through a
post-test questionnaire) and perceived level of effort/difficulty
2) Create a test report – Review video footage and analyzed data.
Clearly define design issues and best practices. Involve the entire team.
Overall, you should test not your design’s functionality, but users’ experience
of it. Some users may be too polite to be entirely honest about problems. So,
always examine all data carefully.

Types of usability testing

The kind of test you want to run will help you choose the right usability
testing method. All product research and testing broadly falls into three main
categories:
 Qualitative or quantitative
 Moderated or unmoderated
 Remote or in-person

1.Qualitative or quantitative
Any user research will fall into the category of qualitative or quantitative. You
ideally want usability testing to gather both kinds of data, to provide a rounded
evaluation of the user experience.

Qualitative usability testing focuses on the ‘why’;

Understanding users' experiences, thoughts, and feelings while using a product.
For example, you could conduct a think-aloud study where users verbalize their
thoughts while using your product to complete usability tasks. Qualitative data can be
gathered from observation, interviews, and surveys.

Quantitative usability testing focuses on collecting and analyzing

numerical data like success rates, task completion times, error rates, and
satisfaction ratings. It’s about identifying patterns, making predictions, and generalizing
findings.

2. Moderated or unmoderated
Moderated and unmoderated usability testing are two different approaches to
usability. In moderated usability testing, a moderator guides the users through the test
(in-person or remotely). They answer any questions participants may have, ask follow-
up questions, and record observations during the test.
 Unmoderated usability testing, as the name suggests, doesn’t involve a
moderator. Users complete tasks independently, typically using usability testing
tools that record their actions and responses.

3. Remote or in-person
Research can be done remotely or in-person, depending on the type of product
you're testing and your research goals.
Remote usability testing can be moderated or unmoderated, and is done using
online tools or software that allows users to share their screens, record their activity,
and provide feedback. It’s useful because your team and test participants can be based
in entirely different locations.
In-person usability testing, on the other hand, is conducted in a physical location,
usually a usability lab or other research facility. For that reason, it can be more
expensive, time-consuming, and limiting in terms of sample size and geographic reach.
Many researchers opt for remote research, however in-person testing may be necessary
for products that require safety considerations, supervision during use, or physical
testing.

5 Key benefits of usability testing

1. Reduce developmental costs - When you run usability tests, you save time and
money by avoiding costly development mistakes. For example, if you find out users
struggle to navigate a specific feature, you can fix this before launch. It's
significantly cheaper to make changes before launch than after a product has
already been released.
2. Tailor products to your users - By talking to users directly and observing how
they experience your product, you can better understand their needs and tailor
the product to work for them—ultimately serving their needs and solving their
problems more effectively.
3. Increase accessibility - Accessible products are designed and developed to be
usable for as many people as possible—including those with physical, visual,
auditory, or cognitive requirements.
4. Increase user satisfaction and brand reputation- Usability testing enables
product teams to identify potential issues and make
improvements before releasing a new product or feature. This can lead to better
user experiences, more consistently—creating a loyal user base, and reflecting
your overall brand reputation positively.
5. Combat cognitive biases - Usability testing helps combat biases like the false-
consensus effect by providing objective feedback from real people, ensuring that
design decisions are based on authentic user behavior rather than assumptions
or opinions of those already-familiar with the product.

When should you do usability testing?

 Before you start designing

 Once you have a wireframe or prototype
 Before launching the product
 At regular intervals after launch

OTHER EVALUATIVE USER RESEARCH METHODS

Evaluative research is all about validating your concepts, testing your
prototypes, and knowing whether or not your project is on the right track.
 ‍ UX researchers use evaluative methods—which include both qualitative
and quantitative methods—to answer questions about conceptual fit and the
usability of a product.
‍ The data collected through this type of research helps validate design
direction, informs changes, and enables product teams to execute on user
feedback.

‍
 Qualitative usability testing, a popular UXR method in which participants think
aloud as they interact with a prototype or product.
 The best method for answering the question: Can people actually use
this thing?
 Preference testing. This method is used to find out which version of a design
people like better.
 Subjective but useful tests for measuring user opinions about your
designs.
 Surveys, a deceptively simple process for collecting data from respondents
through a questionnaire.
 How to use this (deceptively simple) research method correctly.
 Tree testing, a technique for testing your information architecture (IA). Tree
testing often follows card sorting.
 Understand your information architecture by watching your users
swing from branch to branch.
 First click testing, which is just what it sounds like. First click studies help assess
the usability of a product by whether users are able to efficiently complete a task.
 First click, best click—or at least, it better be. When the first click fails,
the rest of the session tends to tank as well.
 Task analysis. This method, which is often paired with other methods, helps you
understand user goals and the steps they take to achieve them.
 Break it down for me—understand how users accomplish and think
about complex tasks.
 A/B testing, for when you need to know which version of your product performs
better in a test.
  Apples or oranges? Night or day? Big or small? A/B testing will help
you decide which variable is better.

SYNTHESIZING TEST FINDINGS

Data synthesis is a step in the data review process. Once you’ve collected data, it
needs analyzing for insights. Synthesis is an essential part of doing this accurately and
effectively.
When you’re gathering data from multiple sources, you need to combine,
integrate, and evaluate it. And it may come in many forms, like:
 Surveys
 Focus groups
 A/B testing
 Call center notes
 Social media comments
 Usability testing
The process involves merging mixed data into a uniform sequence for simpler analysis.
6 common challenges with synthesizing UX research data
While synthesizing data is a cornerstone of accurate and reliable insights, it still
has hurdles. These are some of the most common challenges in data synthesis.
Large data sets
Synthesizing large datasets can be time-consuming. That’s why it’s crucial to
manage data effectively. Prioritize the most critical research questions and synthesize
data that speaks to those goals. This can significantly cut back on management time.
The right tool can also make all the difference. An all-in-one platform can house
all your data to help you gain insights and act on them faster. And Dovetail is the perfect
solution.
Nuanced interpretation of qualitative data
 In user research, data synthesis is an art and a science. One of the recurrent
challenges in this domain is the nuanced interpretation of qualitative data.
Qualitative insights from user interviews, observations, social media, and
surveys often come in diverse forms. This requires a solid approach to categorization,
labeling, and interpretation.
Striking a balance between preserving the richness of individual responses while
identifying overarching patterns demands careful consideration.

Unclear goals
Synthesizing data can become time-consuming and problematic when your user
experience (UX) research doesn’t have defined goals.
Data should link back to core goals to continually problem-solve for users. This
ensures you create user-centric products and limit the data you collect to the most
crucial areas.
Bias and assumptions
Teams may bring biases or rely on assumptions when synthesizing data. To
avoid this, all team members must stay objective to ensure any insights are evidence-
based.
Contradictory insights
Sometimes, throughout the synthesis process, you may discover conflicting
findings. It’s helpful to cross-validate the data sources to discover why these
contradictions may have occurred.
A deeper analysis may explain the discrepancies. Considering the context of
different data sources can be insightful.
Insufficient reviews
When making investment decisions, it’s essential to review the data thoroughly.
Mistakes can understandably occur when handling large amounts of data.
It’s helpful to use advanced tools, use AI to boost accuracy (but be wary of
relying on it entirely), and have multiple people review the findings.
How to synthesize data, analyze it, and gain insights
To get started on synthesizing your user research data, follow these best practice
steps:
1. Define the research goals
All UX research projects should have clearly defined goals. This ensures data is
relevant to improving your products’ UX and isn’t speaking to issues your users don’t
have. In UX, all goals should keep the user front-of-mind, so any insights speak directly
to their experiences.
Remember also that all goals should be SMART (specific, measurable, achievable,
relevant, and time-based) to be effective.Some examples of research goals could be:
 Identify the pain points associated with the shopping cart to streamline the
process and prevent drop-offs.
 Understand user privacy concerns and define better ways of managing user
data securely and communicating those measures to customers.
 Identify core issues in customer sentiment to highlight how the business
can improve across key areas.
2. Collect and organize data
Once you’ve defined your goals, collect data from a range of sources like:
 Surveys
 Interviews
 Focus groups
 Usability testing
 Website analytics
 A/B testing
 Diary studies
 Social media comments
 Call center notes
 Chatbot conversations
Ideally, gather quantitative and qualitative data to gain a full understanding.
These research types help you see how users think, feel, and behave in certain
situations.
Researchers should collect all of the data with the project's core goals in mind.
3. Use a UX research repository
Gaining data from diverse sources is important, but it can make management
tricky. To simplify things, gather and store data in one platform where all relevant team
members can manage it. This will also allow your team to group the data in meaningful
ways.
An all-in-one platform to store, manage, and analyze data is critical. Dovetail
allows teams to bring all customer data into one streamlined platform to collaborate,
discover insights, and act on them quickly. This can vastly speed up the process of
managing disparate data sets.
4. Develop a UX research taxonomy
To synthesize data effectively, develop a categorization system known as a
research taxonomy. This coding system can help your team quickly identify data trends
and patterns.
A taxonomy ensures that you can organize and classify data from many sources.
Creating a taxonomy means you can analyze the data as one group set to boost
efficiency and draw deeper insights.
To develop a UX research taxonomy, keep these three best practice steps in
mind:
Define clear terminology to understand how disparate pieces of data can
logically and accurately fit together. This will keep the information uniform and legible
to all team members.
Make it relevant: The best taxonomy for your organization’s project may differ
from another’s. Ensure your taxonomy is relevant to the project’s aims.
Provide documentation to ensure all core stakeholders can access and
understand the terminology. Documenting the process also enables teams to review and
reuse the research in the future.
5. Look for patterns and trends
Group similar pieces of information into distinct categories or levels based on
common characteristics, themes, or patterns. Use codes/tags that can be inductive
(data-driven codes) or deductive (predefined codes).
Once you’ve synthesized the data into one coded set, it’s significantly easier for
your team to discover patterns and trends. Common and specific pain points for
customers will become more evident. And you’ll likely discover trends that you didn’t
expect.
 As you analyze the data, keep the core goals and end users in mind. The insights
you gather throughout this process should link to the goals, which should always benefit
the end user.
6. Share your findings
Once you’ve gathered insights, it’s essential to communicate them. Insights are
wasted if core stakeholders can’t act on them. After all, they’re the ones who will drive
change.
Collate all findings into an easy-to-understand report with critical insights,
actions, and project owners highlighted. Consider different learning styles by adding
color, images, and graphs to communicate the information simply and clearly.
Creating timelines can ensure that change happens in a timely way.

7. Ask “how might we” questions

Once you’ve shared your insights, it’s helpful to organize a design workshop to
consider potential solutions. As part of this, “how might we” questions can help you
ideate solutions to better deliver for customers.
These questions relate to the insights you’ve gathered. Let’s take these examples:
 Customers are dropping off at the shopping cart
 Customers are avoiding sign-ups due to data privacy concerns
 Customers are reviewing the business badly
Some “how might we” questions to address these problems could be:
 How might we ensure users spend only a few minutes in the shopping
cart?
 How might we communicate data privacy when customers are signing
up?
 How might we ensure our customers have a better sentiment towards the
company?
These questions can then lead to critical actions across the business.
Gain actionable insights with data synthesizing
Data from multiple sources is more reliable and powerful. But organizing that
data into a uniform pattern is key to making the most of it. That’s where data synthesis
comes in. Synthesizing data requires:
  Bringing various sources and various formats into one platform
 Creating a UX research taxonomy to make the data uniform
 Drawing insights for action across the business
Deep analysis can take time, but it’s a critical aspect of user-centered design and
development. Once you’ve organized the data meaningfully, you can draw vital insights
to drive positive change for users.
PROTOTYPE ITERATION
The iterative design process is a simple concept. Once, through user research,
you have identified a user need and have generated ideas to meet that need, you
develop a prototype. Then you test the prototype to see whether it meets the need in
the best possible way.
Then you take what you learned from testing and amend the design. Following
that, you create a new prototype and begin the process all over again until you are
satisfied that you’ve reached the best possible product for release to the market.
This iterative process is often called ―rapid prototyping or ―spiral prototyping.

Why use prototypes

Prototyping is an extremely valuable step in the design thinking process. Putting
the user at the heart of the process requires you to test your designs on real users—and
prototypes make this possible without spending loads of time and money.
Prototypes can help you to
  Gain first-hand insights into how your users will interact with, and react to, the
product you’re designing. Seeing an early version of the product in action shows
you if, and how, it’ll work in the real world.
 Identify any usability issues 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.
 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.
 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.

4 Different kinds of prototypes

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:
 Form: Is it a hand-drawn prototype, or a digital one? Is it for mobile or
desktop?
 Fidelity: How detailed and polished is the prototype? You’ll often hear the
terms high-fidelity and low-fidelity in relation to prototypes.
 Interactivity: How functional is the prototype? Can the user click on it or
interact with it, or is it view-only?
 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?
Generally, prototypes can be divided into low-fidelity and high-fidelity. Fidelity
simply 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:
 In the manufacturing world, rapid prototyping is much quicker than traditional
prototyping, which may take months or even years. When it comes to building digital
products, however, it shouldn’t ever take designers months or years to build and test a
prototype.

So, in actual fact, all prototyping in digital design can be considered

rapid. Prototyping tools like InVision and Prott showcase the nature of prototyping in
the digital realm: they are designed to expedite an already speedy process, allowing us
to stitch together screens in just minutes.

In a relatively short space of time, we build a prototype of a section of a product

we’d like to validate. We then show it to users or our team to gather feedback, and make
changes based on this feedback. This process lets us gather feedback early and often,
helping us “build better products faster.”

The benefits of rapid prototyping

Rapid prototyping gives us a visual to make sure we’re all on the same page. It
isn’t the same thing to describe a product as it is to see it. And while we probably can get
away with descriptions within teams since we all speak the same language, they are no
good for stakeholders, investors, or users. A quick prototype eliminates
miscommunication.
Rapid prototyping also helps us catch problems or pain-points early on in the
design process. This lets us address and solve the problem before it gets to development
or further into the process, saving us precious time and money.
How to build a rapid prototype: The rapid prototyping
cycle
Now we know what a rapid prototype is, let’s consider how to go about building
one.It is quite simple:
1. Build what you’re testing
2. Test it on users, stakeholders, or your team
3. Adjust it to reflect feedback
4. Repeat the process