How it came together
Design across scales
Designing for public signage versus designing for an individual, an iPhone or a watch comes with its own affordances and user needs. A public subway sign doesn’t care which train you are taking; it’s going to prioritize the one that is next. With Now Departing, I made considered decisions about not just what to show, but how to show it. Since you can use Google Maps or similar for detailed directions, Now Departing gets to focus on a different use case: “I know where I’m going, I do this every day, I just need to know when the train is coming.”
JavaScript on iOS
Now Departing started two years before the app existed, as a Scriptable widget. I wrote the few hundred lines of JavaScript while riding the subway. The goal was to make sure I never enter a subway station simply to find out I just missed a train and am now past the turnstile, instead of enjoying a matcha. I shared it on Twitter, and lots of people asked where they could get it. That was reason enough to turn it into a native app.
I’d love to get feedback on a widget I made for iOS this weekend. I made it as a little present to myself and any other New Yorkers that ride the same Subway everyday.
Jonathan Bobrow on Twitter · December 27, 2022 ↗
assets/media/now-departing/process-1.webpNative iOS (Swift)
The native version runs on iPhone and Apple Watch. The watch app was the real motivation: a glance at the wrist while walking down the stairs, departure time visible before you reach the turnstile. Getting an Apple Watch as a gift turned into a watchOS project, built with ChatGPT as an AI pair programmer, learning the platform’s patterns and constraints through conversation rather than documentation alone.
The data comes from the MTA’s GTFS Realtime feed via MTAPI, the same source that powers wheresthef***ingtrain.com. The UI is directly inspired by Massimo Vignelli’s clean black and white typography and lines: departure times, line icons, nothing extra. Home screen widgets extend the same information without opening the app.
The website
Once the iPhone became the main product, nowdeparting.app needed to lead with it. I started on a design canvas with Claude, laying out a few directions side by side, and picked the one where the phone stands under the subway globe lamp, the same illustration from the app’s share image.
assets/media/now-departing/process-2.webpassets/media/now-departing/process-3.webpThe phone on the site isn’t a screen recording. It’s the app rebuilt in HTML: Claude read the SwiftUI views and carried over their sizes, fonts and colors, from the 32-point station header to the express diamond, then set it on a loop. Nearby at 14th Street–Union Square, a tap into the 6 express, and over to the Lines grid.
assets/media/now-departing/process-4.webpThere’s an easter egg, too. A little commuter walks in at the bottom of the page, and clicking him opens Matcha or Train?, a tiny game about the choice at the top of the stairs: stop for a matcha, or go straight down for the L. It’s a cross-section of a Brooklyn block in crisp vector pixel art on a 4-pixel grid, down to the stepped corners.
assets/media/now-departing/process-5.webpThe block keeps your time. The sky and the light follow your clock from sunrise to night, with a dithered sky at either end of the day, lit windows and glowing globe lamps after dark, and tonight’s actual moon.
assets/media/now-departing/process-6.webpassets/media/now-departing/process-7.webpPigeons scatter when you walk by, and there are five commuters to meet, each with their own walk, including one who rides the elevator down to the platform instead of the stairs.
assets/media/now-departing/process-8.webp