Want to unlock the full potential of your design team? Need to understand how interaction, animation, and visual elements combine to shape an experience for your users? Leveraging the prototyping process you can build a realistic version of your idea, validate your design direction, and share your vision with stakeholders.
4. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
What this talk is about
Introductions
01. The importance of validating your design direction with real users and real
devices
02. How to use prototyping to explore ideas and collaborate with others
03. Strategies you can apply to your own process and implement with your
teams
04. The growth of UX Engineering in Google Search, Identity, and Maps
4
5. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
W“We tend to think of prototyping as
storytelling. The stronger your story
the more compelling argument you
can make.”
5
- Kaushal Shah, UX Engineer in Google Search
11. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Defined: What is a prototype?
Define prototyping
Let’s break that definition down to it’s core elements:
● An early sample or release of a product
● Built to test a concept or process
● Act as the thing to be learned from
11
12. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
A prototype is a thing to be
learned from
Define prototyping
Verbally communicating about design
mocks can be confusing and many
things can get lost in translation
12
14. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Build a shared understanding
The importance of prototyping
User experience design is not an
individual sport. To that end, we
leverage prototypes to align around
our design direction together
14
User Experience
What is desirable?
PM & Marketing,
Sales, Strategy
What is profitable?
Engineering
What is feasible?
15. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Expose your ideas to real
users
The importance of prototyping
Gathering feedback about a prototype
you’ve built will help you focus the
conversation on the most important
elements
15
16. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Neutralize the politics of
deciding
The importance of prototyping
Get stakeholders involved with your
team and invested in the design
process early
16
Preventing the Executive Swoop and Poop with Design Sprints by Jared M. Spool, User Interface Engineering
18. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Sketching. Paper and
digital prototyping. Native
application and web
development.
The prototyping process
18
19. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Sketching. Paper and
digital prototyping. Native
application and web
development.
The prototyping process
19
20. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Choose the best fidelity for
your prototypes
The prototyping process
20
Strike a balance between where you are
in the design lifecycle and the goals of
the project
Choosing the Right Prototyping Tool by
Javier Cuello, Smashing Magazine
21. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
“Learn by doing” and build a
culture around it
The prototyping process
Prototyping unites the development
and design processes
21
Experiential Learning at Wikipedia
22. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
The four abilities possessed
by experiential learners
The prototyping process
● Be willing to be actively involved in the experience
● Able to reflect on the experience
● Possess and use analytical skills to conceptualize the experience
● Possess decision making and problem solving skills in order to use the new
ideas gained from the experience
22
23. GOOGLESIMUXRESEARCH
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Learn to live with the
outcome
23
The prototyping process
The prototyping process is just as
much about learning what our users
want as what they don’t
25. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
PPrototypes are a fabulous way to
explore ideas with a team. They
shorten the time between “This is
what we’re thinking” and “Oh, I get
it.”
25
- Jared M. Spool, User Interface Engineering
26. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5 26
Exploring ideas with prototypes
Lo-fi brainstorming
The Skeptics Guide to Low Fidelity Prototyping by
Laura Busche, Smashing Magazine
27. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Design speed dating and
storyboarding
Exploring ideas with prototypes
27
Sketching, storyboarding, and paper
prototyping are great for divergent
ideation and have a low barrier to entry
Speed Dating as a Design Method by Rachel Hinman, Adaptive Path
28. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Product and experiential
prototyping
Exploring ideas with prototypes
With a healthy mix of digital
prototyping tools we can quickly
investigate subtle interaction details
29. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Native application and web
development
Exploring ideas with prototypes
29
Want to try out a new component
library for your Android app? Heard
that Angular or React may be a good
choice for your web app?
30. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Prototyping as a part of
design sprints
Exploring ideas with prototypes
30
Sprints are a framework for teams of
any size to solve and test design
problems in 2-5 days
The Design Sprint by Google Ventures
31. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Collaborating with
researchers
Exploring ideas with prototypes
31
Prototypes and research tools are
invaluable to learning what our users
value most in our products
32. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Brainstorms, cafe studies,
design & stakeholder
reviews
Strategies for you and your teams
32
Team activities that promote
prototyping, drive ideation, and
celebrate feedback
34. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Adopt a process of
thoughtful and deliberate
software design
Strategies for you and your teams
34
Design Kit: The Field Guide to Human Centered Design by IDEO
35. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Design for breakpoints and
iteration
Strategies for you and your teams
35
Apply the human centered design
process of inspiration, ideation, and
implementation. Remember to rinse
and repeat as necessary.
36. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Diversity of thought makes
for good user experience
design
Strategies for you and your teams
36
37. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Beware of common pitfalls
when you prototype
Strategies for you and your teams
37
● Fixating on the artifact instead of the understanding
● Converging too soon without exploring enough
● Neglecting to test our work with real people
● Over engineering our prototypes
Five Prevalent Pitfalls When Prototyping by Jared M. Spool, User Interface Engineering
40. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Strive towards mastery with
the tools of your trade
Advice for would-be prototypers
40
Become a polyglot and embrace
change in the tools you use over the
course of your career
41. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Keep a record of your
progress
Advice for would-be prototypers
41
Use source control for everything
including design artifacts. Consider
tools for managing assets and
collecting feedback.
42. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Go guerrilla with user
testing
Advice for would-be prototypers
42
Ad-hoc testing is an easy way to collect
causal feedback about your progress
How to run user tests at a conference by Daniel Sauble, Smashing Magazine
43. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Measure your success &
make time to celebrate it
Advice for would-be prototypers
43
We use OKRs (Objectives and Key
Results) to capture our goals and
define success metrics for our projects
44. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Brooks’ law is real and you
should know about it
Advice for would-be prototypers
44
High quality communication is
essential to managing complex
software design projects
The Mythical Man-Month by Frederick P. Brooks, Jr.
45. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Master the powers of
active listening
Advice for would-be prototypers
45
“Listening is one of the most important
skills you can have. How well you listen
has a major impact on your job
effectiveness…”
10 Steps to Effective Listening by Dianne Schilling, Forbes Magazine
46. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Embrace compromise with
enthusiasm
Advice for would-be prototypers
46
“It is through self-discipline we actually
do the work of letting go of our
attachments”
Letting go: Living a life without attachment by Jedi Path
47. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Practice strengths building
and invest in learning
Advice for would-be prototypers
47
Reinforce the skills you have and make
time to build new ones
48. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Make room for palate
cleansing projects and
infrastructure development
Advice for would-be prototypers
48
49. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Consider a dedicated
prototyping role no matter
the size of your team
Advice for would-be prototypers
49
51. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
How would you describe the
UX Engineering role to a
classroom of 8th graders?
The growth of UX Engineering
51
52. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
B
“Being a UX Engineer at Google is like
having a great idea for landing a spaceship
on Mars. You could start by dropping eggs
with parachutes from your roof and realize
that you missed a few important things. In
the next prototypes you’ll incorporate those
ideas. When the spaceship lands on Mars,
your quick prototypes’ big ideas will be
visible.”
52
53. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
D“Designers figure out WHAT a
product should do. UX Engineers
figure out HOW a product should do
it.”
53
55. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Prototypes are the core
of what SIM UXEs do
The growth of UX Engineering
55
XResearch
studies
XLaunches
supported
XX
UX tools
Executive
reviews
57. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Exploring uncharted
territory
Exploring ideas with prototypes
Prototyping voice based
interactions is hard! We make
tools for design and research to
learn how people use our
products hands-free
58. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Intuitive tools for rapid
ideation
Exploring ideas with prototypes
58
Giving more freedom to designers to
express their ideas without having to
convince someone else to build it for
them
59. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Bootstrapping our design
teams
Exploring ideas with prototypes
59
Improving the tools used by our
cross-functional counterparts
60. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
Abstracting away the
complexities
Exploring ideas with prototypes
60
Mappy is a great example of this and
allows our cartographers to explore
map design at scale
61. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
B“Be the team everyone wants to
work with.”
61
- Alex Cook, UX Lead in Google Search, Identity, & Maps
62. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
What is the most important
skill for a UX Engineer to
possess?
The growth of UX Engineering
62
63. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
T“Tenacity! It’s not enough to just be
analytical or have a great eye. You
need to have the patience and
wherewithal to bend the code to
your will.”
63
64. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
E
“Empathy for the user married with
technical selflessness. You need to be
able to project yourself into the minds of
your users, and in so doing, you may have
to abandon what you originally wanted to
do — something that may have been
conceptually elegant or visually cool or
technically simple — in order to do what's
best for the user.”
64
65. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
O“Have an open mind. Be nimble.
Invest in the ability to learn new
tech and skills. Cultivate a feel for
delight.”
65
66. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
We are changing the way that
Google does front-end
The growth of UX Engineering
66
There are X UX Engineers across a
multitude of projects at Google and
roughly 68% of us identify as web
developers.
67. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
We’re looking for good
people to join our ranks
The growth of UX Engineering
67
We hired X UXEs in 2016 and
currently have X+ openings with
design teams across the company
Apply online: https://www.google.com/about/careers/fields-of-work/design/
69. GOOGLESIMUX
PROTOTYPING FOR SPEED & SCALE https://goo.gl/G5yHv5
What this talk was about
Introductions
01. The importance of validating your design direction with real users and real
devices
02. How to use prototyping to explore ideas and collaborate with others
03. Strategies you can apply to your own process and implement with your
teams
04. The growth of UX Engineering in Google Search, Identity, and Maps
69
70. Thanks!
Special thanks to Andrew Swank, Kaushal Shah, Mai
Tran, and Nida Zada for their help with this talk.