Tiny Rebel
Cart 0

Take a bus
to the


Design Challenge

I couldn’t find a decent map visualizing the tennis courts of San Francisco. So I decided to make one myself. My goal was to make a map that was useful of course, but also one that was well designed. I also wanted to visualize the SF MUNI bus routes to each court because you know, why not?


My starting point was the only map I could find—a fantastically unattractive google map that shows the tennis courts of San Francisco in 2003 graphic design glory. I downloaded it as a KML file. My next stop was DataSF.org, which has lots of great open source data, including maps of the city. What I was looking for here was something called a Shapefile, a geospatial data format that nerdy geographers use. I found one corresponding to San Francisco neighborhoods and another for San Francisco parks. Lastly, I found one for the MUNI bus routes of San Francisco.

Next it was off to QGIS to combine my various datasets into a single map. First there were neighborhoods, then tennis courts, then parks, then bus lines. With a couple of tweaks, I was able to label the tennis courts and isolate the MUNI bus lines according to route number, so that it looked less like a giant red spider web. 

There are many a professional cartographer out there who would have kept playing in QGIS to make their map a bit prettier. But I’m a designer, and the sooner I’m able to get out out of QGIS and into the Adobe Creative Suite, the happier I feel.  Luckily, QGIS has an option to export a file as an SVG file (a vector format that can be opened by Illustrator). I isolated each layer (parks, tennis courts, MUNI Lines, neighborhoods) and then got to work playing around with colors and stroke weight and other good stuff, all of it so much easier because I was working with a piece of software most designers are familiar with.

At some point during this process, my day job at IDEO led me to Amsterdam. While there, I was inspired by the fantastically-designed Dutch train maps and a pro tip from my graphic designer colleague (Anthony Stimola) that the Dutch font of choice is DIN. Back in front of my computer, I created a look and feel for the map inspired by my travels.

Next up was the laborious process of determining which bus lines one could actually take to each tennis court. My approach was 100% analog, starting from the top of the alphabetical list of tennis courts (Alamo Square) and marching straight through to the end (Youngblood Coleman), noting all of the bus lines that had a stop within reasonable walking distance to a court. I discovered that Helen Wills court in North Beach takes the prize as most MUNI-accessible tennis court (it's served by nine bus lines!), while five tennis courts around the city are served only by a single bus line.

Lastly, I considered how this map would be used. Of course I was hoping that this map would be attractive enough to hang on a wall in full analog glory. But this is 2018, and in order to be useful, the map also needed some connection back to the digital world. I added GPS coordinates and a clickable URL link to a Google Maps location for each tennis court.

Want a copy of the map yourself? Click here to download it.

My Role

Well...I did everything described above. For more details, check out this IDEO blog post that I wrote on the process. A Cartography Nerd's Guide to Custom Map-Making. One additional design constraint – this is actually a real map! It's not fictional cartography like so many of my other maps. So actually making it accurate and stuff took some extra care! I can't let the good people of San Francisco down.