Prot TypinG

Guide for TEAMS

2021 · Framer.com
Table of contents
1 The value of prototyping
2
Present the full experience

3
Close the design and development gap

4
Get better feedback from user testing

5
Build a single component library

6 Design with real data

7 How to incorporate

prototyping into your team

8
Enable discovery

8
Set a foundation

9
Make a playground

9
Embrace libraries

9 Prep prototypes for user testing

10 How to select the right

prototyping tool
11
Prioritize collaborative prototyping

12
Connect design and production components

13 Put interaction at the forefront

Intro
World-class design solutions require
honing, refining and testing in order
to reach their full potential. From
apps to automobiles, prototyping is
an increasingly fundamental part of
the process for in-house teams and
agencies alike.
Prototyping can help
your team move past
issues, providing renewed
focus on your product.
Agency and client-side design teams
are waking up to the potential of
prototyping, and prototyping is
experiencing a rapid growth both in
popularity and value, across all
stages of the product design process.
The value of

prototyping
There’s been a Renaissance in the world of
prototyping tools. Ten years ago, there was a
bit of showing and a lot of telling. Now we can
show everything, and hardly have to tell at all.

Luke Woods · VP, Head of Design · Instagram

01
Moving beyond static design
into prototyping allows teams to
avoid these kinds of issues and
fully vet and detail the product
before development begins.
01 · Value of Prototyping

Present

the full

experience
How many times have you presented a
mockup to a client, exec, or stakeholder only
to spend most of the meeting trying to
explain what a mockup is rather than the
design direction itself?

We’ve all championed new user-centered

design techniques, but we’re still neglecting
the very first users of our work: the people
who approve it.

Stakeholders need to see interactivity, micro

interactions, and user flows to understand
how a design will work.

By adopting prototyping, design teams will

see increased understanding and
appreciation for their work—not to mention
quicker approval than with static assets.

Handing over a mobile device

with a prototype inspires in a
way a 200-slide deck can’t.
Steve Wake · Design Director · Work&Co
01 · Value of Protot yping

Close the design &

development gap

We don’t want to set developers working on something

experimental: it becomes time-consuming and costly.

Noel Lyons · Experience Design Director · Barclays

Interactive prototypes show exactly Prototypes make this big picture easy

how the product works and behaves, so for everyone to grasp, so there is less

that developers aren’t missing critical confusion about how everything

information when they begin their work. works when development begins.
Get better
01 · Value of Prototyping But the problem is that user
testing before development

feedback
begins is difficult for many
teams because all they have

from user
are static mockups.

testing
Creating prototypes during
the design process can help
your team get more
information from user testing
in some situations.

Designers need to be able to

decide how detailed a
Today, design means prototype should be in order
discovering what the app to get the information they
need.

should be and demonstrating Being stuck with static

how it should work. To discover mockups all the time limits
and demonstrate concepts, user the effectiveness of testing.
testing and prototyping need to
be part of your workflow.

We’re not asking people to make such a

leap of faith to imagine themselves
using it. Prototypes are critical as we
can test without full engineering or
actual launchable code. It enables us
to get quicker feedback, at less cost.
Margaret Cyphers

Design Director · Google

 01 · Value of Prototyping

Build a single
component
library
Modern design tools allow designers
to create design systems, symbols,
Everyone is searching
and shared design assets. for the holy grail: the
Development libraries like React, Vue,
and Angular allow developers to
single source of truth
separate logic and presentation into across both design and
self-contained, reusable components.
development.
But, these techniques and tools are A prototyping tool with a built-in
leading both designers and developers design system that connects to
to become more entrenched into their production can help connect
own separate tools. between these two workflows.
0 1 · Va lu e o f P r otot y p i n g

Design Lorem Ipsum is the

greatest embarrassment
with
of the design industry.

real Using filler text and fake

data data leads to incorrect

design, wasted time, and

bad user experiences.

Designers need to leverage real data

during the design process to create a

quality product. Many static mockups

don’t allow for this. With prototypes,

designers can easily leverage live data

from all kinds of sources without

getting help from developers.

Once you use actual

data it’s much more

valuable, because you

can imagine the

importance of something

you see on screen

Margaret Cyphers

Design Director · Google

How to

incorporate

prototyping

into your team

For the team itself, a
prototype can be used
for clarification and
alignment, especially
for behaviors and
transitions.
One of the biggest
myths of prototyping is
that it slows down the

02
design process.

The following tips will help your team

establish a workflow that is not only
speedy and efficient but also playful
and collaborative.
02 · Protot ype with your Team

Enable discovery
During this exploratory phase, Focus the team on the problem Don’t focus on details, only

ideas are meant to be fluid space and customers. structure and navigation

and abstract. matter at this point.

Set a foundation

At this stage, your prototypes Details matter here. Context Although the prototype is still

should contain flows and in the form of relevant copy, an experiment, using real

some interactive elements. data, and labels all help the data gives you a solid preview

Start incorporating data and various paths the user can of design challenges, such as

copy that reflect the world of take when interacting with the truncation or readability.

your customer. prototype.

 reate a
02 · Prototype with your Team

C
playground
environment
Now that you have your foundation, Create an experimental space This separate prototyping
it’s important to keep prototyping fun that allows others to collaborate workspace, detached from the
and playful for the team. Prototyping quickly without messing up the main prototype, allows the team
is inherently a social way to develop rest of the design.
to experiment with animations
ideas, even with non-designers. or dynamic elements.

Embrace libraries
Libraries accelerate the More than static UI Kits, this Save components into the library so
prototyping process exponentially.
interactive design system will other team members can reuse them
Invest some time in creating a greatly speed up your on another project.
pattern library of the most prototyping workflow.
common interactions.

Prep prototypes

for user testing

Before testing, remember to Mapping out interactions by triggers, Prep the researcher by presenting the
remove non-essential items and states, and animations/transitions limitations, discrepancies in different
artboards from the prototype.
allow you to consolidate workflows browsers, and devices and any other
into a clean prototype. instructions that are critical for the
success of the testing session.
How
the to select

right
prototyping

tool for

your team

03
Choosing the right tools With knowledge of multiple
disciplines, designers and
for the job depends on engineers should come together
the people and processes to choose a tool that will allow
teams quick adoption to come up
within your organization. with prototypes fast, unlocking
more innovative solutions.
03 · Selecting the right Tool for your team

Prioritize
collaborative
prototyping

Using modern tools, the work today to create a rich

prototype isn’t so different from the work 10 years
ago to create a perfect static Photoshop mock-up.

Luke Woods · VP, Head of Design · Instagram

Comments and annotations

leave too much room for
01 interpretation since every
stakeholder has their own
vocabulary.

Instead, multi-player editing

02 allows cross-regional teams

to work off each others’
prototypes.

By iterating together, the

team is able to create a
03 common visual representation
and move fast.
Connect design

03 · Selecting the right Tool for your team

and production
components
Find a tool that makes it easy
to create, use, and house your
team’s reusable components.

The ideal situation is a

tool that allows you to
pull in production
components and design
with them right on the
canvas, ensuring
prototypes are based
on the most updated
version of your product.

Some tools even offer a way to

convert prototypes into production
level code, a handoff function that
will greatly improve efficiency
between design and development
03 · Selecting the right Tool for your team

Put interaction

at the forefront
It’s important to pick a tool that prioritizes
interactive behavior from ideation all the
way to user testing, and handoff.

Ideally, your tool should allow you to Some tools even offer built-in
build components with real interactions libraries of premade components,
and states, not glorified slideshows. which can drastically accelerate
your team’s workflow.

Ultimately, tools will continue to change so it’s important

to have an open mindset and be flexible to learning and
making judgments about when to switch to a tool that
delivers the most efficient workflow between prototype
and production.