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/

Transcript

1. mauricio giraldo arteaga
   @mgiraldo
   nypl labs
   kill time. make history.
   MITH digital dialogues, march, 2015
   

   View Slide

2. hola
   

   View Slide

3. my name is mauricio
   

   View Slide

4. View Slide

5. View Slide

6. NYPL Labs
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. we’ve been at it for 3+ years
    

    View Slide

11. View Slide

12. buildinginspector.nypl.org
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. year
    

    View Slide

18. street names
    year
    

    View Slide

19. use type
    street names
    year
    

    View Slide

20. use type
    street names
    name
    year
    

    View Slide

21. material
    use type
    street names
    name
    year
    

    View Slide

22. material
    use type
    street names
    name
    class
    year
    

    View Slide

23. material
    use type
    street names
    address
    name
    class
    year
    

    View Slide

24. material
    use type
    street names
    address
    floors
    name
    class
    year
    

    View Slide

25. material
    use type
    street names
    address
    floors
    name
    class
    year
    skylights
    

    View Slide

26. material
    use type
    street names
    address
    floors
    name
    class
    year
    skylights
    backyards
    

    View Slide

27. material
    use type
    street names
    address
    floors
    name
    class
    geo location
    year
    skylights
    backyards
    

    View Slide

28. footprint
    material
    use type
    street names
    address
    floors
    name
    class
    geo location
    year
    skylights
    backyards
    

    View Slide

29. footprint
    material
    use type
    street names
    address
    floors
    name
    class
    geo location
    year
    skylights
    backyards
    

    View Slide

30. extract all the data
    

    View Slide

31. why?
    

    View Slide

32. citysdk.waag.org/buildings
    

    View Slide

33. citysdk.waag.org/buildings
    

    View Slide

34. NYU Stern / Imaginaria3D
    

    View Slide

35. NYU Stern / Imaginaria3D
    

    View Slide

36. maps.google.com
    

    View Slide

37. maps.google.com
    

    View Slide

38. View Slide

39. step 1: georectify
    or: make it match Open Street Map
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. *simulation. actual process requires many maths.
    

    View Slide

44. View Slide

45. View Slide

46. steps 2+: digitize
    or: draw the whole map again
    

    View Slide

47. View Slide

48. View Slide

49. maps.nypl.org/warper
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. ⏳
    this will take forever
    ~3 years for just two atlases of Manhattan
    

    View Slide

54. View Slide

55. divide
    

    View Slide

56. divide
    ↓
    

    View Slide

57. divide
    ↓
    automate*
    *what can be reasonably worth automating
    

    View Slide

58. divide
    ↓
    automate*
    ↓
    *what can be reasonably worth automating
    

    View Slide

59. divide
    ↓
    automate*
    ↓
    crowdsource
    *what can be reasonably worth automating
    

    View Slide

60. 
    …and conquer!
    

    View Slide

61. View Slide

62. View Slide

63. automate footprint extraction
    it is the most labor-intensive task
    

    View Slide

64. View Slide

65. github.com/NYPL/map-vectorizer
    

    View Slide

66. View Slide

67. View Slide

68. “is the output any good?”
    

    View Slide

69. View Slide

70. a building is:
    completely enclosed by black lines
    dashed lines are not walls
    not paper-colored
    

    View Slide

71. …so we did a prototype
    

    View Slide

72. –@mikeindustries
    “a prototype is worth a thousand meetings”
    

    View Slide

73. View Slide

74. View Slide

75. pretty straightforward, right?
    

    View Slide

76. lots of edge cases
    

    View Slide

77. View Slide

78. we could just do a tutorial
    

    View Slide

79. tutorials are hard
    and people rarely bother to follow them
    

    View Slide

80. juicybeast.com/2014/10/designing-a-playable-ui-that-secretly-teaches-how-to-play/
    

    View Slide

81. juicybeast.com/2014/10/designing-a-playable-ui-that-secretly-teaches-how-to-play/
    

    View Slide

82. View Slide

83. View Slide

84. View Slide

85. …but tutorials are hard
    and don’t even get me started with “cross-browser”
    

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. pretty neat!
    

    View Slide

90. ❌
    but it doesn’t work on mobile
    did i mention tutorials are hard?
    

    View Slide

91. View Slide

92. View Slide

93. …it could be worse
    

    View Slide

94. View Slide

95. View Slide

96. A MONTH later…
    

    View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. we ♥ our contributors
     ~27% were mobile visits
     

     View Slide

102. we ♥ our contributors
     ~27% were mobile visits
     

     View Slide

103. footprint
     material
     use type
     street names
     address
     floors
     name
     class
     geo location
     year
     skylights
     backyards
     

     View Slide

104. footprint
     material
     use type
     street names
     address
     floors
     name
     class
     geo location
     year
     skylights
     backyards
     

     View Slide

105. check
     

     View Slide

106. check
     YES
     

     View Slide

107. check
     YES
     address color
     

     View Slide

108. check
     YES FIX
     address color
     

     View Slide

109. check
     YES FIX
     address color fix
     

     View Slide

110. check
     YES FIX
     address color fix
     

     View Slide

111. check
     YES FIX
     address color fix
     *footprints marked as “NO” go to building heaven
     

     View Slide

112. check
     YES FIX
     address color fix
     *footprints marked as “NO” go to building heaven
     

     View Slide

113. but first, a revamp
     

     View Slide

114. View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

119. View Slide

120. colors
     

     View Slide

121. View Slide

122. View Slide

123. View Slide

124. View Slide

125. addresses
     

     View Slide

126. View Slide

127. View Slide

128. fixing footprints
     

     View Slide

129. View Slide

130. View Slide

131. remember the tutorials?
     

     View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. View Slide

137. people skip the tutorials anyway…
     

     View Slide

138. so, if you can’t do something like this:
     

     View Slide

139. View Slide

140. View Slide

141. …have a plan b
     

     View Slide

142. 
     many eyes per task
     ≥75% agreement among three or more inspectors
     

     View Slide

143. 24%
     17%
     28%
     31%
     Check Fix Color Address
     pageviews per task
     

     View Slide

144. ~32% mobile visits
     
     1.1 million inspections so far
     

     View Slide

145. stereo.nypl.org
     

     View Slide

146. View Slide

147. View Slide

148. View Slide

149. View Slide

150. View Slide

151. View Slide

152. View Slide

153. View Slide

154. “wouldn’t it be cool if…?”
     

     View Slide

155. View Slide

156. View Slide

157. View Slide

158. …so we did a prototype
     

     View Slide

159. View Slide

160. View Slide

161. distill the task to its critical components
     

     View Slide

162. View Slide

163. View Slide

164. add some polish…
     a.k.a. designing
     

     View Slide

165. View Slide

166. View Slide

167. View Slide

168. View Slide

169. View Slide

170. thank you!
     images from: NYPL - Wikimedia Commons - Flickr user wallyg - Giphy
     mauricio giraldo arteaga
     @mgiraldo
     nypl labs
     

     View Slide