Rapid Design & Experimentation for User-Centered Products :: UX Days Tokyo [April 2015}

Hello!
@katerutter
tweet-friendly

3 big trends
✓Cycle time is getting faster
✓UX design moving from
implementation to envisioning
new value
✓UX design is a team sport

Trend 1
✓Cycle time is getting faster

risk
timeDeﬁne
The old way
Design
Develop
Release
via @seriouslynow

risk
timeDeﬁne
a better old way
Design
Develop
Release
via @seriouslynow

risk
time
A different way
via @seriouslynow

BUILD
MEASURE
LEARN
More cycles in less time
reduces risk.
faster!

Trend 2
✓UX design moving from
implementation to envisioning
new value

Features
Users
Uses
Product
Needs
via @luxrco
sketches,
prototypes,
wireframes
pixels
UI
Company
Purpose
Your vision & ideas
UX is a stack

Trend 3
✓UX design is a team sport.
what we
say blah
blah blah
blah blah blah
blah blah
what they hear

UX designers invent a lot...
wireframes
design studio
sketchboards
sprints
task ﬂows
UI sketches
prototypes
task models
personas
afﬁnity diagrams
content strategy
content strategy journey maps
storyboardscluster diagrams
conceptual models
Content models
Empathy maps
Experience maps
Mental models
Process diagrams
Scenario maps
Scenarios
Sitemaps
Style guides
System maps
Task grids
Usability reports
User journeys
User story maps
user stories
metadata schema
design stories
* and much, much more...

What this means
✓Design & ship smaller & faster
✓Explore new ideas faster
✓Collaborate across many
roles & disciplines faster

How can we work...
✓faster
✓simpler
✓together

Ways to
Design Faster512

9
simple
methods
Sketch people
Flows
Dump 2x2 sort
Dot-vote
Timebox
Quiet read
Work at the wall
Sketch UI

5
simple
tools

Sketch people
By sketching a quick
picture and describing
it with just a short
phrase, you can come
up with many human-
centered ideas quickly.
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs fun

Sketch people
up with many human-
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs fun
Simple materials

Sketch people
up with many human-
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs fun
✓ You can draw a picture of a person in
4 simple steps...
Star people
1 2 3 4

Sketch people
up with many human-
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs fun
✓ Use simple shapes show context.

Sketch people
up with many human-
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs fun
✓ With only 2 parts of the face, you can
get a range of emotions.
Expressions Matrix
9 circles
add eyes
3 mouths
2 kinds of
eyebrows
9 emotions!

Sketch people
up with many human-
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs fun
✓ A talk bubble makes the picture clear.

Sketch people
up with many human-
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs funvia @glaves

Sketch people
up with many human-
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs funVia Alexa Andrzejewski
Foodspotting

Sketch people
up with many human-
✓Stay focused on
the human
experience
✓Generate many
ideas quickly
✓Itʼs funhttp://bit.ly/sketchingpeople
Video examples here:

Sketch people
How...
up with many human-
Why...
Use when...
✓ Get a sharpie and white
paper.
✓ Use the 4-step Star
Person technique to
quickly sketch a person.
✓ Use the Expressions
Matrix to show the
emotion they are having.
✓ Use basic shapes (to put
the person in a context or
environment.
✓ Add a text or thought
bubble to show their
words or thinking.
✓ Add a 1-line sentence
describing the scenario.
Sketching is fast. It
activates many parts of
the brain: pictures, words,
hand-eye coordination.
You get more and better
ideas from you and your
team.
You need to show the
human experience of
your product.
With some simple tips,
anyone can sketch a
picture of a person in an
experience.

Sketch UI
By sketching multiple
UI ideas fast, you force
ideas out of your head
so that you can get
feedback on them
quickly.
✓Rapidly work out
an idea
✓Generate many
ideas quickly
✓Validate ideas
with others

Sketch UI
so that you can get
feedback on them
quickly.
✓Rapidly work out
an idea
✓Generate many
ideas quickly
✓Validate ideas
with others
Via Adaptive Path

How...
Why...
Use when...Sketch UI
so that you can get
feedback on them
quickly.
Sketching is fast. You can
explore many more ideas
quickly.
Keeping it low-ﬁdelity puts
the focus on the idea, not
on the “polished” details.
Exploring ideas for
interface and interactions.
Annotations provide
clarity and reduce the
time spent explaining the
ideas.
✓ Get a sharpie and white
paper and draw an outline of
a screen (web or mobile.)
✓ Add items that could be on
the interface: Text, buttons,
image boxes, navigation.
✓ Make notes in the margins
to describe the item or how
it functions.
✓ Use heavier lines for more
focus (contrast draws the
eye).
✓ Add yellow highlights to
identify the most important
parts.

Flows
Putting multiple
pictures together can
tell a very detailed story
very quickly.
✓Quickly connect
ideas into a story
✓Prototype
interactions
✓Identify & ﬁll gaps

Flows
Putting multiple
very quickly.
✓Quickly connect
ideas into a story
✓Prototype
interactions
Storyboards
Via Brandon Schauer

Flows
Putting multiple
very quickly.
✓Quickly connect
ideas into a story
✓Prototype
interactions
Via Adaptive Path
Storyboards

Flows
Putting multiple
very quickly.
✓Quickly connect
ideas into a story
✓Prototype
interactions
Via https://wordsofasuperheroine.wordpress.com/tag/airbnb/
Storyboards

Flows
Putting multiple
very quickly.
✓Quickly connect
ideas into a story
✓Prototype
interactions
UI ﬂows
Via Adaptive Path

Flows
Putting multiple
very quickly.
✓Quickly connect
ideas into a story
✓Prototype
interactions
UI ﬂows
Via @glaves

Flows
Putting multiple
very quickly.
✓Quickly connect
ideas into a story
✓Prototype
interactions
Showing action
Via @glaves

How...Why...
Use when...
✓ Arrange items (people
sketches, UI sketches,
stickynotes) in a sequence.
✓ Connect the parts with
arrows if needed.
✓ Rearrange the order of
items to identify new and
different stories.
✓ Identify and ﬁll any gaps in
the sequence.
✓ Document the ﬂow with a
photo or revised digital
image.
Flows
Putting multiple
very quickly.
Seeing how things
connect helps you
optimize a sequence of
events, shows
dependencies, and
prevents isolated ideas.
Communicating a series
of things that happen in
order or over time.
Helps identify logic gaps,
and shows how multiple
ideas form a coherent
narrative.

✓Externalize thinking
✓Quickly generate
many different
ideas
✓Push past the
basics
Dump
This is an all-purpose
way to get information
out of your head, so
that you can organize it
and make decisions.

✓Quickly generate
many different
ideas
✓Push past the
basics
Dump
and make decisions.
~ Linus Pauling
Nobel Prize-winning Biochemist
If you want to have
good ideas you must
have many ideas.

✓Quickly generate
many different
ideas
✓Push past the
basics
Dump
and make decisions.
Storyboards

✓Quickly generate
many different
ideas
✓Push past the
basics
Dump
and make decisions.
Via Adaptive Path

How...
Why...
Use when...Dump
and make decisions.
✓ “Dump” the items by writing
one item per stickynote, or
making one sketch per idea.
✓ If youʼre doing this as a
team, each person makes
their own set of ideas.
✓ Keep generating ideas until
you have at least 10. Force
yourself to get to 10+ ideas.
✓ Donʼt overthink it; if you have
an idea, write it down. Donʼt
judge it (that comes later.)
✓ Use Sharpies so that the
ideas are easy to see at an
arms length, and stay
concise & simple.
Gets all the ideas out of
your head very quickly.
Kills the censor! Opens
up the generative part
of your brain.
Coming up with ideas,
exploring many options,
or when the ideas in
your head are messy
and freaking you out.
Works great in a team.

✓Set simple criteria
for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
A quick technique for
sorting many items
based on simple
criteria.

for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
sorting many items
based on simple
criteria.
Simple materials

for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
sorting many items
based on simple
criteria.
StoryboardsSet up your 2x2
✓ Decide on 2 sets of parameters
Common pairs:
Important Less important
Urgent!! ! ! ! Less urgent
Easy!! ! ! ! ! Hard
High value!! ! ! Low value
Self! ! ! ! ! ! ! Delegate

for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
sorting many items
based on simple
criteria.
Storyboards✓ Make a big + on the wall with tape

for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
sorting many items
based on simple
criteria.
Storyboards✓ Label the end points. Put the optimal
ones on the top and right.
Easy
Hard
UrgentLess
Urgent

for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
sorting many items
based on simple
criteria.
Storyboards✓ Place your items (stickies, sketches)
Easy
Hard
UrgentLess
Urgent

for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
sorting many items
based on simple
criteria.
Storyboards✓ Step back and review
Easy
Hard
UrgentLess
Urgent
Do these ﬁrst
Donʼt do
these at all!
Prioritize or
reconsider
Prioritize or
reconsider

for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
sorting many items
based on simple
criteria.
Storyboards✓ Bonus: stack-rank!
Easy
Urgent

for decision-making
✓Organize lots of
ideas quickly
✓Easily ﬁnd top
picks
2x2 sort
sorting many items
based on simple
criteria.
Storyboards

How...
Why...
Use when...2x2 sort
sorting many items
based on simple
criteria.
✓ Make a + on the wall or table
with tape (blue tape works
great.)
✓ Decide on 2 sets of parameters
and label the axes: each end
point should be two related
opposites. Put the most
optimal quadrant on the upper-
right.
✓ Plot all the ideas (sketches,
stickies), placing them in the
appropriate quadrant. Stack
duplicates.
✓ Force decisions: at least 1/2
the ideas should be below the
horizontal axis.
✓ Focus on the optimal quadrant,
and order the ideas (stack-
rank.)
Each quadrant allows
you to make batch
decisions about which
items to pursue.
Focuses the discussion
on the important ideas.
There are lots of ideas
to prioritize and decide
on.
Use as a team when
there is agreement on
the important
parameters.

✓Everyone gets a
voice
✓Clearly shows items
with most support
✓Make decisions very
quickly
Dot-vote
A technique that allows
you to pick top options
and quickly see
(without discussion)
which ideas have the
most agreement.

✓Everyone gets a
voice
with most support
quickly
Dot-vote
and quickly see
most agreement.
Simple materials
+ a bunch of ideas

✓Everyone gets a
voice
with most support
quickly
Dot-vote
and quickly see
most agreement.
StoryboardsHow it works

✓Everyone gets a
voice
with most support
quickly
Dot-vote
and quickly see
most agreement.
Storyboards

✓Everyone gets a
voice
with most support
quickly
Dot-vote
and quickly see
most agreement.
Via http://www.gamestorming.com/core-games/dot-voting/

How...
Why...
Use when...Dot-vote
and quickly see
most agreement.
✓ Everyone gets a set
number of dots (3-4 is
usually sufﬁcient.)
✓ Each person places their
dots on the items they feel
have the most merit. You
can put more than one dot
on an item.
✓ After voting, everyone can
clearly see the items with
the most dots; these are
the top items.
✓ If you donʼt have dots
handy, use colored
markers to make the dots.
Having multiple votes
relieves the anxiety of
picking only one choice.
Helps everyone see
natural agreement.
There are multiple
options and you need to
pick the best ones to
pursue.
This method can be used
solo, but works best in a
group.

✓ Break down complex
tasks into small chunks
✓ Deadlines =
hyperfocus!
✓ Immediate feedback
improves your time
management skills
Timebox
A short, set period of
time for fast-focused
work.

✓ Deadlines =
hyperfocus!
improves your time
management skills
Timebox
work.
focus
Focus
FOCUS!
(with short,
task-oriented
outcomes)

✓ Deadlines =
hyperfocus!
improves your time
management skills
Timebox
work.
Storyboards
✓ 25 minute focus time
✓ 5 minute break
✓ longer break every 4 pomodoros
Via http://pomodorotechnique.com/

✓ Deadlines =
hyperfocus!
improves your time
management skills
Timebox
work.
✓ Write down one simple thing to get done
✓ 10 minute focus time
✓ 2 minute check-in: did you ﬁnish?
✓ Set the next goal & repeat
1 small
thing
Personal version

How...Why...
Use when...Timebox
work.
✓ Pick a task to accomplish.
✓ Pick a time span. For
generating ideas, 10-20
minutes is a good amount.
Shorter is better.
✓ Jot down a specific,
discrete item you want to
complete during the
timebox.
✓ Set a timer and focus on
completing the task.
✓ When the timer rings...did
you finish the item? If so,
move to the next one. If not,
take a moment to reflect on
why, then set a new task
and repeat.
Timeboxing provides an
artificial forcing function
that helps focus your
work and gives
immediate feedback on
small chunks of
progress.
Anytime you need to
get things done.
Use in team sessions
to keep on track and
use time effectively.

✓ Forces externalization
of ideas
✓ Reduces prep time
✓ Keeps the conversation
focused on questions
and decisions
Quiet read
A collaboration method
that helps your team
stay focused on asking
questions and making
decisions, not on
pitching ideas.

of ideas
and decisions
Quiet read
decisions, not on
pitching ideas.
http://www.keepcalm-o-matic.co.uk/p/keep-quiet-and-read/

of ideas
and decisions
Quiet read
decisions, not on
pitching ideas.
Bezos Narratives
Via http://fortune.com/2012/11/16/amazons-jeff-bezos-the-ultimate-disrupter/

How...
Why...
Use when...Quiet read
decisions, not on
pitching ideas.
✓ Post all the work in a
visible place.
✓ Without talking, spend
2-10 minutes reading all
the material to get
familiar with what others
have created.
✓ After the quiet read,
people can pose
questions or prompt
discussion.
Keeps teams from
presenting ideas too
early, and helps people
practice externalizing
ideas so that others can
understand without
explanation.
You have a lot of
detailed information
coming from many
contributors.
Use as a team when you
have very talkative
people involved.

✓ See many ideas at
once, see the big
picture
✓ Makes comparisons
faster
✓ Focus on ideas instead
of persuasion
Work at the wall
Working at the wall
changes the dynamics
of collaboration and
allows discussion to
focus on ideas instead
of persuasion.

✓ See many ideas at
once, see the big
picture
✓ Makes comparisons
faster
✓ Focus on ideas instead
of persuasion
Work at the wall
Working at the wall
of persuasion.
Via Adaptive Path

How...
Why...
Use when...
Work at the wall
Working at the wall
of persuasion.
✓ Post all your work on a wall
(sketches, printouts,
stickynotes.)
✓ Step back: assess the big
picture & the details.
✓ Host discussions, annotate
and add/remove items.
✓ Make decisions at the wall
& arrange the information
to show what was decided.
✓ Take a photo and send it to
all participants to document
the discussion and
decisions.
Decision-making gets
easier when everyone
can see the ideas and
information all at once
in a physical place.
Information is complex
and there are many
variables.
Use as a team when
there are diverse
perspectives and
decision-makers.

How can we work...
✓ faster
✓ simpler
✓ together
Sketch people
Flows
Dump 2x2 sort
Dot-vote
Timebox
Quiet read
Work at the wall
Sketch UI

512

the
magic of
remixing
Sketch people
Flows
Dump 2x2 sort
Dot-vote
Timebox
Quiet read
Work at the wall
Sketch UI

Personal
productivity
=Dump
+ 2x2 sort
+ Timebox

Dump
Feature
prioritization
=
+ 2x2 sort
+
Work at the wall
+ Quiet read
Dot-vote+

Sketch UI Flows
+
Work at the wall
+
Sketchboards
=

Rapid lo-ﬁ
prototyping
=+ Flows
Sketch UI
Timebox
+

Sketch people
Sketch UI
+ Flows
+
Dot-vote
+
Design
sprints
=+ Work at the wall
Timebox
+

Where to go
to lunch
=Dot-vote
+Dump

Sketch people
Flows
Dump 2x2 sort Dot-vote
Timebox
Quiet read
Work at the wall
Sketch UI
2=
9
+
+ + +
+ +
+
+
+
+
+
+

512Ways to work
faster + simpler + together

How will YOU
work fast?

Sketch people
Flows
Dump 2x2 sort
Dot-vote
Timebox
Quiet read
Work at the wall
Sketch UI
✓ Pick 3 new ways to work.
✓ Write them down.
✓ Commit to doing these in
the next week.
✓ Timeboxed at 1 minute!

When it all works...
We rapidly deliver products that
delight, that inspire and that
improve the lives
of the people
who use them.

Thanks!
Slides (with details about each
technique) will be available at:
www.slideshare.net/intelleto
Kate Rutter
katerutter@gmail.com
www.intelleto.com
@katerutter
Thanks & credits to:
Adaptive Path [http://adaptivepath.com]
Alexa Andrzejewski [http://ﬂavors.me/ladylexy]
Brandon Schauer [http://brandonschauer.com/]
Gamestorming [http://gamestorming.com]
Janice Fraser [http://clevergirl.com]
Luxr [http://luxr.co]
Leah Buley [http://ugleah.tumblr.com/]
Luke Wroblewski - tweet [http://lukew.com]
Pomodoro [http://pomodorotechnique.com/]
Rachel Glaves [http://about.me/rachelglaves]
Tim McCoy - risk model [@seriouslynow]
Tradecraft [http://tradecrafted.com]
https://wordsofasuperheroine.wordpress.com/tag/airbnb/

Rapid Design & Experimentation for User-Centered Products :: UX Days Tokyo [April 2015}

Rapid Design & Experimentation for User-Centered Products :: UX Days Tokyo [April 2015}

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

Similar to Rapid Design & Experimentation for User-Centered Products :: UX Days Tokyo [April 2015}

Similar to Rapid Design & Experimentation for User-Centered Products :: UX Days Tokyo [April 2015}(20)

More from Kate Rutter

More from Kate Rutter(20)

Recently uploaded

Recently uploaded(20)

Rapid Design & Experimentation for User-Centered Products :: UX Days Tokyo [April 2015}