MTA interactive map
Using simple paper, video, Flash and smart object prototypes to create and test a navigation tool for New York’s subway system.
Prototyping: the semester in review
1. Journey map
This journey map illustrates potential aspects of a user’s experience from low to high involvement, in this case, the experience of using New York City’s subway system. By directly observing the environment, we were able to identify multiple physical areas of the user experience, differing levels of use and all of the behaviors, actions and painpoints associated with riding the subway.
The final journey map shows both the current and future state of this experience with proposed solutions that informed our subsequent prototyping.
Journey mapping on the whiteboard
2. Paper prototyping
Using quick paper prototyping methods to iterate ideas, our group chose to update the familiar maps found in the New York City subway system. We identified problems users face when navigating underground based on our journey map (see below) and came up with solutions that could be explained and demonstrated with simple printouts mounted on a board.
After devising an initial prototype and testing it out on other people, we brought it down to the 21 Street subway station on the 1 line to test again and record in context with its intended environment.
This map’s concept is to be a gestural-based interface (you don’t want to actually touch anything down there!) which the user can zoom in on city streets, see updated service changes and plot the quickest route to a destination based on real-time information. They can then sync that information with their phone and check it along their journey. Additionally, when exiting a station, the user can view street-level photos superimposed on the station map to eliminate the confusion that comes with multiple exits.
The final video for the paper prototyping phase
3. Flash prototyping
Taking the initial paper prototype of the interactive MTA map, the next step was to refine the user experience with user interfaces and animation in Flash. This method allowed for a more high-fidelity approach to illustrating key interactions and showcasing unique features of this gestural-based navigation tool.
The first iteration of this was to demonstrate a few essential features of the prototype using timeline-based animations and showing it as a linear movie. In this case,
the actions shown were getting started, zooming in and rotating the map, finding a destination from a list of attractions and getting directions.
A Flash movie was created that people could interact with and test out its functionality. Using the Silverback app to record both screen activity and the user's face & voice, other people could contribute to the usability testing of the prototyping and offer valuable feedback.
The Flash-based prototype of the MTA map
Using Silverback to record user interactions with the prototype
4. Smart object prototype
This further refinement of the MTA interactive map prototype utilizes Funnel, a toolkit for physical computing and the creation of smart objects. The Funnel server connects Flash’s ActionScript 3 library with an Arduino board and an infra-red rangefinder sensor to create some interesting physical/digital interactions.
Analog input data from the IR rangefinder is fed into the Arduino board, which in turn is relayed to the Flash movie. The distance of one’s hand from the sensor affects the zoom level of the map. At the minimum
physical distance, the subway map is shown at its maximum zoom and a street map of the detail area fades into view. (
See the ActionScript code →)
This working model aims to physically demonstrate what the previous paper and Flash-based prototypes could only hint at. Displaying it on a projector simulates the idea of a large gestural motion-activated map that can help the user find where there are in the subway system and which route to take. It also helps illustrate the relationship of the subway system to the streets above.
The first version displayed on a laptop
Schematic of IR Rangefinder sensor and Arduino board
The finished hardware components
Final thoughts
1. Post-its are your friends. Embrace them because is the quickest method of jotting down ideas and reordering them on virtually any surface.
2. Kill your darlings. Just because you can prototype something, doesn’t mean you should. In this case, clinging to the idea of being able to show a user rotating a map with a rotating motion. This proved to be a less than stellar idea after criticism pointing out that most users would never do such a thing.
3. Find an interesting problem to carry you through the semester. I found the map environment rich with possible prototyping solutions through all the mediums we were exposed to. I discovered my interest and approached it with passion and energy.
Prototyping the User Experience
Spring 2011
Instructors
Robert Fabricant, Josh Musick, Clay Wiedemann & Jeff Hoefs
Team
Carrie Stiens (on phases 1 & 2)