1.
Visual
Thinking
Working with Pictures
Christina Wodtke

2.
Why draw?
Think of a chair

3.
1. Communicate

4.
2. Problem Solving

5.
3. Listening and
Remembering

6.
Who Draws?

7.
Zaha Hadid

8.
Chefs Jason Chan and Grant Achitz

9.
Types of drawing

10.
David
Sibbet

11.
Don’t Worry

12.
Pareidolia

13.
Warm Up

14.
Draw together

15.
Ed Emberly

16.
The Problem with Lunch

17.
Working with Pictures

18.
Translation
exercise
• 3 people
• The sketcher explains the sketch
• The interviewer asks questions
• The notetaker writes down interesting
observations and problems 1 per post-it
Try this with people who are weak sketchers!

19.
1. FRAGMENTING
AND FREELISTING

20.
Why?
Make information modular in order to
recombine

21.
2. CHUNKING
INTO AFFINITY GROUPS

22.
How?
• Put idea with like ideas
• No rules, just seek patterns
• remix

23.
Play with possible models
Relationship
to other data
Credit: Steve Portigal

24.
Play with possible models
Frequency
Credit: Steve Portigal

25.
Play with possible models
Timeline
Credit: Steve Portigal

26.
3. MAPPING
TO FRAMEWORKS

27.
Axis are EVERYTHING

28.
Create an evaluating 2x2

29.
MIND MAPS
Gather your Thoughts

30.
I feel like drawing slows me down to give me thinking time.
-Andrew Reid

31.
ANDREW REID,
GAME
DESIGNER
MIND MAPS
FOR GAME
DESIGN

32.
01
Christina Wodtke
•HEADER
OF THIS
PAGE
• From Rolf Faste’s MindMapping
article
• The basic principles of mind mapping
are:
1 Create a Center Statement.
2 Develop ideas radially outward.
3 Capture ideas quickly.
4 Use lines to show connections.
5 Create train-of-thought structures.
6 Follow an idea as far as it will go.
7 Work from the known to the
unknown.
8 Return to the center when ideas are
exhausted.
9 Increase density to create richness.

33.
FROM
MINDTOOLS.COM

34.
Problem

35.
Organizing

36.
4s
Suppliers, Systems,
Surroundings, and Skills
8PProcedures, Policies, Place,
Product, People, Processes,
Price, and Promotion
6M
Man, Materials, Machine,
Methods, Measurements, and
mother Nature (enviroment.)

37.
Another
causal
diagnostic
tool
(or communication!)

38.
Provisional
persona

39.
Dave
Gray’s
Empathy
Map

40.
STORY
For empathy

41.
1o minutes:
Using your
drawing skills,
Tell your story

42.
One minute pitch.

43.
Dotmocracy

44.
Crazy 8s

45.
Wireflows & Experience
Flows
Simple thumbnails to represent the flow of the experience

46.
Wireflow
• Shows how the product
works. Screens are sketchy.
• Nodes and Connectors

47.
Draw a flow….
5 minutes

48.
One minute pitch.

49.
Dotmocracy

50.
Key Screen
Upsell page, or key value moment

51.
Landing page
OR
Page
demonstrating key
value.

52.
Draw the Box
• What’s it called?
• Who’s it for?
• What’s its tagline or slogan?
• What are its most compelling features? Benefits?
• What imagery would make it stand out to you?

53.
DRAW: Key Screen or Box
5 minutes

54.
One minute pitch.

55.
Dotmocracy

56.
Gather
• Storyboard
• Elevator pitch
• Wireflows
• Key screen/Sell screen

57.
Participatory Roadmps
How big is the MVP?

58.
Test with your market

59.
appendix

60.
What can we make?
Let’s start with story….

61.
MIND MAPS
Gather your Thoughts

62.
I feel like drawing slows me down
to give me thinking time.
-Andrew Reid

63.
ANDREW REID,
GAME
DESIGNER
MIND MAPS
FOR GAME
DESIGN

64.
01
WORLD IA DAY 2017
HEADER
OF THIS
PAGE
From Rolf Faste’s MindMapping article
The basic principles of mind mapping are:
1 Create a Center Statement.
2 Develop ideas radially outward.
3 Capture ideas quickly.
4 Use lines to show connections.
5 Create train-of-thought structures.
6 Follow an idea as far as it will go.
7 Work from the known to the unknown.
8 Return to the center when ideas are exhausted.
9 Increase density to create richness.
10 Avoid being judgmental.
11 Have fun with the form.

65.
HOW I FEED MYSELF
5 Minutes

66.
Lunch

67.
Dan roam

68.
MODEL EVERYTHING!
Five SIX models for making sense

69.
Scott Bernatino

70.
01
WORLD IA DAY 2017
•Maps,
Models,
Canvases

71.
“VISUAL MODELS ARE ALL
ABOUT MEANING THROUGH
SPATIAL ARRANGEMENT”
- STEPHEN P ANDERSON

72.
01
WORLD IA DAY 2017
DAVE GRAY
ILLUSTRATION MODEL

73.
CONCEPT MAPS
Clarify Your Understanding

74.
01
WORLD IA DAY 2017
HEADER
OF THIS
PAGE
From Hugh Dubberly’s Creating Concept Maps
• List terms
• Edit the list
• Define the remaining terms
• Create a matrix showing the relations of
terms
• Rank the terms
• Decide on main branches or write framing
sentences
• Fill in the rest of the structure
• Revise
• Apply typography to reinforce structure
• Revise
DIAGRAM BY DAN BROWN

75.
http://architecture.31bio.org/information-architecture-concept-model/

76.
DUBBERLY DESIGN OFFICE

77.
SYSTEM MODELS
Map the System

78.
Microwave system model http://sce.uhcl.edu/whiteta/sdp/createSystemModel.html

79.
BBC Weather
Sitemap http://www.bbc.co.uk/blogs/bbcinternet/2011/11/bb
c_weather_design_refresh.html

80.
From Stone Librande’s One Page Designs

81.
MENTAL MODELS
Understand the Customer’s
Point of View

82.
01
WORLD IA DAY 2017
Center for research on Environmental Decisions
http://guide.cred.columbia.edu/guide/sec1.html
• A mental model represents a person’s
thought process for how something
works (i.e., A person’s understanding of
the surrounding world). Mental models,
which are based on often-incomplete
facts, past experiences, and even
intuitive perceptions, help shape actions
and behavior, influence what people pay
attention to in complicated situations,
and define how people approach and
solve problems.

83.
Mental Model,
organized by task
Company OR
Competitor Offerings

84.
Cat Mental Model,
organized by task

85.
Draw Toast
“Draw a picture of how to make toast. That is, darkened crispy
bread.
Use no words in your diagram.
Try to illustrate the important actions to someone who has never
made toast before.”

86.
CONCEPT MODELS
Visual Explanations

87.
01
WORLD IA DAY 2017
• Sunni Brown
Doodle Revolution

88.
ELEMENTS & RELATIONSHIPS
(Systems, a la Brown)

89.
Dave
Grey

90.
Chris Crawford explains different kinds of play
http://www.scottkim.com.previewc40.carrierzone.com/thinkinggames/whatisapuzzle/index.html
http://www.erasmatazz.com/library/the-journal-of-computer/jcgd-volume-4/my-definition-of-game.html

91.
Don Norman, Drawn by me.

92.
Dan Roam

93.
Drawn by me, @cwodtke

94.
Freelist all the
Elements of a
Performance Review
5 minutes

95.
PROCESSES

96.
Today Team explains their offering

97.
Bartnet doesn’t explain their offering- always test Concept models

98.
Innoenergy offering elements

99.
Innoenergy Process

100.
01
WORLD IA DAY 2017
“What the [design] diagram shows is
the overlap of concerns among three
different entities. The first represents
the area of interest to the designer.
The second represents the areas of
interest to the client. The third is the
area of interest to society as a whole.
Charles and Ray’s point is that it is in
the area where all three overlap that
the designer can work with
enthusiasm and conviction . . .
Eames Explain Design

101.
Andrew Reid

102.
How to Poach an egg, by
@cwodtke

103.
Draw the process
of a performance
review, using
post-its
Five minutes

104.
Share

105.
Make a New Process

106.
COMPARISONS

107.
Exploring why different
services suck in their own
special way.
https://medium.com/@cwodtke
/a-theory-of-form-for-digital-
products-
f5f605adae84#.51ie4d1vq

108.
Uncovering the Secrets of Mammoth Island

109.
Understanding Comics
Scott McCloud

110.
01
WORLD IA DAY 2017
2x2’s are ALL about
comparisons!

111.
Drawing Ideas

112.
Separately, Silently Draw
a comparison
5 minutes

113.
CONCEPT MODELS
FOR WORK

114.
Kitten Farming concept
by Daniel Cook, CCO of
SpryfoxFor thinking

115.
Robin Hunicke

116.
01
WORLD IA DAY 2017
For
Communicating
• Conceptual Blueprint by Andrew
Hinton of The Understanding
Group

117.
Stone Librande

118.
Stone Librande

119.
HOW FANCY SHOULD THEY
BE?

120.
Stephen p anderson

121.
Bill Verplank

122.
01
WORLD IA DAY 2017
A simple model you can
draw on a whiteboard
becomes a meme.
Is this why Lean
Startup is huge?

123.
01
WORLD IA DAY 2017
Determine the GOAL: how will the model be used, by whom? What is the job
of the model? To change minds, explain a concept, simplify complexity?
INVENTORY THE CONCEPTS: brainstorm many parts of your concept.
Keep adding more in the margins as you go.
INSPECT THE CONCEPTS: are there many concepts hiding in one? Do you
really understand each idea?
Determine the RELATIONSHIPS: how do the concepts interact?
 Decision point: do i understand the ideas and what i’m trying to
communicate?
Test: ask yourself if the model “feels” right.
If yes, then continue.
ITERATE with words and pictures: talk to yourself and draw it out!
EVALUATE with yourself/the client: keep making sure the drawings match
the ideas you wish to communicate. Don’t punk out early! Rest if you need to!
 Decision point: does my audience understand the ideas and what i’m trying
to communicate?
Test: can my audience answer key questions with the model?
If yes, then continue.
REFINE: use color, type, line weight, and labels to make sure you are
communicating clearly.

124.
01
WORLD IA DAY 2017Dave gray
What should I
draw?
• Consider the elements

125.
01
WORLD IA DAY 2017Dave gray | http://www.xplaner.com/visual-thinking-school/
What should I
draw?
Consider the purpose

126.
PARTICIPATORY
CONCEPT MAPS?!?

127.
Dave gray

128.
01
WORLD IA DAY 2017
MIND MAPS, to gather your
thoughts
CONCEPT MAPS, to organize
your understanding
SYSTEM MAPS, to map the
system (a tautology, but an
accurate one)
MENTAL MODELS, to
understand and communicate
your user’s understanding
CONCEPT MODELS, to
message a way to think about a
complex system

129.
And Canvases!

130.
01
WORLD IA DAY 2017
Thank you.
Questions?
For workshops & Other inquires:
Christina Wodtke
@Cwodtke
Cwodtke.com
Art by Amelie Wodtke Sarrazin

131.
http://evalotta.pancakeapps.com/