Building Handsome Dashboards with Dashing

Slide 1

Slide 1 text

Building Handsome Dashboards With Dashing 1

Slide 2

Slide 2 text

About Us 2

Slide 3

Slide 3 text

Chris Mar! @cmar! github.com/cmar Karle Durante! @karledurante! github.com/karledurante About Us 3

Slide 4

Slide 4 text

Booster 4

Slide 5

Slide 5 text

Booster Raise Money! Awareness! Spirits 5

Slide 6

Slide 6 text

booster.com/rubyrogues 6

Slide 7

Slide 7 text

booster.com/rubyonsails 7

Slide 8

Slide 8 text

booster.com/757rb 8

Slide 9

Slide 9 text

Case Study 9

Slide 10

Slide 10 text

Case Study: Booster • 1 room, 1 team, 1 focus • Iterative development cycles: Test, Measure, Learn • Everyone on the “front lines” 10

Slide 11

Slide 11 text

stachequatch.heroku.com 11

Slide 12

Slide 12 text

Movember 12

Slide 13

Slide 13 text

Movember 13

Slide 14

Slide 14 text

Case Study: Booster 14 Nov 2012 Group buying exploration Jan 2013 Launched First Campaign Apr 2013 All Hands ! On Deck Aug 2013 Official Booster Launch! Nov 2013 Operational ! Efficiency Jan 2014 25% of all! CustomInk Traffic!

Slide 15

Slide 15 text

Data Matters 15

Slide 16

Slide 16 text

But What Data? 16

Slide 17

Slide 17 text

What Data? • What are the average shirt sales per campaign? • How many buyers become organizers? • How many campaigns succeed? • How many submissions do not convert? 17

Slide 18

Slide 18 text

18 Start With Some KPI’s

Slide 19

Slide 19 text

Key Performance Indicators • Choose indicators that are directly relevant to your business • Measure indicators in a way that makes sense for your business • Keep it simple ! 19

Slide 20

Slide 20 text

20 Booster’s KPI’s?

Slide 21

Slide 21 text

Booster’s KPI’s • Gross Revenue • Shirts Sold • Campaigns Launched 21

Slide 22

Slide 22 text

Remember The Fun Stuﬀ 22

Slide 23

Slide 23 text

Fun Stuﬀ • Recently Launched Campaigns • Leader Board • Tweets 23

Slide 24

Slide 24 text

Booster Board 24

Slide 25

Slide 25 text

25 Dashboards Are Contagious

Slide 26

Slide 26 text

26 WebOps Board

Slide 27

Slide 27 text

27 Ops Tech Board

Slide 28

Slide 28 text

28 eCommerce Board

Slide 29

Slide 29 text

Washington Post Noticed 29 … shows that 89,099 shirts were ! sold in the past 24 hours… Sales in the past hour were $99,220 A color-coded map of the U.S. shows! which states have the greatest sales. … sales volume for the past four ! weeks sold $197,352.86 in products http://wapo.st/1gx8oT8

Slide 30

Slide 30 text

30 The Entire Team Beneﬁts

Slide 31

Slide 31 text

Team Beneﬁts • Data Visualization • Insight into customer behaviors/ patterns • Widespread goal driven and performance culture 31

Slide 32

Slide 32 text

32 Dashing

Slide 33

Slide 33 text

Dashing 33 http://shopify.github.io/dashing!

Slide 34

Slide 34 text

The Stack • Dashing gem • Sinatra • Rufus Scheduler gem • Batman.js • Sprockets - asset pipeline • Gridster.js 34

Slide 35

Slide 35 text

Dashboards • Multiple for diﬀerent screen size or audience • Drag and drop layout • Custom grid –Widget base dimensions –Num columns 35

Slide 36

Slide 36 text

Widgets • Meter Widget –meter.coﬀee –meter.scss –meter.html 36

Slide 37

Slide 37 text

Batman.js • Data bindings • Server-Sent Events • Liquid style ﬁlters 37

Slide 38

Slide 38 text

Jobs • Centralized data collection • Thread scheduled • Rufus Scheduler Gem 38

Slide 39

Slide 39 text

Server-Sent Events server-sent events API every 60s 39 Dashing Server Application TV Dashboard TV Dashboard Service

Slide 40

Slide 40 text

40 Demo

Slide 41

Slide 41 text

41 Starting A Dashboard Is Easy

Slide 42

Slide 42 text

Start a dashboard • Create widgets • Get data • Push to Heroku 42

Slide 43

Slide 43 text

43 Getting Data

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

50 Open Source Widgets

Slide 51

Slide 51 text

Open Source Widgets https://github.com/Shopify/dashing/wiki/Additional-Widgets 51

Slide 52

Slide 52 text

B-Cycle https://gist.github.com/stephenyeargin/7678371 52

Slide 53

Slide 53 text

Code Climate https://gist.github.com/dgehrett/6829168 53

Slide 54

Slide 54 text

Forecast.io https://gist.github.com/ysim/6768311 54

Slide 55

Slide 55 text

Jenkins https://gist.github.com/mavimo/6334816 55

Slide 56

Slide 56 text

New Relic https://gist.github.com/assimovt/5181244 56

Slide 57

Slide 57 text

57 Be Considerate

Slide 58

Slide 58 text

Be Considerate • Use simple caching strategies • Don’t request all the data • Appropriate polling frequency 58

Slide 59

Slide 59 text

59 Thank You!

Slide 60

Slide 60 text

Chris Mar! @cmar! github.com/cmar Karle Durante! @karledurante! github.com/karledurante Thanks! 60