Storytelling with software

GOOGLESIMUX
STORYTELLING WITH SOFTWARE SPOTLIGHT UX/UI • MAY 2017
Storytelling
with software
The virtues and values of UX prototyping
Carl Sziebert • Spotlight UX/UI • May 2017

GOOGLESIMUX
GOOGLESIMUX
A little about me

GOOGLESIMUX
We tend to think of prototyping as storytelling.
The stronger your story the more compelling
argument you can make.
Kaushal Shah, Google for Entrepreneurs Rapid Prototyping video series
STORYTELLING WITH SOFTWARE

GOOGLESIMUX
The power of good
storytelling
4

GOOGLESIMUX
Poems, articles, short
stories, novels, epics
5

GOOGLESIMUX
STORYTELLING WITH SOFTWARE SPOTLIGHT UX/UI • MAY 2017 6

GOOGLESIMUX
What is a prototype?
Who should make prototypes?
When is the best time to make a prototype?
Where should prototypes be made?
How are prototypes made?
Why is it important to make prototypes?
The questions we aim to answer today

GOOGLESIMUX
GOOGLESIMUX
8

GOOGLESIMUX
GOOGLESIMUX
9
What is
a prototype?
Prototypes defined

GOOGLESIMUX
GOOGLESIMUX
10
What is
a prototype?
Prototypes defined

GOOGLESIMUX
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
Defined: What is a prototype?
Prototypes defined

GOOGLESIMUX
Prototypes allow us to focus on better understanding the
problem we’re tasked with solving. Because they are interactive,
they can help eliminate guess work often found when reviewing
mocks.
12
A prototype is a thing to be learned from
Prototypes defined

GOOGLESIMUX
What goes into faking the experience is dictated by the
context of the situation. Think about the question you’re
trying to answer, what you’re hoping to learn, and the
minimum requirements needed to understand it.
13
Faking an experience to answer a question
Prototypes defined

GOOGLESIMUX
Common prototyping methods
14

GOOGLESIMUX
GOOGLESIMUX
The Skeptics Guide to Low Fidelity Prototyping
by Laura Busche, Smashing Magazine
Lo-fi sketching &
paper prototyping
Exploring ideas with prototypes

GOOGLESIMUX
GOOGLESIMUX
Giving more freedom to designers
to express their ideas without
having to convince someone else
to build it for them
16
Design vignettes
with digital
prototypes

GOOGLESIMUX
GOOGLESIMUX
High fidelity, harder to master,
more time-consuming to create
17
Stakeholder
narratives and
complete user
journeys

GOOGLESIMUX
Prototypes are meant to be learned from and come in
a variety of flavors across the fidelity spectrum

GOOGLESIMUX
GOOGLESIMUX
Who should make
prototypes?

GOOGLESIMUX
Designers, researchers, engineers,
writers, stakeholders, users *

GOOGLESIMUX
The abridged history of
UX Engineering at Google

GOOGLESIMUX
UXEs at Google
As of December 2016

GOOGLESIMUX
Visual
Designer
Interaction
Designer
Front end
SWE
Back end
SWE
DESIGN DEVELOPCONTINUUM
23
The abridged history of UX Engineering in Google

GOOGLESIMUX
Visual
Designer
Interaction
Designer
Front end
SWE
Back end
SWE
DESIGN DEVELOPCONTINUUM
UXE,
Design
UXE,
Engineering
24

GOOGLESIMUX
Lenses are specialties within a ladder.
They’re sets of skills and ways to measure performance.
People can move between lenses without HR process.
UX Engineering has 2 “lenses”

GOOGLESIMUX
Usually reports to a UX manager
Builds prototypes, tools, and
frameworks to aid design process
Works closely with researchers
to answer product questions
Learns to master many prototype fidelities
May also contribute product designs,
especially at higher levels
Design lens
Usually reports to a SWE manager
Build products or tools and UI libraries
Writes production-quality code, often in google3
Works closely with designers for
pixel-perfect implementation
Learns to master Google’s tech stack
Often specializes in a platform
Engineering lens

GOOGLESIMUX
GOOGLESIMUX
With a healthy mix of digital
prototyping tools we can quickly
investigate subtle interaction details
Product and
experiential
prototyping
27

GOOGLESIMUX
GOOGLESIMUX
Prototyping voice based interactions
is hard! We make tools for design and
research to learn how people use our
products hands-free
Exploring
uncharted
territory
28
Going boldly

GOOGLESIMUX
GOOGLESIMUX
We build tools that afford designers
and researchers the opportunity to
focus on the most important
elements of their work
Bootstrapping
our design
partners
29
Tools for UXers

GOOGLESIMUX
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.
Anonymous UXE at Google

GOOGLESIMUX
GOOGLESIMUX
When is the best time
to make a prototype?

GOOGLESIMUX
Problem, pitch, solution, implementation
Identifying novel ideas with prototypes
Prototypes are best when build to pitch new ideas or identify novel solutions to new or pre-existing design problems
32
1 2 3 4

GOOGLESIMUX
GOOGLESIMUX
Where should
prototypes be made?

GOOGLESIMUX
Brainstorms, cafe studies, design
sprints & stakeholder reviews
Common activities that promote prototyping,
drive ideation, and celebrate feedback
34
Prototype in place

GOOGLESIMUX
Sprints are a framework for teams of any size to solve and test design problems in a short period of time
Prototyping as a part of design sprints
Participatory design at it’s best
The Design Sprint by Google Ventures
Understand Define Prototype ValidateDiverge Decide

GOOGLESIMUX
GOOGLESIMUX
36
Prototypes and research tools are
invaluable to learning what our users
value most in our products
Collaborating
with
researchers
Tools for exploring data

GOOGLESIMUX
GOOGLESIMUX
How are prototypes
made?

GOOGLESIMUX
Design Kit: The Field Guide to Human Centered Design by IDEO
Build on a foundation of
human centered design
Human centered design uses 3 phases to explore ideas
Inspiration is to deeply understand your users and immerse yourself in their world
Ideation makes sense of what you’ve learned, identifies opportunities to design and prototype possible solutions
During implementation you’ll bring your solution to life, and with any luck the world
38
Making prototypes

GOOGLESIMUX
GOOGLESIMUX
Making prototypes
Choose the best
fidelity for your
prototypes
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
GOOGLESIMUX

GOOGLESIMUX
GOOGLESIMUX
40
Making prototypes
Choose the
right tools to
prototype with
Tools are a layer of abstraction on
top of prototypes. Makes the process
of prototyping easier because many
of the components are already in
place
All The UX Prototyping Tools Ever
by Taylor Palmer

GOOGLESIMUX
A few examples and case studies from Google

GOOGLESIMUX
GOOGLESIMUX
42
Scenarios
Product
Onboarding
Experience
Users can advance slides by
swipe gesture UI interactions
Animation details are important
Feels like a native app
Tight deadline
Which tool would you use?

GOOGLESIMUX
GOOGLESIMUX
43
Scenarios
Product
Onboarding -
Mobile
Users can advance slides by
swipe gesture UI interactions
Animation details are important
Feels like a native app
Tight deadline

GOOGLESIMUX
GOOGLESIMUX
44
Scenarios
Usability
study
Desktop product with
multi-page workflow
Testing a variation of an
existing feature
Requires realistic user data
Needs to feel real

GOOGLESIMUX
GOOGLESIMUX
45
Scenarios
Usability
study
Desktop product with
multi-page workflow
Testing a variation of an
existing feature
Requires realistic user data
Needs to feel real

GOOGLESIMUX
GOOGLESIMUX
Scenarios
Mobile app prototype
during a sprint week
GOOGLESIMUX
Highly collaborative environment,
working with a mix of PM, ENG and UX
Low fidelity
Iteration, Iteration, Iteration
Very, very little time

GOOGLESIMUX
GOOGLESIMUX
47
Scenarios
Mobile app
prototype
during a sprint
week
Highly collaborative environment,
working with a mix of PM, ENG and UX
Low fidelity
Iteration, Iteration, Iteration
Very, very little time

GOOGLESIMUX
A few guiding principles forged
in the trenches of Google

GOOGLESIMUX
GOOGLESIMUX
49
Advice for would-be prototypers
Focus on what you
get right and less on
what you got wrong
The prototyping process is just as
much about learning what our
users want as what they don’t

GOOGLESIMUX
GOOGLESIMUX
Learn to let go of
your attachments
and embrace
compromise with
enthusiasm
Letting go: Living a life without attachment
by Jedi Path
50
GOOGLESIMUX

GOOGLESIMUX
GOOGLESIMUX
51
Master the powers
of active listening
“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

GOOGLESIMUX
GOOGLESIMUX
52
Design for
breakpoints and
iteration
Apply the human centered design
process of inspiration, ideation,
and implementation. Remember
to rinse and repeat as necessary.
52
GOOGLESIMUX

GOOGLESIMUX
GOOGLESIMUX
Practice strengths
building and invest
in learning
53
GOOGLESIMUX
Reinforce the skills you have and
make time to build new ones

GOOGLESIMUX
GOOGLESIMUX
Keep a record of
your progress,
measure your
success & make time
to celebrate both
54
GOOGLESIMUX
We use OKRs (Objectives and Key Results) to
capture our goals and define success metrics
for our projects

GOOGLESIMUX
GOOGLESIMUX
Go guerrilla with
user testing
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
55
GOOGLESIMUX

GOOGLESIMUX
GOOGLESIMUX
Beware of common
pitfalls when you
prototype
56
GOOGLESIMUX
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

GOOGLESIMUX
GOOGLESIMUX
Beware of prototyping pitfalls

GOOGLESIMUX
GOOGLESIMUX
Why is it important to
make prototypes?

GOOGLESIMUX
GOOGLESIMUX
59
The importance of prototyping
User experience design is not an individual sport.
To that end, we leverage prototypes to get a 360°
view of the problem space and align around our
design direction together
Build a shared
understanding
of your idea
GOOGLESIMUX
PM & Marketing,
Sales, Strategy
What is profitable?
User Experience
What is desirable?
Engineering
What is feasible?

GOOGLESIMUX
GOOGLESIMUX
60
Foster a deeper
understanding
of your users’ needs
60
GOOGLESIMUX
Getting feedback with your
prototype is critical to your
success

GOOGLESIMUX
GOOGLESIMUX
61
GOOGLESIMUX
Overcome love at first design by
validating your design thinking
early and often
Validate your design
thinking with real
users on real
devices

GOOGLESIMUX
GOOGLESIMUX
Design mocks can’t tell an
interaction story as well as a
prototype
Communicate your
vision to
stakeholders and
users alike
62
GOOGLESIMUX

GOOGLESIMUX
GOOGLESIMUX
Design is not an individual sport
and it’s important to neutralize the
politics of deciding
Collaborate more
effectively with your
peers
63
GOOGLESIMUX

GOOGLESIMUX
Epilogue

GOOGLESIMUX
The questions we sought to answer
Who should make prototypes?
When is the best time to make a prototype?
Where should prototypes be made?
How are prototypes made?
Why is it important to make prototypes?
65

GOOGLESIMUX
Tell your stories better with prototypes
66
Scale your design
process using common
prototyping methods
and by avoiding
common pitfalls
Foster a deeper
understanding of your
users’ needs by getting
serious about collecting
feedback
Build a shared
understanding of your
idea and validate your
design thinking with real
users on real devices
Win the hearts and
minds of your peers and
stakeholders by taking
subjectivity out of the
decision making
process

GOOGLESIMUX
If picture is worth a thousand words, then a prototype is worth
10,000. Prototypes go beyond the power of show and tell –
they let you experience the design.
Todd Zaki Warfel, Author, Prototyping

GOOGLESIMUX
Thanks!

GOOGLESIMUX
Questions?
linkedin.com/in/carlsz
reddit.com/user/carlsz
twitter.com/carlsz

Storytelling with software

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Storytelling with software

Ähnlich wie Storytelling with software (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Storytelling with software