PinchMap NYC

Pinch Map is the most ambitious two-week project I've ever taken on, coming to the App Quest challenge late in the game: redesign the iconic New York City subway map for beauty and readability, and make it accessible to all users. A map that works even for those who can't see it, and an app that works even those who lack the motor skills to touch the screen.

Design-wise, I've always liked the whimsical outlines of the only subway map I've ever known as a New Yorker. That love aside, I have spent many a subway journey tracing squiggly lines with my fingers over some fellow rider's shoulder. And all the geographic clutter, especially on a small screen, makes it difficult to see what you're looking for. Where I've landed is a marriage between the more geometric diagrams like Vignelli's, and the geographic map we see on train car walls today.

I've tried to keep the orienting geographical features intact: the parks, the shorelines. I went a little crazy around Jamaica Bay, where I puppet warped images from Google Earth around my new, clean 45-degree angles, and then traced the results.

I purposefully have removed details here that are not helpful to riders underground. I've tried to preserve the relationship between elements that intersect, while providing a simpler glance of where each line goes, and where it connects with others.

Building a new map with vectors means there's no limit to how far you can zoom in. In the future, I plan to add more and more information at ultra-high zoom levels.

The nuts and bolts: to redraw a complicated system in a short period of time, you need to create a complicated system in a short period of time. The actual redrawing of the map was done in Sketch - first, I traced the contours of the existing map, and placed the dots. Then, I wrote a series of plugins in a funny little language called Cocoascript to export the layout and formatting information on the map, into JSON, and ultimately into native Objective-C. This lets me do things like handle taps properly, and draw labels and route icons for each station.

And so the cycle went: draw the map, bring it into XCode, make some tweaks, bring those in. I'm incredibly pleased with the results, and incredibly hopeful that the design choices I've made to help users with vision and motor impairments get where they're going a little more easily. If you think an app like PinchMap would make your life better, particularly if you have a visual or motor disability, please write to me at pinchmap@gmail.com! I'd love to have you as a beta tester!

Some of the accessibility features inside:

Full Voiceover support on the map, for visually impaired users.
Full Voiceover support on upcoming departures for each of the MTA's over four hundred stations.
Station selection is built with special needs in mind, limiting the amount of scrolling drastically. This is especially important for users with little or no use of their hands, who rely on a single switch to operate their phone.
Handy entrance information, with cross streets.

Hopefully you'll enjoy using PinchMap as much as I enjoyed making it -- this is only the beginning!