2013-05-24

How To Build The Digital Subway Map Of The Future

Slow-moving bureaucracy, diverse users, risky monetization schemes, unpredictable station layouts, spotty networks, underpowered hardware. These are just some of the challenges Control Group faced in bringing the digital map of the future to the New York City subway. How did they overcome these challenges? They used the web.



The spotless white walls of Control Group’s workshop differ so much from the dark, brooding interior of the historic Woolworth Building’s lobby that it’s hard not to shield your eyes when the elevator doors open. The office’s minimalist interior feels like a deliberate contrast to the 100-year-old skyscraper’s intricate neo-gothic fixtures. The same blindingly white paint coats just about every surface except the elevator banks. The main conference room features a set of airlock-style doors that would be right at home on the set of a spy movie (in fact, the pilot episode of Ugly Betty was shot here). The hallway between the two sides of the floor that the office inhabits features sloping walls that form an almost circular tunnel.

Despite the modern trappings, these days the organization is focused on the much older and grittier set of tunnels that run under the building. Last year, the Metropolitan Transportation Authority awarded Control Group a contract to design and deploy networked kiosks throughout New York City’s sprawling subway and rail system to display maps, system alerts, and advertisements. Building a system for nearly every inhabitant of the country’s most populous city has not been easy. To design it, Control Group chief operating officer Colin O’Donnell has pushed his team out of their comfortable offices and into the grimy underground of the city. But testing their plans in the real world hasn’t been the only challenge.

Postponing The Dream

The agency started its relationship with the MTA by responding to a Request For Expression Of Interest looking for companies to expand the nascent On The Go kiosk program from five stations to the entire system. O’Donnell wasn’t thrilled about the limited scope of the request, and so Control Group’s original proposal to the MTA re-envisioned the On The Go program as a system-wide communication system designed to deliver information to as many screens as possible, including announcement boards and mobile phones in the hands of passengers.

The MTA responded positively to the idea and awarded Control Group a contract, but asked O’Donnell and his team to focus solely on the kiosks.

“They convinced us that that these different ideas could be wrapped up in this touch point, and for the most part I agreed with them and thought this was a great way to get started,” says O’Donnell. “It’s a huge organization. It takes a while to steer that ship. We’ll prove this out and then we’ll continue to hammer away at the dream.” Being asked to limit the scope of the project may have been a blessing in disguise.

A System As Diverse As Its Riders

One of the first things Control Group realized as it started to design its kiosks was just how difficult it is to build anything for a system as complex as the New York City subway. Not even figuring out how to place the kiosks in stations was easy.

“You can kind of kid yourself as you sit in a room and try to plan out how you’re going to approach this. What’s your standard configuration?” explains O’Donnell. “Then you go into a station and you’re like, you could never put one there because the platform is not wide enough or there’s a staircase there and someone put a trash barrel here that can’t be moved.”

Photo by Flickr user TheCoolQuest

The subway’s ridership is similarly diverse. Riders speak hundreds of languages and range from regular commuters to tourists from all around the world. To identify the needs of these commuters, Control Group spent a month videotaping their behaviors. They quickly realized that solving every problem for every single type of rider would be impossible.

Instead, the agency used their observations to identify three different rider archetypes: pro riders familiar with every nuance of the system, commuters with regular routes who need extra guidance when they stray off their familiar paths, and tourists who have little or no prior knowledge of the system. Although each type of rider moves through the subway differently, Control Group found one common behavior that would become the basis for their kiosk design: Everyone uses maps the same way.

“If you look at the paper maps, where they’re not covered in glass there is a circle worn away around the ‘You are Here,’” says O’Donnell. “We realized people really love to touch maps. They love to touch where they are and they like to touch where they’re going. These stations look like buttons.”

This insight became the guiding design principle behind the kiosks’ main application.

Better Than Paper

“If it's not as good as a paper map, then it's not worth doing,” says David Nelson, Control Group’s director of product design.

After watching subway riders repeatedly trace their fingers over maps, Nelson says the challenge was finding a way not just to mirror the physical map experience in digital form, but to make it better.

Image by Flickr user wka

“My kids do the same thing where you trace your hand along the lines point to point. It becomes a really daunting task when you look at how many lines, how many stops are there,” he says. “The digital artifact allows you to dim back and recede information that you don't need and allows you to concentrate on the things you do need.”

The team tested dimming as many parts of the interface as they could think of, trying to figure out exactly what information a user needs to move through the system and what’s superfluous. Ultimately, they decided to dim everything but the departure station, route line, transfer station, and destination station.

Nelson acknowledges that public reactions to early screenshots of the kiosk’s interface have been mixed, and O’Donnell stresses that the company is still waiting to test some of their assumptions in the real world. Control Group plans to install the first set of kiosks at 149th Street - Grand Concourse in the Bronx in late June and gradually work their way to the heart of the system, learning as they go.

Neither O’Donnell nor Nelson are concerned. For Nelson, a designer who worked at Adobe when the company made its notorious switch from hand-drawn application icons to a series of flat, single-color tiles, the initial criticism reflects Control Group’s desire to truly improve the subway riding experience rather than just make a digital version of the map.

“Getting good reactions means that you're moving forward,” he says. “Safe design tends not to change reality.”

Being Scrappy

Testing the design concept offered another challenge. When your product needs to be usable by just about everyone, how do you find a pool of testers diverse enough to stand in for the world? Like user testing for Facebook Home, a product with a similarly large audience, Nelson’s answer was: You don’t.

Instead, Control Group’s approach was to be scrappy. They developed an Apple Keynote presentation with clickable hotspots to simulate the UI and asked friends and family to perform basic tasks with the prototype. Once they were done, Nelson’s team asked them if it was clear what they needed to do or if they encountered anything unexpected.

“It's really good to understand the subtle details, but when you have somebody who’s going to be spending 5-30 seconds with something, scrappy, quick feedback is a super useful thing to do,” says Nelson.

Until they can deploy a kiosk in the field, Control Group is relying on the same kind of simple heuristic testing for their prototype unit, which hangs on a wall in the back of their office. Every day, curious visitors pass through to play with the demo as staffers observe. O’Donnell acknowledges the limitations of this approach, noting that even seemingly insignificant details like color brightness might become huge design flaws once the kiosks make their way from Control Group’s bright offices to dim, fluorescent-lit subway platforms.

Fortunately, the company isn’t starting from scratch on all of the kiosk’s features.

Carousels: From Luggage to Home Pages

One of the most interesting features of the current design is the way the interface cycles between full-screen maps, alerts, and advertisements when nobody is using them, like carousels at the top of website home pages. The original On The Go kiosks featured a permanent spot for advertisements at the bottom of each screen, and for good reason: Compensation for developing the program will come entirely from advertisements served on the devices. In fact, Control Group is even responsible for purchasing and maintaining the physical hardware running their applications.

In this light, the decision to include advertising only one-third of the time is particularly risky. O’Donnell says the idea came partly from an insight about subway advertising and partly from previous experience.

“Some of the advertising in the subways actually can be quite interesting and beautiful,” says O’Donnell. “You’re looking at these huge posters really close up, and we decided that it was really important to use the screen that we were given, which is a 47-inch touch screen, to its full advantage.”

O’Donnell believes that the company won’t sacrifice revenue by not including advertising 24/7. Last year, Control Group designed and deployed iPads that feature a similar loop in several terminals at JFK and LaGuardia airports in New York City, rotating between travel information and ads for sushi and Peroni beer. According to O’Donnell, the iPad kiosks were successful at attracting attention, but this time the company is taking the concept a step further. On the iPads, customers have to click on an ad and wait for another screen to load before interacting with it. For the subway kiosks, Control Group wants each screen to be interactive from the start.

“You start to look at where things fall apart--the ads you get at an airport. As you're walking through the terminals, very few of them are interactive and the ones that are aren't that compelling and it's hard to get to that ‘thing,’” says O’Donnell. “If it's showing me the map and I touch it I actually want it to work. I don't want it to be an ad for the map, and then go into the map application.”

Nelson says this idea of making everything an entry point for more information became the guiding user interface paradigm. “We had actually taken a huge white board and sketched out all the states and how people would flow through them. The model we kept pushing was: You click something and you get more of whatever it is,” he says. “You click a stop to get more information on the stop. You click a line you get more on the line. That's something I think we'll continue.”

The Web Goes Underground

If these interaction metaphors sound familiar, it’s because you use them every day. The iPad kiosks Control Group made for Delta took their interaction cues from iOS; clicking on an ad loads an app, which takes time to load. For the subway kiosks, Control Group is borrowing from the web.

“Since we’re not a digital out-of-home advertiser who is tied to a given market or tied to a given product, we could say ‘let’s look at the web,’” says O’Donnell. “First it was on our desktop computers and our web browsers, and it jumped into our pockets and is in our phones, and now it’s kind of leaped out of the phone and it’s everywhere.” And now, presumably, the web is underground.

Why not Android? When Control Group was first awarded the contract, they thought about using Google’s open-source operating system as the architecture for the kiosks because of its extensibility and its simple package distribution system. The kiosks from the original On The Go program, however, are built by Cisco, and run a proprietary flavor of Linux with a suite of custom management tools, so Android was a no-go.

O’Donnell was never satisfied with this hardware--partly because of its proprietary nature and partly because it doesn’t include a dedicated graphics card, which makes rendering maps and playing video difficult--and says the company worked with the MTA to approve an different device. However, the original kiosks did feature one thing that O’Donnell liked: A modern (albeit proprietary) browser built on the open-source WebKit rendering engine and V8 JavaScript interpreter.

After reviewing its options, the company decided to build the kiosk software using the collection of web languages and tools known as HTML 5. This decision has allowed Control Group to develop, test, and deliver their applications using common open-source technologies that, if O’Donnell’s original dream of connecting the entire system together is realized, will make it easy to port their work to just about any device with a browser.

Open-Source Building Blocks

Chris Ross, Control Group’s senior design technologist, sits in the back of the office near the kiosk prototype. On one of the monitors at his desk, you’re likely to see a smaller version of the kiosk’s software running in Google Chrome with the developer web inspector pulled up. This detail seems insignificant until you think about how novel it is to develop for a proprietary device without an emulator, using languages and tools you’re already familiar with.

“There were small things we didn't really consider up front until we started building it and using it on this device, such as the presentation of the cursor object,” says Ross. He also had to build a custom cascading debugging library to display errors in the console, via JavaScript alerts or send them to a logging server based on the device’s capabilities. “But for all intents and purposes, most of it is one-to-one with a normal website.”

This is the power of the open web. Control Group will need to manage system settings, and O’Donnell says the company may develop custom libraries if they decide to add more sensors to the hardware. But by and large, the kiosk is just a giant web browser running a website, which means Control Group can manage it the way they would any other client’s website. Using web technologies gives the company another huge advantage: The ability to tap into the plethora of open-source libraries available to developers building browser-based apps.

The kiosk software uses several of these, including RaphaelJS, the popular SVG graphics library. Vector graphics, commonly implemented as SVG files, work by storing the image as a set of instructions for how to draw it rather than a map of individual pixels. Raphael makes it possible to modify these instructions using JavaScript instead of needing a special plug-in like Adobe Flash.

Being able to modify SVG files programmatically means Ross can exert total control over the map’s graphics using only a few layers of images rather than needing to move individual pixels the way an animator would. In this way, Ross can use Raphael to draw routes one station at a time instead of all at once, implement Nelson’s map dimming effect when a user selects a particular line, or zoom in and out without needing to request multiple sets of images for different map quadrants, subway routes, or zoom levels.

There’s an architectural benefit to this approach, too. Limiting communication between the client and the server is always the best practice on the web, but it’s particularly important when your network connection is spotty or, in the case of the subway system, not guaranteed at all.

As Ross explains, the kiosks use Raphael to store and render the system map on the client side, without having to fetch data or images from a server. Routes between stations are also stored and rendered by Raphael, which means that all the device needs to display a route is the origin station, the destination, and any transfer stations in between, which Control Group’s system will provide as JSON. Using JSON, which takes its structure from JavaScript objects, to send and receive information is another strategic choice that eliminates the need to convert data between multiple formats. Making sure that data makes it through the network successfully is a different story.

Keeping The Map Up, Even As Infrastructure Changes

“Most of the MTA’s infrastructure is a hundred years old, but the networking is...” O’Donnell trails off, searching for a diplomatic way to put it. “I’d say that they’re currently doing a lot of upgrades that haven’t made it to where we are.”

According to O’Donnell, Control Group is working with the MTA to speed up its networking rollout, going as far as “crawling around the subway with MTA maintenance guys finding where we can drop an Ethernet cable.” But for the most part, they’ll have to rely on a patchwork of wired networking, 4G modems, and existing internal Wi-Fi networks.

Even when these connections do work flawlessly, the agency must be careful not to use too much bandwidth to avoid disrupting other traffic on the network. Both O’Donnell and an MTA spokesperson declined to say which other MTA systems rely on Internet connectivity, but O’Donnell did say that the MTA’s network offers no quality of service support to prioritize traffic. This means Control Group has to cap the kiosk’s bandwidth usage to minuscule amounts except for agreed-upon times when the machines download new advertising assets, which can include large image and video files. In other words, Control Group has to design a system that works even if individual kiosks don’t always have an active network connection.

To accomplish this, Control Group is using a combination of scheduled pre-fetching, client-side caching, and multiple layers of reverse-proxy caching. Together, O’Donnell hopes the system will make the kiosks feel seamless and snappy for users, even though lots of work is going on behind the scenes.

Each individual kiosk is stateless, meaning that when it reboots it receives its location and configuration from a server, fetches the latest map, alert, and ad information, and stores it locally. To add a layer of redundancy and avoid flooding station networks with traffic after rebooting multiple kiosks during, for example, a power outage, Control Group is planning to deploy one kiosk as a local server in most stations. These machines will warm up the cache for other kiosks by requesting new information from a central server deployed in a data center on a schedule.

This central server handles ad trafficking and deals with the MTA’s (notoriously inconsistent) data feeds. “The MTA doesn't have real-time train information on every train,” says O’Donnell, citing one example. “It does on the numbered trains. Lettered trains have to be scheduled, so we've had to work with that.”

Instead of relying on those services, Control Group’s server consumes four different MTA data sources every few seconds, packages these streams into a common format, and acts as an API endpoint for machines requesting the data downstream. Because the payload is just a few lines of JSON (about four kilobytes, says Ross), individual kiosks can request route data in real time without taking too much bandwidth. The company is still experimenting with how to present the maps application when the network goes down. One option is to take the same approach they take with advertising, which is to cache the assets locally.

In that case, working with data that expires on different schedules means developing different request flows for each type of payload. To do this, Control Group is experimenting with Varnish, a highly scriptable open-source HTTP accelerator. Varnish allows them to try approaches like displaying route information instantly from the local cache while checking for new data in the background and displaying an alert to the user if it finds a change.

“I love understanding the limitations of the network and how to deal with it,” says O’Donnell. “We can get pretty crafty with the way that we script checking for changes in content.”

Not The End Of The Line

Eventually, O’Donnell intends to continue to hammer away at his original vision of a system-wide On The Go communications system that incorporates broadcast, mobile devices, and every single display unit the MTA operates. Right now, however, he just wants to get out of the office.

If everything goes according to plan, all of Control Group’s work to date will culminate in a late June launch in the Bronx. According to O’Donnell, that will mark a new chapter, not the end of the process.

“We can’t wait to get the first one in a subway station, because as much as you want to solve all the problems in the office, you can’t do it. You really have to learn from a live environment.”

[Image: Flickr user MTAPhotos]