Social math provides a method for designers to make complex numerical data about an important cause both meaningful and understandable to your audience. Social math is a design process of telling a story with data that will motivate your users to engage in the behavior you intend. This half-day course is appropriate for all levels of experience. The lessons focus on introducing the concept of social math and detailing a method to design using social math. Design activities provide an opportunity for attendees to practice using the method. Attendees will learn: How to define and identify social math Why social math is an important part of an impactful design When to incorporate social math into the design process Where to find reliable data for designing with social math A method for incorporating social math into their design What additional resources exist for using social math

1. UXPA 2016VICTOR YOCCO & ASHLEY PULLI
A Design Method for
Visualizing Complex Data

2. We work together seamlessly across disciplines as well as with clients of all
sizes in just about every industry. Our end goal: superior apps, websites, and
software that make customer’s experiences the best they can be.
Strategists
Researcher
s
Designers Technologists
USER CENTERED DESIGN
WE ARE A TEAM OF
#UXPA2016 ©2016

3. ashley.pulli@ey.com
USER EXPERIENCE DESIGNER
Ashley Pulli
@ashpulli
• Has worked on interactive projects ranging from
tablet applications to responsive websites
• Values simple, effective design that incorporates
data visualization
#UXPA2016 ©2016

4. victor.yocco@ey.co
m
RESEARCH DIRECTOR
Victor Yocco
@VictorYocco
• Author of over 20 articles on user experience
research and the application of principles of
psychology to digital design
• Author of “Design for the Mind”, a Manning
Publications book on the application of principles
of psychology to design
#UXPA2016 ©2016

5. Who? What? Why?
Group Introductions
#UXPA2016 ©2016

7. Why social math?
#UXPA2016 ©2016

8. 1 Activity
SOCIAL MATH OR NOT?
Workshop Agenda
2
3 Activity
LET’S MAKE SOCIAL MATH!
WHAT IS
Social Math?
WHY DO
Social Math?
Social Math
SOCIAL MATH
HOW TO DO

9. 1WHAT IS
Social Math?
A method of framing information that makes a
relevant comparison, utilizes good visual
design, and incorporates a strong call to
action.
#UXPA2016 ©2016

10. A way of telling a compelling story using data, or
relate them to concepts that people find familiar.
STORYTELLING
Makes complex statistical and numerical data
more approachable to the audience
APPROACHABLE
Making information meaningful and actionable.
while asking people to engage in a behavior to
promote a cause.
VISUAL & MEANINGFUL
1WHAT IS
Social Math?
#UXPA2016 ©2016

11. Makes complex statistical and numerical data
more approachable to the audience
APPROACHABLE
#UXPA2016 ©2016

12. A way of telling a compelling story using data, or
relate them to concepts that people find familiar.
STORYTELLING
#UXPA2016 ©2016

13. Making information meaningful and actionable,
while asking people to engage in a behavior to
promote a cause.
VISUAL & MEANINGFUL
The Social Math
“Formula”
#UXPA2016 ©2016

14. Used to draw attention to a certain element of design. Our
eyes are immediately drawn to bold, contrasting pops of
color.
COLOR
An effective tool for guiding a viewer’s eye to a specific
element of a design. Our minds associate size with
importance.
SCALE
Dramatic shifts in color or text-size signal that something
is different which grabs attention.
CONTRAST
THE BASICS OF
Visual Hierarchy
Used to separate and group elements of a design; it’s the
quickest way to relate similar content or distinguish one
group of content from another.
PROXIMITY

15. Examples of Social Math
!
#UXPA2016 ©2016

16. THE FACTS
Eating a large buttered popcorn
while watching the latest Marvel
Comics superhero-based movie at
Regal Cinemas causes you to
consume 1,200 calories and 60
grams of saturated fat.
#UXPA2016 ©2016

17. Number of calories in
Movie Popcorn
Number of calories in
Movie Popcorn
Number of rotations for
Mars to cirlce
the Sun
Number of rotations for
Mars to cirlce
the Sun
BAD EXAMPLE OF SOCIAL MATH
#UXPA2016 ©2016

18. GOOD EXAMPLE OF SOCIAL MATH
#UXPA2016 ©2016
1100
CALORIES
1100
CALORIES
1200
CALORIES
1200
CALORIES
Next time you attend a movie, remember
there are healthier options.
Next time you attend a movie, remember
there are healthier options.
60
GRAMS FAT
60GRAMS FAT
16GRAMS FAT
16GRAMS FAT

19. THE FACTS
Drinking too much, including binge
drinking, cost the United States
$249 billion in 2010, or $2.05 a
drink, from losses in productivity,
health care, crime, and other
expenses.
#UXPA2016 ©2016

20. GOOD EXAMPLE OF SOCIAL MATH
Learn more about binge drinking at: http://www.cdc.gov/alcohol/fact-sheets/binge-drinking.htm
Cost the US $249 billion
DRINKING TOO MUCH
$2.05 a drink
=

21. Social Math
or not?
Determine if each example
does or does not meet our
definition of social math
Make it
Social
Math!
What is missing? How
would you make this fit
the definition of social
math?
&
#UXPA2016 ©2016

22. 2WHY DO
Social Math?
Promotes action on an issue and has the
opportunity to be very evocative when combined
with effective visual design.
GREATER IMPACT
Alleviates confusion by making the message clear,
and motivates behavior.
FAMILIAR & RELATABLE
#UXPA2016 ©2016

23. Alleviates confusion by making the message clear,
and motivates behavior.
FAMILIAR & RELATABLE
#UXPA2016 ©2016

24. Promotes action on an issue and has the
opportunity to be very evocative when combined
with effective visual design.
GREATER IMPACT
#UXPA2016 ©2016

25. Go get some coffee!
You look like you could use some.
#UXPA2016 ©2016

26. Social Math
Identify your audience
Determine the focus of your data
Visualize your story
Double check your data
2
3
5
7
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1

27. Social Math
Identify your audience
Determine the focus of your data
Visualize your story
Double check your data
2
3
5
7
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1
First you need to understand the topic you are creating your message to address.

28. Social Math
Identify your audience
Determine the focus of your data
Visualize your story
Double check your data
2
3
5
7
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1
Define the characteristics of the audience you want your message to reach.

29. Social Math
Identify your audience
Determine the focus of your data
Double check your data
2
3
5
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1
Narrow down your issue to one specific topic so that your message is as
focused as possible. Keep it simple.

30. Social Math
Identify your audience
Determine the focus of your data
Visualize your story
Double check your data
2
3
5
7
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1

31. Social Math
Identify your audience
Determine the focus of your data
2
3
5 Identify a meaningful comparison
4 Find reliable data
Define your issue1
Reputable source
Length of time source had been
active
Verify how data were collected
Transparency

32. Social Math
Identify your audience
Determine the focus of your data
Visualize your story
Double check your data
2
3
5
7
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1
The story you tell must be familiar and relevant.

33. Social Math
Identify your audience
Determine the focus of your data
Double check your data
2
3
5
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1
You should find another source to verify your information. This is critical; if
you don’t double check your facts, someone else will.

34. Identify your audience
Determine the focus of your data
Visualize your story
Double check your data
2
3
5
7
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1
Remember…Scale, Color, Contrast, Proximity!

35. Social Math
Identify your audience
Determine the focus of your data
Visualize your story
Double check your data
2
3
5
7
6
Identify a meaningful comparison
4 Find reliable data
Define your issue1

36. Let’s do social math!
!
#UXPA2016 ©2016

37. 21
Define your issue Identify your audience
First you need to understand the topic you are
creating your message to address.
Define the characteristics of the audience you
want your message to reach.

38. 43
Determine the
focus of your
data
Find reliable data
Narrow down your issue to one specific topic so
that your message is as focused as possible.
Keep it simple.
Reputable source
Length of time source
had been active
Verify how data were
collected
Transparency

39. 5
Identify a meaningful comparison
The story you tell must be familiar and relevant.
Interview 2-3 people to find a meaningful comparison
using the data that you collected.

40. 6
Double check your data
You should find another source to verify your
information. This is critical; if you don’t double
check your facts, someone else will.
7
Visualize your story
Use the hierarchy of the visual
to emphasize key facts
Cater to your audience with the
appropriate visual style

41. Time to share with the
group!
#UXPA2016 ©2016

42. Thank You!
ashley.pulli@ey.comvictor.yocco@ey.co
m
@ashpulli@VictorYocco
#UXPA2016 ©2016
Session Survey: www.uxpa2016.org/survey/135