LONDON BUS TRACKER APP
Every year over two billion bus journeys are taken in London, that's five and half million journeys every day.
The goal with Jump was to make use of Transport for London's (TfL) Open API to create an innovative, functional app. An app built for Londoners which taps into bus information and presents arrival times in a unique way. Jump is a self-initiated project.
Early App Sketches
One of my first ideas was to show all buses arriving at a particular bus stop in a graphical way through concentric circles. Each bus would have a circle with the countdown to arrival represented by how complete the circle was, ie. less circle meant less time to wait.
The circles idea was soon trashed as I felt there was too much info to be displayed and the circles seemed to complicate rather than simplify the information. Other ideas were around selecting a bus stop (sketch 2) and then displaying just the next bus. The problem with this was if I was in the city or at work, I might want to see buses over the next 30 mins so I could plan when to leave the office and time my arrival at the bus stop around the time the bus arrived.
I also had the idea of searching for buses near me or by a specific location and then showing results (sketch 3). The problem with this is I felt people needed to get their bearings by showing results on a map rather than in a list. Once a bus stop was selected I wanted to show all bus arrivals on a single screen.
Initial Design Concept
1
Load Screen, choose current location or search.
2
Bus Stop Info. Buses arriving at bus stop shown on right hand side, bus arrival times to the left.
3
Tapping on a bus number (Bus 10) flips screen to show bus stops along chosen bus route.
Inspired by old train
station ticker boards.
Back to the Drawing Board
I felt the design was far too complicated and difficult to follow so I started to consider cards and using gestures to display or dismiss information.
I still wasn't happy with the designs so I decided to start again. I set out to remove as many taps as possible and focus more on surfacing relevant information more quickly.
Bus arrival time animation
Initial card idea, making use of the arrival time blocks from the original design but instead of showing all info at once I focused on a single bus. The idea was that as buses got closer or time to arrival decreased, the size of the block would change - creating a neat animation and the feeling of the bus network being alive. Taping bus numbers (39, 188, 470) would, like-wise, animate the time blocks to the required arrival times for those buses.
Bus stop tabs on card
Visual showing bus arrival times for a specific bus stop. Bus direction and destination displayed in the footer of the card.
Knowing that time is a precious commodity we strived to show bus arrival times from a single tap.
One of the most challenging aspects of this app was coming up with the name (Jump) and creating the app icon. I thought a pin on a map might work but that was soon dismissed, a bus on a banded background, the bands inspired by bus times in the app, a bus wheel...
I wanted something that Londoners would instantly recognise as a bus app. A London bus app!
The Routemaster
New release --> New bus
London has a new fleet of Routemaster Buses nicknamed Boris Buses after ex-mayor, and former prime minister, Boris Johnson who introduced them. They're a modern interpretation of the classic Routemaster. Boris Buses have a very iconic look to them. I chose to create an icon that paid homage to this new bus, utilising crisp lines and colours.
1.0
Starting at the beginning of the alphabet with Aldgate and the popular Bus 40.
2.0
We called Version 2.0 Brixton (Bus 118).
3.0
We plan to make our way through the alphabet adding…
4.0
…new bus route destinations for each release.
Promo Video
Written and Directed by Ryan Shelton, Produced by Pinyata
Voiceover: Lee Sellers, Wordsmith: Mike Potter, Soundtrack: Dexter Britain
