Effective Storytelling with Data Visualization

A presentation at Litmus Live 2019 in October 2019 in Boston, MA, USA by Heidi Olsen

Slide 1

Effective Storytelling with Data Visualization #LitmusLive • @swisswebmiss

Slide 2

Hi, I’m Heidi. Pronouns are She/Her Proud #EmailGeek for 10+ years Senior Frontend Engineer @ Bumped @swisswebmiss #LitmusLive • @swisswebmiss

Slide 3

heidiolsen.com/LL19 Slides • Code Samples • Links to Resources #LitmusLive • @swisswebmiss

Slide 4

#LitmusLive • @swisswebmiss

Slide 5

#LitmusLive • @swisswebmiss

Slide 6

#LitmusLive • @swisswebmiss Source: Michael Wharley/Rebecca Pitt, Financial Times

Slide 7

New challenges ETFs Market share Brokerage Dividend Tickers #LitmusLive • @swisswebmiss

Slide 8

The Secret Sauce Easy to comprehend Tells a compelling story #LitmusLive • @swisswebmiss Accessible across various clients

Slide 9

INCREASE UNDERSTANDING Visual perception + cognitive load #LitmusLive • @swisswebmiss

Slide 10

BRAIIIIIINS! #LitmusLive • @swisswebmiss

Slide 11

Brains. #LitmusLive • @swisswebmiss

Slide 12

376305894 129452135 692462583 586395824 #LitmusLive • @swisswebmiss

Slide 13

357630834 125942135 692456253 586739824 #LitmusLive • @swisswebmiss

Slide 14

Working Memory Long-Term Memory Cognitive load refers to the total amount of information your working memory can handle. #LitmusLive • @swisswebmiss

Slide 15

SENSORY #LitmusLive • @swisswebmiss

Slide 16

SENSORY SHORT-TERM #LitmusLive • @swisswebmiss

Slide 17

SENSORY SHORT-TERM LONG-TERM #LitmusLive • @swisswebmiss

Slide 18

SENSORY SHORT-TERM LONG-TERM #LitmusLive • @swisswebmiss OBLIVION

Slide 19

SENSORY SHORT-TERM ? LONG-TERM #LitmusLive • @swisswebmiss OBLIVION ? ?

Slide 20

“UGH” Moment #LitmusLive • @swisswebmiss

Slide 21

#LitmusLive • @swisswebmiss Source: WTF Visualizations

Slide 22

NOPE. #LitmusLive • @swisswebmiss Source: WTF Visualizations

Slide 23

Tools to reduce cognitive load Remove Clutter #LitmusLive • @swisswebmiss Focus Attention Tell a Story

Slide 24

1 Remove Clutter #LitmusLive • @swisswebmiss

Slide 25

Principle of connection #LitmusLive • @swisswebmiss

Slide 26

Principle of connection A B C D E #LitmusLive • @swisswebmiss

Slide 27

Remove clutter Title of the graph Subtitle of the graph with more explanation Campaign A Campaign B Campaign C Campaign D ua Jan #LitmusLive • @swisswebmiss ry Fe a bru ry h rc Ma ril Ap y Ma e Jun

Slide 28

Remove clutter ✔ Reduce visual noise Title of the graph Subtitle of the graph with more explanation Campaign A Campaign B Campaign C Campaign D ua Jan #LitmusLive • @swisswebmiss ry Fe a bru ry h rc Ma ril Ap y Ma e Jun

Slide 29

Remove clutter ✔ Reduce visual noise Title of the graph ✔ Fix alignment Campaign A Subtitle of the graph with more explanation Campaign B Campaign C Campaign D JAN #LitmusLive • @swisswebmiss FEB MAR APR MAY JUN

Slide 30

Remove clutter ✔ Reduce visual noise Title of the graph ✔ Fix alignment Campaign D ✔ Establish hierarchy Subtitle of the graph with more explanation Campaign A Campaign B Campaign C JAN #LitmusLive • @swisswebmiss FEB MAR APR MAY JUN

Slide 31

Remove clutter BEFORE: #LitmusLive • @swisswebmiss AFTER:

Slide 32

2 Focus Attention #LitmusLive • @swisswebmiss

Slide 33

Leverage visual cues Size #LitmusLive • @swisswebmiss Visual Space Color

Slide 34

Use color strategically 0% 60% 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% #LitmusLive • @swisswebmiss

Slide 35

Leverage saturation 0% 60% 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% #LitmusLive • @swisswebmiss

Slide 36

Additional color tips Leverage brand color Be mindful of color blindness Draw attention with black #LitmusLive • @swisswebmiss

Slide 37

Leverage content cues

<h1> Read me first! </h1> Establish hierarchy #LitmusLive • @swisswebmiss Use semantic markup Consider all interfaces

Slide 38

! Accessibility is not a progressive enhancement. #LitmusLive • @swisswebmiss

Slide 39

Consider all interfaces <caption> <th> vs <td> <th scope=”row”> <th scope=”colgroup”> with spanned columns #LitmusLive • @swisswebmiss

<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>

Slide 40

3 Tell a Story #LitmusLive • @swisswebmiss

Slide 41

Some do it well… #LitmusLive • @swisswebmiss

Slide 42

Not one size fits all Your weekend in numbers 34 total hours 6 television series 0.5 documentary #LitmusLive • @swisswebmiss

Slide 43

Put your audience first What choices give your subscribers anxiety? #LitmusLive • @swisswebmiss

Slide 44

Define the Big Idea SETUP CONFLICT RESOLUTION #LitmusLive • @swisswebmiss

Slide 45

SETUP: There are two annoying AF tasks that we have to manually do every day. #LitmusLive • @swisswebmiss

Slide 46

Storyboarding Issue: ISSUE: You We want want to to automate two automate two menial processes Show how many Demonstrate issue: Show many hourshow it takes per hours it takes per year year to dotask the task to do the Ideasfor forovercoming overcoming Ideas the theissue: issue:Invest Investinin new automation new automation program program menial processes Need to convince Describe the consistency our boss of the tasks #LitmusLive • @swisswebmiss Describethe the manual Describe consistency thetasks repetition ofofthe tasks Recommendation: RECOMMENDATION: Start vetting Start vetting automationsolutions solutions automation

Slide 47

Informative approach TASK 1 AND TASK 2 Hours lost per year 120 - 80 - 40 - Task 1 #LitmusLive • @swisswebmiss Task 2

Slide 48

Refine to persuade DAYS LOST TO TASK 1 AND TASK 2: TIME SINK Work days lost per year Jerome 9 work days #LitmusLive • @swisswebmiss Claire 14 work days

Slide 49

! Persuasion or manipulation? #LitmusLive • @swisswebmiss

Slide 50

Exaggerating trends 50 41 25 20 1 #LitmusLive • @swisswebmiss 2

Slide 51

Exaggerating trends 50 50 41 41 25 25 20 0 1 #LitmusLive • @swisswebmiss 2 1 2

Slide 52

Exaggerating trends 50 50 41 41 25 25 20 0 1 #LitmusLive • @swisswebmiss 2 1 2

Slide 53

Providing inaccurate context County-by-county results of the 2016 U.S. Presidential election Democratic #LitmusLive • @swisswebmiss Republican

Slide 54

Providing inaccurate context #LitmusLive • @swisswebmiss

Slide 55

Providing inaccurate context Share of the popular vote in the 2016 U.S. Presidential election Donald Trump 46.1% 62,984,825 votes Hillary Clinton 48.2% 65,853,516 votes Other candidates #LitmusLive • @swisswebmiss 5.7%

Slide 56

METHOD OF COMMUNICATION Choosing an effective visual #LitmusLive • @swisswebmiss

Slide 57

The best solution is the easiest solution. #LitmusLive • @swisswebmiss

Slide 58

THe BEsT sOlUtiOn iS tHE eAsIeSt SoLuTiOn. #LitmusLive • @swisswebmiss

Slide 59

#LitmusLive • @swisswebmiss Source: Xaquín González Veira

Slide 60

#LitmusLive • @swisswebmiss Source: This is Indexed

Slide 61

Simple Text More impact, easier to understand of subscribers opted-in to additional marketing emails in 2018, compared to 41% in 2017 Can be misleading without context #LitmusLive • @swisswebmiss

Slide 62

Simple Text Use color to highlight and focus of subscribers opted-in to additional marketing emails in 2018, compared to 41% in 2017 #LitmusLive • @swisswebmiss Define a clear content hierarchy using font size and weight

Slide 63

Simple Text @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 Can use custom fonts in certain clients Animate to focus attention, but respect motion-sensitive subscribers

Slide 64

Tables A B C Category 1 15% 22% 42% Category 2 40% 36% 20% Category 3 35% 17% 34% Category 4 30% 29% 26% #LitmusLive • @swisswebmiss Audience with multiple concerns Hard to follow in live presentations

Slide 65

Tables A B C Category 1 15% 22% 42% Category 2 40% 36% 20% Category 3 35% 17% 34% Category 4 30% 29% 26% #LitmusLive • @swisswebmiss Use minimal borders to help legibility Adjust color saturation to focus attention

Slide 66

Tables <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 We already use tables, hoorah! But…forget everything you thought you knew about accessibility

Slide 67

Bar Graphs 50 41 Basic, but effective 25 Challenging to label 0 1 #LitmusLive • @swisswebmiss 2

Slide 68

Bar Graphs 85% Horizontal graphs easier to read than vertical graphs Great for showing progress #LitmusLive • @swisswebmiss

Slide 69

Bar Graphs <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 Can add <title> attribute to <td> to create tooltip effect Animating the bars can focus attention

Slide 70

Area Graphs Out of every 25 emails sent… Data of vastly different magnitudes 6 users open the email 2 users click-through the email #LitmusLive • @swisswebmiss Harder to read with multiple data points

Slide 71

Area Graphs On Wednesdays we (mostly) wear pink. S M T W #LitmusLive • @swisswebmiss T F S Can visualize time with a calendar

Slide 72

Area Graphs 3 out of 4 zombies depend on brain donations Can visualize time with a calendar Can easily sub out shapes for images #LitmusLive • @swisswebmiss

Slide 73

Area Graphs <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 Build with additional spacing between cells to show separation

Slide 74

Pies are delicious, but pie charts are garbage. #LitmusLive • @swisswebmiss

Slide 75

Pie Charts Email Market Share Hard to distinguish angles, especially 3D #LitmusLive • @swisswebmiss

Slide 76

Pie Charts Email Market Share Hard to distinguish angles, especially 3D #LitmusLive • @swisswebmiss

Slide 77

Pie Charts Email Market Share Gmail 34 Apple iPhone 31 Apple Mail Outlook #LitmusLive • @swisswebmiss 26 9 When in doubt, bar chart it out.

Slide 78

REFINEMENT Building accessible data visualization #LitmusLive • @swisswebmiss

Slide 79

1 Account Dashboard #LitmusLive • @swisswebmiss

Slide 80

Big Idea SETUP Users receive incremental shares of stock for shopping at the brands they love. CONFLICT Stock market is volatile and account value can stagger on a day-to-day basis. RESOLUTION Send a monthly email that shows rewards over a period of 30 days vs every day. #LitmusLive • @swisswebmiss

Slide 81

Your account summary in August $60.01 $60 $45.34 $45 $30 $15 $0 0 Y2 L U J #LitmusLive • @swisswebmiss 19 19 US G AU 0 T2

Slide 82

Your account summary in August $60.01 $60 $45 $45.34 $30 $15 $0 JULY #LitmusLive • @swisswebmiss AUGUST

Slide 83

Your account summary in August $60.01 $45.34 JULY #LitmusLive • @swisswebmiss AUGUST

Slide 84

Your account summary in August $60.01 $45.34 JULY #LitmusLive • @swisswebmiss AUGUST

Slide 85

Your account summary in August +$14.67 New this month for a total of $60.01 #LitmusLive • @swisswebmiss

Slide 86

Your account summary in August +$14.67 New this month for a total of $60.01 #LitmusLive • @swisswebmiss

Slide 87

Your account summary in August +$14.67 New this month for a total of $60.01 View Account #LitmusLive • @swisswebmiss

Slide 88

Support 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. #LitmusLive • @swisswebmiss

Slide 89

2 Product Comparison #LitmusLive • @swisswebmiss

Slide 90

Big Idea SETUP A new product is being released. CONFLICT The new product costs more than the existing product. RESOLUTION Compare the features of the new product to the existing product to justify the price difference. #LitmusLive • @swisswebmiss

Slide 91

Feature 1 Product A Product B X X Feature 2 X Feature 3 X X Feature 4 X X Feature 5 #LitmusLive • @swisswebmiss X

Slide 92

Feature 1 Product A Product B X X Feature 2 X Feature 3 X X Feature 4 X X Feature 5 #LitmusLive • @swisswebmiss X

Slide 93

Product A Product B Feature 1 ✔ ✔ Feature 3 ✔ ✔ Feature 4 ✔ ✔ Feature 2 ✔ Feature 5 ✔ #LitmusLive • @swisswebmiss

Slide 94

#LitmusLive • @swisswebmiss

Slide 95

Product A Product B Product C Feature 1 More description here ✔ ✔ ✔ Feature 2 More description here ✗ #LitmusLive • @swisswebmiss ✔ ✔

Slide 96

#LitmusLive • @swisswebmiss

Slide 97

Support Creating a mobile-first design will ensure that the comparison chart renders correctly in all major clients. #LitmusLive • @swisswebmiss

Slide 98

3 Fundraising Effort #LitmusLive • @swisswebmiss

Slide 99

Big Idea SETUP A new program is set to launch. CONFLICT The program is currently short of their goal and will not be able to fund the necessary supplies. RESOLUTION Encourage users to donate more money and show the impact their donations will have. #LitmusLive • @swisswebmiss

Slide 100

$10.00 will fund a week of supplies. #LitmusLive • @swisswebmiss

Slide 101

$10.00 will fund a week of supplies. $20.00 will fund two and a half weeks of supplies. #LitmusLive • @swisswebmiss

Slide 102

$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. #LitmusLive • @swisswebmiss

Slide 103

$10.00 $20.00 $10.00 will fund a week of supplies. #LitmusLive • @swisswebmiss $30.00

Slide 104

$10.00 $20.00 $20.00 will fund a two and a half weeks of supplies. #LitmusLive • @swisswebmiss $30.00

Slide 105

$10.00 $20.00 $30.00 will fund an entire month worth of supplies. #LitmusLive • @swisswebmiss $30.00

Slide 106

Your dollars make a difference $10.00 $20.00 $30.00 will fund an entire month worth of supplies. Donate today » #LitmusLive • @swisswebmiss $30.00

Slide 107

Support 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. #LitmusLive • @swisswebmiss

Slide 108

WRAP UP Effective storytelling with data visualization #LitmusLive • @swisswebmiss

Slide 109

The Secret Sauce Easy to comprehend Tells a compelling story #LitmusLive • @swisswebmiss Accessible across various clients

Slide 110

heidiolsen.com/LL19 Slides • Code Samples • Links to Resources #LitmusLive • @swisswebmiss