State of State Of: Prototyping Prototyping

State of
prototyping
2020
A global report by Design Week
in partnership with Framer.

Contents
About the research 03
The renaissance of prototyping 05
From early buy-in to risk-reducing 10
10
13
14
Three ways prototyping transforms your working process 16
16
17
20
When prototyping is most effective 23
Five signs your team isn’t prototyping enough 25
Prototypes in action 27
Closing the gap 30
2020 State of Prototyping Report 02

About the research
Design Week focused on senior design professionals, honing in
on those who prototype digital experiences. These designers
came from all across the globe and spanned 16 different
industries.
Luke Woods Helen Fuchs

VP, Head of Design at Instagram Design Director at ustwo
Noel Lyons Laurel Tripp

Chief Design Officer at Barclays VP, User Experience at Salesforce
John Maeda Margaret Cyphers

EVP, Chief Experience Officer at
Design Director at Google
Publicis Sapient
Steve Wake Klaus Zyciora

Design Director at Work&Co Head of Design for Volkswagen Group
Jenny Cha Jerome Zhong

Senior Product Designer at Duolingo Senior Product Designer at Duolingo
John Pruitt
Director of Design and UX at Dell
Empower your team with prototyping. Learn how Framer can help 03
The renaissance
of prototyping
From a surge in online retail to the burgeoning range of video
communication tools, the COVID-19 pandemic has dramatically
accelerated the global shift towards digital.
99% agree that prototyping is more

important than ever
70%
increased their commitment to it within
the past two years
The overwhelming majority (99%) of respondents agree that
prototyping is more important than ever. Two thirds (70%)
increased their commitment to it within the past two years.
Used appropriately, a working prototype The increasingly integral role of

does much more than polish rough edges: prototypes in the design process has
it can be hugely influential on the final sparked an evolution in the tools required
outcome. In fact, 94% of respondents to create them, particularly for
consider prototyping to be at least non-coders: 87% of respondents claim
‘important’ for the overall success of a that prototyping has become easier in the
project, with 74% going so far as to rate it past two years.
’critical’ or ’very important’ (fig 1).
” We prototype everything. There’s been
a Renaissance in the world of prototyping tools.

Luke Woods – VP, Head of Design at Instagram
Figure 1: Where prototyping is relevant to a project, how important is it in guaranteeing the success of a final product?
42%
32%
20%
5%
1%
Critical Very important Important Somewhat important Not important at all

Putting theory
into practice
Prototypes enable designers – and, Prototypes can pave the way for
crucially, potential users – to road-test innovation, particularly in fields where
ideas.
developing concepts before field-testing
”
them could be prohibitively risky and
expensive. For instance, a quarter of
respondents identify emerging
It’s important to our technologies such as AR and VR as a key
DNA to get tangible. focus for prototyping, while 21% create
– Helen Fuchs, Design Director at ustwo prototypes for Internet of Things (IoT)
devices (fig 2).
“You must test if your hypothesis is But by far the most widespread use of
resonating. Getting tangible quickly is
prototyping is for designing websites and
a great shortcut,” continues Fuchs.
apps. Intuitive, on-brand digital
“The best prototypes are a way of thinking experiences are key differentiators in a
strategically, and pressure-testing ideas,” crowded market, and they are often one of
adds Steve Wake, design director at the most public-facing parts of any digital
Work&Co. “They also help designers transformation strategy. 85% of
preserve and protect the magic of their respondents use prototypes in their web
ideas.” design process, and 68% for app design.
85% 68%
of respondents use prototypes in their
web design process
use prototyping in their mobile
design process
Which of the following areas of prototyping
does your organization carry out?
Based on multiple choice selection by respondents.
Websites
85%
Apps
68%
Future tech e.g. augmented reality, virtual reality

25%
Internet of Things (IoT) devices

21%
Entertainment devices e.g. gaming and TV

12%
Other
11%
Automotive dashboards
9%

Empowering
non-coding designers
As non-coding designers take more Clearly the fidelity to which a prototype is
ownership of the prototyping process, built affects the time required, but so does
reducing the need to tie-up developer the tool of choice. The continued
resource at an earlier stage, tools are innovations in prototyping software that
becoming more intuitive and accessible to Woods identifies are streamlining the
cater to that need.
process, bringing that resource

commitment down across the board.
While there’s a consensus on the overall

value of prototyping, there is also a With this Renaissance of prototyping as a
disparity in the time that respondents backdrop, this report explores the
currently spend doing so.
significant benefits of using prototypes to

gain and maintain a competitive edge, and
Our research reveals a significant range in considers how they can boost productivity,
the average time required to build a efficiency and ultimately the quality of the
prototype app or website (fig 3). Although outcome.
for just over a third (35%) it takes up to 12

hours, a similar proportion take up to one
hour (17%), a day (19%) and a week or
more (18%).
Figure 3: How long on average does it take to prototype an app or website using your software tool?
35%
19%
17% 18%
8%
3%
Up to
Up to
Up to
At least
At least
More than
5 minutes 1 hour 12 hours 24 hours 1 week 1 week
”
Prototypes can
be phenomenal
presentation tools.
– Noel Lyons, Chief Design
Officer at Barclays

What are the key benefits of prototyping
to your organization overall?
Effectively communicates design decisions for stakeholder buy-in

49%
Enables experimentation of multiple ideas for improved design
40%
Improves communication
28%
Reduces the cost of making mistakes
24%
Enables experimentation of multiple ideas for faster design
20%
Reduces overall development time
19%
Effectively communicates progress internally
13%
Other
7%
Without a senior sponsor internally, “A thing tells a thousand words. You’re
projects all too often fall by the wayside so putting something in a client's hands that
this role for prototypes should not be they can play with and really understand
underestimated. In fact, just over a third the proposition in action,” says Helen
(36%) of respondents consider the ability Fuchs at ustwo. ”Any kind of artefact that
to create something persuasive in a pitch can be circulated, and people can use
meeting to be one of the most important when we're not there, helps get buy-in.”
features of a prototyping tool (fig 6).
However, Barclays’s Lyons urges some

Instagram VP, Head of Design Luke Woods degree of caution: he believes that
has seen their effectiveness within prototypes should be used to refine and
Instagram and parent company Facebook: road test ideas before unleashing their
”Recently we came to an agreement on persuasive power in the boardroom. ”You
something big and contentious shockingly can sell in anything with a really good
quickly,” he recalls. ”A big part of that was prototype, but it doesn’t necessarily mean
the quality and fidelity of our prototypes.” it's a good idea,” he says.
” A prototype is worth a
thousand meetings.
– John Maeda, EVP Chief Experience
Officer at Publicis Sapient
”But you need the right meeting, to show

it to the right person who’ll understand it
and sign off on it. You may need 10
meetings first.”
“Prototypes can instil confidence in both

clients and makers that this could be the
right thing,” concludes Maeda. "And you
need confidence to bring something to
the planet that no one has used before.”

To cater to growing consumer expectations for digital
experiences in the face of tightening budgets, it’s important to
fail quickly and cheaply. Getting hands on with prototypes at an
early stage means you can explore different routes – and
crucially, rule out dead-ends – before investing too much time
and money in them.
”
For 40% of respondents, prototypes are
most effective for experimenting with
Products that people expect
multiple ideas quickly and effectively,
before settling on the best option to take today, you couldn’t really
forward. At a very early stage, low-fidelity create without a prototype.
prototypes can be a quick and simple way
– Luke Woods, VP, Head of Design
to do so (fig 4).
at Instagram
This is an approach taken by the design
team at language-learning app, Duolingo. “High-fidelity, interactive prototypes give a
“Our prototypes are rough enough that no strong sense of the end product, the user,
one will take it as the finalized thing,” and the business value,” agrees John
explains Senior Product Designer Jerome Pruitt, Director of Design at Dell.
Zhong. “People give feedback on the idea “Prototypes also provide an indication of
itself, rather than a colour choice, or the feasibility and cost to develop it at
specific design feature.”
scale.”
As ideas are developed and refined,

prototypes naturally increase in fidelity.
“Rich prototyping tools enable a level of
creativity and experimentation that help
you develop conviction about the right
solution,” argues Luke Woods at
Instagram.
As digital transformation speeds up, Subtle nuances can have a
digital products and experiences must disproportionate impact on people’s
make the art of solving complex, emotional response to a design, and how
multi-faceted consumer needs look simple it reinforces brand associations. “Our team
and effortless. Almost a fifth (19%) of uses prototypes to show the kind of
respondents believe the biggest selling motion and interaction we want,” explains
point of a prototyping tool is being Margaret Cyphers of Google. “If we can
powerful enough to support products that show it, rather than explaining, it makes it
are too intricate for static-screen demos much easier and less open to
(fig 6). interpretation.”
If stakeholders have a blinkered focus on the bottom line rather

than best-in-class products, prototyping may be discounted as
an easily cut expense, or an unnecessary stretch on the project
timeline. But used effectively, it can save both time and money
in the long run.
24%
Full-stack development gets expensive
quickly, and prototypes have a key role to
play in enabling designers to explore and
test ideas before developers get involved.
Around a quarter (24%) of respondents
believe the main selling point of respondents believe the main selling point of
prototyping is to reduce the cost of mistakes
prototyping is to reduce the cost of
mistakes, while almost a fifth (19%)
believe they are most effective at
streamlining the overall development time
required (fig 4).

In the automotive sector, the cost of With budget constraints and resource
mistakes can escalate very rapidly. ”Very capacity in mind, 43% of our survey
fast you could lose millions,” says Klaus sample would prioritize a prototyping tool
Zyciora, Head of Design for Volkswagen that saves them time and effort during
Group. Accordingly, at VW effective the process (fig 6).
prototyping is crucial.
“We used to fully design the product, set it

“It’s a very well-organized and up as an A/B experiment, then use that
orchestrated game we are playing, and we data to evaluate the idea,” reveals Jenny
must be focused and concentrated,” Cha, also a Senior Product Designer at
Zyciora continues. ”Digitalization helps: a Duolingo. ”It took months. With a
data set is a data set. There's no room for prototype, we can get ideas in front of
misunderstanding.”
learners within days.”
A working prototype can keep focus on the bigger picture during

a multi-stage design process, avoid veering off track and
wasting time and resource. ”In ustwo’s agile development
process, everything is broken down into sprints and stories,”
explains Helen Fuchs. ”It's hard to hold the whole product in
your mind with no prototype as a reference.”
”
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
at Google

The more complex and advanced the design solution, the more
crucial it is to get tangible with it as soon as possible to avoid
unnecessary confusion, and to help smooth out any unforeseen
kinks that a written spec might skip over.
What are the key technical benefits of
prototyping to your organization?
Allows users to provide valuable feedback within the proper context

54%
It brings the user interface design to life

44%
Illustrates functionality to developers in ways screen specifications can’t

34%
Reduces the need to write spec or documents to explain designs, saving time
22%
Enables effective incorporation of user data during testing

14%
Benefits products otherwise too intricate for static screens and click-throughs
13%
Accounts for technical constraints, different devices and edge cases

12%
Other
4%

This includes feeding in real user data – something Instagram
strives to do wherever possible. ”The more realistic an
experience we provide, the more real feedback we can get,”
explains Instagram’s Luke Woods. ”With a more static mock-up,
or broad-line prototype, or even a rich prototype with
placeholder data, you tend to get more hypothetical feedback.”
” Once you make it real, you

have to make it really real
or people get distracted.
– Laurel Tripp, VP, User Experience at
Salesforce
According to Tripp, Salesforce has a large

analytics component within its software –
here, live insights have much more
relevance and impact at the testing stage
than dummy text.
For Work&Co’s Steve Wake, there's also

value in testing micro interactions within
It’s the same at Google. ”Once you use an interface in isolation. ”Prototyping can
actual data it’s much more valuable, be used to answer a single question,” he
because you can imagine the importance says. ”That could be, ‘How does this
of something you see on screen,” adds navigation hide and reveal?’, ‘How does
Margaret Cyphers. ”If it’s not your data, it’s this page transition to the next?' or simply,
not the same. It’s going to feel different if ‘Does this feel natural?’ If it doesn’t, the
it’s fictitious.”
user will know.”
54% 22%
of respondents believe that ability to reduce
confusion between design and development is a
of respondents claim that prototypes can save time
by reducing the need for writing detailed spec docs
primary selling point for a prototyping tool for developers

Figure 6: Which key attributes do you look for when considering prototyping tools?
Cuts down on confusion between design and development

54%
Saves time and effort during the development lifecycle

43%
Improves buy-in from stakeholders, including team, client and leadership

36%
Enables design with technical constraints, different devices and edge cases in mind
22%
Ability to incorporate user data during testing for higher quality feedback
21%
Supports products otherwise too intricate for static screens and click-throughs
19%
Other
4%
When prototyping is
most effective
Although our research makes a compelling case for the value
that prototyping can add to the design process, it also reveals a
disparity between the ideal stages at which respondents would
like to incorporate prototyping into their workflow, and when it
actually takes place.

There are various factors that could contribute to these findings.
‘Pain points’ identified in our survey include lack of time (40%)
and the perceived learning curve (36%) required to increase the
role of prototyping in the creative process. Cost was issue for a
quarter of respondents, while around a third were more
concerned about finding the right tool (fig 8).
Figure 7: At what stage should prototyping ideally be incorporated? vs At which design stage does your organisation
generally tend to incorporate prototyping?
72%
71%
67%
66%
60%
56%
55%
50%
Early stage
Presenting ideas
User testing with
Working with
iteration internally customers developers
Tend to be incorporated Ideally be incorporated
What pain points has your organization
experienced in respect to prototyping in
the last two years?
Not having the required time available to incorporate prototyping

40%
Steep learning curves when starting to use a tool for the first time
36%
Prototyping tool not fitting exact requirements

31%
Finding/identifying the right tool that would fit exact requirements

27%
Finding budgets to afford cost of prototyping tools

25%
Key stakeholders not wanting to incorporate prototyping as perceived as slow

22%
Other
8%

1
Spiraling
You think you have a decision about
what you’re building, but it becomes
complexity more and more complex. You face
long timelines, and lots of competing
ideas.
Luke Woods
VP, Head of Design at Instagram
Overemphasis
2
Everything stays too theoretical.
If people don’t sketch or manifest,

on theory that’s a warning sign. Too many
words, not enough looking at how
it comes to life.
Helen Fuchs
Design Director at ustwo
3
Loss of
You don’t know how one bit of an
experience hangs together with
coherence another or understand where there
are overlaps.
Noel Lyons
Chief Design Officer at Barclays
4
Blinkered
There’s less ideation, and a narrower
exploration of ideas. People lock into
vision ideas super-quickly and miss
valuable information they could
be getting.
Margaret Cyphers
Design Director at Google
Lack of
Designers work in isolation, ticking
5
the requirements from a PM and
collaboration providing a specced document. No
collaboration; no exploration of ideas;
no curiosity or unpacking of
requirements to understand them
better; no critiques from other
designers.
Laurel Tripp
VP, User Experience at Salesforce

” We had a few hunches about killer features,
but at the prototype stage, people didn’t click
on them at all. They just wanted the basics to
work really well. The data told the story.
– Helen Fuchs, Design Director at ustwo

Fortunately, with prototyping tools ”Using modern tools, the work today to
becoming increasingly accessible, create a rich prototype isn’t so different
efficient, powerful and affordable, there’s from the work 10 years ago to create a
no better time to address the issue at perfect static Photoshop mock-up,” says
hand.
Instagram's Luke Woods.
To maximize the value of prototyping, it’s important to focus

time and resource where it counts.
” You need to tailor your process to the sector,

the client, and the team. It’s like a special
restaurant. You have to think about how to
reliably create the right meal for each
customer.
– John Maeda, EVP Chief Experience Officer at Publicis Sapient
Noel Lyons’ team at Barclays develops Survey respondents also acknowledged

bare-bones prototypes as part of several the value of prototypes as a presentation
week-long design sprints in the early tool (67%) and as a bridge between
stages, and then in the fourth or fifth designers and developers (55%), and
week of the process puts more resource these percentages tallied with how they
into a high-fidelity model for more are currently used in practice (fig
detailed feedback. ”Prototypes are great 8).“People who have a natural inbuilt
to explore conceptual ideas, but they're curiosity in their arsenal tend to figure out
also good to get more unvarnished, a way to prototype, one way or another,”
emotional responses to something that concludes Laurel Tripp.
feels real,” explains Lyons.

framer.com

State of State Of: Prototyping Prototyping

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

State of State Of: Prototyping Prototyping

Uploaded by

Copyright:

Available Formats

State of

A global report by Design Week

in partnership with Framer.

About the research 03

The renaissance of prototyping 05

From early buy-in to risk-reducing 10

Three ways prototyping transforms your working process 16

When prototyping is most effective 23

Five signs your team isn’t prototyping enough 25

Closing the gap 30

2020 State of Prototyping Report 02

Luke Woods Helen Fuchs

Noel Lyons Laurel Tripp

John Maeda Margaret Cyphers

Steve Wake Klaus Zyciora

Jenny Cha Jerome Zhong

99% agree that prototyping is more

Used appropriately, a working prototype The increasingly integral role of

” We prototype everything. There’s been

a Renaissance in the world of prototyping tools.

Critical Very important Important Somewhat important Not important at all

2020 State of Prototyping Report 06

developing concepts before field-testing

Future tech e.g. augmented reality, virtual reality

Internet of Things (IoT) devices

Entertainment devices e.g. gaming and TV

2020 State of Prototyping Report 08

process, bringing that resource

While there’s a consensus on the overall

significant benefits of using prototypes to

for just over a third (35%) it takes up to 12

5 minutes 1 hour 12 hours 24 hours 1 week 1 week

2020 State of Prototyping Report 10

Effectively communicates design decisions for stakeholder buy-in

features of a prototyping tool (fig 6).

However, Barclays’s Lyons urges some

”But you need the right meeting, to show

“Prototypes can instil confidence in both

2020 State of Prototyping Report 12

As ideas are developed and refined,

If stakeholders have a blinkered focus on the bottom line rather

2020 State of Prototyping Report 14

“We used to fully design the product, set it

A working prototype can keep focus on the bigger picture during

2020 State of Prototyping Report 16

Allows users to provide valuable feedback within the proper context

It brings the user interface design to life

Illustrates functionality to developers in ways screen specifications can’t

Enables effective incorporation of user data during testing

Accounts for technical constraints, different devices and edge cases

2020 State of Prototyping Report 18

” Once you make it real, you

According to Tripp, Salesforce has a large

For Work&Co’s Steve Wake, there's also

2020 State of Prototyping Report 20

Cuts down on confusion between design and development

Saves time and effort during the development lifecycle

Improves buy-in from stakeholders, including team, client and leadership

2020 State of Prototyping Report 22

‘Pain points’ identified in our survey include lack of time (40%)

and the perceived learning curve (36%) required to increase the

role of prototyping in the creative process. Cost was issue for a