Building an Apple Watch Train Times app

How I built myself the best train times app for Apple Watch

After upgrading from the original Apple Watch to the Series 4 I was pleasantly surprised to be able to use apps on my new wrist companion. Swim workouts, Carrot Weather and Podcasts are all awesome to use, but there was for me an area lacking… Train Times.

Unfortunately I don’t live in an area covered by CityMapper (could Cardiff bus companies open up their data just a little bit… pleeeeease) and anyway, it’s not intended for intercity use. I think Trainline’s Apple Watch app is still built on the original tech for Series 1 and try-as-I-might I’ve been unable to get it to work. There are some independent apps out there, but some don’t work properly and I feel the interface is lacking on all of them.

The natural solution was of course to build my own…

Goals & Challenges

I had some vague ideas of what I wanted to achieve, but before I began I decided to do a little brainstorming and create some concepts that would help me define my goals for the app.

Initial concepts for the app (yup they’re untidy) — Logo © Transport for Wales. (Imagine a logo where the purple square is…)

The end result of this brainstorm was a list of key information attributes that needed to be included: Schedule Dep. Time, Expected Dep. Time, Final Destination, Platform, Train Status, if the train was going via a station, and the TOC.

Moreover I decided that the key features of my app needed to be the following:

• Use design to convey information more quickly and more beautifully.
• Allow for generic departure boards, and from/via departure boards.
• Allow watch users to add & remove searches directly on the watch.

And finally, I identified the following challenges associated with the project:

• Getting hold of and using the train times data.
• Only having a fairly basic knowledge of Swift and Xcode.
• Designing for such a small interface!

The Design

Conveying the maximum amount of information in the most logical and easy to interpret way was key from the outset.

One of the things I want to know when catching a train is who the operator is, since this informs users about important things such as ticket validity, length of train and so forth.

Instead of conveying the TOC as a line of text — as some existing apps do — I decided to look at incorporating colour schemes and logos into the design of the app.

The design used to decide on the colour schemes to use for each TOC within the app. (Yes I know white isn’t exactly encouraged by Apple for use on the Watch, I tried to avoid it as much as possible!) TOC logos have been blurred.

Not only does this convey information about the TOC quickly and clearly, but it also adds a certain beauty to the app.

After my initial brainstorm using Affinity Designer I took to Xcode. The Apple Watch has a curious design system, not all that unlike HTML in an odd sort of way. Elements flow left to right, you can group rather in the same way you would use a DIV on a webpage to create vertical groups and so forth, and you can use the ‘Hidden’ property in much the same way one might use ‘display: none’ in CSS.

Designing for Apple Watch in Xcode. Everything you see is effectively a placeholder, populated by the code I’ve written.

Into this design I’ve incorporated all of the key properties I decided on. Indeed I’ve managed to do so in a way that allows for the multiple permutations of information that are possible even within this small interface.

For instance, sometimes Platform data is unavailable, and in that case the platform group will disappear, and the final destination (‘to’) label will span the full width of the page. Also, invisible in the above screenshot, is an indicator of whether the train goes via a particular station, a customisable user option when adding a new search to the app.

The Programming

I’ve only ever dabbled in the shallow end of the paddling pool of Swift, so the programming side of things was going to take some learning.

Initially I was unsure sure about how to actually get my hands on train times data. The national rail feeds are supplied in XML form which seemed to be quite challenging to handle for a beginner, especially compared to JSON.

It wouldn’t have been possible to get to the stage I’m at so quickly were it not for Transport API who not only put a lovely JSON wrapper onto the National Rail data feeds — which are supplied in XML form — but also provide a free tier which made development to this stage free!

Some of the Swift code that drives the app. One of the biggest challenges has been to try and include some error handling, and trying to avoid using ‘try!’ wherever possible, so that if something goes wrong it doesn’t kill the app!

I’ve had to learn how to parse JSON in Swift, how to get data from the web with asynchronous calls (I now understand this stops the app freezing while it waits for data from the internet), created data models in Swift to store the information and then apply it to the interface and even used Core Data on the Apple Watch to store a list of all the stations in the UK on the Watch.

Unsurprisingly this took a fair bit of YouTubing and reading of tutorials, each covering a different topic that I had to splice into my existing code and then apply to get the interface I designed. I managed to avoid copy and paste for the most part, mainly because I don’t see the point of using code that I don’t understand — after all this was supposed to be partly a learning exercise!

The Result

Screenshots taken from my working Watch App. Note the loading graphic on #2 — yes the train does woosh across the display as the data loads… (TOC logos have been removed and are — in real life — in the big empty sections next to the train times)

Colour is used to define each departure. The background colour, along with the logo quickly conveys the TOC, while the primary colour is used to draw attention to important text (such as where a train is expected late), and to define the table sections.

Adding a new departure station directly on the Watch (something not possible with other apps)

Thanks to Core Data functionality, the app maintains a list of stations directly on the watch. This means you can quickly and easily search for departure stations either by 3 letter CRS code, or by its official name. Then just tap, and hey presto!

All in all, this was about 1 1/2 weeks worth of intermittent work — a few late nights and more than a few hours stuck on a problem that I just couldn’t figure how to resolve.

The British Rail Logo and TOC logos are © their respective owners and are used only for illustration in the app. Remember this app is not public and permissions would need to be sought if it were to be published, it is entirely for my own use at present.

The app working on my Apple Watch!

The Future

It feels to me that Apple Watch apps are often unloved offshoots of iPhone apps, which don’t get the attention they deserve (and need given the complex simplicity of watch interactions). While by no means perfect, I definitely think I’ve gone a long way to remedy this and for now at least I am very please to be the only person UK who can use what is unquestionably the best Train Times app for Apple Watch!

If though I do choose to take it further, here are some of my ideas…

• Allow users to re-order existing searches, preferably on their Watch but maybe on their phone if that’s not possible.
• Use geo-location to intelligently show the most appropriate departure boards.
• Complications, to quickly launch the app from a Watch face.
• Use Animation to help convey information in a better and perhaps more fun way — animating on Apple Watch is a challenge!
• Use National Rail Enquiries data feeds to download data direct from source. This step would be the most important if I were ever to publish the app!

This is the first post I’ve written that’s got even a little attention, so if you do have any feedback please do let me know — good or bad I’d be happy to hear it. And finally, if you have any ideas/could/know someone who can help with taking this app any further please get in touch too! Just tweet me :-)

I’ve removed logos from this post since it’s original publication and added the above paragraph & and a couple of new images, everything else is original :-)