effective storytelling with data visualization · 2019-11-15 · data visualization refinement...
TRANSCRIPT
![Page 1: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/1.jpg)
Effective Storytellingwith Data Visualization
#LitmusLive • @swisswebmiss
![Page 2: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/2.jpg)
Hi, I’m Heidi.Pronouns are She/Her
Proud #EmailGeek for 10+ years
Senior Frontend Engineer @ Bumped
@swisswebmiss
#LitmusLive • @swisswebmiss
![Page 3: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/3.jpg)
heidiolsen.com/LL19
#LitmusLive • @swisswebmiss
Slides • Code Samples • Links to Resources
![Page 4: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/4.jpg)
#LitmusLive • @swisswebmiss
![Page 5: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/5.jpg)
#LitmusLive • @swisswebmiss
![Page 6: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/6.jpg)
#LitmusLive • @swisswebmiss Source: Michael Wharley/Rebecca Pitt, Financial Times
![Page 7: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/7.jpg)
#LitmusLive • @swisswebmiss
New challenges
Dividend
Market share
Tickers
ETFs
Brokerage
![Page 8: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/8.jpg)
#LitmusLive • @swisswebmiss
The Secret Sauce
Tells a compelling story
Easy to comprehend
Accessible across various clients
![Page 9: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/9.jpg)
Visual perception + cognitive load
INCREASE UNDERSTANDING
#LitmusLive • @swisswebmiss
![Page 10: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/10.jpg)
BRAIIIIIINS!
#LitmusLive • @swisswebmiss
![Page 11: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/11.jpg)
Brains.
#LitmusLive • @swisswebmiss
![Page 12: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/12.jpg)
376305894129452135692462583586395824
#LitmusLive • @swisswebmiss
![Page 13: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/13.jpg)
357630834125942135692456253586739824
#LitmusLive • @swisswebmiss
![Page 14: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/14.jpg)
Cognitive load refers to the total amount of information your working
memory can handle.
WorkingMemory
Long-TermMemory
#LitmusLive • @swisswebmiss
![Page 15: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/15.jpg)
SENSORY
#LitmusLive • @swisswebmiss
![Page 16: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/16.jpg)
SENSORY
SHORT-TERM
#LitmusLive • @swisswebmiss
![Page 17: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/17.jpg)
SENSORY
SHORT-TERM
LONG-TERM
#LitmusLive • @swisswebmiss
![Page 18: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/18.jpg)
OBLIVION
SHORT-TERM
LONG-TERM
#LitmusLive • @swisswebmiss
SENSORY
![Page 19: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/19.jpg)
OBLIVION
SHORT-TERM
LONG-TERM
? ??
#LitmusLive • @swisswebmiss
SENSORY
![Page 20: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/20.jpg)
“UGH”Moment
#LitmusLive • @swisswebmiss
![Page 21: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/21.jpg)
Source: WTF Visualizations#LitmusLive • @swisswebmiss
![Page 22: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/22.jpg)
Source: WTF Visualizations#LitmusLive • @swisswebmiss
NOPE.
![Page 23: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/23.jpg)
RemoveClutter
FocusAttention
Tell aStory
Tools to reduce cognitive load
#LitmusLive • @swisswebmiss
![Page 24: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/24.jpg)
Remove Clutter
1
#LitmusLive • @swisswebmiss
![Page 25: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/25.jpg)
#LitmusLive • @swisswebmiss
Principle of connection
![Page 26: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/26.jpg)
#LitmusLive • @swisswebmiss
A
B
C
D
E
Principle of connection
![Page 27: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/27.jpg)
Campaign A
Campaign B
Campaign C
Campaign D
Title of the graph Subtitle of the graph with more explanation
January
FebruaryMarch
AprilMay
June
#LitmusLive • @swisswebmiss
Remove clutter
![Page 28: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/28.jpg)
#LitmusLive • @swisswebmiss
Campaign A
Campaign B
Campaign C
Campaign D
Title of the graph Subtitle of the graph with more explanation
January
FebruaryMarch
AprilMay
June
Remove clutter
✔ Reduce visual noise
![Page 29: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/29.jpg)
JAN FEB MAR APR MAY JUN
#LitmusLive • @swisswebmiss
Campaign A
Campaign B
Campaign C
Campaign D
Title of the graph Subtitle of the graph with more explanation
Remove clutter
✔ Reduce visual noise
✔ Fix alignment
![Page 30: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/30.jpg)
JAN FEB MAR APR MAY JUN
#LitmusLive • @swisswebmiss
Campaign D
Campaign A
Campaign B
Campaign C
Title of the graph Subtitle of the graph with more explanation
Remove clutter
✔ Reduce visual noise
✔ Fix alignment
✔ Establish hierarchy
![Page 31: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/31.jpg)
#LitmusLive • @swisswebmiss
BEFORE: AFTER:
Remove clutter
![Page 32: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/32.jpg)
Focus Attention
2
#LitmusLive • @swisswebmiss
![Page 33: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/33.jpg)
#LitmusLive • @swisswebmiss
Leverage visual cues
Size Visual Space Color
![Page 34: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/34.jpg)
#LitmusLive • @swisswebmiss
Use color strategically
A B C D
Category 1 15% 22% 42% 6%
Category 2 43% 36% 20% 13%
Category 3 35% 17% 34% 20%
Category 4 52% 29% 26% 56%
0% 60%
![Page 35: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/35.jpg)
#LitmusLive • @swisswebmiss
Leverage saturation
A B C D
Category 1 15% 22% 42% 6%
Category 2 43% 36% 20% 13%
Category 3 35% 17% 34% 20%
Category 4 52% 29% 26% 56%
0% 60%
![Page 36: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/36.jpg)
#LitmusLive • @swisswebmiss
Additional color tips
Leverage brand color
Be mindful of color blindness
Draw attention with black
![Page 37: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/37.jpg)
#LitmusLive • @swisswebmiss
Leverage content cues
Establishhierarchy
Use semantic markup
Consider all interfaces
<h1>Read me first!</h1>
![Page 38: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/38.jpg)
#LitmusLive • @swisswebmiss
Accessibility is not a progressive enhancement.
!
![Page 39: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/39.jpg)
#LitmusLive • @swisswebmiss
Consider all interfaces <table><caption>Open Rates</caption><tr>
<td></td><th scope="col">Segment A</th><th scope="col">Segment B</th>
</tr><tr>
<th scope="row">Campaign 1</th><td>15%</td><td>22%</td>
</tr><tr>
<th scope="row">Campaign 2</th><td>40%</td><td>36%</td>
</tr></table>
<caption>
<th> vs <td>
<th scope="row">
<th scope="colgroup"> with spanned columns
![Page 40: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/40.jpg)
Tell a Story
3
#LitmusLive • @swisswebmiss
![Page 41: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/41.jpg)
#LitmusLive • @swisswebmiss
Some do it well...
![Page 42: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/42.jpg)
#LitmusLive • @swisswebmiss
Not one size fits all Your weekendin numbers
34total hours
6television series
0.5documentary
![Page 43: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/43.jpg)
#LitmusLive • @swisswebmiss
Put your audience first
What choices give your subscribers anxiety?
![Page 44: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/44.jpg)
SETUP
RESOLUTION
CONFLICT
Define the Big Idea
#LitmusLive • @swisswebmiss
![Page 45: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/45.jpg)
#LitmusLive • @swisswebmiss
SETUP:
There are two annoyingAF tasks that we have to manually do every day.
![Page 46: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/46.jpg)
ISSUE: You want to automate two menial processes
Describe the consistency of the tasks
Demonstrate issue: Show how many hours it takes per year to do the task
Ideas for overcoming the issue: Invest in new automation program
RECOMMENDATION:
Start vetting automation solutions
Issue:We want to automate two menial processes
Describe the manual repetition of the tasks
Show how many hours it takes per year to do the task
Ideas for overcoming the issue: Invest in new automation program
Recommendation:Start vetting automation solutions
#LitmusLive • @swisswebmiss
Storyboarding
Describe the consistency of the tasks
Need to convince our boss
![Page 47: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/47.jpg)
TASK 1 AND TASK 2Hours lost per year
120 -
80 -
40 -
Task 1 Task 2
#LitmusLive • @swisswebmiss
Informative approach
![Page 48: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/48.jpg)
DAYS LOST TO TASK 1 AND TASK 2: TIME SINKWork days lost per year
Jerome9 work days
Claire14 work days
#LitmusLive • @swisswebmiss
Refine to persuade
![Page 49: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/49.jpg)
#LitmusLive • @swisswebmiss
Persuasion or manipulation?
!
![Page 50: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/50.jpg)
#LitmusLive • @swisswebmiss
Exaggerating trends
1 2
25
4150
20
![Page 51: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/51.jpg)
#LitmusLive • @swisswebmiss
Exaggerating trends
1 2
25
41
1 2
25
41
50
20
50
0
![Page 52: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/52.jpg)
#LitmusLive • @swisswebmiss
Exaggerating trends
1 2
25
41
1 2
25
41
50
20
50
0
![Page 53: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/53.jpg)
#LitmusLive • @swisswebmiss
Providing inaccurate context
Democratic Republican
County-by-county results of the 2016 U.S. Presidential election
![Page 54: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/54.jpg)
#LitmusLive • @swisswebmiss
Providing inaccurate context
![Page 55: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/55.jpg)
#LitmusLive • @swisswebmiss
Providing inaccurate context
Donald Trump
Hillary Clinton
Other candidates
46.1% 62,984,825 votes
Share of the popular vote in the 2016U.S. Presidential election
48.2% 65,853,516 votes
5.7%
![Page 56: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/56.jpg)
Choosing aneffective visual
METHOD OF COMMUNICATION
#LitmusLive • @swisswebmiss
![Page 57: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/57.jpg)
The best solution isthe easiest solution.
#LitmusLive • @swisswebmiss
![Page 58: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/58.jpg)
THe BEsT sOlUtiOn iS tHE eAsIeSt SoLuTiOn.
#LitmusLive • @swisswebmiss
![Page 59: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/59.jpg)
#LitmusLive • @swisswebmiss Source: Xaquín González Veira
![Page 60: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/60.jpg)
Source: This is Indexed#LitmusLive • @swisswebmiss
![Page 61: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/61.jpg)
Simple Text
More impact,easier to understand
Can be misleading without context
of subscribers opted-into additional marketing emailsin 2018, compared to 41% in 2017
#LitmusLive • @swisswebmiss
![Page 62: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/62.jpg)
Simple Text
Use color to highlight and focus
Define a clear content hierarchy using font size and weight
#LitmusLive • @swisswebmiss
of subscribers opted-into additional marketing emailsin 2018, compared to 41% in 2017
![Page 63: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/63.jpg)
Simple Text
Can use custom fonts in certain clients
Animate to focus attention, but respect motion-sensitive subscribers
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}
.fadeIn { animation-duration: 500ms; animation-delay: 1000ms; animation-name: fadeIn;}
@media (prefers-reduced-motion: reduce) { .fadeIn { animation: none; } }
#LitmusLive • @swisswebmiss
![Page 64: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/64.jpg)
A B C
Category 1 15% 22% 42%
Category 2 40% 36% 20%
Category 3 35% 17% 34%
Category 4 30% 29% 26%
Tables
Audience with multiple concerns
Hard to follow in live presentations
#LitmusLive • @swisswebmiss
![Page 65: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/65.jpg)
Tables
Use minimal borders to help legibility
Adjust color saturation tofocus attention
#LitmusLive • @swisswebmiss
A B C
Category 1 15% 22% 42%
Category 2 40% 36% 20%
Category 3 35% 17% 34%
Category 4 30% 29% 26%
![Page 66: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/66.jpg)
Tables
We already usetables, hoorah!
But...forget everything you thought you knew about accessibility
<table><caption>Open Rates</caption><tr>
<td></td><th scope="col">Segment A</th><th scope="col">Segment B</th>
</tr><tr>
<th scope="row">Campaign 1</th><td>15%</td><td>22%</td>
</tr><tr>
<th scope="row">Campaign 2</th><td>40%</td><td>36%</td>
</tr></table>
#LitmusLive • @swisswebmiss
![Page 67: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/67.jpg)
Bar Graphs
Basic, but effective
Challenging to label
#LitmusLive • @swisswebmiss
1 2
25
41
50
0
![Page 68: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/68.jpg)
Bar Graphs
Horizontal graphs easier to read than vertical graphs
Great for showing progress
#LitmusLive • @swisswebmiss
85%
![Page 69: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/69.jpg)
Bar Graphs
Can add <title> attribute to <td> to create tooltip effect
Animating the bars can focus attention
<table><tr>
<td width="85%" title="85% to our goal" style="background-color: #8477e0">
</td><td width="15%" title="15% remaining" style="background-color: #6C5FC7">
</td>
</tr></table>
#LitmusLive • @swisswebmiss
![Page 70: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/70.jpg)
Area Graphs
Data of vastlydifferent magnitudes
Harder to read with multiple data points
#LitmusLive • @swisswebmiss
Out of every 25 emails sent...
6 users open the email
2 users click-through the email
![Page 71: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/71.jpg)
Area Graphs
Can visualize time with a calendar
#LitmusLive • @swisswebmiss
On Wednesdays we (mostly) wear pink.
S M T W T F S
![Page 72: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/72.jpg)
Area Graphs
Can visualize time with a calendar
Can easily sub out shapes for images
#LitmusLive • @swisswebmiss
3 out of 4 zombies dependon brain donations
![Page 73: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/73.jpg)
Area Graphs
Build with additional spacing between cells to show separation
<td width="20%" title="Tuesday: 40 outfits" style="padding: 0 5px 5px 0">
<span style="width: 100%; background: #ff0000;">
</span>
</td><td width="20%" title="Wednesday: 60 outfits" style="padding: 0 5px 5px 0">
<span style="width: 100%; background: #ca2c92;">
</span>
</td>
...
#LitmusLive • @swisswebmiss
![Page 74: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/74.jpg)
Pies are delicious, but pie charts are garbage.
#LitmusLive • @swisswebmiss
![Page 75: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/75.jpg)
Pie Charts
Hard to distinguish angles, especially 3D
#LitmusLive • @swisswebmiss
Email Market Share
![Page 76: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/76.jpg)
Pie Charts
Hard to distinguish angles, especially 3D
#LitmusLive • @swisswebmiss
Email Market Share
![Page 77: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/77.jpg)
Pie Charts
#LitmusLive • @swisswebmiss
Email Market Share
When in doubt,bar chart it out.
9
26
Gmail
Apple iPhone
Apple Mail
Outlook
34
31
![Page 78: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/78.jpg)
Building accessibledata visualization
REFINEMENT
#LitmusLive • @swisswebmiss
![Page 79: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/79.jpg)
Account Dashboard
1
#LitmusLive • @swisswebmiss
![Page 80: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/80.jpg)
Users receive incremental shares of stock for shopping at the brands they love.
Stock market is volatile and account value can stagger on a day-to-day basis.
Send a monthly email that shows rewards over a period of 30 days vs every day.
Big Idea
SETUP
RESOLUTION
CONFLICT
#LitmusLive • @swisswebmiss
![Page 81: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/81.jpg)
Your account summaryin August
JULY 2019
AUGUST 2019$0
$15
$30
$45
$60
$45.34
$60.01
#LitmusLive • @swisswebmiss
![Page 82: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/82.jpg)
Your account summaryin August
JULY AUGUST$0
$15
$30
$45
$60
$45.34
$60.01
#LitmusLive • @swisswebmiss
![Page 83: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/83.jpg)
Your account summaryin August
JULY AUGUST
$45.34
$60.01
#LitmusLive • @swisswebmiss
![Page 84: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/84.jpg)
Your account summaryin August
JULY AUGUST
$45.34
$60.01
#LitmusLive • @swisswebmiss
![Page 85: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/85.jpg)
+$14.67
Your account summaryin August
New this month for a total of $60.01
#LitmusLive • @swisswebmiss
![Page 86: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/86.jpg)
+$14.67
Your account summaryin August
New this month for a total of $60.01
#LitmusLive • @swisswebmiss
![Page 87: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/87.jpg)
+$14.67
Your account summaryin August
New this month for a total of $60.01
#LitmusLive • @swisswebmiss
View Account
![Page 88: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/88.jpg)
#LitmusLive • @swisswebmiss
A simple text approach will work in all major clients
CSS animations are currently supported in Apple Mail, Outlook for Mac, AOL Mail, Samsung, and Outlook App.
Support
!
![Page 89: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/89.jpg)
Product Comparison
2
#LitmusLive • @swisswebmiss
![Page 90: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/90.jpg)
A new product is being released.
The new product costs more than the existing product.
Compare the features of the new product to the existing product to justify the price difference.
Big Idea
SETUP
RESOLUTION
CONFLICT
#LitmusLive • @swisswebmiss
![Page 91: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/91.jpg)
Product A Product B
Feature 1 X X
Feature 2 X
Feature 3 X X
Feature 4 X X
Feature 5 X
#LitmusLive • @swisswebmiss
![Page 92: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/92.jpg)
Product A Product B
Feature 1 X X
Feature 2 X
Feature 3 X X
Feature 4 X X
Feature 5 X
#LitmusLive • @swisswebmiss
![Page 93: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/93.jpg)
Product A Product B
Feature 1 ✔ ✔
Feature 3 ✔ ✔
Feature 4 ✔ ✔
Feature 2 ✔
Feature 5 ✔
#LitmusLive • @swisswebmiss
![Page 94: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/94.jpg)
#LitmusLive • @swisswebmiss
![Page 95: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/95.jpg)
Product A Product B Product CFeature 1
More description here
✔ ✔ ✔
Feature 2More description here
✗ ✔ ✔
#LitmusLive • @swisswebmiss
![Page 96: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/96.jpg)
#LitmusLive • @swisswebmiss
![Page 97: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/97.jpg)
#LitmusLive • @swisswebmiss
Creating a mobile-first design will ensure that the comparison chart renders correctly in all major clients.
Support
![Page 98: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/98.jpg)
Fundraising Effort
3
#LitmusLive • @swisswebmiss
![Page 99: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/99.jpg)
A new program is set to launch.
The program is currently short of their goal and will not be able to fund the necessary supplies.
Encourage users to donate more money and show the impact their donations will have.
Big Idea
SETUP
RESOLUTION
CONFLICT
#LitmusLive • @swisswebmiss
![Page 100: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/100.jpg)
#LitmusLive • @swisswebmiss
$10.00
will fund a week of supplies.
![Page 101: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/101.jpg)
#LitmusLive • @swisswebmiss
$10.00
will fund a week of supplies.
$20.00
will fund two and a half weeks of supplies.
![Page 102: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/102.jpg)
#LitmusLive • @swisswebmiss
$10.00
will fund a week of supplies.
$20.00
will fund two and a half weeks of supplies.
$30.00
will fund an entire month of supplies.
![Page 103: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/103.jpg)
#LitmusLive • @swisswebmiss
$10.00 $20.00 $30.00
$10.00 will fund a week of supplies.
![Page 104: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/104.jpg)
#LitmusLive • @swisswebmiss
$20.00 $30.00
$20.00 will fund a two and a half weeks of supplies.
$10.00
![Page 105: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/105.jpg)
#LitmusLive • @swisswebmiss
$30.00$20.00
$30.00 will fund an entire month worth of supplies.
$10.00
![Page 106: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/106.jpg)
#LitmusLive • @swisswebmiss
$30.00$20.00
$30.00 will fund an entire month worth of supplies. Donate today »
$10.00
Your dollars make a difference
![Page 107: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/107.jpg)
#LitmusLive • @swisswebmiss
Bar graphs will work in all major email clients with minimal adjustments for mobile.
Interactive tabs are currently supported in iOS, AOL and Yahoo email clients. For all other clients, the experience will fallback to three stacked pieces of content.
Support
!
![Page 108: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/108.jpg)
Effective storytellingwith data visualization
WRAP UP
#LitmusLive • @swisswebmiss
![Page 109: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/109.jpg)
#LitmusLive • @swisswebmiss
The Secret Sauce
Tells a compelling story
Easy to comprehend
Accessible across various clients
![Page 110: Effective Storytelling with Data Visualization · 2019-11-15 · data visualization REFINEMENT #LitmusLive • @swisswebmiss. Account Dashboard 1 #LitmusLive • @swisswebmiss. Users](https://reader033.vdocuments.mx/reader033/viewer/2022053005/5f08bfa77e708231d4238828/html5/thumbnails/110.jpg)
heidiolsen.com/LL19
#LitmusLive • @swisswebmiss
Slides • Code Samples • Links to Resources