Archive for the ‘collaborative work’ Category

nwb-map-redesign

The Northwest Bushwick Community Map is meant to be a resource for local community organizations and tenants rights groups to easily access disparate information around land use, housing and urban development for the neighborhood of Bushwick in Brooklyn, NY. It is also intended to be a tool to inform NYC residents about what kinds of indicators may be used to predict new urban development and help prevent displacement of residents in their own neighborhoods. Recently I had the opportunity to work with the original author of the map and some fellow designers in the MFA DT program at Parsons to improve the map’s design and functionality.

Background

In the fall of 2014 two members of the Northwest Bushwick Community Group (NWB), Michael ‘Ziggy’ Mintz and Brigette Blood, met with several graduate students from MFA DT to discuss improvements to the beta-version of the map. Previously, the map used vanilla Leaflet.js with GeoJSON data created from NYC’s MapPLUTO and Department of Buildings permits open data. However the original map lacked a cohesive design and was slow in regards to loading of the data due to technical issues.

Map Improvements

To improve the interactivity of the map I chose to host the data on CartoDB and use the CartoDB.js library to handle loading, styling and toggling of the map’s data layers. When the user selects layers, CartoCSS and SQL code is passed to CartoDB to retrieve and style the data being rendered on the map. Hosting the data on CartoDB also allows for processing of the data in the CartoDB dashboard using PostgreSQL and PostGIS. This is beneficial as SQL scripts can be run to automate the processing of new data when the map needs to be updated.

To improve the context of the map (the Who, What, Where, When, Why and How) the MFA DT team asked Ziggy and Brigette to provide us with some real world stories that show how the data relates to the dwindling affordable housing stock and displacement of longtime residents in Bushwick. To accomplish this we used the Odyssey.js Javascript API to create an interactive slide show with the map which transitions between three of NWB’s stories. With a bit of hacking we were was able to use the changing of the slides as a jQuery event trigger to toggle the map’s data layers. This allows for the slide show to give background and context about the project while also relating seemingly abstract data in a visceral way.

Besides Cartodb.js and Odyssey.js we added some other features to the map to make it more useful for the Bushwick community. As there is a large Latino presence in Bushwick it was imperative to have the text of the map’s UI and the overall website toggle between English and Spanish. Additionally the non-map parts of the site were redesigned responsively using CSS Media Queries so that the other content such as “Get Help” can be easily viewed on a mobile device.

Future Plans

In the future NWB plans on adding participatory map data they’ve collected on housing vacancy and new development as well as stories of people who have experienced being displaced or harassed by their landlords. These features may be integrated with the current map or developed separately, but either way CartoDB and Odyssey will allow for the further creation of customized interactive map content to be readily achievable.

Links:

Game Design: Squares

Posted: September 24, 2014 in collaborative work, Game Design
Tags: ,

For our first group assignment in Intro to Game Design with Nick Fortugno, my group was given the task of creating a game that used poker chips and any other element from another game. The only rule was that we were not allowed to modify or make anything to add to the game. What we came up with ended up being an interactive experience I would not have thought of in any other way. This was a collaboration between myself, Joo-Hee Yun, Dylan Shad and Pierce Wolcott.

We started off by designing the game so that players would place the chips on a grid with the goal of placing four chips in a row.  The grid we used was from Dylan’s kit of gaming pieces and consisted of half inch squares. A chip takes up four squares and may be aligned horizontally, vertically or diagonally. We limited the number of chips for each player to 8 so that when all of a player’s chips were placed they would then have to move existing chips on the board.

IMG_4812

Two initial problems we faced with the game were that 1. the board size was too big and 2. the play was lacking something to make moving the chips more meaningful. We resolved this by constricting the board to 20 x 20 half inch squares and changing the goal from connecting four chips in a row to placing the chips so that they align in the corners of a square shape of any size that would fit on the board.

IMG_3921

Here is the game description:

SQUARES

GAME DESCRIPTION

• Game is 2 – 4 players.

• Each player has a total of 8 pieces (which are different colored poker chips)

• Pieces are placed on grid consisting of half-inch squares that is 20 squares x 20 squares

• The grid is sized (1inch x 1inch) so that one poker chip takes up 4 grid squares.

• Players take turns placing poker chips on the grid one at a time.

» The Goal: Players score points by placing their poker chips so that they are in relationship to the corners of a square. The square can be as large or small as will fit on the board, but each poker chip must be an equidistant number of grid squares to its adjacent poker chip (top, left, bottom, right). The shape of a square may overlap with other players’ squares and chips, but only chip may be placed in 4 grid squares. (in other words players cannot place their chips on top of other player’s chips).

» When a player creates a square they score a point and remove the four chips belonging to that square from the board. On their following turns they then place the chips removed from the board rather than moving their chips that are on the board.

» The first player to score 3 points wins.

» Other players may strategically place their own pieces in order to block their opponents’ attempts to form squares.

» Once each player has placed all their poker chips they then must move an already placed chip.

new UI design for the OSM data export tool from HOT.

hot_export_ui_revision

new UI design for viewing an existing OSM export from HOT.

hot_export_ui_revision2

This past weekend I attended State of the Map U.S. (SOTM) in Washington D.C., the annual conference for OpenStreetMap (OSM) users in the United States. Following the conference a sprint day was held at the American Red Cross where conference participants volunteered their time and skills to improve various projects relating to OSM and well as contributing to OSM itself. The project I ended up working on was for the Humanitarian OpenStreetMap Team (HOT), a non-profit organization that assists NGO’s and other groups doing disaster relief, vulnerability analysis and other related humanitarian aid work in developing countries. HOT will typically either have OSM users add data to an un-mapped area in OSM or have locals map the area themselves using GPS and Field Papers.

A recent example of a HOT task was mapping the town of Macenta in Guinea to help doctors and aid workers there stop an outbreak of Ebola. I’ve captured some screen shots of Macenta on both Google Maps and OSM to demonstrate the amount of data contributed by OSM users, Google Maps is on the left and OSM is on the right.

macenta-guinea-ebola-google macenta-guinea-ebola-osm

It’s a bit hard to tell from the zoom level but if you look carefully you’ll see hundreds of buildings, minor roads and some land use areas that have been mapped on OSM which are missing from Google Maps. This was accomplished in a vary short amount of time after HOT made an announcement to the OSM community. Additionally MapBox helped spread the word and has made this process easier with their recently designed user-friendly OSM editor, iD. This data is very important for the doctors and aid workers on the ground to find out where dense population centers are located and to determine how the outbreak is spreading. Nice work OSM contributors and HOT!

One crucial aspect about OSM is that all of it’s data (for the entire world) is available for download for free. The problem is that most services that offer “extracts” of the OSM Planet file (about 400 GB in size so you don’t want to download it all at once!) filter out custom tags that HOT organizations use which are crucial to their work. HOT therefore offers it’s own OSM data extract tool, but the problem with it is that it was sort of thrown together by a developer without much thought to usability. So during the sprint day at SOTM I partnered up with Jue Yang, a talented front-end designer at Development Seed, to redesign the export tool’s interface. The wireframes at the top of this post are what we came up with. We submitted our work as an issue in the HOT Export Tool repository on GitHub. I’m including screenshots of the old version below for comparison.

HOT-original1

The original / existing homepage of HOT’s export tool.

HOT-original2

What the UI currently looks like when creating a new export.

HOT-original3

entering text for fields and selecting an area to export.

HOT-original4

The following page where the user selects parameters for their data extract. We simplified this process by combining it with the first step in the new UI design.

HOT-original5

What an existing job / export looks like currently. Jue redesigned this part which is the second image at the top of this post.

IMG_0022

For our first Data Visualization class of the Spring 2014 semester our professor gave us a problem to solve in twenty minutes: visualize the numbers 10, 30 and 60 using materials he provided such as colored cotton balls of various sizes, crayons, popsicle sticks, pipe cleaners, etc. We were to draw inspiration from a blog post by the website Visual.ly titled 45 Ways to Communicate Two QuantitiesThe class split into teams of 3 people each and solved the problem in various ways, all of which can be seen on this Flickr page. My group solved the problem by deciding that the numbers 10, 30 and 60 represented specific colors on the HSB spectrum. At 100% saturation and 100% brightness the hues represented red(10), orange(30) and yellow(60). We were lucky that some of the materials matched these colors. For the second dimension we attempted to work proportionally as 10+30+60=100. So the proportions are 1/10, 3/10 and 3/5. We used a pipe cleaner 30mm long and divided it into sections according to these proportions which were 3mm, 9mm and 18mm. We then were able to use this as a guide for the amount of each colored material as is evident in the photo above. In the photo above red takes up about 10% while orange takes up about 30% and yellow takes up about 60% of the total materials used. Given more time than 20 minutes this data-viz could be refined and made more accurate. There are an infinite number of iterations to visualize such a concept as is evident in my other classmate’s work on the Flickr page.

IMG_9604-copy IMG_9605-copy

This project was created in collaboration with Fabiola Einhorn and Yun Zhou, the following is our write up for the assignment:

Mapping on the Williamsburg Bridge

Introduction

The goal of this project was to get get strangers to interact with each other somehow, through an instruction set. As this is a sociological design project, an urban node was chosen, demographic and psychographic research was performed, and several prototypes were drafted to gain more insight about our users and how they might interact in our site.

The Williamsburg Bridge is a place that is often forgotten in terms of a mode of transportation, as it falls in the shadows of the Brooklyn bridge with all its tourists and day-to-day runners, bikers and pedestrians. However, there turned out to be quite some life on this Bridge. It’s in fact a node, connecting the two landmasses of Brooklyn and Manhattan, cultures and significantly different mentalities of the two of New York City’s boroughs. We chose it because it’s indeed quite interesting to deal with people in motion and transition.

The objective was to somehow connect these people by making them aware of their surroundings, making them think about their physical being. Many people saw traversing this node as a routine – zoning out and robotically walking to and from work without further reflection. Our project attempted to engage people to reflect about their travels and the city at large.

User Groups

Our primary user group was walkers, however we also initially considered runners and bikers. The bikers tended to be a little more ethnically diverse, but all three groups had a significant amount of socio-economic diversity. This likely due to the fact that the bridge is such a significant connecting point and not as much of a tourist destination as other locations in the city. However a majority were young people (20-35 years old), caucasian, and middle class. Additionally we observed folks who were homeless, hasidic Jews, skaters, tourists, elderly, children and families.

Interviews with people resulted in a few insights, a valuable one being that the majority were walking to and from work from 9-11am and after 6pm at night. We also got a few people walking simply for leisure. Most walkers were walking very slowly, evidently taking their time, even though they were on their way to work. However, their looks remained fastened on the ground most of the time, and even though it was noisy, most people were free of headphones and said that the noise did not bother them.

Iteration One

For the first iteration we tried two different prototypes. One was about using the space and the fact that people are in motion, and elevating that experience through hanging tambourines and/or different percussion instruments on the poles serving as the construction of the bridge. The other was about mapping traffic on the bridge and encouraging people to take a step back from their routine. For this idea, we had a big map (60×40 inches) printed out and mounted onto a foam board and placed on one side of the walking path.

The Map

Using colored pens, we prompted people to plot down where they are coming from and where they are going to. The headline could have been more polished, but due to the lack of time and conflicting schedules, this ended up being a low-fi prototype. We had a thread tying the pens to the map, blue for where they are heading and yellow for where they are going. We were in the middle of the bridge for this iteration.

It was challenging to get people to intuitively interact with the map, but with the help of a few different prompts like “would you like to map out from where and to where you’re going?”, and “do you like mapping?” we in the end got around 5 participants during a two hour time span, and later decided to leave it for the night. When coming back 12 hours later we had gotten 17 participants. It’s difficult to track the exact time it was standing, as it was raining that night and the map was found on the ground, beaten up by the weather. We also got a hand full of people approaching the map, clearly attempting to find their own location for practical purposes. For example, one elderly man came to look at the map to find his way back to the Brooklyn Museum. People had trouble using the pens because of the long thread tying to the top of the pen. We later fixed this by fastening them with tape to the side of the map at eye level. However, this was not ideal as people were having difficulties getting them off.

The “Tamburines”

As we didn’t want to order tambourines and spend the money without knowing if it would be successful, we attempted to prototype these by using tall soda cans and filling them with rocks that would create a sound when rattled. We knew they weren’t going to be too aesthetically appealing, and so we decided to cover them with paper. The idea was to hang them at different heights with “points” written on them so people would be triggered to interact with them by intrinsically wondering if they could tap them. The mental reward would be manifested by the point system e.g. 5 points for the higher one and 2 points for the lower one. This way, walkers and especially runners could get more exercise, without having to worry about spending much extra time. This would be an instruction set not requiring a written prompt hence the idea of having real percussion instruments, as the viewer would directly understand that this is something designed for touch. Ideally, people would want to spend the time to play with each other.

This prototype was intended to be more of a “role” prototype mentioned by Houde and Hill in What do Prototypes Prototype, but since it was so weak on it’s “look and feel” it was unfortunately not successful (p3). We did not get people to interact with it without asking them. Therefore, we decided to only use the map in our next iteration, as time was pressing, and we already had successful interaction with the map.

Iteration Two

For the second iteration of our project we created two maps; the first showed the entire NYC area (all 5 boroughs and parts of New Jersey to the west) and asked participants to write a thought or word about NYC over a specific location. The second map was similar to the map from our first iteration with the exception that the map area was enlarged to depict the immediate vicinity of the Williamsburg Bridge. With this map we again asked participants to map where they were coming from and where they were going to. Again both maps were printed at a large format of 40 x 60 inches and mounted to foam core. We took the maps on the Williamsburg Bridge towards the Manhattan side area where the bicycle path and pedestrian path intersect as this seemed to be the area of highest traffic and where we would most likely have success with engaging people. The area at the intersection of the bicycle and pedestrian paths is open and allows for room for travelers to depart from their direction of travel and pause or rest. The weather was slightly cool and overcast with gusts of wind and occasional sun. We placed the maps facing Manhattan where they were in direct sight from people traveling from that direction and in a warm sunny location. This way, people could easily see the map from approximately 50 meters, giving them more time to decide upon participation.

One interesting behavior of our user group was that people noticed what people ahead of them were doing and let it influence their decision to interact with the instruction set. If people ahead of another group decided to engage with the instruction set then a approaching group also was more likely to engage. Conversely if a passing group declined to engage with the instruction set then a group following them was likely to not engage.

The “From Where to Where” map proved to provide a tactile experience for the users. People seemed to gain gratification from taking two tacks of differing colors, looking for their “where” location on the map, pushing the yellow tack into that location, then looking for the “going to” location and pushing in a red tack at that location. As more tacks accumulated (we had about fifty people engage with this map) users seemed to be pleased with looking at the map and seeing where previous users had placed tacks. The majority of the tacks (41 out of 70) fell within a two mile radius of the center of the bridge, though there were a significant amount of others that fell off the map area. “Off the map area” was designated through the users placing tacks at the edge of the map indicating the location lied in a direction outside of the map’s extent.

The “Map a Thought About NYC” map engaged a smaller number of users, (roughly fifteen total), though not as many as the “From Where to Where” map. One unexpected user interaction with this map was that a group of young adults on bicycles stopped and tagged the map with graffiti. This was not an action we had anticipated and though the users did not follow the directions of the map it still allowed them to add their personal thoughts about the city through a tag in the form of a word or cartoon like character. Users following this group seemed to enjoy adding an actual thought about NYC such as “erotic melancholy” in the East Village or “get a bike!” in New Jersey. Other thoughts included drawing cartoonish characters on the map, plotting a recently viewed movie at a cinema, or labeling GreenPoint “Little Poland”.

Engaging participants proved to be challenging as most people on the bridge were primarily concerned with traveling from one direction to another and were not interested in stopping. However, by approaching people and asking them if they “would like to map” we were able to engage them with the instruction set. As to whether this was a flaw or not is debatable; on one hand we likely would have had less people engage if we had just left the maps and did not persuade and instruct people to interact with them. On the other hand simply asking people if they would like to participate was not a highly invasive tactic and usually people were interested to see what the project was about and how they could interact with it.

Our project was in a sense a “cultural probe” in that we employed maps for our users to add information to so that we could better understand who they are. In the article Cultural Probes (Dunne, Gaver, Pacenti) the designers included maps with some of the packets they sent to the user groups they studied;

Requests ranged from straightforward to poetic. For instance, a map of the world included the question ‘Where have you been in the world?’, and small dot stickers were provided to mark answers. Participants were also asked to mark zones on local maps, showing us where for instance, They would go to meet people, They would go to be alone, They liked to daydream, They would like to go but can’t. (p23)

Our maps were similar in the sense that we had a smaller scale map showing all five boroughs in NYC and a local, large scale map of the immediate vicinity of the Williamsburg Bridge. The “Map a Thought About New York” map gave us a qualitative perspective on our users, letting us know how they think about or view the city and neighboring New Jersey. The “From Where to Where” map told us that three times as many people came to the Williamsburg Bridge from a location that was further than two miles of its centroid (over the East River) and that almost the same number of people traveled to a point inside or outside this area. (see table below)

Locations of “to” and “from” user plots

Dot Color

Within 2 miles

Outside of 2 miles

Yellow (from)

15

44

Red (to)

26

22

Conclusion

In conclusion our chosen site proved to be a difficult location to stage a public intervention with the goal of encouraging strangers to interact with one another. We were partly able to overcome this difficulty through using maps as a tool to engage people and have them participate in a project with others they did not know. Although the project did not create much verbal dialogue between strangers, people were eager to look at what others had done and actively talked amongst their own travel group members about interacting with the maps. If we had more time to develop the project further it would be interesting to reiterate both maps again. The usefulness of drawing was not originally considered when creating the “Map a Thought” map but a good portion of users communicated their thoughts or feelings in this way. Given the large number of participants we received in only several hours, the data gathered could be digitized and rendered on an online map. Giving these projects a web presence would enable citizens to gain insights as to who uses the Williamsburg Bridge and leave them to draw their own conclusions on why they use it. People enjoy maps, as they are useful tools that draw people into them, especially when printed out as physical objects in a large format. Scouring a map for information and wayfinding forces people to use their mental capacity in a way that is both visual and analytical. Additionally, providing users with a tactile experience as a form of interaction gives them a sense of gratification; they immediately see their contribution to a project that many had gave time to.

Bibliography:

Tony Dunne, Bill Gaver, Elena Pacenti. Cultural Probes. Interactions, January & February 1999.

Charles Hill, Stephanie Houde. What do Prototypes Prototype? Apple Computers Inc.
Cuptertino, CA, USA.