$30 off During Our Annual Pro Sale. View Details »

NYPL Labs Design @ MITH Digital Dialogues

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/

Mauricio Giraldo

March 03, 2015
Tweet

More Decks by Mauricio Giraldo

Other Decks in Design

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