The document is a presentation on developing dashboards with user-centered design. It discusses how visualizing data can help answer questions and tells users to focus on the needs of personas when designing dashboards. The presentation guides attendees through an exercise where they identify key questions, available data, and prototype a dashboard to answer a persona's question using best practices like selecting the right chart, using visual cues, and getting early feedback.

1. excella.com
@excellaco
Developing
Dashboards with
User-centered
Design
Tech Lady Hackathon #5
October 21, 2017 | Washington DC
Amanda Makulec
Data Visualization Lead | Excella Consulting

2. Once you start looking,
you’ll see
data visualization
everywhere.

3. 6 am
8 am
9 am
9:15 am
12:30 pm
12:45 pm
3 pm
4 pm
5:30 pm
7 pm
10 pm

4. “The two optic nerves [in the
eyes] are sending what we now
know are 20 megabits a second
of information back to the brain.”
Edward Tufte
We are visual processors (and companies know that).

5. 0 2 4 6 8 10
Taste
Auditory
Olfactory
Tactile
Visual
Sub-conscious
(millions of bits per second)
0 10 20 30 40
Conscious
(bits per second)
Adapted from: Tor Norretranders' The User Illusion

6. The best visualizations feel
intuitive and make complex
information accessible.
(Often, because they were
built with you in mind)

7. Tools are smart.
But a tool can’t
know your user
like you can.

8. Even ugly dashboards take time to build.
Let’s build better
dashboards that someone
is delighted to use.

10. DESIGN
THINKIN G

11. Image credit: http://cohort21.com/lesliemcbeth/2015/03/04/bring-it-back-design-thinking-teacher-growth/

12. DESIGN
SPRINT

13. Data has changed how we make choices.
What do you do when
you want to plan a dinner
out in a new city?

15. Your design mission
Create a prototype of
one of the two core
dashboards for your
new start up.

16. EMPATHY
W h o i s o u r U S E R ?

18. How can we put
ourselves as
designers into
the data user’s
shoes?

19. What are our
data user’s
wants, needs,
and interests?

20. What are our
data user’s
challenges and
pain points?

21. EMPATHY

22. Image credit Ryan Morrill http://www.improving-visualisation.org/case-studies/id=6

23. Each persona represents a
significant portion of people in the
real world and enables the designer
to focus on a manageable and
memorable cast of characters,
instead of focusing on thousands of
individuals.”
“A persona is depicted
as a specific person but
is not a real individual;
rather, it is synthesized
from observations of
many people.
From: https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/
In our design toolbox:
Personas

24. We can use tools like personas to focus
on the needs of our different users.
Kim Layla

25. DEFINE
W h a t Q U E S T I O N
d o e s t h e u s e r n e e d
t o a n s w e r ?

26. What are your
user’s high priority
questions to be
answered?

27. In our design toolbox:
Journey Maps

28. 1.Pair up with another participant.
2.Read the two personas.
3.Pick one.
4.Identify the key question you think
needs be answered by the dashboard
for that persona.
TEST
PROTO-
TYPE
IDEATEDEFINEEMPATHY

29. IDEATE
W h a t D A T A d o w e
h a v e t o a n s w e r
t h e q u e s t i o n ?

30. Remember
Think beyond the
data we have to the
metrics we need.

32. Restaurant
Rating (or other metric)
Cuisine type

33. My location
Restaurant location
Restaurant
Rating (or other metric)
Cuisine type

34. What data is
available to
answer your
user’s questions?

35. Remember: keep it simple.
You don’t need to show every data point

36. In our design toolbox:
How Might We…?

37. Review your question to answer for your
persona + the background on data.
Then, ideate (brainstorm!) a list of data
you could use to answer her question.
TEST
PROTO-
TYPE
IDEATEDEFINEEMPATHY

38. PROTOTYPE
W h a t D E S I G N
w i l l w e c r e a t e ?

39. Selecting the
right best
chart

40. Great data design…
✓ Tells a clear story
✓ Engages the user
✓ Uses visual cues to guide
the user
✓ Is well designed for the
display size and medium

41. Different chart
types work well for
different kinds of
data stories and
analysis results.
For more on chart
selection, check out
DataVizCatalogue.com
Image from the DataVizCatalogue.com

42. What’s your data story?
Distribution

43. What’s your data story?
Compare Categories
Image credit: The Information Lab, https://www.thedataschool.co.uk/ben-davis/making-
barbell-plots-tableau/
Image credit: The Fiscal Times, http://www.thefiscaltimes.com/2015/11/05/5-
Charts-Explain-Gender-Pay-Gap

44. What’s your data story?
Time Trend
Image credit: https://ggwash.org/view/37967/dcs-housing-affordability-crisis-in-7-charts

45. Gestalt, n. a psychology term which
means "unified whole".
It refers to theories of visual perception*
developed by German psychologists
in the 1920s.
*PROXIMITY / SIMILARITY / ENCLOSURE / CLOSURE / CONTINUITY / CONNECTION
How visually accurate does your chart need to be?
Consider Gestalt principles.

46. Adapted from Alberto Cairo

47. Interesting
Function
Form
Integrity
David McCandless, 2012
1. Function: they let you see
trends and patterns clearly.
2. Form: they are visually
appealing and well structured
to attract readers and hold
their attention.
3. Integrity: they portray the data
accurately and honestly.
4. Interesting: they are relevant
and meaningful, or reveal new
information.
How will you use visual cues to guide the user?

48. How will you use visual cues
to guide the user?
Declutter
Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/

49. How will you use visual cues
to guide the user?
Color
Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/

50. How will you use visual cues
to guide the user?
Text
Chart from FiveThirtyEight: https://fivethirtyeight.com/features/the-52-best-and-weirdest-charts-we-made-in-2016/

51. Combining
views in a
dashboard

52. How can you use visual cues to guide the user?

53. Dashboard on Tableau Public: https://public.tableau.com/profile/amakulec#!/vizhome/WomeninPublicHealthSalaryDashboard/WomeninPublicHealthSalaries
More on the Z pattern: https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c
Overview first

54. Zoom and filter

55. Details on demand

56. Develop rough sketches
rooted in design best
practices to test different
ideas for charts and
dashboard layouts
In our design toolbox:
Sketching + Wireframing

57. Share your prototypes
with your user for early
feedback so you don’t
end up in this
situation…

58. Sketch a rough prototype of a
dashboard you could build to
answer her question.
TEST
PROTO-
TYPE
IDEATEDEFINEEMPATHY

59. PAIR SHARE
W h a t i s s i m i l a r ?
W h a t i s d i f f e r e n t ?

60. Favorite Resources for Diving in on Design Thinking
• Stanford d. School Bootcamp Bootleg
dschool.stanford.edu/resources
• IDEO Design Kit
ideo.com/post/design-kit

61. Data Viz Design Dashboards Design Inspiration
Storytelling with Data
Evergreen Data
Policy Viz
Effective Graphs
Ann K. Emery
Data Viz Hub
Perceptual Edge
Visualising Data
Dashboard Design
Series from Juice Analytics
Information is Beautiful
Flowing Data
Tableau Public Gallery
Eager Eyes
…and cautionary tales
Junk Charts
WTF Viz
For more on data visualization:

62. For more on prototype thinking:
Build a Tower, Build a Team
Tom Wujec
A TED Talk on teams and prototype thinking with the marshmallow
challenge | https://www.ted.com/talks/tom_wujec_build_a_tower

63. Amanda Makulec
Data Visualization Lead
Excella Consulting
amanda.makulec@excella.com
@abmakulec
excella.com
@excellaco