NYPL Labs Design @ MITH Digital Dialogues

Kill Time, Make History: Building Inspector and other HCI Case Studies from NYPL Labs. This deck does not include the videos or animated GIFs presented.

For more information visit: http://mith.umd.edu/podcasts/dd_spring-2015-mauricio-giraldo/

1. mauricio giraldo arteaga @mgiraldo nypl labs kill time. make history. MITH digital dialogues, march, 2015
2. hola
3. my name is mauricio
6. NYPL Labs
10. we’ve been at it for 3+ years
12. buildinginspector.nypl.org
17. year
18. street names year
19. use type street names year
20. use type street names name year
21. material use type street names name year
22. material use type street names name class year
23. material use type street names address name class year
24. material use type street names address floors name class year
25. material use type street names address floors name class year skylights
26. material use type street names address floors name class year skylights backyards
27. material use type street names address floors name class geo location year skylights backyards
28. footprint material use type street names address floors name class geo location year skylights backyards
29. footprint material use type street names address floors name class geo location year skylights backyards
30. extract all the data
31. why?
32. citysdk.waag.org/buildings
33. citysdk.waag.org/buildings
34. NYU Stern / Imaginaria3D
35. NYU Stern / Imaginaria3D
36. maps.google.com
37. maps.google.com
39. step 1: georectify or: make it match Open Street Map
43. *simulation. actual process requires many maths.
46. steps 2+: digitize or: draw the whole map again
49. maps.nypl.org/warper
53. ⏳ this will take forever ~3 years for just two atlases of Manhattan
55. divide
56. divide ↓
57. divide ↓ automate* *what can be reasonably worth automating
58. divide ↓ automate* ↓ *what can be reasonably worth automating
59. divide ↓ automate* ↓ crowdsource *what can be reasonably worth automating
60. …and conquer!
63. automate footprint extraction it is the most labor-intensive task
65. github.com/NYPL/map-vectorizer
68. “is the output any good?”
70. a building is: completely enclosed by black lines dashed lines are not walls not paper-colored
71. …so we did a prototype
72. –@mikeindustries “a prototype is worth a thousand meetings”
75. pretty straightforward, right?
76. lots of edge cases
78. we could just do a tutorial
79. tutorials are hard and people rarely bother to follow them
80. juicybeast.com/2014/10/designing-a-playable-ui-that-secretly-teaches-how-to-play/
81. juicybeast.com/2014/10/designing-a-playable-ui-that-secretly-teaches-how-to-play/
85. …but tutorials are hard and don’t even get me started with “cross-browser”
89. pretty neat!
90. ❌ but it doesn’t work on mobile did i mention tutorials are hard?
93. …it could be worse
96. A MONTH later…
101. we ♥ our contributors ~27% were mobile visits
102. we ♥ our contributors ~27% were mobile visits
103. footprint material use type street names address floors name class geo location year skylights backyards
104. footprint material use type street names address floors name class geo location year skylights backyards
105. check
106. check YES
107. check YES address color
108. check YES FIX address color
109. check YES FIX address color fix
110. check YES FIX address color fix
111. check YES FIX address color fix *footprints marked as “NO” go to building heaven
112. check YES FIX address color fix *footprints marked as “NO” go to building heaven
113. but first, a revamp
120. colors
125. addresses
128. fixing footprints
131. remember the tutorials?
137. people skip the tutorials anyway…
138. so, if you can’t do something like this:
141. …have a plan b
142. many eyes per task ≥75% agreement among three or more inspectors
143. 24% 17% 28% 31% Check Fix Color Address pageviews per task
144. ~32% mobile visits 1.1 million inspections so far
145. stereo.nypl.org
154. “wouldn’t it be cool if…?”
158. …so we did a prototype
161. distill the task to its critical components
164. add some polish… a.k.a. designing
170. thank you! images from: NYPL - Wikimedia Commons - Flickr user wallyg - Giphy mauricio giraldo arteaga @mgiraldo nypl labs