Building a Train App

TL;DR I wanted a train app aimed squarely at the commuter. I couldn’t find one out there so a buddy and I built one over a hack weekend and a few evenings. You should definitely download it.

Some sketches, flows and dubious designs. My son trying to make sense of James’ pull request (top right)

Why build a train app

I commute in and out of London 5 days a week and I quite like it. I manage to get a seat most days, get some work done (I’m writing this on a train) and get some exercise as I walk from Kings Cross Station to Somerset House where I work.

There is one bit I don’t like though — that bit at the station. Looking up at the board working out what train will get me home first and what platform I need to race the masses too ensuring I get a seat (will give said seat up obviously for someone who needs it more of course).

To be honest it’s been a while since I’ve stood looking at the departure board, plenty of train apps out there display the info I need to get the right train. These apps are great for planning a trip but don’t seem to be optimised for my use case, commuting.

I want a train app built just for commuters like me. One I can open, give it a quick glance, then put back in my pocket and board the fastest train to work/home. My desired outcome being: sitting comfortably on a train confident it’s the fastest one I could have chosen with minimal or zero effort.

This little app needs to…

  • work out what station I’m departing from
  • show the fastest train to the destination
  • be understandable at a glance
  • be highly contextual. (Am I heading to the station? At the station? On a train?)

Make it so

So with the goal of building a product aimed squarely at commuters, I called upon the skills of longtime collaborator and tallest iOS developer in London, James Nicholson.

Neither James or I have a huge amount of spare time — we both work at fast-paced startups — so it was important to make time for the project. A bunch of evenings here and there collaborating over Slack got us to a point of understanding what we wanted to build, but it’s when we organised a hack weekend that things really started to fly.

Being in the same room is the fastest way to build. I’d be designing screens, James would glance over and build what he saw. Within a day we would have 90% of what you see in the App Store today. That last 10% would take a few more days of hacking, polishing and bug squishing.

It helps that James is not just a great engineer but also has a strong product opinion. Bouncing ideas around with someone in the same room as you increases productivity massively and in a very short time we had something we wanted to ship and start to learn from.

After a few design iterations we settled on the above. I wanted the visual design to cater for the casual glance. Big labels, and a high contrast UI.

I wanted to dedicate the whole screen to a single train, no endless tables with tiny copy to scan — but I also wanted to show more than just the next fast train so a horizontal scroll view allowing access to later trains was added (All ordered by time of arrival).

Testing in the wild proved to be very useful (obviously). After a few days of use I felt it was already more useful to me than the current collection of apps on my phone. With a bit more bug fixing we then shipped to the App Store.

What next

We really want to explore context more by taking into account users behaviours and location. We also plan to create an Apple Watch app to make checking times even easier.

Connecting trains are important for some commuters so we’ll be adding that. We are currently waiting to get access to the NRE journey planner so when we have it we’ll add it.

This is just the first step. We will continue to iterate and tweak as we learn more about the use case and get valuable feedback from users. Try it out and tell us what you think @bigrobotfactory.


Ingredients

Train Data
We used the National Rail Enquires Departure board API. We wanted to also use the Journey planner API to give us connecting trains but this wasn't available in time for launch. That should hopefully be available in the next release.

Heroku
Our interface to National Rail is via their cumbersome XML APIs. To tidy this up into something more usable, we deployed a shim layer to roll together the multiple API calls required and spit out simple JSON. For speed (and to save the hassle of dealing with scaling) we deployed our service to Heroku.

Slack
Slack was used for collaboration when not in the same room for quickly sharing designs assets and funny gifs.

Sketch App
This has been my goto UI design tool for a while now. No going back.

Marvel App
Great tool for quick prototyping and it keeps getting better. Especially now with the Apple Watch support.


We would like to thank the team at National Rail Open Data. Also Frank and Saffad for testing and giving us valuable feedback. The biggest thank you goes to my wife Sarah for keeping us fuelled during our hack weekend.