Visualizations around fixed datasets such as data journalism are very common, you see them in the New York Times every day, but what happens when data visualization is part of a digital product? These visualizations contain data that changes frequently based on user inputs or other sources. This talk covers examples and an approach on how to incorporate data visualization into your digital product, whether it be mobile, web or desktop. About C. Todd Lombardo C. Todd recently joined the team at Fresh Tilled Soil as Chief Design Strategist, helping clients solve product, design, and/or strategy problems. He has a Master’s Degree in Data Visualization from Maryland Institute College of Art. His background is grounded in science, engineering, and design. He previously was Innovation Architect at Constant Contact’s InnoLoft, he facilitated product and service design sprints for a wide range of external startups and internal product teams. He is also a member of the adjunct faculty at Madrid’s prestigious IE Business School. A teacher and speaker at heart, he frequently speaks at conferences and has directed five TEDx events in two countries. His book, Design Sprint was published by O’Reilly Media in the fall of 2015.

1. D ATA V I S U A L I Z AT I O N
I N P R O D U C T
P R O D U C T C A M P B O S T O N 2 0 1 6
C T O D D L O M B A R D O
C H I E F D E S I G N S T R A T E G I S T - F R E S H T I L L E D S O I L
@ I A M C T O D D

2. W H AT D O Y O U S E E ?

3. W H AT D O Y O U S E E ?

4. I II III IV
x y x y x y x y
10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58
8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76
13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71
9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84
11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47
14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04
6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25
4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50
12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56
7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91
5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89
99.0 82.51 99.0 82.51 99.0 82.5 99.0 82.51
9.00 7.50 9.00 7.50 9.00 7.50 9.00 7.50
3.32 2.03 3.32 2.03 3.32 2.03 3.32 2.03

5. I II III IV
x y x y x y x y
10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58
8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76
13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71
9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84
11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47
14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04
6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25
4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50
12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56
7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91
5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89
99.0 82.51 99.0 82.51 99.0 82.5 99.0 82.51
9.00 7.50 9.00 7.50 9.00 7.50 9.00 7.50
3.32 2.03 3.32 2.03 3.32 2.03 3.32 2.03

12. E X A M P L E S
D A S H B O A R D

18. S O U R C E : H T T P : / / S Q L - J O I N S . L E O PA R D . I N . U A /

19. W H AT A B O U T M O B I L E ?

20. S O U R C E : B R I G H T P O I N T I N C . C O M

25. W H E R E D O Y O U S TA R T ?
H O W - T O

26. D ATA C O N S U M E R

27. D ATA E N C O D E C O N S U M E R

28. D ATA E N C O D E C O N S U M E RV I S U A L I Z AT I O N

29. D ATA E N C O D E D E C O D E C O N S U M E RV I S U A L I Z AT I O N

30. T H E R E A R E M A N Y A P P R O A C H E S …

31. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T

32. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T
C L A R I F Y W H AT & W H Y E X P L O R E & S K E T C H D E F I N E & P R O D U C E M A I N TA I N & A N A LY Z E

33. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T
C L A R I F Y W H AT & W H Y E X P L O R E & S K E T C H D E F I N E & P R O D U C E M A I N TA I N & A N A LY Z E
A C Q U I R E C L E A N I N T E G R AT E V I S U A L I Z E M O D E L P R E S E N T D I S S E M I N AT E

34. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T
C L A R I F Y W H AT & W H Y E X P L O R E & S K E T C H D E F I N E & P R O D U C E M A I N TA I N & A N A LY Z E
A C Q U I R E C L E A N I N T E G R AT E V I S U A L I Z E M O D E L P R E S E N T D I S S E M I N AT E
E S TA B L I S H
C O N T E X T
A C Q U I R E &
P R E PA R E D ATA
E D I T O R I A L
F O C U S
D E S I G N
C O N S T R U C T &
E VA L U AT E

35. T H E R E A R E M A N Y A P P R O A C H E S …
A C Q U I R E PA R S E F I LT E R M I N E R E P R E S E N T R E F I N E I N T E R A C T
C L A R I F Y W H AT & W H Y E X P L O R E & S K E T C H D E F I N E & P R O D U C E M A I N TA I N & A N A LY Z E
A C Q U I R E C L E A N I N T E G R AT E V I S U A L I Z E M O D E L P R E S E N T D I S S E M I N AT E
E S TA B L I S H
C O N T E X T
A C Q U I R E &
P R E PA R E D ATA
E D I T O R I A L
F O C U S
D E S I G N
C O N S T R U C T &
E VA L U AT E
K N O W T H E
A U D I E N C E
K N O W T H E
D ATA
U N D E R S TA N D
C O N T E X T
C O M M U N I C AT E
S I M P LY
C O M M U N I C AT E
C L E A R LY

36. K N O W T H E
A U D I E N C E
K N O W T H E
D ATA
U N D E R S TA N D
C O N T E X T
C O M M U N I C AT E
S I M P LY
C O M M U N I C AT E
C L E A R LY
P R O D U C T V I S U A L I Z AT I O N D E S I G N A P P R O A C H

37. V I S U A L I Z AT I O N D E S I G N P R I N C I P L E S

38. V I S U A L I Z AT I O N D E S I G N P R I N C I P L E S
• Elegant
• Truthful
• Accessible
• Justified

39. 1. Know the audience
2. Know the data
3. Know the story
4. Communicate simply
5. Communicate clearly
V I S U A L I Z AT I O N D E S I G N P R I N C I P L E S
• Elegant
• Truthful
• Accessible
• Justified

40. 1 . K N O W T H E A U D I E N C E

41. 1 . K N O W T H E A U D I E N C E
• What questions do they have?

42. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?

43. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?
• What level of familiarity do they have with the source data?

44. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?
• What level of familiarity do they have with the source data?
• How often will they be using this information?

45. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?
• What level of familiarity do they have with the source data?
• How often will they be using this information?
• What level of sophistication do they with analytics/statistics?

46. 1 . K N O W T H E A U D I E N C E
• What questions do they have?
• How will they use this information to make decisions?
• What level of familiarity do they have with the source data?
• How often will they be using this information?
• What level of sophistication do they with analytics/statistics?
• Is your visualization more exploratory or explanatory?

47. A U D I E N C E A S K S
Q U E S T I O N ,
S E E S D ATA ,
G E T S A N S W E R
A U D I E N C E S E E S D ATA ,
A S K Q U E S T I O N S ,
E X P L O R E S D ATA ,
G E T S A N S W E R

48. 2 . K N O W T H E D ATA

49. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?

50. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?

51. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?

52. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?
• What are the inherent relationships between values?

53. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?
• What are the inherent relationships between values?
• What other data can we combine with it?

54. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?
• What are the inherent relationships between values?
• What other data can we combine with it?
• What assumptions will you have to make?

55. 2 . K N O W T H E D ATA
• What is the quality of the data? Can you trust it?
• What questions can the data answer?
• How old/new is the data?
• What are the inherent relationships between values?
• What other data can we combine with it?
• What assumptions will you have to make?
• Does a data dictionary exist?

61. C O R R E L AT I O N ≠ C A U S AT I O N

62. H T T P : / / W W W. T Y L E R V I G E N . C O M / S P U R I O U S - C O R R E L AT I O N S

63. 3 . U N D E R S TA N D T H E C O N T E X T

64. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?

65. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?

66. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?
• Why is your finding occurring or not occurring?

67. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?
• Why is your finding occurring or not occurring?
• How will this help your users?

68. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?
• Why is your finding occurring or not occurring?
• How will this help your users?
• What decisions will they need to make?

69. 3 . U N D E R S TA N D T H E C O N T E X T
• What does the data tell you?
• How is the data insightful or interesting to your user?
• Why is your finding occurring or not occurring?
• How will this help your users?
• What decisions will they need to make?
• What are their next steps?

71. Things that make you go “Hmmm…”

72. 4 . C O M M U N I C AT E S I M P LY

73. 4 . C O M M U N I C AT E S I M P LY
• How long does it take for your audience to arrive at your conclusion?

74. 4 . C O M M U N I C AT E S I M P LY
• How long does it take for your audience to arrive at your conclusion?
• Is the message delivered accurately & consistently?

75. 4 . C O M M U N I C AT E S I M P LY
• How long does it take for your audience to arrive at your conclusion?
• Is the message delivered accurately & consistently?
• [Interactive] How many clicks to find the answer to their question?

76. 4 . C O M M U N I C AT E S I M P LY
• How long does it take for your audience to arrive at your conclusion?
• Is the message delivered accurately & consistently?
• [Interactive] How many clicks to find the answer to their question?
• Where do they go in your app next?

77. O H D E A R . .
B E C A U S E Y O U C A N . . S H O U L D Y O U ?

80. 5 . C O M M U N I C AT E C L E A R LY

81. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?

82. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?
• What is the right way to visualize the findings?

83. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?
• What is the right way to visualize the findings?
• How do they interpret the data?

84. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?
• What is the right way to visualize the findings?
• How do they interpret the data?
• What decisions will they make from this visualization?

85. 5 . C O M M U N I C AT E C L E A R LY
• What are the key findings & messages?
• What is the right way to visualize the findings?
• How do they interpret the data?
• What decisions will they make from this visualization?
• Is it easy to understand the findings?

89. A D A M M C C A N N , TA B L E A U Z E N M A S T E R
If the meaning of the data is not conveyed,
the visualization is a failure.

90. D ATA : I N K R AT I O

92. S O U R C E : B R I G H T P O I N T I N C . C O M

94. D A S H B O A R D S

95. — S H N E I D E R M A N
“Overview First, Zoom and Filter,
Then Details-on-Demand”

96. T H E S E V E N TA S K S O F I N F O V I Z U S E R S
• Overview: Gain an overview of the entire collection.
• Zoom : Zoom in on items of interest
• Filter: Filter out uninteresting items.
• Details-on-demand: Select an item or group and get details when needed
• Relate: View relationships among items.
• History: Keep a history of actions to support undo, replay, and query parameters.
• Extract: Allow extraction of sub-collections and of the progressive refinement.

97. G O O D E X A M P L E S

99. D ATA V I S U A L I Z AT I O N
T H A N K S !